本文展示了JavaScript设计模式的观察者模式。分享给大家参考，如下：

观察者模式

观察者模式，也称为发布/订阅模式，定义了一对多的关系，允许多个观察者对象同时收听一个主题对象。当主体对象的状态发生变化时，所有观察者对象都会得到通知，这样它们就可以自动更新自己。

*分为两个角色：(1)观察者(2)被观察*观察者模式的目的：观察程序内部的变化，当有变化时，可以知道并做出相应的反应。

现在我们通过一个需求来学习这个模型：模拟订户和报纸之间的关系

在这个过程中：实际操作分为(推模式、取模式)

(1)推-长连接技术(2)采取模式-定期去后台获取

用代码实现如下：

(1)发布类

//发布类函数业务一(名称){this。name=name//订阅服务器集合this . subscribers=new Array()；}(2)扩展发布者发布消息的方法(推送模式)

//发布者发送消息的方法(推送模式)business one . prototype . delive=function(news){ var self=this；//在此发布消息。subscribers . foreach(function(fn){//调用接收者的function fn(news，self)来处理信息；})}(3)扩展公共订阅功能和取消订阅功能

订阅功能：

function . prototype . subscribe=function(publisher){ var=this；//有的访问数组度类型I，以参数的形式返回给回调函数。//只要回报至少有一次是真的，那么有的就是真的。var已经存在=publisher。订户。some(function(El){ if(El==that){//处理不能重复订阅的函数返回；} });//可以订阅if(！已存在){ publisher.subscribers.push(即)；}退回这个；}取消的功能：

function . prototype . unsubscribe=function(publisher){ var=this；出版人的本质。订阅者=发布者。订户。filter(函数(El) {//filter是返回对象集if(el！==那){返回El；} });归还这个；}(4)创建发布的实例

//创建发布者的实例var B1=new business one(' CCTV ')；Var b2=新商业一(《中国国防部报》)；(5)释放部分

(5.1)使用门面模式——针对各浏览器事件绑定的兼容性问题

函数addEventFacade(el，type，fn){ if(window . addeventlistener){//Firefox El . addeventlistener(type，fn)；} else if(window . attachevent){//IE El . attachevent(' on '类型，fn)被使用；} else { El[' on ' type]=fn；}}(5.2)创建主应用程序功能

var in int=function(){//create observer var page one=function(news){ document。getelementbyid ('info ')。value='我找到了由' '['参数[1]发送的消息。名称'] -新闻}；//订阅1pageone.subscribe (B1)。订阅(B2)；addEventFacade(document . getelementbyid(' CCTV ')，' click '，function(){ B1 . delive(document . getelementbyid(' CCTV text ')。值)；})//订阅2 addeventfacade(document . getelementbyid(' gfb ')，' click '，function(){ B2 . delive(document . getelementbyid(' gfb text ')。值)；})}最后，用户界面

body on load=' in int()' div id=' div 01 '/div Script type=' text/JavaScript ' src=' http : observer . js '/Script输入类型=' button '值=' CCTV send' id=' CCTV '输入类型=' text ' id=' cc text ' brbrbrinputype=' button '值='国防报纸send' id='gfb '输入类型=' text ' id=' gfbtext ' brtextarea id=' info ' cols=' 6s '

(1)闭路电视模块

(2)gfb的作用是：

补充：以上使用的forEach方法和filter方法的代码为：

function . prototype . method=function(name，fn){ this . prototype[name]=fn；归还这个；};if(！array . prototype . forEach){ array . method(' forEach '，function(fn，this obj){ var scope=this obj | | window；for(var I=0；len this.lengthI) {//这样写不是简单的函数调用，而是调用函数的同事重新定位了这个fn.call(scope，this[i]，I，this)；} });}//数组过滤器if(！array . prototype . filter){ array . method(' filter '，function(fn，this obj){ var scope=this obj | | window；var a=[]；for(var I=0；我这个长度；I) {//看过滤功能，真的留下来删除if(！Fn。call (scope，this [I]，I，this)){//过滤的本质是返回除了与当前对象相等的对象集之外的所有已用对象集。推(这个[我])；}//返回一个新数组返回一个；});}摘要：

1.支持简单的广播通信，并自动通知所有听众。

2.加载页面时，被观察对象很容易与观察者产生动态关系，增加灵活性。

3.被观察对象和观察者之间的抽象耦合关系可以独立扩展和重用。

有关JavaScript的更多信息，请查看本网站的专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》和《JavaScript数学运算用法总结》

希望本文对JavaScript编程有所帮助。