前言： 从八月份入职以来，在可以保证项目进度后，我便开始思考，怎么把事情做得更好，怎么提升自己。
- 一方面，提升自己对javascript这门语言的理解，我在udemy上买了 JavaScript: Understanding the Weird Parts.中文翻译过来，就是javascript: 理解怪异的部分。很经典，我推荐每个越过了基础这道坎的人去看一下这部分内容。我也买了书，之后计划对每一章进行解读。
- 另一方面，我明白了js是一门编程语言，是工具。那么工具的用法是有很多种的。在不同的场景，使用不同的方法去处理，会让你开发速度事半功倍。也可以提升自己对问题不同的解决方案。所以我阅读了《javascript设计模式与开发实践》，想知道更好的组织代码的形式是怎样，在同一场景下，别人是怎么处理问题的。
- 对于个人提升方面，可以单独拿一篇来探讨了。鉴于篇幅，只说两点。
正文开始
什么是发布订阅模式
发布订阅模式称观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象状态改变的时候，所有依赖于它对象都将得到通知.
有点绕哈。其实说得简单一点。你关注了我，我更新了文章，你会得到推送，就这个意思。 其实在日常的开发中，你一直在使用着发布订阅模式进行开发。最常见的例子是，原生事件API。（也就是鼠标点击/移动/进入等事件,就是使用了发布订阅模式)
来，举个栗子
// 订阅
document.body.addEventListener('click', function() {
alert(2);
});
// 触发事件发布
document.body.click();
在发布订阅模式中，有两个对象，一个是事件的发布者，一个是订阅者。
好啦，回答我一个问题，然后继续看下去：
- 在例子中，谁是发布者？
- 在例子中，谁是订阅者？
假设你答出来了，OK，那么接下来很容易理解。如果没有，那没关系，先看答案： * 发布者是document.body * 订阅者是我们 我们订阅了在document.body上的click事件，当用户点击了body，那么会触发click事件，body节点向用户也就是我发送信息（alert）. 使用这个模式还有个优点是：
我们可以随意的增加或者删除事件，这对订阅者不会产生任何影响。
实现发布订阅模式
在我们理解了发布者和订阅者的关系后，来完成一个官方实例： 假设，现在有一个售楼处， 售楼处作为发布者，而买家作为订阅者。当价格变动的时候，售楼处把价格信息推送给订阅者。
// 实现一个发布订阅的步骤
- 指定好发布的对象是谁？
- 给发布者一个缓存队列，存放回调函数以便通知订阅者。
- 发布消息遍历这个缓存队列，以此触发里面存放的订阅者回调函数。（符合条件的就进行触发）
第一版：
var selfOffices = {} // 定义发布者
selfOffices.clientList = [] // 缓存队列，用来存放回调函数
// 增加订阅
selfOffices.listen = function (fn) {
this.clientList.push(fn)
}
// 触发事件发布
selfOffices.trigger = function () {
for (let i = 0, fn; fn = this.clientList[i++];) {
fn.apply(this, arguments);
}
}
//订阅实例
selfOffices.listen(function (price, squareMeter) {
console.log('价格 = ', price)
console.log('squareMeter = ', squareMeter)
})
//订阅实例
selfOffices.listen(function (price, squareMeter) {
console.log('价格 = ', price)
console.log('squareMeter = ', squareMeter)
})
//触发
selfOffices.trigger(2000000, 90)
selfOffices.trigger(21321312321, 100)
至此实现了最基本的发布订阅模式，但是你发现问题了吗？
- 当我触发其中一个订阅的时候，在上面的模式下，发布者把其他用户的订阅也发布给了我。
解决方案是增加一个标识。（就像onclick, onmousemove， 你订阅click事件，在mousemove事件触发时，你不会接收到通知）
第二版：
var selfOffices = {}
selfOffices.clientList = []
// 重要： 在这里，增加了key关键字，作为标识位
selfOffices.listen = function (key, fn) {
if (!this.clientList[key]) {
this.clientList[key] = []
}
this.clientList[key].push(fn)
}
selfOffices.trigger = function () {
// 重要：在触发之前进行一个判断，如果在触发的事件该订阅者没有订阅，则不会执行相应的订阅事件
var key = Array.prototype.shift.call(arguments)
fns = this.clientList[key]
if (!fns || fns.length == 0) {
return false
}
for (let i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments);
}
}
selfOffices.listen("square88", function (price) {
console.log('价格 = ', price)
})
selfOffices.listen("square100", function (price) {
console.log('价格 = ', price)
})
selfOffices.trigger('square88', 90)
selfOffices.trigger('square100', 100)
至此，完成了发布特定消息，订阅者订阅的事件发布的时候通知订阅了特定消息的人。
第三版： 让我们把以上的流程抽象出来，变成一个通用的发布订阅模式
// 发布订阅模式的通用模式
// 发布者
var event = {
clientList: [],// 监听队列
listen: function (key, fn) {// 订阅
if (!this.clientList[key]) {
this.clientList[key] = []
}
this.clientList[key].push(fn)
},
trigger: function () {// 触发
var key = Array.prototype.shift.call(arguments),
fns = this.clientList[key];
if (!fns || fns.length == 0) {
return false
}
for (var i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments)
}
}
}
// 订阅者
var installEvent = function (obj) {
for (var i in event) {
obj[i] = event[i]
}
}
// 测试
var sales = {}// 订阅者
installEvent(sales)// 初始化订阅者
sales.listen('88', function (price) {
console.log(88)
})
sales.listen('99', function (price) {
console.log(99)
})
sales.trigger('88')
sales.trigger("99")
至此， 完成了一个非破坏性的通用发布订阅模式。
第四版： 你知道的，可以订阅，就一定要有取消订阅的功能，不然。。。你看addEventListener.很尴尬。（无法取消）
（这里偷懒，把第三版的代码假装放在这里）
// but, 订阅完成之后，我突然的又不想再继续订阅这个事件了，因为我找到更加好的了
// 为我们的发布订阅函数增加取消订阅的功能
event.remove = function (key, fn) {
// 根据key在缓存找到对应的缓存队列
var fns = this.clientList[key]
if (!fns) {
return false
}
// 如果没有传入fn那么，清空该条缓存队列
if (!fn) {
fns && (fns.length == 0)
} else {
// 相反，如果存在fn，那么遍历缓存队列，删除该条缓存队列中的事件
for (var l = fns.length - 1; l >= 0; l--) {
var _fn = fns[l]
if (_fn === fn) {
fns.splice(l, 1)
}
}
}
}
虽然，这已经很棒了XD，但是，还是存在一定的问题，问题体现在以下几个方面：
- 我们在给每一个对象添加listen和trigger方法，以及一个clientList列表，其实没有这个必要
- 订阅者与发布者之间还是存在一定的耦合关系，如果订阅者不知道发布者的名称，那就无法进行订阅，
- 又或者，订阅者想订阅另一个发布者的事件，那么还是要去获取到另一个发布者的名称才能订阅到
解决方案： 使用全局Event对象实现，订阅者不需要知道消息来自哪里，发布者了也不知道信息要发布给谁 Event对象作为中介，链接两者（订阅者，发布者）。
第五版： 用立即执行函数，形成闭包。对外暴露出Event接口。供外界使用。
var Event = (function () {
var clientList = [],
listen,
trigger,
remove;
listen = function (key, fn) {
if (!clientList[key]) {
clientList[key] = []
}
clientList[key].push(fn)
}
trigger = function (key) {
var key = Array.prototype.shift.call(arguments)
fns = clientList[key]
if(!fns || fns.length == 0) {
return false
}
for(var i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments)
}
}
remove = function (key, fn) {
var fns = clientList[key]
if(!fns) {
return false
}
if(!fn) {
fns && (fns.length = 0)
}else {
for(var l = fns.length -1 ; l >= 0; l--) {
var _fn = fns[l]
if(_fn === fn) {
fns.splice(l, 1)
}
}
}
}
return {
listen: listen,
trigger: trigger,
remove: remove
}
})();
Event.listen( '99', function (price) {
console.log(price);
})
Event.trigger('99', 2999)
// Event.remove('99')
// Event.trigger('99', 299)
额，第五版，哎呀，写得太棒了，感觉没啥问题了。但是想想，在大型应用中，使用发布订阅模式很可能，很可能很多个。那么在以上的模式下，到最后，clientList会有些膨胀。可能造成很多很多的事件集中在这里。不好管理，以及debugger. 所以，我们迎来了第六版！为发布订阅模式提供命名空间的能力!更好的管理每个事件，可以对每类事件分门别类的放好。安排！
第六版： 对第五版的代码进行增强，提供命名空间的能力 第六版，其实看起来有点多，其实就是增加了一个create还好还好，如果觉得比较困难你可以收藏，未来再回来看会好很多。
// todo 为了使发布订阅模式更加适用。我们要对上个版本的发布订阅模式进行增强。提供命名空间的能力。更好的管理每个发布订阅。
var Event = (function () {
// 兼容各个平台，因为broswer的global是window， 而node.js的是global
var global = this,
Event,// 初始化挂载点
_default = 'default';// 初始化命名空间
Event = function () {
// 初始化Event各个方法：监听，触发，移除
var _listen,
_trigger,
_remove,
// 初始化工具方法
_slice = Array.prototype.slice,
_shift = Array.prototype.shift,
_unshift = Array.prototype.unshift,
// 初始化命名空间缓存
namespaceCache = {},
// 初始化以命名空间作为event的方法
_create,
// ! 这个find就很迷了，不知道什么作用， 求各位大佬解答
find,
// 自建迭代器
each = function ( ary, fn ) {
var ret;
for(var i = 0, l = ary.length; i < l ; i++) {
var n = ary[i];
ret = fn.call(n, i, n);
}
return ret;
};
// 监听： 如果这个监听的名称在监听缓存中不存在， 那么，初始化， 并且把该监听事件存入cache[key]数组中。
_listen = function(key, fn, cache) {
if( !cache [key]){
cache[key] = []
}
cache[key].push(fn);
};
// 移除： 首先判断监听缓存队列中是否存在对应的记录， 如果存在，在对应的cache[key]数组中删除对应的监听事件。
_remove = function (key, cache, fn) {
if(cache[key]){
if(fn){
for(var i = cache[key].length; i >= 0; i--) {
if(cache[key] == fn) {
cache[key].splice(i, 1);
}
}
}else{
cache [key] = [];
}
}
};
// 触发： 取出cache队列， 迭代队列，触发事件
_trigger = function () {
var cache = _shift.call(arguments),// 取出cache队列
key = _shift.call(arguments),// 取出对应的key， 像“click”
args = arguments,// 经过以上两步， 剩下的只有入参了
_self = this,// 在这一步，获取this,也就是Event对象本身
ret,
// 获得触发栈， 也就是之前使用listen设置的监听事件
stack = cache[key];
if(!stack || !stack.length ) {
return;
}
return each(stack, function (){
// 此时this指向stack中每个匿名函数
return this.apply(_self, args);
});
};
// 创建命名空间的方法
_create = function (namespace) {
// 给命名空间设定默认值
var namespace = namespace || _default;
// 初始化cache和离线栈
var cache = {},
offlineStack = [],
// 这个ret最后会挂载到命名空间（namespaceCache）的缓存中
ret = {
listen: function (key, fn, last) {
_listen(key, fn, cache);
if(offlineStack == null) {
return;
}
if(last == 'last') {
offlineStack.length && offlineStack.pop()();
}else{
each(offlineStack, function () {
this()
})
}
offlineStack = null;
},
one: function (key, fn, last) {
_remove (key, cache);
this.listen(key, fn, last);
},
remove: function (key, fn) {
_remove(key, cache, fn);
},
trigger: function () {
var fn,
args,
_self = this;
_unshift.call(arguments, cache);
args = arguments;
fn = function() {
return _trigger.apply(_self, args);
};
if(offlineStack) {
return offlineStack.push(fn);
}
return fn();
}
};
// 使用命名空间时的返回
return namespaceCache ? (namespaceCache[namespace] ? namespaceCache [namespace] : namespaceCache[namespace] = ret) :ret;
};
return {
// 使用全局Event时的返回
create: _create,
one: function (key, fn, last) {
var event = this.create();
event.one = (key, fn, last);
},
remove: function (key, fn) {
var event = this.create();
event.remove(key, fn);
},
listen: function (key, fn, last) {
var event = this.create();
event.listen(key, fn, last);
},
trigger: function () {
var event = this.create();
event.trigger.apply(this, arguments);
}
};
}();
return Event;
}())
// 使用范例
// 先发布后订阅
Event.trigger('click', 1);
Event.listen('click', function (a) {
console.log(a)
});
// 使用命名空间，让各个订阅事件整洁有序
Event.create('namespace1').listen('click', function (a) {
console.log(a)
});
Event.create('namespace1').trigger('click', 1);
Event.create('namespace2').listen('click', function (a) {
console.log(a)
});
Event.create('namespace2').trigger('click', 1);
（完）
OK，不知道大家感觉怎么样。如果你看到了这里。谢谢你。我认为自己做的事情有价值，能给大家带来帮助就会让我很有成就感。
稍微横向扩展一下，发布订阅模式在js这门语言中用在很多地方： node.js的事件驱动模型以及vue中的自定义事件，在我看来，都使用了发布订阅这种思想
篇幅有限，周末还有半天，以上两点就不继续写下去了。
另外，掘金社区的各位大佬，感谢批评指正。希望得到一些正向，中肯的评价。感谢各位大佬。
参考： 《javascript设计模式与开发实践》
