البرنامج المساعد للأحداث لـ 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 في جميع العلامات المرفقة بمتغير التكلفة ، ووضعنا القيمة 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 ("التكلفة" ، 6000) ؛ نقوم تلقائيًا بتغيير جميع القيم المرتبطة بالتكلفة.

إزالة الارتباط بالمتغير

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

// ستتم إزالة جميع العلامات والوظائف المرتبطة بمتغير التكلفة.



المثال الثاني

تنسيق السلاسل

نقوم بإنشاء ارتباط جديد للمتغير:

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

// ستتم إزالة جميع العلامات والوظائف المرتبطة بمتغير التكلفة.



المثال الثالث

عض الكائن

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

استكمال المقالة ، تعديل البرنامج المساعد لتوسيع القدرات

بفضل النقد العادل من المعلقين أدناه. لقد قمت بتعديل وإضافة ميزات جديدة:

1. صفيف ديناميكي ملزم
2. التقاط كائن ديناميكيًا
3. تحميل وتفريغ جميع الارتباطات في مكون إضافي في مجموعة واحدة.
4. اكتمل تنسيق سلسلة بيانات الكائن تقريبًا .

صفيف ديناميكي ملزم

يسمح لك هذا بإضافة عنصر أو خصائص مصفوفة أو كائن مرتبط ديناميكيًا عن طريق إضافة (تعديل ، إزالة) علامة فرعية.

مثال:

<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- تمت إضافة علامة جديدة بالمحتوى "Jennifer Lawrence" بإضافتها إلى المصفوفة في الفهرس 5.

التقاط كائن ديناميكيًا

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

خطة جديدة

1. صقل تنسيق السلسلة
2. إضافة التفاعلية: الارتباطات بـ INPUT و SELECT وعناصر تحكم أخرى لتحديث الملاحظات في المتغيرات المرتبطة.

ملاحظة

نأمل الآن أن لا يقبل مؤمنو jQuery الإيمان بـ Vue و Angular و React وغيرها. سيكون العالم عادلاً ومتنوعًا وسيكون لكل فرد جانبه الخاص.