Complemento de eventos para jQuery

Desarrollé un complemento de eventos gratuito para jQuery . Luego, el complemento se cargó en GitHub .



El propósito del complemento es vincular etiquetas a variables.



Posteriormente, al establecer un nuevo valor para la variable, se actualizarán todas las etiquetas ancladas en la página.



Ejemplo simple



Tenemos etiquetas para mostrar datos:

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

Primero, vinculamos los valores de las etiquetas y funciones HTML a un nombre de variable.

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)});

Ahora establezcamos el valor de la variable.

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

Con un comando, colocamos el valor 200 en todas las etiquetas adjuntas a la variable de costo, y colocamos el valor 240 en la etiqueta .order_cost_tax, que es un 20% más que el valor de la variable.



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>

Después de escribir este complemento, descubrí una funcionalidad similar lista (bind(),on(),trigger())para usar en jQuery. Pero después de estudiar, descubrí que las funciones (bind(),on(),trigger())solo funcionan con funciones. Y mi complemento está diseñado principalmente para vincularse a etiquetas HTML y mostrar información de acuerdo con el formato de cadena.



Entendí que este complemento realizará funciones de React y Angular. Pero no es así.



El objetivo del complemento de Eventos es ser claro, simple para principiantes y realizar sus funciones para aquellos que ya tienen jQuery habilitado.



Muchos desarrolladores usan jQuery para conectar todo React para vincular variables. Pero el desarrollador solo necesita copiar la lista de precios en el carrito de compras del sitio.



Este es un complemento para la mayoría de las empresas cuyo sitio web sirve como formulario para solicitar y vender servicios. Este complemento está destinado a páginas de destino para vender y solicitar solo algunos servicios, es decir, para sitios web sencillos con una funcionalidad sencilla.



Por ejemplo, un sitio web para empresas: un consultorio dental o una empresa que vende lápidas, muebles o renovación de apartamentos.



La peculiaridad del complemento es que tenemos:

• formato de cadena
• Ajustar objetos
• Los enlaces son persistentes o solo una vez por etiqueta o función.
• Formato de cadena para cada ancla individual.

Continuaré con la descripción.



Ahora establezcamos un nuevo 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>

Configurando jQuery (). Var ('costo', 6000); cambiamos automáticamente todos los valores asociados con el costo.

Eliminando el enlace a la variable

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

// Se eliminarán todas las etiquetas y funciones vinculadas a la variable de costo.



Segundo ejemplo

Formateo de cadenas

Creamos un nuevo enlace a la variable:

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} $'});

Traemos en

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>

Creando formato junto con la etiqueta. Ya no pensamos ni nos preocupamos por los formatos cuando llegan nuevos valores.



Ahora especificando jQuery (). Var ('cost', 20); los nuevos valores se muestran automáticamente en etiquetas HTML ancladas.

Eliminando el enlace a la variable

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

// Se eliminarán todas las etiquetas y funciones vinculadas a la variable de costo.



Tercer ejemplo

Ajuste de objetos

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} $.'});

Poner el objeto en la encuadernación

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>

Creando formato junto con la etiqueta. Ya no pensamos ni nos preocupamos por los formatos cuando llegan nuevos valores.



Ahora apuntando

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

los nuevos valores se muestran automáticamente en etiquetas HTML ancladas.

Formato de ancla

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 variable

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

Formato de función de evento:

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

Formato de cadena

{this} - ;

{0} - ;

{value} - ;

{FirstProp} -

{SecondProp} -

{ThirdProp} -

1: " {0} !"

2: " {FirstProp} {SecondProp} "

Alias ​​del complemento (forma abreviada de la función)

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

Epílogo

Muchos dirán que jQuery ya ha superado su utilidad y no satisface las necesidades del mercado y, por lo tanto, no tiene sentido escribir un complemento para él.



Y te responderé que porque no satisface, porque no tenía funciones simples que todos necesitan.



Ahora espero que el mundo se vuelva un poco mejor. Y espero que ahora haya salido a la luz algo interesante.



¿Cree que personalmente le resultaría útil el complemento en uno de sus proyectos? Cualquier comentario será bienvenido.



Tu Sergey. Comentarista de



PSviernesnotó que esta biblioteca no sabe cómo enlazar Listas por patrón, como puede hacer `backbone` con` marionette`.

Este no es el caso, aquí hay un ejemplo muy simple en la versión anterior:

Vincular una variedad 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()   /       .  

Adición del artículo, modificación del complemento para ampliar las posibilidades

Gracias a las críticas justas de los comentaristas a continuación. He modificado y agregado nuevas funciones:

1. Enlace de matriz dinámica
2. Ajustar dinámicamente un objeto
3. Carga y descarga de todos los enlaces en un complemento en una colección.
4. El formateo de la cadena de datos del objeto está casi terminado .

Enlace de matriz dinámica

Esto le permite agregar un elemento o propiedades de una matriz u objeto enlazado dinámicamente agregando (modificando, eliminando) una etiqueta secundaria.

Ejemplo:

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

Nos unimos:

jQuery().event('users', '.people');

Crea un objeto y aplica

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

Como resultado, obtenemos:

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

Y también ahora podemos agregar (cambiar, eliminar) elementos de lista dinámicamente.

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

Resultado:

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

Se ha agregado una nueva posición a la lista.

Ahora borraremos y cambiaremos una de las posiciones existentes refiriéndose solo a la matriz enlazada.

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. Eliminamos la etiqueta de 'Madonna Chicone' en la lista eliminando el elemento de matriz con ese nombre.

2. Cambiamos el contenido de la etiqueta con índice 1 en la matriz a 'Angelina Jolie'.

3. Eliminamos la etiqueta con el contenido eliminando la posición en la matriz en el índice

4. Agregamos una nueva etiqueta con el contenido 'Jennifer Lopez' al final de la lista.

Se agregó una nueva etiqueta con el contenido 'Jennifer Lawrence' agregándola a la matriz en el índice 5.

Ajustar dinámicamente un objeto

<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>

Cambiamos los valores del objeto vinculado a HTML por analogía con una matriz:

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

El formato del tercer parámetro del 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:' ',...  .});//     //          ,           , , ,  .

Funcionalidad avanzada / Formato del tercer parámetro como objeto para el 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);//       .

Fijaciones de carga / descarga

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([...]);//    .

Nuevo plan

1. Refinamiento del formato de cadena
2. Agregar reactividad: enlaces a INPUT, SELECT y otros controles para actualizar la retroalimentación en variables vinculadas.

PD

Con suerte, ahora los creyentes de jQuery no aceptarán la fe en Vue, Angular, React y otros. El mundo será justo y diverso y todos tendrán su propio lado.