defi.js é uma biblioteca reativa baseada em Object.defineProperty

O defi.js é uma biblioteca que inclui uma dúzia de funções que adicionam recursos interessantes a qualquer objeto JavaScript usando getters e setters.

Atenção Gif (3.5MB)
Repositório

Como um Hello World, crie um pequeno widget que consiste em um nome, sobrenome e campo de saudação ( 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' }); 

Como resultado, se o first ou o last alterados, os manipuladores de eventos informam isso ao console, a propriedade de greeting é atualizada automaticamente e seu elemento recebe um novo valor (por padrão, "Olá, John Doe"). Isso acontece toda vez que as propriedades são alteradas e não importa como. Você pode definir o valor usando o código obj.first = 'Jane' ou alterando o valor do campo, e todas as outras alterações ocorrerão automaticamente.

Caso haja a necessidade de sincronizar a propriedade do objeto e o innerHTML um elemento HTML arbitrário (no exemplo, usamos a tag de output ), precisamos passar o chamado "fichário" para a função bindNode, responsável por como sincronizar o estado do elemento e a propriedade do objeto. Por padrão, bindNode não sabe como trabalhar com nós que não são elementos de formulário.

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

Além disso, você pode usar o html da biblioteca common-binders (esta é uma coleção de binders de uso geral).

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

Métodos de API

Documentação detalhada para todos os métodos, variações de chamadas disponíveis, sinalizadores etc. pode ser encontrada em defi.js.org . Vale ressaltar que, além dos métodos abaixo, o defi.js possui uma biblioteca para roteamento: defi-router .

• bindNode - Vincula uma propriedade de objeto e um nó DOM para ligação bidirecional.

 //   // (  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 - cria uma dependência de uma propriedade de um objeto em outras propriedades (inclusive de outros objetos).

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

• mediar - Modifica o valor de uma propriedade quando ela é alterada.

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

• on - Adiciona um manipulador de eventos. Há um pequeno artigo no site de documentação que descreve todos os eventos possíveis.

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

• off - Exclui um manipulador de eventos.

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

• trigger - Dispara um evento.

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

• unbindNode - desativa a ligação do elemento e o DOM do nó.

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

• bound - Retorna o elemento DOM associado à propriedade especificada.

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

• chain - Usado para encadear funções defi.js.

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

• defaultBinders - Uma matriz de funções que retornam o fichário correspondente ou indefinido. Permite que o bindNode ligue elementos e propriedades customizados sem especificar explicitamente um fichário.

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

• lookForBinder - Retorna o fichário correspondente ao elemento se uma das funções defaultBinders retornou um.

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

• remove - Remove uma propriedade de objeto e manipuladores de eventos associados.

 defi.remove(obj, 'myKey'); 

• set - Define a propriedade do objeto, como o setter, mas possibilita passar alguns dados para a change:KEY manipulador de eventos change:KEY . Você também pode definir a configuração do valor da propriedade como "silenciosa", ou seja, não chame change:KEY .

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

O defi.js é um hard fork revisado e simplificado da estrutura Matreshka.js, que incluía matrizes de renderização, várias classes e mais métodos. Alguns métodos que poderiam entrar no defi.js. foram substituídos por opções para outros métodos, por exemplo, em vez de once e onDebounce você pode usar o método on passando as opções once: true ou debounce: number .

Obrigado por ler até o fim. Tenham um bom dia.