➖ 🏊 👉🏿 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);

1つのコマンドで、コスト変数に付加されたすべてのタグに値200を配置し、変数の値より20％多い.order_cost_taxタグに値240を配置しました。

結果：

<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を接続し、変数をバインドするだけです。ただし、開発者は価格表をサイトのショッピングカートにコピーするだけで済みます。

これは、Webサイトがサービスの注文および販売のフォームとして機能するほとんどの企業向けのプラグインです。このプラグインは、いくつかのサービスを販売および注文するためのランディングページを対象としています。シンプルな機能を備えたシンプルなウェブサイト向け。

たとえば、企業向けのWebサイト：歯科医院、または墓石、家具、アパートの改修を販売する会社。

プラグインの特徴は次のとおりです。

文字列のフォーマット
オブジェクトのスナップ
バインディングは永続的であるか、タグまたは関数ごとに1回だけです。
個々のアンカーの文字列フォーマット。

説明を続けます。

次に、新しい値を設定しましょう。

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

//コスト変数にバインドされているすべてのタグと関数が削除されます。

2番目の例

文字列のフォーマット

変数への新しいバインディングを作成します。

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

//コスト変数にバインドされているすべてのタグと関数が削除されます。

3番目の例

オブジェクトのスナップ

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はすでにその有用性を超えており、市場のニーズを満たしていないため、そのためのプラグインを作成することは意味がないと言うでしょう。

そして、誰もが必要とする単純な機能がなかったので、満足できないので答えます。

今、私は世界が少し良くなることを願っています。そして今、何か面白いことが明らかになったと思います。

プラグインがプロジェクトの1つで役立つと個人的に思うと思いますか？コメントは大歓迎です。

あなたのセルゲイ。

PSコメンテーター金曜日`backbone`と` marionette`ができるように、このライブラリはリストをパターンでバインドする方法を知らないことに気づきました。

これは当てはまりません。以前のバージョンの非常に単純な例を次に示します。

オブジェクトの配列をバインドする


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

記事の追加、可能性を広げるためのプラグインの変更

以下のコメンテーターからの公正な批判に感謝します。新しい機能を変更して追加しました。

動的配列バインディング
オブジェクトを動的にスナップする
すべてのバインディングを1つのコレクションのプラグインにロードおよびアンロードします。
オブジェクトデータ文字列のフォーマットは~~ほぼ完了してい~~ます。

動的配列バインディング

これにより、子タグを追加（変更、削除）することにより、バインドされた配列またはオブジェクトの要素またはプロパティを動的に追加できます。

例：


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

新しいポジションがリストに追加されました。

次に、バインドされた配列のみを参照して、既存の位置の1つを削除および変更します。


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.その名前の配列要素を削除することにより、リストの「MadonnaChicone」からタグを削除しました。

2.配列内のインデックス1のタグの内容を「AngelinaJolie」に変更しました。

3.コンテンツのタグを削除し、インデックス

4の配列内の位置を削除しました。リストの最後にコンテンツ「JenniferLopez」の新しいタグを追加しました。

5.インデックス5の配列に追加することにより、コンテンツ「JenniferLawrence」を含む新しいタグを追加しました。

オブジェクトを動的にスナップする


<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（）メソッドの3番目のパラメーターの形式：


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（）メソッドのオブジェクトとしての3番目のパラメーターのフォーマット


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、およびその他のコントロールへのバインド。

PS

うまくいけば、jQueryの信者は、Vue、Angular、Reactなどへの信頼を受け入れないでしょう。世界は公平で多様であり、誰もが独自の側面を持っています。

jQueryのイベントプラグイン

変数へのバインディングを削除する

文字列のフォーマット

変数へのバインディングを削除する

オブジェクトのスナップ

オブジェクトをバインディングに入れる

アンカーフォーマット

可変フォーマット

イベント関数の形式：

文字列形式

プラグインエイリアス（関数の短縮形）

エピローグ

オブジェクトの配列をバインドする

記事の追加、可能性を広げるためのプラグインの変更

動的配列バインディング

オブジェクトを動的にスナップする

VAR（）メソッドの3番目のパラメーターの形式：

高度な機能/ VAR（）メソッドのオブジェクトとしての3番目のパラメーターのフォーマット

バインディングのロード/アンロード

新しい計画

PS

More articles: