前言
前端开发过程中经常需要使用状态管理机制，而 observable pattern 是其中一种优秀的实现方式。在 JavaScript 中，大多数的前端框架提供了自己的观察者模式实现，例如：react-redux、vuex、mobx 等。但是有时候我们需要更加轻量级的实现方案，这时候就可以选择 npm 包 @alekmarinov/observablestore 了。@alekmarinov/observablestore 是一个基于观察者模式的状态管理库，具有以下特点：
- 轻量级：@alekmarinov/observablestore 只有不到 2kb 的大小，不需要任何依赖；
- 简易性：使用起来非常简单，不需要复杂的配置或学习成本；
- 功能强大：使用 obsverablestore，可以方便地实现状态管理。
在本文中，我们将会学习如何使用 observablestore 来管理前端状态。
教程
安装
安装 @alekmarinov/observablestore 是非常简单的，只需要在命令行中输入下面的命令：
npm install @alekmarinov/observablestore
示例
让我们来通过一个简单的例子来学习如何使用 observablestore。
首先，在 HTML 文件中引入 observablestore：
<script src="./node_modules/@alekmarinov/observablestore/dist/observablestore.min.js"></script>
接着，我们定义一个全局的 store 对象，用来维护一些数据。 在 store 中，我们定义了一个名为 count 的可观察属性（observable property）。
let store = observable({ count: 0 });那么该如何监听 count 属性的变化呢？在 observablestore 中，我们可以使用 autorun 或 reaction 方法。比如说我们为 count 变量定义一个 autorun 函数，当 count 的值发生改变时会自动调用该函数：
autorun(() => {
console.log(store.count);
});这时候我们可以在控制台中看到 count 的值，打印出来就是 0。
接下来我们将 count 的值改变一下：
store.count = 1;
我们在控制台中可以看到，count 的值已经变成了 1。
方法
observablestore 提供了以下方法：
- observable：创建可观察对象，并将对象中的所有属性转变为可观察属性。
- autorun：在响应函数中定义需要被监听的代码，当 autorun 中依赖的任意可观察属性变化时，将会自动调用响应函数。
- reaction：类似 autorun，但是可以将响应函数与一个可观察属性绑定，只有当绑定属性改变时，才会执行响应函数。
- computed：创建可观察的计算属性，当其依赖的属性改变时，计算属性的值也会自动改变。
其中：
- observable：用于创建可观察属性，在一个对象上调用该方法，即可将该对象转变为可观察对象。
/**
* @param value
* @returns { Proxy }
*/
function observable(value) {
... ...
return new Proxy(target, handler);
}- autorun：用于监听 observabels 中任意一个值的自动运行器。
/**
* 自动运行器
* @param cb 回调
*/
function autorun(cb) {
... ...
}- reaction：用于监听 observabels 中任意一个值的自动运行器
-- -------------------- ---- ------- --- - -------- - -- ------- --------------------- - ------ -- - ------ ------- -- -------- ------------ -------- - --- --- -
- computed：使用该方法计算属性值会自动更新
-- -------------------- ---- -------
---
- --------
- -- -------- -----
- ------ ------- --
- -------- ---------- ------ --------------
--
-------- ----------------- -
--- ---
------ -
--- ------- -
-- ------- -
----- - ------
------ - --------------
-
--------
------ -------
--
--
-总结
在本篇文章中，我们掌握了轻量级的状态管理库，基于观察者模式可观察属性（observable property）这项技术的使用方法。observablestore 具备轻量、简易、功能强大的特点，帮助我们实现简单的状态管理功能。在实际开发中，我们可以将其与开发框架结合起来，辅助我们更好地管理页面状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6151ab1864dac672c9