👩🏿‍🚀 👩🏾‍🔬 ▶️ defi.js是一个基于Object.defineProperty的反应式库 🧓🏻 🤷 🚷

defi.js是一个包含十多个函数的库，这些函数使用getter和setter将有趣的功能添加到任何JavaScript对象中。

作为Hello World，创建一个由名，姓和问候（ 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' });

结果，如果first或last更改，事件处理程序将其报告给控制台， greeting属性将自动更新，并且其元素将收到一个新值（默认为“ Hello，John Doe”）。每当属性更改时都会发生这种情况，而无论如何更改都没有关系。您可以使用代码obj.first = 'Jane'或通过更改字段的值来设置值，所有其他更改将自动发生。

如果需要同步对象的属性和任意HTML元素的innerHTML （在示例中，我们使用output标记）， bindNode需要将所谓的“ binder”传递给bindNode函数，该函数负责如何使元素的状态与对象的属性同步。默认情况下， bindNode不知道如何使用非表单元素的节点。

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

此外，您可以使用common-binders库中的 html （这是通用粘合剂的集合）。

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

API方法

有关所有方法的详细文档，可用的调用变体，标志等，可以在defi.js.org中找到。值得一提的是，除了以下方法之外，defi.js还有一个用于路由的库： defi-router 。

bindNode-绑定对象属性和DOM节点以进行双向绑定。

 //   // (  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-创建对象的一个属性与其他属性（包括来自其他对象）的依赖关系。

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

中介 -更改属性时更改其值。

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

on-添加事件处理程序。文档站点上有一篇小文章描述了所有可能的事件。

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

关 -删除事件处理程序。

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

触发 -触发事件。

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

unbindNode-禁用元素与节点DOM的绑定。

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

bound-返回与给定属性关联的DOM元素。

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

chain-用于链接defi.js函数

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

defaultBinders-返回相应的活页夹或未定义的函数数组。允许bindNode绑定自定义元素和属性，而无需显式指定绑定程序。

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

lookForBinder-如果defaultBinders函数之一返回一个元素，则返回与该元素对应的活页夹。

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

remove-删除对象属性和关联的事件处理程序。

 defi.remove(obj, 'myKey');

set-设置对象的属性，如setter一样，但是可以将某些数据传递给change:KEY事件处理程序。您还可以将属性值的设置设置为“ silent”，即根本不调用change:KEY 。

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

defi.js是Matreshka.js框架的经过修订和简化的硬分叉，其中包括渲染数组，多个类和更多方法。一些可能进入defi.js的方法已被其他方法的选项所代替，例如onDebounce您可以通过传递once: true或debounce: number选项来使用on方法，而不是once和onDebounce 。

感谢您阅读到最后。祝你有美好的一天。

defi.js是一个基于Object.defineProperty的反应式库

API方法

More articles: