在现代前端开发中，数据管理是一个重要的环节。常规的做法是使用 Redux 或 Mobx 这类第三方状态管理库。然而，当我们遇到一些特殊的业务需求时，这些库未必能够完全满足。activejson 是一个基于 Object.observe 的轻量级数据管理库，它可以帮助我们更方便地管理数据。
安装
首先，在命令行中使用 npm 安装 activejson：
npm i activejson --save
使用
使用 activejson，我们需要先创建一个 Store 对象。这个对象可以包含多个 Model 对象，每个 Model 对象则表示一个数据模型。
下面来看一个创建 Store 的示例:
-- -------------------- ---- -------
------ ---------- ---- ------------
----- ----- - --- ------------------
----- -
----- ----- ----
---- ---
---- -------------
-
--在这个示例中，我们创建了一个包含 user 模型的 Store 对象。user 模型有三个属性：name、age 和 job，分别表示用户的姓名、年龄和职业。我们可以在需要的地方引入它：
import { store } from './store'
console.log(store.user.name) // Jack Ma如果我们需要修改用户的职业，可以直接使用 store.user.job = 'philanthropist'。我们的修改会自动触发组件的重新渲染，而不需要显式地调用 setState 或类似的方法。
除了基本类型的属性外，我们还可以在 Model 对象中添加一个 computed 类型的属性。computed 属性的值会根据其他属性的值自动计算出来。
-- -------------------- ---- -------
----- ----- - --- ------------------
----- -
----- ----- ----
---- ---
---- --------------
---------- -------- -- -
------ -------- -- --
-
-
--
--------------------------------- -- -----这个示例中，user 模型新增了一个 isRetired 属性。通过 function 关键字定义的属性会自动被当作 computed 属性处理。在这个例子中，如果用户的年龄大于等于 60，isRetired 属性的值会自动变为 true。我们可以直接读取 store.user.isRetired 属性的值。
API
ActiveJson 提供了多个 API 方法，可以帮助我们更方便地管理数据。下面是其中几个常用的方法。
createModel(modelName, data)
创建一个新的模型。modelName 是模型的名称，data 是模型的初始数据。返回一个新的 Model 对象。
const UserModel = ActiveJson.createModel('user', {
name: 'Jack Ma',
age: 58,
job: 'businessman'
})observe(target, callback)
对一个对象或数组进行响应式观察。
-- -------------------- ---- ------- ----- ---- - - ----- ----- ---- ---- -- - ------------------------ --------- -- - -------------------- -- -------- - -- -- --------- ----- --------- ------- - ----- ----- ---- ---- -- -- ----- ------ --------- -- --
unobserve(target, callback)
停止观察一个对象或数组的变化。
ActiveJson.unobserve(user)
extend(target, ...sources)
将多个对象合并到一个目标对象中。如果多个对象中含有同名属性，则后面的属性值会覆盖前面的属性值。
-- -------------------- ---- ------- ----- ---- - - ----- ----- ---- ---- -- - ----- --------- - - ------- ------- ---- ------------- - ----------------------- ---------- ----------------- -- - ----- ----- ---- ---- --- ------- ------- ---- ------------- -
总结
ActiveJson 是一个轻量级的数据管理库，可以帮助我们更方便地管理数据。它基于 Object.observe 实现，可以自动响应数据变化，并触发组件的重新渲染。除此之外，它还提供了多个常用 API 方法，可以满足不同场景的需求。在开发过程中，我们可以根据实际情况来选择使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb281e8991b448dc564