简介
newzom 是一个 npm 包，用于在前端应用中实现页面视图与数据的绑定。它基于 Vue.js 和 RxJS，可以方便的实现响应式的数据绑定，并支持事件处理和数据过滤等功能。
安装
在安装 newzom 前，您需要先安装 Node.js 和 npm。然后在命令行工具中输入如下命令：
npm install newzom
等待安装完成后，您就可以在项目中使用 newzom 了。
基本使用
创建 ViewModel
新建一个 js 文件，使用 import 引入 newzom 包，并创建一个 ViewModel 实例：
-- -------------------- ---- -------
------ ------ ---- ---------
----- -- - --- ------------------
----- -
-------- ------ --------
------ -
- ----- ----- -- --
- ----- ----- -- --
- ----- ----- -- -
-
--
-------- -
--------------- -
------------------- -----------
-
-
---在上面的代码中，我们定义了一个包含 message 和 items 两个属性的 data 对象，以及一个 onButtonClick 方法。这些属性和方法可以在后续的视图中进行引用和调用，实现数据绑定和事件处理。
定义视图
新建一个 html 文件，引入 Vue.js 和 RxJS 库，以及刚刚创建的 js 文件。然后使用 div 标签定义视图模板：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------------
------- -------------------------------------
------- --------------------------------------
------- -------------------------
-------
------
---- ---------
------ ------- -------
----
--- ----------- -- -------
-- --------- --
-----
-----
------- ---------------------------- -----------
------
-------
-------在上面的代码中，我们使用 Vue.js 的模板语法定义了一个包含 h1、ul 和 button 标签的模板，以及对应的数据绑定和事件处理。这些模板代码会被 Vue.js 在渲染时转换为对应的 HTML 代码，实现页面视图和数据的绑定。
启动应用
在上述的 js 文件中，通过调用 ViewModel 实例的 attach 方法可以将视图与数据绑定起来：
vm.attach('#app');在上面的代码中，我们通过传入选择器 #app 将 ViewModel 和下面的视图绑定起来。
此时，启动应用即可看到页面显示了 "Hello World!"、三个列表项和一个按钮。单击按钮时控制台会输出 "Button clicked."。
进阶用法
数据过滤
我们可以通过使用 RxJS 提供的数据操作符，对数据进行过滤、排序等操作，然后再绑定到视图上：
-- -------------------- ---- -------
---- ---------
------ ------- -------
----
--- ----------- -- ------------ - -------
-- --------- --
-----
-----
------- ---------------------------- -----------
------在上面的代码中，我们使用 RxJS 的操作符 sortedItems$ 对数据进行排序，并通过 async 管道符将操作后的数据绑定到视图上。
在 js 文件中，我们可以定义 sortedItems$ 操作符并将其绑定到 ViewModel 的属性中：
-- -------------------- ---- -------
------ - ---------- - ---- -------
----- -- - --- ------------------
----- -
-------- ------ --------
------ -
- ----- ----- --- ------ ---- --
- ----- ----- --- ------ ---- --
- ----- ----- --- ------ ---- -
-
--
-------- -
--------------- -
------------------- -----------
-
--
--------- -
-------------- -
------ --------------------------------------- -- -----------------------
-
-
---
------------------在上面的代码中，我们使用 RxJS 的 from 操作符将 items 数组转换为 Observable 对象，并通过 sortBy 操作符以价格的倒序进行排序，最后再通过 toArray 操作符将 Observable 对象转换为数组，并绑定到 sortedItems$ 属性中。
本地存储
我们还可以通过使用 HTML5 的本地存储功能，将数据保存在客户端本地，以便在下次访问时恢复数据：
-- -------------------- ---- -------
----- -- - --- ------------------
----- -
-------- ------ --------
------ ---------------------------------------- -- -----
--
-------- -
--------------- -
------------------- -----------
-----------------
----- ----- ------------------- - ---
---
----------------------------- ----------------------------
-
-
---在上面的代码中，我们使用 localStorage.getItem 方法将之前保存的 items 数据恢复到 items 属性中，然后在 onButtonClick 方法中将新的数据保存到本地存储中。
总结
newzom 是一个非常实用的 npm 包，它可以方便地实现视图和数据的绑定，通过 RxJS 提供的操作符还可以实现数据的过滤和排序等功能，而且支持 HTML5 的本地存储功能，使得我们可以将数据保存在客户端本地，以便在下次访问时恢复数据。使用 newzom 可以大大简化前端开发中的数据绑定和事件处理，提高开发效率，值得我们进一步深入学习和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056f6d81e8991b448e7a0e