首页 > 其他 > 详细

观察者模式

时间:2019-07-17 14:33:29      阅读:101      评论:0      收藏:0      [点我收藏+]

1. 定义

观察者模式   一种对象行为模式。它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。

2.作用   促进形成松散耦合

3.相关代码

普通对象实现

技术分享图片
    var subject0=function(){
      console.log(‘subject0‘);
    }

    var subject1=function(){
      console.log(‘subject1‘);
    }

    var observer={
      callbacks:[],
      add:function(subject){
        this.callbacks.push(subject)
      },
      publish:function(){
        this.callbacks.forEach(function(item){
          item()
        })
      }
    }

    observer.add(subject0);
    observer.add(subject1);

    observer.publish();
View Code

class 方式实现

技术分享图片
    var subject0=function(){
      console.log(‘subject0‘);
    }

    var subject1=function(){
      console.log(‘subject1‘);
    }

    class Observer{
      constructor(){
        this.subjects=[]
      }      

      add(subject){
        this.subjects.push(subject)
      }
      publish(){
        this.subjects.forEach(function(item){
          item()
        })
      }
    }

    var observer1=new Observer()
    observer1.add(subject0);
    observer1.add(subject1);

    observer1.publish();
View Code

改造 ajax 实例 前

技术分享图片
$.ajax({
  url: "test.html",
  context: document.body
}).done(function(data) {
  //data数据的处理
  $(‘aaron1‘).html(data.a)
  $(‘aaron2‘).html(data.b)
  $(‘aaron3‘).html(data.c)
  //其余处理
});
View Code

改造 ajax 实例 后

技术分享图片
Observable.add(function() {
  //pocessData
})

Observable.add(function() {
  $(‘aaron1‘).html(data.a)
  $(‘aaron2‘).html(data.b)
  $(‘aaron3‘).html(data.c)
})

Observable.add(function() {
  //pocessOther
})

$.ajax({
  url: "test.html",
  context: document.body
}).done(function(data) {
  Observable.fire(data)
})
View Code

jQuery工具方法Callbacks详解

 

观察者模式

原文:https://www.cnblogs.com/justSmile2/p/11200236.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!