本文实例讲述了JavaScript编程设计模式之观察者模式。分享给大家供大家参考，具体如下：
简介
简单的解释观察者模式，就是一个对象（subject）维护一个依赖他的对象（observers）列表，当自身状态发生变化时，自动通知所有观察者对象。当某个对象不需要获得通知时，可以从对象列表中删除掉。
从上面的解释中我们可以提炼出三个componet： Subject， ObserverList和Observer，用JS实现很简单：
-1 && index < this.observerList.length ){
return this.observerList[ index ];
}
};
ObserverList.prototype.Insert = function( obj,index ){
var pointer = -1;
if( index === 0 ){
this.observerList.unshift( obj );
pointer = index;
}else if( index === this.observerList.length ){
this.observerList.push( obj );
pointer = index;
}
return pointer;
};
ObserverList.prototype.IndexOf = function( obj,startIndex ){
var i = startIndex,pointer = -1;
while( i < this.observerList.length ){
if( this.observerList[i] === obj ){
pointer = i;
}
i++;
}
return pointer;
};
ObserverList.prototype.RemoveAt = function( index ){
if( index === 0 ){
this.observerList.shift();
}else if( index === this.observerList.length -1 ){
this.observerList.pop();
}
};
// Extend an object with an extension
function extend( extension,obj ){
for ( var key in extension ){
obj[key] = extension[key];
}
}
最后定义一个观察者对象，实现update方法
当有多个观察者，只需扩展上面的基本对象，并重写Update方法。
尽管观察则模式被广泛使用，但在JS中经常使用它的变体： 发布订阅模式
发布订阅模式通过一个topic/event通道，解耦了观察者模式中Subject（发布者）和Observer（订阅者）之间耦合的问题，在JS中被广泛使用。
下面简单的例子说明了使用发布订阅模式的基本结构
Box/newMessage".
// Render a preview of new messages
var subscriber1 = subscribe( "inBox/newMessage",function( topic,data ) {
// Log the topic for debugging purposes
console.log( "A new message was received: ",topic );
// Use the data that was passed from our subject
// to display a message preview to the user
$( ".messageSender" ).html( data.sender );
$( ".messagePreview" ).html( data.body );
});
// Here's another subscriber using the same data to perform
// a different task.
// Update the counter displaying the number of new
// messages received via the publisher
var subscriber2 = subscribe( "inBox/newMessage",data ) {
$('.newMessageCounter').html( mailCounter++ );
});
publish( "inBox/newMessage",[{
sender:"hello@google.com",body: "Hey there! How are you doing today?"
}]);
// We could then at a later point unsubscribe our subscribers
// from receiving any new topic notifications as follows:
// unsubscribe( subscriber1,);
// unsubscribe( subscriber2 );
发布订阅模式的实现
许多Js库都很好的实现了发布订阅模式，例如Jquery的自定义事件功能。
简单实现
使用方法
Box/newMessage",messageLogger );
// Publishers are in charge of publishing topics or notifications of
// interest to the application. e.g:
pubsub.publish( "inBox/newMessage","hello world!" );
// or
pubsub.publish( "inBox/newMessage",["test","a","b","c"] );
// or
pubsub.publish( "inBox/newMessage",{
sender: "hello@google.com",body: "Hey again!"
});
// We cab also unsubscribe if we no longer wish for our subscribers
// to be notified
// pubsub.unsubscribe( subscription );
// Once unsubscribed,this for example won't result in our
// messageLogger being executed as the subscriber is
// no longer listening
pubsub.publish( "inBox/newMessage","Hello! are you still there?" );
更多关于JavaScript相关内容可查看本站专题：《》、《》、《》、《》、《》、《》及《用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
原文链接：https://www.f2er.com/js/35595.html