简介
@riotjs/dom-bindings 是一个用于构建 Web UI 组件的库，可以让你快速创建托管数据的自定义元素，通过 npm 安装使用。
该包结合了 Riot 和 CustomElement 并提供了一些常见但基本的功能以及自己的小秘密。它实现了自定义元素的所有主要特性，例如生命周期方法、属性观察以及事件处理，同时提供了一个小巧的底层 API 来构建自定义行为。
安装
使用 npm 命令安装：
npm install @riotjs/dom-bindings --save
入门
下面是一个简单的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------- -------------------- -----------
------- --------------
------ - --------- - ---- -----------------------
---------------------- -
--------- -
------------------
--
--------- -
---------------
-
---
---------
-------
-------这段代码创建了一个自定义按钮元素，当点击按钮时，会显示弹出窗口，显示 "Clicked!"。关于 component 函数，它接受两个参数，第一个是自定义元素的名称，第二个是一个钩子对象，用于定义按钮的行为。
如何使用
设置数据属性
为了更好地理解 @riotjs/dom-bindings 的用法，我们可以把自定义元素看作是一个独立的组件，并使用数据属性来控制它们。比如，我们可以再加一个属性 counter，表示点击的次数，并将其渲染到按钮中：
-- -------------------- ---- -------
--------- -----
------
------
-----------------------
------- --------------
------ - --------- - ---- -----------------------
---------------------- -
-------- --
--------- -
---------------
--------------
--
-------- -
------ -
------- ------------------------
------- --------------- -----
---------
-
-
---
---------
-------
-------当点击按钮时，clicked 方法会增加 counter 属性的值，调用 update() 方法，强制重新渲染整个组件。render 方法负责将新的值呈现到用户界面上。
监听属性变化
我们还可以监听属性的变化，只要绑定函数到 attributeChangedCallback 方法上即可：
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------------------
------- --------------
------ - --------- - ---- -----------------------
---------------------- -
------ -
------------ - -------------------------------
--
------------------------------ --------- --------- -
-- ----- --- ---------- -
------------ - ----------
--------------
-
--
--------- -
---------------
--------------
--
-------- -
------ -
------- ------------------------
------- --------------- -----
---------
-
-
---
---------
-------
-------在这个例子里，counter 属性会初始值为 0。在 init 方法中，我们提取了属性值，并将其转化为数字。然后，我们监听 attributeChangedCallback 方法，每次当 counter 属性改变时，我们将其更新到 this.counter 中，并调用 update() 方法重新渲染整个组件。
其他方法
此外，自定义元素还有其他一些方法，例如 connectedCallback 方法、disconnectedCallback 方法等等。你可以通过阅读文档进一步了解详细信息。
结论
@riotjs/dom-bindings 构建了一种新的方法，使用自定义元素来构建 Web UI 组件。它提供了许多语法糖和模板帮助程序员更好地构建前端应用程序，并且使用它非常简单。如果你想深入学习这个库，那么我们建议你去查看文档，或者阅读源代码，创建自己的自定义元素来深入学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/164817