什么是 observable-membrane
observable-membrane 是一个可以帮助创建被观察者对象的 npm 包。它使用了 ES6 的代理（Proxy）功能，实现了对 Javascript 对象的监听和修改。利用这个包，可以很容易地实现对 Javascript 对象和数据的修改和变更的跟踪。
如何使用 observable-membrane
observable-membrane 能够帮助监听和记录一个对象的变化。下面是一个简单的示例：
-- -------------------- ---- ------- ----- - -------- - - ------------------------------- ----- -------- - - -- - -- ----- -------- - --- ---------- ------------- -- -- ----------------------- --- ----- ------- - ------------------------ -- --------- ----- - ----- ----------------------- -- ---------- --------- - -- -- ----- ---------- ------
在这个例子中，使用 Membrane 构造函数创建一个代理对象的实例。这个实例接受一个或多个回调函数作为其属性。这里我们的回调函数仅仅是一个简单的输出，向我们提醒对象已经被修改了。
之后，我们将对象原型和 Membrane 实例作为构造参数，创建一个被观察者对象(wrapper)，以防止对原始对象的修改。wrapper 对象是一个与原始对象相同的对象，但是可以在其上应用默认代理的操作，如 get 和 set。
现在当我们改变被观察者对象(wrapper)的属性 a时，程序就会运行 valueMutated 回调函数并在控制台输出提示信息。
案例探究
请看下面另一个例子，我们将创建两个被观察对象(wrapper)，其中一个(wrapper)对象依赖于另一个(wrapper)对象。
-- -------------------- ---- ------- ----- - -------- - - ------------------------------- ----- --------- - - -- -- -- - -- ----- --------- - - -- - -- ----- -------- - --- ---------- ------------- -- -- ------------------------ -------------- -- -- ------------------------- --- ----- -------- - ------------------------- ----- -------- - ------------------------- ---------- - --------- -------------------------- ------ ------ ------- ---------- ----- -------------- - -------------------------- ----- -------------- - -------------------------- ------------------------- ----------- ------------------------------ ---------------- --------------- ------- ------- ---------- ----- -- ------------ -------------- --- ----------- ------------------------- ----------- ------------------------------ ---------------- --------------- ------- ------- ---------- ----- -- ------------ -------------- --- ----------- -- -------- --------- ---------------- - -- ------------------------- ----------- -- ------- --------------- ---------------- - -- ------------------------- ----------- --------------------- ---- -------------- --- -------- - -------------- - --- -------------
在这个例子中，我们在对象 A 中嵌入了对象 B，同时构造了两个被观察者对象 wrapperA 和 wrapperB。
我们可以从这个例子中看到如何使用 observable-membrane 进行深度嵌套的对象观察模式。这里的存在感是只有在对象被重新构造或者从创建的包装器(wrapper)中删除时才会有的，因为这是我们的包装器proxy跟踪的方式。
当我们在 wrapperA 中将 wrapperB 分配给 C 变量后，我们就可以开始操作这个新的合并对象(wrapper)。在这个阶段，我们已经可以使用常规 Javascript 操作符向对象属性中添加、删除和修改值。
使用 membrane.unwrap 函数，我们可以将被观察的包装器解包装回它的基础对象。
-- -------------------- ---- ------- ----- -------- - --- ----------- ----- --------- - - -- - -- ----- --------- - - -- - -- ----- -------- - ------------------------- ----- -------- - ------------------------- ---------- - --------- ----- ---------- - -------------------------- ---------------------- --- ----------- ---------------------------- --------------
在以上示例中，我们可以看到如何将被观察者对象重新转化为基础非虚拟的 Javascript 对象。使用 membrane.unwrap 函数，我们可以创建一个不再受包装器proxy的控制的对象。
总结
尽管存在不少其他的 Javascript 包装器库，但 observable-membrane 在几个方面方面具有特别的优势：
- 它能够帮助实现对象的深度嵌套，支持响应式的结构。
- 它提供了简单且直观的 api，可以很容易地使用它来监控对象的变化。
- 与其他 Javascript 包装器库一样，它已经经过了广泛和持续的支持和维护，具有广泛的部署和实际场景使用案例。
我们希望这个简短的 observable-membrane 使用教程能够帮助大家快速掌握这个强大的 Javascript 包装技术，并能够在实际开发项目中起到益处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/205699