Clever Geek Handbook

Plugin de eventos para jQuery

Desenvolvi um plugin gratuito de eventos para jQuery . Em seguida, o plug-in foi carregado para o GitHub .



O objetivo do plugin é vincular tags a variáveis.



Posteriormente, ao definir um novo valor para a variável, todas as tags ancoradas na página serão atualizadas.



Exemplo simples



Temos tags para exibir dados: 



<span class='amount'>0</span>
<span class='cart_cost'>0</span>
<span class='order_cost'>0</span>
<span class='order_cost_tax'>0</span>


Primeiro, vinculamos os valores das tags e funções HTML a um nome de variável. 



jQuery().event('cost', '.amount');
jQuery().event('cost', '.cart_cost');
jQuery().event('cost', '.order_cost');
jQuery().event('cost', '.order_cost_tax',function(){ return this*1.2});
jQuery().event('cost', function(){ console.log(' :',this)});


Agora vamos definir o valor da variável. 



jQuery().var('cost',200);


Com um comando, colocamos o valor 200 em todas as tags anexadas à variável de custo e colocamos o valor 240 na tag .order_cost_tax, que é 20% a mais que o valor da variável.



Resultado: 



<span class='amount'>200</span>
<span class='cart_cost'>200</span>
<span class='order_cost'>200</span>
<span class='order_cost_tax'>240</span>


Ao escrever este plug-in, descobri uma funcionalidade semelhante pronta (bind(),on(),trigger())para uso no jQuery. Mas depois de estudar, descobri que funções (bind(),on(),trigger())só funcionam com funções. E meu plug-in é projetado principalmente para vincular a tags HTML e exibir informações de acordo com a formatação da string.



Eu entendi que este plugin executará funções de React e Angular. Mas não é assim.



O objetivo do plugin Events é ser claro, simples para iniciantes e realizar suas funções para aqueles que já possuem o jQuery habilitado.



Muitos desenvolvedores usam jQuery para conectar todo o React para apenas vincular variáveis. Mas o desenvolvedor só precisa copiar a lista de preços para o carrinho de compras do site.



Este é um plug-in para a maioria das empresas cujo site funciona como um formulário para solicitar e vender serviços. Este plug-in é destinado a páginas de destino para vender e solicitar apenas alguns serviços, ou seja, para sites simples com funcionalidade simples.



Por exemplo, um site de empresas: um consultório odontológico ou uma empresa que vende lápides, reforma de móveis ou apartamentos.



A peculiaridade do plugin é que temos:



  • formatação de string
  • Objetos de snap
  • As ligações são persistentes ou apenas uma vez por tag ou função.
  • Formatação de string para cada âncora individual.


Vou continuar a descrição.



Agora vamos definir um novo valor: 



jQuery().var('cost',6000);


Resultado: 



<span class='amount'>6000</span>
<span class='cart_cost'>6000</span>
<span class='order_cost'>6000</span>
<span class='order_cost_tax'>7200</span>


Definindo jQuery (). Var ('custo', 6000); alteramos automaticamente todos os valores associados ao custo.



Removendo o vínculo com a variável



jQuery().event('cost', false);


// Todas as tags e funções associadas à variável de custo serão removidas.



Segundo exemplo



Formatando strings



Criamos uma nova ligação para a variável: 



jQuery().event('cost', '.amount',      '    {0} $');
jQuery().event('cost', '.cart_cost',    ' {0} $');
jQuery().event('cost', '.order_cost',   '{0} $');
jQuery().event('cost', '.order_cost_tax',function(){return '    ${this*1.2} $'});


Nós trazemos 



jQuery.var('cost',20);


Resultado: 



<span class='amount'>    20 $</span>
<span class='cart_cost'> 20 $</span>
<span class='order_cost'>20 $</span>
<span class='order_cost_tax'>   24 $</span>


Criando formatação associada à tag. Não pensamos mais ou nos preocupamos com os formatos quando novos valores chegam.



Agora especificando jQuery (). Var ('cost', 20); novos valores são exibidos automaticamente em tags HTML ancoradas.



Removendo o vínculo com a variável



jQuery().event('cost', false);


// Todas as tags e funções associadas à variável de custo serão removidas.



Terceiro exemplo



Sorteio de objeto



