Plugin acara untuk jQuery

Saya mengembangkan plugin Acara gratis untuk jQuery . Kemudian plugin diunggah ke GitHub .



Tujuan dari plugin ini adalah untuk mengikat tag ke variabel.



Selanjutnya, dengan menyetel nilai baru untuk variabel, semua tag berlabuh di halaman akan diperbarui.



Contoh Sederhana



Kami memiliki tag untuk menampilkan data:

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

Pertama, kami mengikat nilai tag dan fungsi HTML ke nama variabel.

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

Sekarang mari kita tetapkan nilai variabel.

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

Dengan satu perintah, kami menempatkan nilai 200 di semua tag yang dilampirkan ke variabel biaya, dan kami menempatkan nilai 240 di tag .order_cost_tax, yang 20% ​​lebih banyak dari nilai variabel.



Hasil:

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

Setelah menulis plugin ini, saya menemukan fungsionalitas serupa di (bind(),on(),trigger())luar kotak di jQuery. Tapi setelah belajar, saya menemukan bahwa fungsi (bind(),on(),trigger())hanya bekerja dengan fungsi. Dan plugin saya terutama dirancang untuk mengikat tag HTML dan menampilkan informasi sesuai dengan format string.



Saya mengerti bahwa plugin ini akan menjalankan fungsi React dan Angular. Tapi ternyata tidak demikian.



Tujuan dari plugin Acara adalah menjadi jelas, sederhana untuk pemula, dan menjalankan fungsinya bagi mereka yang sudah mengaktifkan jQuery.



Banyak pengembang menggunakan jQuery untuk menghubungkan semua React untuk hanya mengikat variabel. Namun pengembang hanya perlu menyalin daftar harga ke keranjang belanja di situs.



Ini adalah plugin untuk sebagian besar perusahaan yang situs webnya berfungsi sebagai formulir untuk memesan dan menjual layanan. Plugin ini ditujukan untuk halaman arahan untuk menjual dan memesan hanya beberapa layanan, mis. untuk situs web sederhana dengan fungsionalitas sederhana.



Misalnya, situs web untuk perusahaan: kantor gigi, atau perusahaan yang menjual batu nisan, furnitur, atau renovasi apartemen.



Keunikan plugin adalah kami memiliki:

• pemformatan string
• Memukul benda
• Binding bersifat persisten atau hanya satu kali per tag atau fungsi.
• Pemformatan string untuk setiap pengikatan individu.

Saya akan melanjutkan deskripsinya.



Sekarang mari kita tetapkan nilai baru:

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

Hasil:

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

Dengan mengatur jQuery (). Var ('cost', 6000); kami secara otomatis mengubah semua nilai yang terkait dengan biaya.

Menghapus pengikatan ke variabel

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

// Semua tag dan fungsi yang terikat ke variabel biaya akan dihapus.



Contoh kedua

Memformat string

Kami membuat pengikatan baru ke variabel:

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

Kami membawa masuk

jQuery.var('cost',20);

Hasil:

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

Dengan membuat format yang terkait dengan tag. Kami tidak lagi memikirkan atau khawatir tentang format ketika nilai baru tiba.



Sekarang menentukan jQuery (). Var ('cost', 20); nilai baru secara otomatis ditampilkan dalam tag HTML berlabuh.

Menghapus pengikatan ke variabel

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

// Semua tag dan fungsi yang terikat ke variabel biaya akan dihapus.



Contoh ketiga

Pengambilan objek

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

Menempatkan objek ke dalam penjilidan

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

Hasil

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

Dengan membuat format yang terkait dengan tag. Kami tidak lagi memikirkan atau khawatir tentang format ketika nilai baru tiba.



Sekarang menunjuk

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

nilai baru secara otomatis ditampilkan dalam tag HTML berlabuh.

Format Jangkar

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 Variabel

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

Format fungsi acara:

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

Format string

{this} - ;

{0} - ;

{value} - ;

{FirstProp} -

{SecondProp} -

{ThirdProp} -

1: " {0} !"

2: " {FirstProp} {SecondProp} "

Alias ​​plugin (Bentuk singkat fungsi)

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

Epilog

Banyak yang akan mengatakan bahwa jQuery telah melampaui kegunaannya dan tidak memenuhi kebutuhan pasar, dan oleh karena itu tidak masuk akal untuk menulis plugin untuk itu.



Dan saya akan menjawab itu karena tidak memuaskan, bahwa tidak memiliki fungsi sederhana yang dibutuhkan semua orang.



Sekarang saya berharap dunia akan menjadi sedikit lebih baik. Dan saya berharap sekarang sesuatu yang menarik terungkap.



Menurut Anda, apakah Anda secara pribadi akan menganggap plugin ini berguna di salah satu proyek Anda? Setiap komentar akan diterima.



Sergey Anda. Komentator



PSJumatperhatikan bahwa library ini tidak mengetahui cara mengikat List berdasarkan pola, seperti yang dapat dilakukan `backbone` dengan` marionette`.

Ini bukan masalahnya, berikut adalah contoh yang sangat sederhana di versi sebelumnya:

Mengikat berbagai objek

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

Melengkapi artikel, memodifikasi plugin untuk memperluas kemampuannya

Terima kasih atas kritik yang adil dari para komentator di bawah ini. Saya telah mengubah dan menambahkan fitur baru:

1. Pengikatan array dinamis
2. Memotret objek secara dinamis
3. Memuat dan membongkar semua binding ke dalam sebuah plugin dalam satu koleksi.
4. Pemformatan string data objek hampir selesai .

Pengikatan array dinamis

Ini memungkinkan Anda untuk menambahkan elemen atau properti dari larik atau objek terikat secara dinamis dengan menambahkan (memodifikasi, menghapus) tag anak.

Contoh:

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

Kami mengikat:

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

Buat sebuah objek dan terapkan

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

Hasilnya, kami mendapatkan:

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

Dan sekarang kita juga dapat menambahkan (mengubah, menghapus) item daftar secara dinamis.

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

Hasil:

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

Posisi baru telah ditambahkan ke daftar.

Sekarang kita akan menghapus dan mengubah salah satu posisi yang ada yang hanya mengacu pada array yang terikat.

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. Kami menghapus tag dari 'Madonna Chicone' dalam daftar dengan menghapus elemen array dengan nama itu.

2. Kami mengubah konten tag dengan indeks 1 dalam larik menjadi 'Angelina Jolie'.

3. Kami menghapus tag dengan konten dengan menghapus posisi dalam larik pada indeks

4. Menambahkan tag baru dengan konten 'Jennifer Lopez' di akhir daftar.

5. Menambahkan tag baru dengan konten 'Jennifer Lawrence' dengan menambahkannya ke array pada indeks 5.

Memotret objek secara dinamis

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

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

Hasil:

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

Kami mengubah nilai objek yang terikat ke HTML dengan analogi dengan array:

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

Format parameter ke-3 dari metode 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:' ',...  .});//     //          ,           , , ,  .

Fungsionalitas / Format lanjutan dari parameter ke-3 sebagai objek untuk metode 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);//       .

Memuat / membongkar binding

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

Rencana baru

1. Saring pemformatan string
2. Tambahkan reaktivitas: Bindings ke INPUT, SELECT dan kontrol lain untuk memperbarui umpan balik dalam variabel terikat.

PS

Semoga sekarang jQuery percaya tidak akan menerima kepercayaan pada Vue, Angular, React dan lainnya. Dunia akan adil dan beragam, dan setiap orang akan memiliki sisi mereka sendiri.