defi.js ist eine reaktive Bibliothek, die auf Object.defineProperty basiert

defi.js ist eine Bibliothek, die ein Dutzend Funktionen enthält, die JavaScript-Objekten mithilfe von Get- und Setter-Funktionen interessante Funktionen hinzufügen.

Achtung Gif (3,5 MB)
Repository

Erstellen Sie als Hello World ein kleines Widget, das aus einem Vor- und Nachnamen sowie einem Begrüßungsfeld ( Demo ) besteht.

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

Wenn sich der first oder last geändert hat, melden die Ereignishandler dies an die Konsole, die greeting wird automatisch aktualisiert und ihr Element erhält einen neuen Wert (standardmäßig "Hallo, John Doe"). Dies geschieht jedes Mal, wenn sich die Eigenschaften ändern, und es spielt keine Rolle, wie. Sie können den Wert mit dem Code obj.first = 'Jane' oder durch Ändern des obj.first = 'Jane' Alle anderen Änderungen werden automatisch vorgenommen.

Für den Fall, dass die Objekteigenschaften und innerHTML eines beliebigen HTML-Elements synchronisiert werden müssen (in dem Beispiel, in dem wir das output Tag verwendet haben), müssen bindNode den sogenannten "Binder" an die Funktion bindNode übergeben, die für die Synchronisierung des Elementstatus und der Objekteigenschaften verantwortlich ist. Standardmäßig kann bindNode nicht mit Knoten arbeiten, die keine Formularelemente sind.

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

Darüber hinaus können Sie html aus der Common-Binders-Bibliothek verwenden (dies ist eine Sammlung von Allzweck- Bindern ).

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

API-Methoden

Eine ausführliche Dokumentation zu allen Methoden, verfügbaren Anrufvarianten , Flags usw. finden Sie unter defi.js.org . Es ist erwähnenswert, dass defi.js zusätzlich zu den folgenden Methoden eine Bibliothek für das Routing hat: defi-router .

• bindNode - Bindet eine Objekteigenschaft und einen DOM-Knoten für die bidirektionale Bindung.

 //   // (  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 - Erstellt eine Abhängigkeit einer Eigenschaft eines Objekts von anderen Eigenschaften (auch von anderen Objekten).

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

• vermitteln - Ändert den Wert einer Eigenschaft, wenn sie sich ändert.

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

• on - Fügt einen Ereignishandler hinzu. Auf der Dokumentationsseite gibt es einen kleinen Artikel , der alle möglichen Ereignisse beschreibt.

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

• aus - Löscht einen Ereignishandler.

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

• Trigger - Löst ein Ereignis aus.

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

• unbindNode - Deaktiviert die Bindung des Elements und des DOM des Knotens.

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

• bound - Gibt das DOM-Element zurück, das der angegebenen Eigenschaft zugeordnet ist.

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

• chain - Wird zum Verketten von defi.js.-Funktionen verwendet

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

• defaultBinders - Ein Array von Funktionen, die den entsprechenden oder undefinierten Ordner zurückgeben . Ermöglicht bindNode , benutzerdefinierte Elemente und Eigenschaften zu binden, ohne explizit einen bindNode anzugeben.

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

• lookForBinder - Gibt den Ordner zurück, der dem Element entspricht, wenn eine der defaultBinders Funktionen einen zurückgegeben hat.

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

• remove - Entfernt eine Objekteigenschaft und zugehörige Ereignishandler.

 defi.remove(obj, 'myKey'); 

• set - Legt die Eigenschaft des Objekts wie den Setter fest, ermöglicht jedoch die Übergabe einiger Daten an die Ereignisbehandlungsroutine change:KEY . Sie können den Eigenschaftswert auch auf "stumm" setzen, dh keine change:KEY aufrufen change:KEY überhaupt.

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

defi.js ist eine überarbeitete und vereinfachte Abzweigung des Matreshka.js-Frameworks, die das Rendern von Arrays, mehrere Klassen und weitere Methoden umfasste. Einige Methoden, die möglicherweise in defi.js gelangen könnten, wurden durch Optionen für andere Methoden ersetzt. Beispielsweise können Sie anstelle von once und onDebounce die Methode on verwenden, indem Sie die Optionen once: true oder debounce: number .

Vielen Dank für das Lesen bis zum Ende. Einen schönen Tag noch.