Ereignis-Plugin für jQuery

Ich habe ein kostenloses Events- Plugin für jQuery entwickelt . Dann wurde das Plugin auf GitHub gepostet .



Der Zweck des Plugins besteht darin, Tags an Variablen zu binden.



Anschließend werden durch Festlegen eines neuen Werts für die Variable alle verankerten Tags auf der Seite aktualisiert.



Einfaches Beispiel



Wir haben Tags zum Anzeigen von Daten:

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

Zunächst binden wir die Werte von HTML-Tags und -Funktionen an einen Variablennamen.

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

Setzen wir nun den Wert der Variablen.

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

Mit einem Befehl haben wir den Wert 200 in alle angehängten Tags der Kostenvariablen und den Wert 240 in das Tag .order_cost_tax eingefügt, was 20% mehr als der Wert der Variablen ist.



Ergebnis:

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

Durch das Schreiben dieses Plugins habe ich ähnliche Funktionen (bind(),on(),trigger())in jQuery entdeckt. Aber nach dem Studium fand ich heraus, dass Funktionen (bind(),on(),trigger())nur mit Funktionen funktionieren. Und mein Plugin wurde hauptsächlich entwickelt, um an HTML-Tags zu binden und Informationen gemäß der Zeichenfolgenformatierung anzuzeigen.



Ich habe verstanden, dass dieses Plugin React- und Angular-Funktionen ausführen wird. Das ist aber nicht so.



Das Ziel des Events-Plugins ist es, für Anfänger klar und einfach zu sein und seine Funktionen für diejenigen auszuführen, für die jQuery bereits aktiviert ist.



Viele Entwickler verwenden jQuery, um React so anzuschließen, dass nur Variablen gebunden werden. Der Entwickler muss jedoch nur die Preisliste in den Warenkorb auf der Website kopieren.



Dies ist ein Plug-In für die meisten Unternehmen, deren Website als Formular für die Bestellung und den Verkauf von Dienstleistungen dient. Dieses Plugin ist für Zielseiten zum Verkauf und zur Bestellung von nur wenigen Diensten vorgesehen, d. H. für einfache Websites mit einfacher Funktionalität.



Zum Beispiel eine Website für Unternehmen: eine Zahnarztpraxis oder ein Unternehmen, das Grabsteine, Möbel oder Wohnungsrenovierungen verkauft.



Die Besonderheit des Plugins ist, dass wir:

• Zeichenfolgenformatierung
• Objekte fangen
• Bindungen sind dauerhaft oder nur einmal pro Tag oder Funktion.
• String-Formatierung für jede einzelne Bindung.

Ich werde die Beschreibung fortsetzen.



Jetzt setzen wir einen neuen Wert:

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

Ergebnis:

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

Durch Setzen von jQuery (). Var ('cost', 6000); Wir ändern automatisch alle mit den Kosten verbundenen Werte.

Entfernen der Bindung an die Variable

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

// Alle an die Kostenvariable gebundenen Tags und Funktionen werden entfernt.



Zweites Beispiel

Zeichenfolgen formatieren

Wir erstellen eine neue Bindung an die 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} $'});

Wir bringen herein

jQuery.var('cost',20);

Ergebnis:

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

Durch Erstellen einer Formatierung in Bezug auf das Tag. Wir denken oder sorgen uns nicht mehr um Formate, wenn neue Werte eintreffen.



Geben Sie nun jQuery () an. Var ('cost', 20); Neue Werte werden automatisch in verankerten HTML-Tags angezeigt.

Entfernen der Bindung an die Variable

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

// Alle an die Kostenvariable gebundenen Tags und Funktionen werden entfernt.



Drittes Beispiel

Objektfang

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

Das Objekt in die Bindung legen

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

Ergebnis

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

Durch Erstellen einer Formatierung in Bezug auf das Tag. Wir denken oder sorgen uns nicht mehr um Formate, wenn neue Werte eintreffen.



Jetzt zeigen

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

Neue Werte werden automatisch in verankerten HTML-Tags angezeigt.

Ankerformat

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

Variables Format

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

