《JavaScript设想形式与开辟实践》读书笔记。
看此文章前，发起先看JavaScript设想形式之宣布-定阅形式（观察者形式）-Part1
在Part1中，已引见了什么是宣布-定阅形式，同时，也完成了宣布-定阅形式。然则，就Part1中完成的例子来讲，照样存在了两个小题目：
我们给每一个宣布者对象都添加了listen和trigger要领，以及一个缓存列表clientList，这现实上是一种资本的糟蹋。
定阅者与宣布者之间存在肯定的耦合性，定阅者最少要晓得宣布者对象的名字，才顺遂定阅。以下：
// 张三定阅题目A, sgQuestionSystem是宣布者的对象（题目体系）
sgQuestionSystem.listen('questionA', 3, function(questionTitle, content) {
console.log('张三您在早前定阅了题目：questionA');
console.log('现' + questionTitle + '有了新动态');
console.log('内容为：' + content);
});假如张三还对别的东西感兴趣，而宣布者又不是同一个，那末，这意味着张三须要再对另一个宣布者对象举行定阅。以下：
// 张三定阅文章A动态, sgArticleSystem是宣布者的对象（文章体系）
sgArticleSystem.listen('articleA', 3, function(articleTitle, content) {
console.log('张三您在早前定阅了文章：articleA');
console.log('现' + articleTitle+ '有了新动态');
console.log('内容为：' + content);
});全局的宣布-定阅对象
置信人人都晓得什么是中介公司吧，在现实生活中，我们只要把定阅的要求交给中介公司，而各大宣布者也只须要经由过程中介公司来宣布信息。这样一来，我们就无需体贴音讯是哪一个宣布者宣布的，我们只需体贴是否能顺遂收到音讯。固然，定阅者与宣布者都须要晓得这个中介公司。
一样，在递次中，我们能够用一个全局的 Event 对象来完成中介公司的作用。Event作为一个音讯中间，把定阅者和宣布者联系起来。见以下代码：
var Event = (function(){
var clientList = {}, // 缓存列表
listen,
trigger,
remove;
listen = function(key, id, fn){
if(!clientList[key]){
clientList[key] = []; // 初始化
}
clientList[key].push({ // 将定阅的id, 回调函数添加到对应的音讯列内外
id: id,
fn: fn
});
};
trigger = function() {
var key = Array.prototype.shift.call(arguments),
fns = clientList[key];
if(!fns || fns.length == 0) {
return false;
}
for(var i = 0; i < fns.length; i++) {
fns[i].fn.apply(this, arguments);
}
};
remove = function(key, id) {
var fns = clientList[key];
if(!fns) { // 假如key对应的音讯没人定阅，直接返回
return false;
}
if(!id) { // 假如没传详细的唯一标识，则作废key的一切对应音讯
fns && (fns.length = 0);
} else {
for(var l = fns.length - 1; l >=0; l--) {
var _id = fns[l].id;
if(_id == id) {
fns.splice(l, 1); // 删除定阅者的回调函数
}
}
}
};
return {
listen: listen,
trigger: trigger,
remove: remove
}
})();
Event.listen('questA', 1, function(content) {
console.log('内容为：' + content);
});
Event.trigger('questA', '王五回复了该题目');必须先定阅再宣布吗？
我们所相识的宣布-定阅形式，都是定阅者必须先定阅一个音讯，随后才接收到宣布者宣布的音讯。假如把递次反过来，宣布者先宣布一个音讯，而在此之前并没有对象来定阅它，那末这条音讯就消逝在宇宙中了。
而在现实项目在，先宣布后定阅是存在的。例如在商城网站中，猎取到用户信息以后才衬着用户导航模块，而猎取用户信息的操纵是一个异步要求。当要求胜利返回以后才宣布一个事宜，在此之前定阅了此事宜的用户导航模块才接收到这个信息。
但是，由于异步的缘由，我们不能保证ajax要求的事宜，能够用户的导航模块还没加载好（即还没定阅音讯），要求就返回（即宣布音讯）。因而，我们须要让我们的宣布-定阅对象具有先宣布-后定阅的才能。
详细的完成请看后续终究代码。
全局事宜的定名争执
全局的宣布-定阅对象里只要一个clientList来寄存音讯名和回调函数，人人都经由过程它来定阅-宣布种种音讯，一朝一夕，难免会涌现事宜名争执，所以我们还能够给Event对象供应建立定名空间的功用。
终究代码以下：
var Event = (function(){
var global = this,
Event,
_default = 'default';
Event = function(){
var _listen,
_trigger,
_remove,
_slice = Array.prototype.slice,
_shift = Array.prototype.shift,
_unshift = Array.prototype.unshift,
namespaceCache = {},
_creat,
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;
};
_listen = function(key, fn, cache) {
if(!cache[key]) {
cache[key] = [];
}
cache[key].push(fn);
};
_remove = function(key, cache, fn) {
if(cache[key]) {
if(fn) {
for(var i = cache[key].length; i >=0; i--) {
if(cache[key][i] == fn) {
cache[key].splice(i, 1);
}
}
} else { // 若没有fn,示意悉数清空
cache[key] = [];
}
}
};
_trigger = function() {
var cache = _shift.call(arguments),
key = _shift.call(arguments),
args = arguments,
_self= this,
ret,
stack = cache[key];
if(!stack || !stack.length) {
return;
}
return each(stack, function(){
return this.apply(_self, args);
})
};
_create = function(namespace) {
var namespace = namespace || _default;
var cache = {},
offlineStack = [],
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 namespace? (namespaceCache[namespace] ? namespaceCache[namespace]: namespaceCache[namespace] = ret) : ret;
};
return {
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.one(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);附：
JavaScript数据结构和算法系列：
JS 栈
JS 行列-优先行列、轮回行列
JavaScript设想形式系列：
JavaScript设想形式之战略形式
