polyamorous 是一个前端工具，可以用于处理对象，让对象变得更容易使用和管理。在对象发生变化时，我们常常需要更新对象的所有引用，这个过程会变得非常繁琐。polyamorous 提供了便捷的方式，可以让你更轻松地维护对象。本文将介绍如何使用 polyamorous。
安装
使用 npm 安装 polyamorous：
npm install polyamorous如何使用
在使用 polyamorous 之前，先了解一下它的一些基本概念。
在 polyamorous 中，有两类对象：state 和 view。state 是真正的数据，而 view 像是 state 的一个快照，只展示你关心的数据。
polyamorous 通过监听 state 上的变化，来更新 view。你可以在 view 上监听事件，来响应 state 的变化。
创建一个 state
首先，我们需要创建一个 state。下面是一个简单的例子：
const state = { todos: [ {id: 1, title: 'Buy milk', completed: false}, {id: 2, title: 'Finish homework', completed: false}, ], filter: 'all' }
创建一个 view
接下来，我们需要创建一个 view。通过创建 view，我们可以指定我们希望展示的数据。
-- -------------------- ---- ------- ----- ---- - - ------ ----------------------- -- - ------ -------------- - ---- ------ ------ ---- ---- --------- ------ --------------- ---- ------------ ------ -------------- -------- ------ ---- - --- ------- ------------ -展开代码
在上述例子中，我们只展示了 todos 和 filter。todos 是一个数组，在这里我们过滤了数据，只显示符合条件的数据。filter 是一个字符串，在这里我们简单地将 state 中的 filter 值赋给了它。
使用 polyamorous
现在，我们已经创建了一个 state 和一个 view。下一步是将它们连接起来。使用 polyamorous 的 connect 函数可以实现这个功能。
-- -------------------- ---- ------- ------ - ------- - ---- ------------- ----- ------- - - --------------- ------- -------- -- - ----------------------------- ------ -------- - - ----- --------- - ------------- -------- ----------------------------展开代码
connect 函数返回一个代理对象，可以直接访问 view 中的数据。handler 中的 stateDidChange 方法，可以监听 state 的变化，完成相应的更新。
此时，我们可以将 state 中的数据更新，看看它们是否会被正确地反映到 view 中。
connected.todos[0].completed = true connected.filter = 'completed'
在这个例子中，如果我们只使用 state 来更新数据，那么我们需要更新所有引用到该 state 的对象。但是，使用 polyamorous，我们只需要更新 view 就好了。
总结
本文向读者介绍了如何使用 polyamorous。通过使用 polyamorous，可以方便地处理对象，减少代码中的冗余。在实际编程中，我们应该选择合适的工具来完成相应的任务，从而提高开发效率，降低代码成本。
示例代码
-- -------------------- ---- ------- ------ - ------- - ---- ------------- ----- ----- - - ------ - ---- -- ------ ---- ------ ---------- ------- ---- -- ------ ------- ---------- ---------- ------- -- ------- ----- - ----- ---- - - ------ ----------------------- -- - ------ -------------- - ---- ------ ------ ---- ---- --------- ------ --------------- ---- ------------ ------ -------------- -------- ------ ---- - --- ------- ------------ - ----- ------- - - --------------- ------- -------- -- - ----------------------------- ------ -------- - - ----- --------- - ------------- -------- ---------------------------- ---------------------------- - ---- ---------------- - ----------- ----------------------------展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68742