jQuery().event('cost', '.amount',      ' {FirstName} {LastName}     {Cost} $.');
jQuery().event('cost', '.cart_cost',    '  {Cost} $    {CountProducts}');
jQuery().event('cost', '.order_cost',   '{FirstName}: {Cost} $');
jQuery().event('cost', '.order_cost_tax',function(){ let averagePrice = this.Cost/this.CountProducts; return ' : ${averagePrice} $   ${averagePrice*1.2} $.'});


Colocando o objeto na encadernação



let user = {FirstName:'',LastName:'́',Cost:20,CountProducts:5};
jQuery().var('cost',user);


Resultado 



<span class='amount'>  ́    20  $.</span>
<span class='cart_cost'>  20 $    4</span>
<span class='order_cost'>: 20 $</span>
<span class='order_cost_tax'> : 5 $  6 $  .</span>


Criando formatação em relação à tag. Não pensamos mais ou nos preocupamos com os formatos quando novos valores chegam.



Agora apontando 



jQuery().var('cost',20);


novos valores são exibidos automaticamente em tags HTML ancoradas.



Formato âncora



jQuery().event(variableName, SelectorName); 
jQuery().event(variableName, function(e){}); // 
jQuery().event(variableName, false, SelectorName);  //    
jQuery().event(variableName, false, function(e){}); //    
jQuery().event(variableName, SelectorName, FormatString); //      
jQuery().event(variableName, SelectorName, function(e){}); //        
jQuery().event(variableName, SelectorName, false); //   
jQuery().event(variableName, bindName, SelectorName);//       
jQuery().event(variableName, bindName, function(e){}); //   ,   
jQuery().event(variableName, bindName, false); //     
jQuery().event(variableName, false); //


Formato de Variável



let name=jQuery().var(variableName); //   
jQuery().var(variableName,variableValue); //   
jQuery().var(variableName,variableObject); //   
jQuery().var(variableName,null); //




Formato da função do evento:



function(e){
    e.unbind(); // .
    e.id; // 
    e.elements; //jQuery 
    e.value; //     .
    this; //     .
    return false; //    .
    return " {0}  !"; //      HTML 
    return '   HTML '; //      HTML 
}


Formato de string



{this} - ;

{0} - ;

{value} - ;

{FirstProp} -

{SecondProp} -

{ThirdProp} -

1: " {0} !"

2: " {FirstProp} {SecondProp} "



Alias ​​de plug-in (forma abreviada de função)




    jQuery.e(); //  jQuery().event()
    jQuery.v(); //  jQuery().var()
//:
    $.e('cost','.cost'); //    Event
    $.v('cost',100); //    Var


Epílogo



Muitos dirão que o jQuery já perdeu sua utilidade e não atende às necessidades do mercado e, portanto, não faz sentido escrever um plugin para ele.



E vou responder a isso porque não satisfaz, que não tinha funções simples de que todos precisam.



Agora espero que o mundo fique um pouco melhor. E espero que agora algo interessante venha à tona.



Você acha que pessoalmente consideraria o plugin útil em um de seus projetos? Quaisquer comentários seriam bem vindos.



Seu Sergey. Comentador



PSSexta-feiranotei que esta biblioteca não sabe vincular Listas por padrão, como `backbone` pode fazer com` marionete`.

Este não é o caso, aqui está um exemplo muito simples na versão anterior:



Vinculando uma série de objetos




jQuery().event('listUsers','.listUser',function(){ 
    let html = '';
    for(let user of this){
        html += "<div> <span>${user.FirsName}</span>  <span>${user.LastName}</span> :  ${user.Amount} ₽ </div>";
    }
    return html;
});

let users = [
    {FirsName:'',LastName:'',Amount:'5000000' },
    {FirsName:'',LastName:'',Amount:'1000000' },
    {FirsName:'',LastName:'',Amount:'5000000' },
];

jQuery().var('listUsers',users,'');
//3-  ''( )   var()   /       .




Acréscimo do artigo, modificação do plugin para ampliar as possibilidades



Graças às críticas justas dos comentaristas abaixo. Eu modifiquei e adicionei novos recursos:

  1. Ligação de matriz dinâmica
  2. Tirar um objeto dinamicamente
  3. Carregar e descarregar todas as ligações em um plug-in em uma coleção.
  4. A formatação da string de dados do objeto está quase concluída .




Ligação de matriz dinâmica



Isso permite adicionar um elemento ou propriedades de uma matriz ou objeto vinculado dinamicamente, adicionando (modificando, removendo) uma tag filho.

