我们先引出问题的所在,这里使用一个订单系统:
在一个电子商务系统中,现在我们有订单模块,和信息模块两个主要模块,当下单成功时,我们用要发送订单信息的给客户。
下面是一个简单的解决办法,我们在一个类中调用另一个类的方法。
1 | // 订单类,存储订单的所有变量和函数 |
var subpub = {};
(function( subpub ){
var list = {};
subpub.publish = function(topic,msg){
for(var i = 0; i<list[topic].length; i++) {
list[topic]i;
}
}
subpub.subscribe = function( topic,listener){
if(!list[topic]) list[topic] = [];
list[topic].push(listener);
}
})( subpub )
// 测试
subpub.subscribe(‘foo’, function(msg){
alert(msg);
});
subpub.publish(‘foo’, ‘Hello World!’)
1 | 将这个事件管理小系统应用到之前的订单系统中,进行解耦。 |
function Order( goods ){
this.goods = goods;
}
Order.prototype = {
done: function(){
// 订单完成代码
this.sendSuccessMsg();
},
sendSuccessMsg: function(){
subpub.publish(‘order/done’,this.goods);
}
}
function Message(){
subpub.subscribe(‘order/done’,this.sendMsg);
}
Message.prototype = {
sendMsg: function( goods ){
alert(“商品名:”+goods.name+”\n”+”价格:”+goods.price);
}
//其它信息模块的方法
}
var message = new Message();
var order = new Order({ name:”索尼耳机”, price:100});
order.done() //弹出商品的信息
现在,我们发现Message和Order类不关心彼此如何实现。修改某个类中的函数不用考虑是否会影响到另一个类。不过有重要的一点是保存的事件标题。