🚽 🧢 🔚 jQuery的事件插件 👨‍👧 🤽🏿 🍮

我为jQuery开发了免费的事件插件。然后将该插件上传到GitHub。该插件的目的是将标签绑定到变量。随后，通过为变量设置新值，页面上的所有锚定标签将被更新。简单示例 我们有用于显示数据的标签：

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

首先，我们将HTML标记和函数的值绑定到变量名。

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

现在让我们设置变量的值。

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

通过一个命令，我们将值200放置在附加到cost变量的所有标记中，并将值240放置在.order_cost_tax标记中，该值比变量的值高20％。

结果：

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

通过编写此插件，我(bind(),on(),trigger())在jQuery中发现了类似的功能。但是经过研究，我发现函数(bind(),on(),trigger())只能与函数一起使用。我的插件主要用于绑定到HTML标签并根据字符串格式显示信息。

我知道这个插件将执行React和Angular的功能。但事实并非如此。

Events插件的目标是清晰，对初学者来说简单易行，并对已经启用jQuery的用户执行其功能。

许多开发人员使用jQuery来连接所有React来绑定变量。但是开发人员只需要将价格列表复制到网站上的购物车中。

对于大多数公司来说，这是一个插件，其网站充当订购和销售服务的形式。该插件用于登陆页面，仅销售和订购一些服务，即具有简单功能的简单网站。

例如，公司的网站：牙科诊所，或销售墓碑，家具或公寓装修的公司。

该插件的独特之处在于：

字符串格式
捕捉对象
绑定是持久的，或者每个标记或功能仅绑定一次。
每个绑定的字符串格式。

我将继续描述。

现在让我们设置一个新值：

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

结果：

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

通过设置jQuery（）。Var（'cost'，6000）; 我们会自动更改与成本相关的所有值。

删除与变量的绑定

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

//绑定到cost变量的所有标记和函数都将被删除。

第二个例子

格式化字符串

我们为变量创建一个新的绑定：

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

我们带来

jQuery.var('cost',20);

结果：

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

通过创建与标签有关的格式。当新的价值到来时，我们不再考虑或担心格式。

现在指定jQuery（）。Var（'cost'，20）; 新值会自动显示在锚定HTML标记中。

删除与变量的绑定

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

//绑定到cost变量的所有标记和函数都将被删除。

第三个例子

对象捕捉

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

将对象放入绑定

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

结果

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

通过创建与标签有关的格式。当新的价值到来时，我们不再考虑或担心格式。

现在指向

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

新值会自动显示在锚定HTML标记中。

锚定格式

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

可变格式

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

事件功能格式：

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

字串格式

{this} -     ;
      

        
        
        
      

    
{0} -     ;
      

        
        
        
      

    
{value} -     ;
      

        
        
        
      

    
{FirstProp} -     
      

        
        
        
      

    
{SecondProp} -     
      

        
        
        
      

    
{ThirdProp} -     
      

        
        
        
      

    
 1: " {0}  !" 
      

        
        
        
      

    
 2: " {FirstProp} {SecondProp}  "

插件别名（函数缩写）


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

结语

许多人会说jQuery已经失去作用，并且不能满足市场需求，因此为它编写插件是没有意义的。

我会回答，因为它不能满足要求，所以它没有每个人都需要的简单功能。

现在，我希望世界会变得更好。我希望现在有有趣的事情出现了。

您是否认为自己会在一个项目中发现有用的插件？任何意见都将受到欢迎。

你的谢尔盖。

PS评论员星期五注意，该库不知道如何按模式绑定列表，因为“主干”可以与“木偶”一起使用。

事实并非如此，这是先前版本中的一个非常简单的示例：

绑定对象数组


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

增加文章，修改插件以扩展可能性

感谢以下评论者的公正批评。我已经修改并添加了新功能：

动态数组绑定
动态捕捉对象
将所有绑定加载和卸载到一个集合中的插件中。
对象数据字符串的格式化~~几乎完成~~。

动态数组绑定

这样，您可以通过添加（修改，删除）子标记来动态添加绑定数组或对象的元素或属性。

例：


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

我们绑定：


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

创建一个对象并应用


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

结果，我们得到：


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

现在我们还可以动态添加（更改，删除）列表项。


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

结果：


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

新职位已添加到列表中。

现在，我们将删除和更改仅引用绑定数组的现有位置之一。


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.我们通过删除具有该名称的数组元素，从列表中的“ Madonna Chicone”中删除了标签。

2.我们将数组中索引为1的标签的内容更改为“ Angelina Jolie”。

3.我们通过删除数组在索引

4处的位置来删除带有内容的标签。在列表的末尾添加了内容为'Jennifer Lopez'的新标签。

5，通过将其添加到索引为5的数组中，添加内容为“ Jennifer Lawrence”的新标签。

动态捕捉对象


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


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

结果：


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

我们通过类比来更改绑定到HTML的对象的值：


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

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

高级功能/将第三个参数的格式作为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);//       .

加载/卸载绑定


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

新计划

优化字符串格式
增加反应性：绑定到INPUT，SELECT和其他控件以更新绑定变量中的反馈。

聚苯乙烯

希望现在jQuery信徒不再接受对Vue，Angular，React和其他人的信仰。世界将是公平和多样化的，每个人都有自己的一面。

jQuery的事件插件

删除与变量的绑定

格式化字符串

删除与变量的绑定

对象捕捉

将对象放入绑定

锚定格式

可变格式

事件功能格式：

字串格式

插件别名（函数缩写）

结语

绑定对象数组

增加文章，修改插件以扩展可能性

动态数组绑定

动态捕捉对象

VAR（）方法的第三个参数的格式：

高级功能/将第三个参数的格式作为VAR（）方法的对象

加载/卸载绑定

新计划

聚苯乙烯

More articles: