Plugin d'événements pour jQuery

J'ai développé un plugin d' événements gratuit pour jQuery . Ensuite, le plugin a été téléchargé sur GitHub .



Le but du plugin est de lier des balises à des variables.



Par la suite, en définissant une nouvelle valeur pour la variable, toutes les balises ancrées sur la page seront mises à jour.



Exemple simple



Nous avons des balises pour afficher les données:

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

Tout d'abord, nous lions les valeurs des balises HTML et des fonctions à un nom 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)});

Définissons maintenant la valeur de la variable.

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

Avec une commande, nous avons placé la valeur 200 dans toutes les balises attachées à la variable de coût, et nous avons placé la valeur 240 dans la balise .order_cost_tax, soit 20% de plus que la valeur de la variable.



Résultat:

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

Après avoir écrit ce plugin, j'ai découvert des fonctionnalités similaires (bind(),on(),trigger())prêtes à l'emploi dans jQuery. Mais après avoir étudié, j'ai découvert que les fonctions (bind(),on(),trigger())ne fonctionnent qu'avec des fonctions. Et mon plugin est principalement conçu pour se lier à des balises HTML et afficher des informations selon le formatage des chaînes.



J'ai compris que ce plugin exécutera les fonctions de React et Angular. Mais ce n’est pas le cas.



Le but du plugin Events est d'être clair, simple pour les débutants et d'exécuter ses fonctions pour ceux qui ont déjà activé jQuery.



De nombreux développeurs utilisent jQuery pour connecter tout React afin de ne lier que des variables. Mais le développeur n'a qu'à copier la liste des prix dans le panier sur le site.



Il s'agit d'un plug-in pour la plupart des entreprises dont le site Web sert de formulaire de commande et de vente de services. Ce plugin est destiné aux pages de destination pour vendre et commander seulement quelques services, c'est-à-dire pour des sites Web simples avec des fonctionnalités simples.



Par exemple, un site Web pour les entreprises: un cabinet dentaire, ou une entreprise de vente de pierres tombales, de meubles ou de rénovation d'appartement.



La particularité du plugin est que nous avons:

• formatage de chaîne
• Objets accrochants
• Les liaisons sont persistantes ou une seule fois par balise ou fonction.
• Formatage de chaîne pour chaque liaison individuelle.

Je vais continuer la description.



Maintenant, définissons une nouvelle valeur:

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

Résultat:

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

En définissant jQuery (). Var ('cost', 6000); nous modifions automatiquement toutes les valeurs associées au coût.

Suppression de la liaison à la variable

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

// Toutes les balises et fonctions liées à la variable de coût seront supprimées.



Deuxième exemple

Formatage des chaînes

Nous créons une nouvelle liaison à 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} $'});

Nous apportons

jQuery.var('cost',20);

Résultat:

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

En créant une mise en forme associée à la balise. Nous ne pensons plus ni ne nous inquiétons plus des formats lorsque de nouvelles valeurs arrivent.



Spécifiant maintenant jQuery (). Var ('cost', 20); les nouvelles valeurs sont automatiquement affichées dans des balises HTML ancrées.

Suppression de la liaison à la variable

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

// Toutes les balises et fonctions liées à la variable de coût seront supprimées.



Troisième exemple

Accrochage d'objets

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

Mettre l'objet dans la reliure

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

Résultat

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

En créant une mise en forme associée à la balise. Nous ne pensons plus ni ne nous inquiétons plus des formats lorsque de nouvelles valeurs arrivent.



Pointant maintenant

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

les nouvelles valeurs sont automatiquement affichées dans des balises HTML ancrées.

Format d'ancrage

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

Format variable

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

Format de la fonction d'événement:

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

Format de chaîne

{this} - ;

{0} - ;

{value} - ;

{FirstProp} -

{SecondProp} -

{ThirdProp} -

1: " {0} !"

2: " {FirstProp} {SecondProp} "

Plugin alias (forme abrégée de la fonction)

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

Épilogue

Beaucoup diront que jQuery a déjà dépassé son utilité et ne répond pas aux besoins du marché, et donc cela n'a aucun sens d'écrire un plugin pour cela.



Et je répondrai à cela parce qu'il ne satisfait pas, parce qu'il n'avait pas de fonctions simples dont tout le monde a besoin.



J'espère maintenant que le monde deviendra un peu meilleur. Et j'espère que maintenant quelque chose d'intéressant est apparu.



Pensez-vous que vous trouverez personnellement le plugin utile dans l'un de vos projets? Tout commentaire serait le bienvenu.



Votre Sergey. Commentateur



PSVendredia remarqué que cette bibliothèque ne sait pas comment lier les listes par motif, comme `backbone` peut le faire avec` marionette`.

Ce n'est pas le cas, voici un exemple très simple dans la version précédente:

Lier un tableau d'objets

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

Ajout de l'article, modification du plugin pour élargir les possibilités

Merci aux critiques justes des commentateurs ci-dessous. J'ai modifié et ajouté de nouvelles fonctionnalités:

1. Liaison de tableau dynamique
2. Accrocher dynamiquement un objet
3. Chargement et déchargement de toutes les liaisons dans un plugin dans une seule collection.
4. Le formatage de la chaîne de données de l'objet est presque terminé .

Liaison de tableau dynamique

Cela vous permet d'ajouter dynamiquement un élément ou des propriétés d'un tableau ou d'un objet lié en ajoutant (modifiant, supprimant) une balise enfant.

Exemple:

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

Nous lions:

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

Créer un objet et appliquer

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

En conséquence, nous obtenons:

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

Et aussi, nous pouvons maintenant ajouter (modifier, supprimer) des éléments de liste dynamiquement.

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

Résultat:

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

Un nouveau poste a été ajouté à la liste.

Maintenant, nous allons supprimer et modifier l'une des positions existantes se référant uniquement au tableau lié.

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.Nous avons supprimé la balise de la «Madonna Chicone» dans la liste en supprimant l'élément du tableau portant ce nom.

2. Nous avons changé le contenu de la balise avec l'index 1 dans le tableau en «Angelina Jolie».

3. Nous avons supprimé la balise avec le contenu en supprimant la position dans le tableau à l'index

4. Ajout d'une nouvelle balise avec le contenu «Jennifer Lopez» à la fin de la liste.

5.Ajout d'une nouvelle balise avec le contenu 'Jennifer Lawrence' en l'ajoutant au tableau à l'index 5.

Accrocher dynamiquement un objet

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

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

Résultat:

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

On change les valeurs de l'objet lié au HTML par analogie avec un tableau:

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

Le format du 3ème paramètre de la méthode 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:' ',...  .});//     //          ,           , , ,  .

Fonctionnalité avancée / Format du 3ème paramètre en tant qu'objet pour la méthode 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);//       .

Chargement / déchargement des liaisons

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

Nouveau plan

1. Affiner la mise en forme des chaînes
2. Ajoutez de la réactivité: Liaisons à INPUT, SELECT et autres contrôles pour mettre à jour les commentaires dans les variables liées.

PS

Espérons que maintenant les croyants jQuery n'accepteront pas la foi en Vue, Angular, React et autres. Le monde sera juste et diversifié et chacun aura son propre côté.