前言
在前端开发中， JavaScript 框架和库的出现减少了人们编写 JavaScript 代码的难度，但是代码的复杂程度和规模却越来越高。CoffeeScript 出现、越来越流行也得益于此。而使用 CoffeeScript 编写的代码因为其简单有力和易读性，而越来越受欢迎。那么，在使用 CoffeeScript 编写的代码中，如何方便地监听对象的变化呢？
什么是 coffee-observer
coffee-observer 是一个 JavaScript 库，其挂载的对象对所监视的对象进行“递归观察”。当监视目标对象（或其子对象）发生变化时，coffee-observer 会及时地通报到用户的代码中。使用它可以方便地监控对象的变化，包括增、删、改。
如何使用
安装
coffee-observer 可以直接通过 npm 进行安装。在终端输入以下命令即可：
npm install coffee-observer
引入
在你所需的位置引入 coffee-observer：
Observer = require "coffee-observer"
观察对象
在你所需要的位置，初始化一个观察目标对象：
person = name: "jack" watched_person = Observer.observe person
watched_person 就是 person 的“被监视对象”，调用它的时候，它会返回一个“漏桶”式缓存的对象。
监听事件
在 watched_person 上可以监听三种类型的事件：
add：添加事件change：修改事件delete：删除事件
例如，在watched_person 上可以通过以下代码监听 change 事件：
watched_person.on "change", (change) -> console.log "触发【change】事件：", change
其中，change 包含以下属性：
type：触发事件的原因，这里的原因肯定是"change"。object：触发的对象。key：变化的属性名value：变化后的新值oldValue: 变化前的旧值
示例
以下是一个完整的 coffee-observer 示例代码：
-- -------------------- ---- ------- -------- - ------- ----------------- ------ - ----- ------ -------------- - ---------------- ------ ----------------- --------- -------- -- ----------- ---------------- ------ ------------------- - ----- ------ ------------------- --------- - -- ------------------------ - ---------------- --------- ----------------------------- - ------
当执行以上代码时，输出的结果为：
-- -------------------- ---- ------- ------------- - ----- --------- ------- - ----- ------ -- ---- ------- ------ ------ --------- ------ - ------------- - ----- --------- ------- - ----- ----- -- ---- ------- ------ ---------- --------- ----- - ------------- - ----- ------ ------- - ----- ------ ---------- -- -- ---- ------------ ------ --- --------- --------- - ------------- - ----- --------- ------- - ----- ------ ---------- - ----- ------ - -- ---- ------- ------ ------- --------- --------- -
总结
用 coffee-observer 监控 CoffeScript 对象可以非常方便地查看对象的变化，包括增删改，哪些属性变了，变化了多少等。因此，建议在你的项目中使用 coffee-observer 进行对象检测和验证。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/101997