Exemplo: 


<div class='people'></div>
Nós vinculamos: 


jQuery().event('users', '.people');
Crie um objeto e aplique 


var usersList =[
    ' ',
    ' ',
    ' ',
    .........
];
jQuery().var('users', usersList);


Como resultado, obtemos: 


<div class='people'>
    <div> </div>
    <div> </div>
    <div> </div>
</div>


E também podemos adicionar (alterar, remover) itens de lista dinamicamente. 


jQuery().var('users', ' ', true);//


Resultado: 


<div class='people'>
    <div> </div>
    <div> </div>
    <div> </div>
         <div> </div>
</div>


Uma nova posição foi adicionada à lista.

Agora vamos deletar e mudar uma das posições existentes referindo-se apenas ao array vinculado. 


jQuery().var('users', ' ', false);//   
jQuery().var('users', ' ', 1);//      1
jQuery().var('users', null, 3);//      3
jQuery().var('users', ' ', true);//    
jQuery().var('users', ' ', 5);//       5


1. Removemos a tag de 'Madonna Chicone' da lista removendo o elemento da matriz com esse nome.

2. Alteramos o conteúdo da tag com índice 1 na matriz para 'Angelina Jolie'.

3. Removemos a tag com o conteúdo removendo a posição na matriz no índice

4. Adicionamos uma nova tag com o conteúdo 'Jennifer Lopez' ao final da lista.

5.Adicionou uma nova tag com o conteúdo 'Jennifer Lawrence' adicionando-a ao array no índice 5.



Tirar um objeto dinamicamente




<div class='person'></div>




jQuery().event('user', '.person');//   HTML
var userData ={
    FirstName:'',
    LastName:'',
    salary: 200000,
};
jQuery().var('user', userData);//   HTML


Resultado: 


<div class='person'>
    <div></div>
    <div></div>
    <div>200000</div> 
</div>


Alteramos os valores do objeto vinculado ao HTML por analogia com uma matriz: 


jQuery().var('user', null,'FirstName');//   
jQuery().var('user', '','FirstName');//    
jQuery().var('user', 500000,'salary');//     .
//            .
//        .
// ,   3-   ,    .




O formato do terceiro parâmetro do método VAR ():




jQuery().var('users', , '');//3  ('')  .  /   /
jQuery().var('users', , null);//3  (null).  /      /,   .
jQuery().var('users', , undefined);//3  (undefined).   /   : 
//           /-   ,    jQuery().var('users', , null)  
//         /-   ,    jQuery().var('users', , '')  
//    ,     /-.
jQuery().var('users', C, false);//          /
jQuery().var('users', C, true);//        /.
jQuery().var('users', C, 3);//      3  /.
jQuery().var('users', null, 3);//      3
jQuery().var('users', C, ' ');//      /.
jQuery().var('users', null, ' ');//     /.
jQuery().var('users', C, {property:' ',...  .});//     //          ,           , , ,  .




Funcionalidade avançada / formato do terceiro parâmetro como um objeto para o método VAR ()




let setting = {
    tagListItem: 'li', //    ,   DIV
    classListItem:'classTagChildren', //    
    onlyone: true, //      .
    format: '{this}',//         
    anyData: {data1:'  '},//        .
};
// setting     ,        .
jQuery().event('user', '.person',setting);//      .
jQuery().var('user', user, setting);//       .




Carregando / descarregando ligações




let events = {};
events['user']['.person'] = function(value,data){ return ' {value.name},   '+(0.8*value.salary)};
events['user']['.status'] = '  {value},   {salary}';
jQuery().event(events);//    

let eventsUser = {};
eventsUser['.person'] = function(value,data){ return ' {value.name},   '+(0.8*value.salary)};
eventsUser['.status'] = '  {value},   {salary}';
jQuery().event('user', eventsUser);//        users.
//'user' -   /      $.event() 
//'.status', '.person' -   /      $.event() 

jQuery().event();//    .

jQuery().var();//    .
jQuery().var([...]);//    .




Novo plano



  1. Refinamento da formatação da string
  2. Adicionar reatividade: Ligações a INPUT, SELECT e outros controles para atualizar o feedback nas variáveis ​​associadas.


PS



Esperançosamente, agora os crentes em jQuery não aceitarão a fé em Vue, Angular, React e outros. O mundo será justo e diverso e cada um terá seu lado.


More articles:


All Articles