simple-observer 是一个轻量级的观察者模式库，用于前端开发中的数据绑定和事件监听。它可以方便地实现组件间的通信，以及对数据变化的追踪和处理。
安装
在项目中使用 simple-observer 需要先安装它：
npm install --save simple-observer
基本用法
在使用 simple-observer 之前，需要先创建一个 Observer 对象：
import { Observer } from 'simple-observer';
const myObserver = new Observer();监听属性变化
要监听某个属性的变化，可以使用 watch 方法：
myObserver.watch('count', (newValue, oldValue) => {
console.log('count 变化了，新值为：', newValue);
});这样，当 count 属性发生变化时，回调函数就会被调用。回调函数中的 newValue 参数是新的属性值，oldValue 是旧的属性值。
触发属性变化
要触发属性的变化，可以使用 set 方法：
myObserver.set('count', 0);
myObserver.set('count', 1);这样，就会触发 watch 方法中注册的回调函数。上面的例子中，第一次调用 set 方法时，因为属性值发生了变化，所以回调函数会被调用；第二次调用 set 方法时，因为属性值没有发生变化，所以回调函数不会被调用。
取消监听属性变化
要取消监听某个属性的变化，可以使用 unwatch 方法：
const callback = (newValue, oldValue) => {
console.log('count 变化了，新值为：', newValue);
};
myObserver.watch('count', callback);
myObserver.unwatch('count', callback);这样，回调函数就不会再被触发了。
监听事件
除了监听属性变化之外，simple-observer 还支持监听自定义事件。要监听事件，可以使用 on 方法：
myObserver.on('click', (eventObject) => {
console.log('鼠标点击事件触发了：', eventObject);
});这样，当 click 事件被触发时，回调函数就会被调用。回调函数中的 eventObject 参数是事件对象，包含了事件的详细信息。
触发事件
要触发事件，可以使用 trigger 方法：
myObserver.trigger('click', { x: 10, y: 20 });这样，click 事件就会被触发，回调函数就会被调用。上面的例子中，传递的第二个参数 { x: 10, y: 20 } 就是事件对象，它会作为回调函数的参数。
示例代码
下面是一个使用 simple-observer 实现简单计数器的例子：
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ------ ------ ---------------------- ---------- ------- ------ --- ------------------------- ------- -------------------------------- ------- -------------------------------- ------- ------------------------ ------- -------
-- -------------------- ---- ------- -- -------- ------ - -------- - ---- ------------------ ----- ---------- - --- ----------- -- ------ ----------------------- --- -- ------- ------------------------- ---------- --------- -- - ----- --------- - ----------------------------------------- ------------------- - -------------------- --- -- -------- ----- -------------- - ------------------------------------------- ---------------------------------------- -- -- - ----- ----- - ------------------------ ----------------------- ----- - --- --- ----- -------------- - ------------------------------------------- ---------------------------------------- -- -- - ----- ----- - ------------------------ ----------------------- ----- - --- ---
在上面的例子中，使用了 simple-observer 监听了计数器的变化，以及监听了按钮的点击事件。每次按钮被点击时，调用相应的回调函数来修改计数器的值，并触发计数器变化的事件。因为监听了计数器变化事件，所以相应的变化就会实时地显示在页面上。
小结
simple-observer 是一个方便实用的观察者模式库，可以让我们更方便地实现前端开发中的数据绑定和事件监听。在实际项目中使用时，可以根据需要自行扩展，实现更强大的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9c81e8991b448e75b0