Ereignisfunktionsformat:

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

String-Format

{this} - ;

{0} - ;

{value} - ;

{FirstProp} -

{SecondProp} -

{ThirdProp} -

1: " {0} !"

2: " {FirstProp} {SecondProp} "

Plugin-Alias ​​(Funktionskurzform)

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

Epilog

Viele werden sagen, dass jQuery veraltet ist und nicht den Anforderungen des Marktes entspricht. Daher macht es keinen Sinn, ein Plugin dafür zu schreiben.



Und ich werde darauf antworten, weil es nicht zufriedenstellend ist, weil es keine einfachen Funktionen hatte, die jeder braucht.



Jetzt hoffe ich, dass die Welt ein bisschen besser wird. Und ich hoffe, dass jetzt etwas Interessantes ans Licht gekommen ist.



Denken Sie, dass Sie das Plugin persönlich in einem Ihrer Projekte nützlich finden würden? Kommentare wären willkommen.



Dein Sergey.



PS KommentatorFreitagbemerkte, dass diese Bibliothek nicht weiß, wie man Listen nach Muster bindet, wie "Backbone" mit "Marionette" tun kann.

Dies ist nicht der Fall, hier ein sehr einfaches Beispiel in der vorherigen Version:

Binden eines Arrays von Objekten

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

Hinzufügung des Artikels, Änderung des Plugins zur Erweiterung der Möglichkeiten

Dank fairer Kritik der Kommentatoren unten. Ich habe neue Funktionen geändert und hinzugefügt:

1. Dynamische Array-Bindung
2. Ein Objekt dynamisch fangen
3. Laden und Entladen aller Bindungen in ein Plugin in einer Sammlung.
4. Die Formatierung der Objektdatenzeichenfolge ist fast abgeschlossen .

Dynamische Array-Bindung

Auf diese Weise können Sie ein Element oder Eigenschaften eines gebundenen Arrays oder Objekts dynamisch hinzufügen, indem Sie ein untergeordnetes Tag hinzufügen (ändern, entfernen).

Beispiel:

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

Wir binden:

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

Erstellen Sie ein Objekt und bewerben Sie sich

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

Als Ergebnis erhalten wir:

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

Außerdem können wir jetzt dynamisch Listenelemente hinzufügen (ändern, entfernen).

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

Ergebnis:

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

Der Liste wurde eine neue Position hinzugefügt.

Jetzt werden wir eine der vorhandenen Positionen löschen und ändern, die sich nur auf das gebundene Array beziehen.

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. Wir haben das Tag aus dem 'Madonna Chicone' in der Liste entfernt, indem wir das Array-Element mit diesem Namen entfernt haben.

2. Wir haben den Inhalt des Tags mit Index 1 im Array in 'Angelina Jolie' geändert.

3. Wir haben das Tag mit dem Inhalt entfernt, indem wir die Position im Array am Index

4 entfernt haben. Am Ende der Liste wurde ein neues Tag mit dem Inhalt 'Jennifer Lopez' hinzugefügt.

5.Fügen Sie ein neues Tag mit dem Inhalt 'Jennifer Lawrence' hinzu, indem Sie es dem Array bei Index 5 hinzufügen.

Ein Objekt dynamisch fangen

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

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

Ergebnis:

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

Wir ändern die Werte des an HTML gebundenen Objekts analog zu einem Array:

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

Das Format des 3. Parameters der VAR () -Methode:

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:' ',...  .});//     //          ,           , , ,  .

Erweiterte Funktionalität / Format des 3. Parameters als Objekt für die VAR () -Methode

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

Laden / Entladen von Bindungen

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

Neuer Plan

1. Verfeinern Sie die Formatierung von Zeichenfolgen
2. Reaktivität hinzufügen: Bindungen an INPUT-, SELECT- und andere Steuerelemente, um das Feedback in gebundenen Variablen zu aktualisieren.

PS

Hoffentlich akzeptieren jQuery-Gläubige jetzt nicht das Vertrauen in Vue, Angular, React und andere. Die Welt wird fair und vielfältig sein und jeder wird seine eigene Seite haben.