观察者模式（订阅发布模式）
通过 订阅-发布 (subscribe-publish) 模型，消除组件之间双向依赖
消息的 发布者 (subject) 不需要知道 观察者 (observer) 的存在
两者只需要约定消息的格式（如何订阅、如何发布），就可以通信
我们先看一段代码
document.querySelector(".div").innerHTML="我是周杰伦"
document.getElementsByClassName("div")[0].innerHTML="我是周杰伦"
$(".div").html("我是周杰伦1")
这种操作DOM的写法看起来也很简单，没什么大问题，但是如果有N多DOM的时候数据需要动态换，则这样的代码就非常难以维护，甚至取名字都会成为程序员头疼的事情。所以有些人就想是不是可以数据驱动。数据变化反馈到DOM上，DOM变化反馈到数据上，形成这样的双向数据流的格式会比现在的操作DOM会更加方便。
所以我们有了双向数据流VUE ，Angular，有了单向数据流的 CYCLE 和 REACT
双向数据绑定（two-way data binding）
意味着 UI 层所呈现的内容和 Model 层的数据动态地绑定在一起了，其中一个发生了变化，就会立刻反映在另一个上。比如用户在前端页面的表单控件中输入了一个值，Model 层对应该控件的变量就会立刻更新为用户所输入的值；反之亦然，如果 Modal 层的数据有变化，变化后的数据也会立刻反映至 UI 层。
单向数据流（one-way data flow）
意味着只有 Model 层才是单一数据源（single source of truth）。UI 层的变化会触发对应的消息机制，告知 Model 层用户的目的（对应 React 的 store）。只有 Model 层才有更改应用状态的权限，这样一来，数据永远都是单向流动的，也就更容易了解应用的状态是如何变化的。
言归正传 那么我们的订阅发布到底是什么呢
其实就是字面意思 你订阅了我的信息 等我更新了 我就给你一个反馈
大家都知道 VUE中有一个事件机制 业就是 $ON 和 $EMMIT 下面我们来看看 分析分析
$on
Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
const vm: Component = this
/*如果是数组的时候，则递归$on，为每一个成员都绑定上方法*/
if (Array.isArray(event)) {
for (let i = 0, l = event.length; i < l; i++) {
this.$on(event[i], fn)
}
} else {
(vm._events[event] || (vm._events[event] = [])).push(fn)
// optimize hook:event cost by using a boolean flag marked at registration
// instead of a hash lookup
/*这里在注册事件的时候标记bool值也就是个标志位来表明存在钩子，而不需要通过哈希表的方法来查找是否有钩子，这样做可以减少不必要的开销，优化性能。*/
if (hookRE.test(event)) {
vm._hasHookEvent = true
}
}
return vm
}
$emmit
Vue.prototype.$emit = function (event: string): Component {
const vm: Component = this
if (process.env.NODE_ENV !== 'production') {
const lowerCaseEvent = event.toLowerCase()
if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
tip(
`Event "${lowerCaseEvent}" is emitted in component ` +
`${formatComponentName(vm)} but the handler is registered for "${event}". ` +
`Note that HTML attributes are case-insensitive and you cannot use ` +
`v-on to listen to camelCase events when using in-DOM templates. ` +
`You should probably use "${hyphenate(event)}" instead of "${event}".`
)
}
}
let cbs = vm._events[event]
if (cbs) {
/*将类数组的对象转换成数组*/
cbs = cbs.length > 1 ? toArray(cbs) : cbs
const args = toArray(arguments, 1)
/*遍历执行*/
for (let i = 0, l = cbs.length; i < l; i++) {
cbs[i].apply(vm, args)
}
}
return vm
}
我们再来看看使用
Vue.$on("someFun",(data)=>{ ...dosomething})
Vue.$emmit("someFun",this.data)
在JS中怎么处理呢
//每一个on都会这样
let callback[key].push(callbackFunction)
//在emmit的时候
callback[key].forEach(item=>item(data))
Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。
小结： 发布订阅模式就是 把观察者放在一个Array中 然后在被观察者发生改变时通知所有的观察者，使用回调函数的方式通知。
中介者模式
通过设置 消息中心 (message center)，避免组件之间直接依赖
所有的 协同者 (colleague) 只能通过 中介者 (mediator) 进行通信，
而相互之间不知道彼此的存在
当各个组件的消息出现循环时，消息中心可以消除组件之间的依赖混乱
var mediator = (function() {
var topics = {},
subUid = -1;
var publish = function(topic, args) {
if (!topics[topic]) {
return false;
}
var subscribers = topics[topic],
len = subscribers ? subscribers.length : 0;
while (len--) {
subscribers[len].func(topic, args);
}
return true;
};
var subscribe = function(topic, func) {
if (!topics[topic]) {
topics[topic] = [];
}
var token = (++subUid).toString();
topics[topic].push({
token: token,
func: func
});
return token;
};
return {
publish: publish,
subscribe: subscribe,
installTo: function(obj) {
obj.publish = publish;
obj.subscribe = subscribe;
}
}
}());
// 具体应用
var mod1 = {
run: function(arg) {
console.log('mod1 received ' + arg);
}
};
var mod2 = {};
var topic = 'myTopic';
mediator.installTo(mod1);
mediator.installTo(mod2);
// mod1订阅消息
mod1.subscribe(topic, function(t, arg) {
mod1.run(arg);
});
// mod2发布消息
mod2.publish(topic, 'data');
总结
观察者模式和中介者模式看起来非常的相似，核心原理都是一样的，这里有一个细微的差别，中介者模式注重状态告知，观察者模式侧重组件数据通信，其实我们这里完全使用观察者模式也可以实现状态告知，不过 但观察者是分发性的，所有的观察者都会受到信息，而且中介者则是单一的，对象的通信由中介者处理。
中介者模式 一般通过 观察者模式 实现
协同者 作为 发布者，中介者 作为 观察者
协同者 发布消息 -> 中介者 收到并处理消息 -> 中介者 直接发送消息给 协同者
协同者 不依赖于 中介者
当组件之间依赖关系简单时，可以直接使用 观察者模式
当组件之间依赖关系复杂是，需要借助 中介者模式 梳理关系
网友评论