本文深入解析JavaScript中的观察者模式（发布-订阅模式），阐述其定义及在异步编程中替代回调函数的优势。通过DOM事件监听和网站模块渲染两个实例，展示如何利用该模式实现对象间的解耦。最后提供通用的Event类实现代码，帮助开发者掌握在复杂应用中管理依赖关系的方法。
观察者模式的定义与核心概念
一、定义
观察者模式，亦称为发布-订阅模式，旨在定义对象之间的一对多依赖关系。当被观察对象的状态发生变化时，所有依赖于它的订阅者都会收到通知。在JavaScript开发中，通常采用事件模型来替代传统的观察者模式实现。这种模式的主要优势包括：
- （1）在异步编程场景中应用广泛，可作为传递回调函数的一种替代方案。
- （2）能够取代对象间硬编码的通知机制，使一个对象无需显式调用另一个对象的接口，从而轻松实现两个对象之间的解耦。
DOM事件中的观察者模式应用
二、DOM事件–观察者模式典例
假设我们需要监控用户点击 document.body 的动作，但无法预知用户点击的具体时间。此时，我们可以订阅 document.body 上的 click 事件。当 body 节点被点击时，该节点便向所有订阅者发布这一消息。
document.body.addEventListener("click", function() {
console.log(1);
}, false);
// 可以多个订阅者
document.body.addEventListener("click", function() {
console.log(2);
}, false);
doucment.body.click();
基于观察者模式的模块解耦实例
考虑一个网站包含 header 头部、nav 导航、消息列表等多个模块，这些模块的渲染均需要获取用户登录信息。
（1）一般写法：
$.ajax({
url: './login',
type: 'post',
contentType: 'application/json',
dataType:'json',
success: function(data) {
if(data.status === "success") {
// 登录成功，渲染header、nav
header.setInfo(data.headerInfo);
nav.setInfo(data.navInfo);
}
}
});
（2）使用观察者模式，可以很轻松地实现解耦！
$.ajax({
...,
success: function(data) {
if(data.status === "success") {
// 登录成功，发布登陆成功消息
login.trigger("loginsuccess", data);
}
}
});
var header = (function() {
// 监听消息
login.listen("loginsuccess", function(data){
header.setInfo(data.headerInfo);
});
return {
setInfo: function(data) {
console.log("设置header信息");
}
};
})();
var nav = (function() {
login.listen("loginsuccess", function(data){
nav.setInfo(data.navInfo);
});
return {
setInfo: function(data) {
console.log("设置nav信息");
}
}
})();
通用观察者模式的实现
三、通用观察者模式
/*
* 示例：
* Event.create("namespace1").listen('click', function(a){
* console.log(a);
* });
* Event.create("namespace1").trigger("click", 1);
*/
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 = [],
_create,
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 {
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, last) {
_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.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;
})();
希望本文所述内容对大家学习javascript程序设计有所帮助。