defi.js adalah pustaka reaktif berdasarkan Object.defineProperty

defi.js adalah perpustakaan yang mencakup selusin fungsi yang menambahkan fitur menarik ke objek JavaScript apa pun menggunakan getter dan setter.

Attention Gif (3.5MB)
Repositori

Sebagai Hello World, buat widget kecil yang terdiri dari bidang nama depan, nama belakang, dan ucapan ( demo ).

<input class="first"> <input class="last"> <output class="greeting"></output> 

 //    const obj = { first: 'John', last: 'Doe' }; //     first  last //   ,      defi.on(obj, 'change:first', () => console.log('First name is changed')); defi.on(obj, 'change:last', () => console.log('Last name is changed')); //    ( greeting)  , //  first  last  defi.calc(obj, 'greeting', ['first', 'last'], (first, last) => `Hello, ${first} ${last}`); //      //      defi.bindNode(obj, { first: '.first', last: '.last', greeting: '.greeting' }); 

Akibatnya, jika first atau last berubah, penangan acara melaporkan hal ini ke konsol, properti greeting diperbarui secara otomatis, dan elemennya menerima nilai baru (secara default, "Halo, John Doe"). Ini terjadi setiap kali properti berubah, dan tidak masalah bagaimana. Anda dapat mengatur nilai menggunakan kode obj.first = 'Jane' , atau dengan mengubah nilai bidang, dan semua perubahan lainnya akan terjadi secara otomatis.

Dalam hal ada kebutuhan untuk menyinkronkan properti objek dan innerHTML elemen HTML sewenang-wenang (dalam contoh kita menggunakan tag output ), bindNode perlu meneruskan apa yang disebut "binder" ke fungsi bindNode, yang bertanggung jawab untuk cara menyinkronkan keadaan elemen dan properti objek. Secara default, bindNode tidak tahu cara bekerja dengan node yang bukan elemen bentuk.

 const htmlBinder = { setValue: (value, binding) => binding.node.innerHTML = value, }; //   obj.greeting  innerHTML   defi.bindNode(obj, 'greeting', '.greeting', htmlBinder) 

Selain itu, Anda dapat menggunakan html dari pustaka binder umum (ini adalah kumpulan binder tujuan umum).

 const { html } = require('common-binders'); //   obj.greeting  innerHTML   defi.bindNode(obj, 'greeting', '.greeting', html()) 

Metode API

Dokumentasi terperinci untuk semua metode, variasi panggilan yang tersedia, bendera, dll. Dapat ditemukan di defi.js.org . Perlu disebutkan bahwa selain metode di bawah ini, defi.js memiliki perpustakaan untuk perutean: defi-router .

• bindNode - Mengikat properti objek dan simpul DOM untuk pengikatan dua arah.

 //   // (  HTML5  , . defaultBunders) defi.bindNode(obj, 'myKey', '.my-element'); //   defi.bindNode(obj, 'myKey', '.my-element', { // ,      // (    -DOM ) on: 'click', //     ? getValue: ({ node }) => someLibraryGetValue(node), //       ? setValue: (v, { node }) => someLibrarySetValue(node, v), //    (  )? //      //  'initialize'     initialize: ({ node }) => someLibraryInit(node), }); obj.myKey = 'some value'; //   

• calc - Menciptakan ketergantungan satu properti suatu objek pada properti lain (termasuk dari objek lain).

 defi.calc(obj, 'a', ['b', 'c'], (b, c) => b + c); obj.b = 1; obj.c = 2; console.log(obj.a); // 3 

• mediate - Memodifikasi nilai properti saat berubah.

 defi.mediate(obj, 'x', value => String(value)); obj.x = 1; console.log(obj.x); // "1" console.log(typeof obj.x); // "string" 

• pada - Menambahkan pengendali acara. Ada artikel kecil di situs dokumentasi yang menjelaskan semua peristiwa yang mungkin terjadi.

 defi.on(obj, 'change:x', () => { alert(`obj.x now equals ${obj.x}`); }); obj.x = 1; 

• off - Menghapus event handler.

 defi.off(obj, 'change:x bind'); 

• memicu - Memicu suatu peristiwa.

 defi.on(obj, 'foo bar', (a, b, c) => { alert(a + b + c); }); defi.trigger(obj, 'foo', 1, 2, 3); //  alert(6) 

• unbindNode - Menonaktifkan pengikatan elemen dan DOM node.

 defi.bindNode(obj, 'myKey', '.my-element'); defi.unbindNode(obj, 'myKey', '.my-element'); 

• terikat - Mengembalikan elemen DOM yang terkait dengan properti yang diberikan.

 defi.bindNode(obj, 'myKey', '.my-element'); const node = defi.bound(obj, 'myKey'); //  document.querySelector('.my-element') 

• chain - Digunakan untuk fungsi chain defi.js.

 defi.chain(obj) .calc('a', 'b', b => b * 2) .set('b', 3) .bindNode('c', '.node'); 

• defaultBinders - Array fungsi yang mengembalikan binder yang sesuai atau tidak terdefinisi. Mengizinkan bindNode untuk mengikat elemen dan properti khusus tanpa secara eksplisit menentukan binder.

 defi.defaultBinders.unshift(element => { //      "foo" if(element.classList.contains('foo')) { // ,     return { on: ..., getValue: ..., setValue: ... }; } }); // ... defi.bindNode(obj, 'myKey', '.foo.bar'); 

• lookForBinder - Mengembalikan binder yang terkait dengan elemen jika salah satu fungsi defaultBinders mengembalikan satu.

 const element = document.createElement('input'); element.type = 'text'; console.log(defi.lookForBinder(element)); 

• hapus - Menghapus properti objek dan penangan kejadian yang terkait.

 defi.remove(obj, 'myKey'); 

• set - Mengatur properti objek, seperti setter, tetapi memungkinkan untuk meneruskan beberapa data ke change:KEY pengendali event change:KEY . Anda juga dapat membuat pengaturan nilai properti "diam", yaitu, jangan panggil change:KEY sama sekali.

 defi.set(obj, 'myKey', 3, { silent: true }); 

defi.js adalah garpu keras yang direvisi dan disederhanakan dari kerangka kerja Matreshka.js, yang mencakup render array, beberapa kelas, dan lebih banyak metode. Beberapa metode yang berpotensi masuk ke defi.js telah diganti dengan opsi untuk metode lain, misalnya, alih-alih once dan onDebounce Anda bisa menggunakan metode on dengan meneruskan opsi nomor once: true atau debounce: number .

Terima kasih sudah membaca sampai akhir. Semoga harimu menyenangkan.