defi.js est une bibliothèque réactive basée sur Object.defineProperty

defi.js est une bibliothèque qui comprend une douzaine de fonctions qui ajoutent des fonctionnalités intéressantes à tous les objets JavaScript à l'aide de getters et setters.

Attention Gif (3,5 Mo)
Dépôt

En tant que Hello World, créez un petit widget composé d'un champ prénom, nom et message d'accueil ( démo ).

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

Par conséquent, si le first ou le last changé, les gestionnaires d'événements signalent cela à la console, la propriété de greeting est automatiquement mise à jour et son élément obtient une nouvelle valeur (par défaut, "Bonjour, John Doe"). Cela se produit à chaque fois que les propriétés changent et peu importe comment. Vous pouvez définir la valeur en utilisant le code obj.first = 'Jane' , ou en modifiant la valeur du champ, et toutes les autres modifications se produiront automatiquement.

Dans le cas où il est nécessaire de synchroniser les propriétés de l'objet et innerHTML un élément HTML arbitraire (dans l'exemple que nous avons utilisé la balise de output ), bindNode devons passer le soi-disant "liant" à la fonction bindNode, qui est responsable de la façon de synchroniser l'état de l'élément et les propriétés de l'objet. Par défaut, bindNode ne sait pas comment travailler avec des nœuds qui ne sont pas des éléments de formulaire.

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

De plus, vous pouvez utiliser du html partir de la bibliothèque de classeurs communs (il s'agit d'une collection de classeurs à usage général).

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

Méthodes API

Une documentation détaillée pour toutes les méthodes, les variantes d'appel disponibles, les indicateurs, etc. peut être trouvée sur defi.js.org . Il convient de mentionner qu'en plus des méthodes ci-dessous, defi.js possède une bibliothèque de routage: defi-router .

• bindNode - Lie une propriété d'objet et un nœud DOM pour une liaison bidirectionnelle.

 //   // (  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 - Crée une dépendance d'une propriété d'un objet sur d'autres propriétés (y compris à partir d'autres objets).

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

• mediate - Modifie la valeur d'une propriété lorsqu'elle change.

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

• on - Ajoute un gestionnaire d'événements. Il y a un petit article sur le site de documentation qui décrit tous les événements possibles.

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

• off - Supprime un gestionnaire d'événements.

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

• trigger - Déclenche un événement.

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

• unbindNode - Désactive la liaison de l'élément et du DOM du nœud.

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

• bound - Renvoie l'élément DOM associé à la propriété donnée.

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

• chain - Utilisé pour chaîner les fonctions defi.js.

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

• defaultBinders - Un tableau de fonctions qui renvoient le classeur correspondant ou non défini. Permet à bindNode de lier des éléments et des propriétés personnalisés sans spécifier explicitement un classeur.

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

• lookForBinder - Renvoie le classeur correspondant à l'élément si l'une des fonctions defaultBinders renvoyé un.

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

• remove - Supprime une propriété d'objet et les gestionnaires d'événements associés.

 defi.remove(obj, 'myKey'); 

• set - Définit la propriété de l'objet, comme le setter, mais permet de passer des données au gestionnaire d'événement change:KEY . Vous pouvez également rendre le réglage de la valeur de propriété "silencieux", c'est-à-dire ne pas appeler du tout le change:KEY .

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

defi.js est un hard fork révisé et simplifié du framework Matreshka.js, qui comprenait des tableaux de rendu, plusieurs classes et plus de méthodes. Certaines méthodes susceptibles d'entrer dans defi.js ont été remplacées par des options pour d'autres méthodes, par exemple, au lieu de once et onDebounce vous pouvez utiliser la méthode on en passant les options once: true ou debounce: number .

Merci d'avoir lu jusqu'au bout. Passez une bonne journée.