标签：订阅 发布者 Observer JavaScript 模式 Compile 模块

#仅简单描述，稍后会新增具体内容：

发布者-订阅者模式又称观察者模式：当一个对象（发布者）状态发生改变时，所有依赖它的对象（订阅者）都会得到通知。

该模式广泛应用在异步编程中：我们无需关注对象在异步运行期间的内部状态，只需要订阅感兴趣的事件发生点。

简单说就是该模式让发布者和订阅者两个对象弱耦合，虽然不太清楚彼此的细节但是不影响彼此通信。

1.DOM事件

事实上在我们普通的编程中就应用过该模式，譬如

    document.body.addEventListener('click',function(){
    	console.log("test");
    },false);

监听用户动作，但是我们并不知道用户什么时候点击。所以我们订阅了click事件，当body节点被点击时发布者body就向订阅者（整个这段程序就是一个订阅者）发布这个消息。

2.vue中的双向数据绑定就是数据劫持结合发布者-订阅者模式实现的

双向数据绑定的原理：通过Object.defineProperty给每个发布者或者说需要观察的对象Observer添加getter和setter方法，只要该对象数据发生变化那么就触发setter方法了就会通知Watcher订阅者，订阅者有多个由消息订阅器dep统一管理，Compile负责编译模板，将模板中的变量转换成数据渲染出来，同时将每个指令对应的节点绑定更新函数转化成订阅者一旦数据变化就会收到通知，更新视图。MVVM作为数据绑定的入口，整合了Observer Watcher Compile三者通过Observer监听自己model数据变化，Compile解析模板指令，利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化--视图更新，视图更新--数据变化的效果。

3.实际应用

简单的拿CSDN举例：没有用户登录的时候是一个界面，用户登录博客以后会有自己的博客风格譬如：主页背景、代码区的样式，早年使用新浪博客的时候还可以定制自己的博客模块。也就是说网站会在用户登录后做相应的渲染。而渲染的前提是ajax异步请求获取到了用户的登录信息。实现方式（思路）如下

在login成功的回调函数里刷新博客的主页背景，代码区格式等。

缺点如下

• 这些模块不能自行修改自己的名字（因为要在login成功回调函数里使用它的名字做refresh）
• 假设有一天CSDN也要做自定义模块添加，此时要在回调函数里再加个refresh显然维护起来真是麻烦呢！

所以应用我们发布者-订阅者模式：

发布者：回调函数里设定成功后就发布成功的信息

订阅者：主页背景、代码区、自定义模块区等监听登陆成功信息。

这样的话只要在自定义模块区添加监听信息的方法就行了，这个可以让开发该模块的同事自行完成就行了，开发登录模块的无需操心。

标签：订阅,发布者,Observer,JavaScript,模式,Compile,模块
来源： https://blog.csdn.net/lynnwonder6/article/details/89790759

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。