Mutoo
2014-04-16 09:16:49 +08:00
假设你有一个时钟模块,clock。一般情况你会这样写
clock.tick = function() {
// update time ...
/* display time */
$("#clock").val(clock.getTime());
};
这里的 $("#clock").val() 就是一个很直观的函数调用。
但是这样做的话,这个模块和界面元素"#clock"产生了耦合(coupling)。
也就是说,这段代码与一个叫"clock"的div产生了紧密关联,你没办法把它用在其它地方(当然除非你把"#clock"一起搬运)。
为了让clock模块更具有通用性,需要为它解耦。目的是可以在不同的地方很方便使用这个模块。所以引入了一种设计模式,叫“观察者”模式。
clock.tick = function() {
// update time
/* dispatch time */
clock.trigger("tick", clock.getTime());
};
现在 clock 已经不关心它应该去更新哪些界面组件了。它要做的只是“告知”时间的变更。
那么谁应该更新界面组件呢?当然是界面组件自己啊。他们可以主动“关心”时间变更这个事件,然后对自己的内容进行修改:
clock.bind("tick", function(new_time){
$("#clock").val(new_time);
});
于是这个 clock 模块与界面元素成功解耦,你可以把它用在不同的项目里面。我们也可以在同一个项目里很方便的增加一些新的“订阅者”:
clock.bind("tick", function(new_time){
console.log(new_time);
});