码迷,mamicode.com
首页 > 编程语言 > 详细

javascript设计模式——观察者模式

时间:2015-06-16 18:25:59      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:

网上看很多的例子,也翻很多电子书!无意间看了这位朋友的笔记让我顿悟了!希望对你也有所帮助!!!

地址:http://ju.outofmemory.cn/entry/106079

理解观察者模式

简单的讲,一个对象作为特定任务或是另一对象的活动的观察者,并且在这个任务或活动发生时,利用事件的形式通知观察者。

观察者的使用场合

当一个对象的改变需要同时改变其它对象,并且它不知道具体有多少对象需要改变的时候,就应该考虑使用观察者模式。

例如,用户A,B,C分别订阅某服务,当服务有更新是可设定更新、下载等操作。

模拟实现

定义Observable对象,其内部包含了2个方法:add(订阅)与fire(发布)方法

// 观察者
var Observable = {
  callbacks: [],
  add: function(fn) {
    this.callbacks.push(fn);
  },
  fire: function() {
    this.callbacks.forEach(function(fn) {
      fn();
    })
  }
}
订阅

Observable.add(function() {
     console.log(1);
 })
 Observable.add(function() {
     console.log(2);
 })
发布

Observable.fire();     // 1, 2

  

实际应用

实际业务中,如请求某个ajax后需要执行多个方法,数据处理、渲染页面、其他业务等,可以使用观察者

Observable.add(function() {
   //pocessData
 })
 
 Observable.add(function() {
   $(‘test‘).html(data.a)
   $(‘test2‘).html(data.b)
   $(‘test3‘).html(data.c)
 })
 
 Observable.add(function() {
   //pocessOther
 })
 
 $.ajax({
   url: "test.html",
   context: document.body
 }).done(function(data) {
   Observable.fire(data)
 })

  //在没看模式时我写法会是

 $.ajax({
   url: "test.html",
   context: document.body
 }).done(function(data) {
   $(‘test‘).html(data.a);
   $(‘test2‘).html(data.b);
   $(‘test3‘).html(data.c);
 })

看看,觉得没有什么问题存在!完全是实现了一样的功能!!

这时,项目要求在此基础上添加另外一个功能!假如为‘系统推荐产品‘这样一个功能!这时怎么改呢?没错,我de写法就是在原来的基础上加代码!没什么问题吗??

虽然功能也实现了, 但如果功能要求替换!怎么办,是不是要去找到以前的代码删除了重写,并且还要检查以前是否还有其他引用的指针!这怎么改,还不如全部删除重写,来得痛快。

但使用观察者模式,就解决这个问题,顺便你怎么添加,怎么修改,我一个通知就ok了,还不用担心弄坏以前的代码或者同事的代码!

设计模式这东西我也刚接触!有什么不对de地方!请指正!谢谢!

 

javascript设计模式——观察者模式

标签:

原文地址:http://www.cnblogs.com/yc-code/p/4581287.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!