介绍
observable-decorators 是一个方便的 npm 包，它为 JavaScript / TypeScript 对象中的属性提供了易于使用的观察者模式。
使用观察者模式，我们可以让多个对象共同关注一个对象，并根据这个对象的变化采取相应的操作。Observable-decorators 可以让我们方便地实现这个模式。
安装
使用 npm 安装：
npm install observable-decorators
使用
我们可以在 JavaScript / TypeScript 类的属性上直接使用装饰器 @observable：
-- -------------------- ---- -------
------ - ---------- - ---- ------------------------
----- ------ -
-----------
---- - -------
------- -
------------------- -- ---- -- ---------------
-
-
----- - - --- ---------
---------- -- -- ------ -- ---- -- ----
------ - -------
---------- -- -- ------ -- ---- -- ----在上面的例子中，name 属性通过 @observable 装饰器变成了可被观察的属性。当 p.name 被设置为新的值时，会触发所有观察者的回调。
我们可以通过 @computed 装饰器定义一个计算属性：
-- -------------------- ---- -------
------ - ----------- -------- - ---- ------------------------
----- --------- -
-----------
----- - --
-----------
------ - --
---------
--- ------ -
------ ---------- - ------------
-
-
----- ---- - --- ------------
----------------------- -- -- -
---------- - ---
----------- - ---
----------------------- -- -- ---在上面的例子中，area 属性通过 @computed 装饰器定义为一个计算属性。当 rect.width 或 rect.height 被修改时，area 的值将实时更新。
API
observable(target: Object, propertyName: string, descriptor?: PropertyDescriptor)
使用方式为 @observable。
target: Object：包含被装饰的属性的对象propertyName: string：被装饰的属性的名称descriptor?: PropertyDescriptor：被装饰属性的描述符
@observable 装饰器让一个属性变成可被观察的。当该属性的值被修改时，会立即触发所有观察者的回调。
computed(target: Object, propertyName: string, descriptor?: PropertyDescriptor)
使用方式为 @computed。
target: Object：包含被装饰的属性的对象propertyName: string：被装饰的属性的名称descriptor?: PropertyDescriptor：被装饰属性的描述符
@computed 装饰器让一个属性变成一个具有缓存的计算属性。
总结
observable-decorators 可以让我们方便地实现观察者模式和计算属性。它简单易用，对于需要使用这些模式的开发者，是一个优秀的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600f81e8991b448ddf25