发布订阅模式
目标：解耦，让各个模块之间没有紧密的联系。
在Vue中，整个的更新是按照组件为单位进行判断，以节点为单位进行更新。
------如果代码中没有自定义组件，那么在比较算法的时候，我们会将全部的模板对应的虚拟DOM进行比较，比较不同了就就把不同的进行更新（二次提交）。
------如果代码中含有自定义组件，那么在比较算法的时候，就会判断更新的是哪一些组件中的属性，只会判断更新数据的组件，其他组件不会更新。
每一个组件都有自己的一套属性和状态，每一个组件都有自己的渲染方法或者说是虚拟DOM的比较方法，所以让各个模块之间的关系尽量分开。
希望修改了什么属性，就尽可能值只更新这些属性对应的页面DOM。
例子：
比如：预售可能一个东西没有货，告诉老板，如果东西到了就告诉我
老板就是发布者
订阅什么东西作为中间媒介
我就是订阅者
实际上就是事件模型
1.首先有一个event对象
2.对象上提供了一些方法，有on，off，emit方法
on用来绑定订阅方法，off用来移除方法，emit相当于老板发送一个消息触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoort" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>text</title>
</head>
<body>
<script>
//需要有一个全局的event对象，提供on，off，emit方法
var event = (function () {
eventObjs = {}
return {
/*注册事件，可以连续注册，可以注册多个事件*/
on: function (type, handler) {
(eventObjs[type] || (eventObjs[type] = [])).push(handler)
},
/*移除事件，
如果没有参数，移除所有事件，
如果只带有事件名参数，就移除这个事件名下的所有事件
如果带有两个参数，那么就是表示移除某一个事件的具体处理函数
*/
off: function (type, handler) {
if (arguments.length === 0) { //没有参数移除所有事件
eventObjs = {}
} else if (arguments.length === 1) { //只有事件的类型，移除该事件的所有处理函数
eventObjs[type] = []
} else if (arguments.length === 2) { //移除type事件的handler处理函数
//使用循环移除所有该函数对应的type事件
let _events = eventObjs[type]
if (!_events) return
//倒着循环 数组的序号不会受到影响
for (let i =_events.length - 1; i >= 0; i-- ) {
if (_events[i] === handler) {
_events.splice(i, 1)
}
}
}
},
/*发射事件，触发事件，包装参数 传递给事件处理函数*/
emit: function (type) {
let args = Array.prototype.slice.call(arguments, 1) //获得arguments从1开始后的所有参数，返回的是一个数组
let _events = eventObjs[type]
if (!_events) return
for (let i = 0; i < _events.length; i++) {
//如果要绑定上下文就需要使用call或apply
_events[i].apply(null, args) //调用这个方法和传参
}
}
}
}())
function f() {
console.log('第一个click事件')
}
function foo() {
console.log('第二个click事件')
}
//注册事件
event.on('click', f) //可以移除
event.on('click', foo) //可以移除
event.on('click', () => {console.log('第三个click事件')}) //不可以移除 ，引用类型是比较地址
//() => {console.log('第三个click事件')} === () => {console.log('第三个click事件')} //false
//[] === [] false {} === {} false
//如果用变量接住就可以比较，引用的是同一个地址
//let arr = [] arr===arr true
event.emit('click')
</script>
</body>
</html>
通过以上代码对发布订阅模式小结：
发布订阅模式（形式不局限于函数，可以是对象等等）
1.要有一个中间的全局容器（eventObjs），用来存储可以被触发的东西（东西可以是函数，对象等等）。
2.需要一个方法（on方法），可以往容器中传入东西（函数，对象等）。
3.需要一个方法（emit方法），可以将容器中的东西取出来使用（函数调用，对象的方法调用）。
在Vue中传入的是对象，在Vue里那个全局的容器是target，对象叫watcher，on方法叫depend，Vue中的触发是更新触发
