A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 ljhsnmbb 于 2018-7-19 01:27 编辑

什么是观察者模式
维基百科对观察者模式的定义如下:

观察者模式是软件设计模式的一种。在此种模式中,一个目标对象管理所有相依于它的观察者对象,并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。

说的简单些,就是在数据发生改变时,对应的处理函数自动执行。维基的定义中涉及到了主动发出通知,按照这种方式,在angularJS中的事件广播更是中规中矩,但是其缺点是代码的可维护性较差。那么如果不进行主动通知,而是在进行对象属性值设置时,调用相关的处理函数,也可达到同等效果。如下见详细代码。ES5下的实现

在ES5中主要是通过Object.defineProperty方法定义对象属性的设置和获取,并在进行设置时执行相关的处理函数,代码示例如下:

// 创建对象var targetObj = {    age: 1}

// 定义值改变时的处理函数
function observer(oldVal, newVal) {   

  // 其他处理逻辑...   
console.info('name属性的值从 '+ oldVal +' 改变为 ' + newVal);}

// 定义name属性及其set和get方法
Object.defineProperty(targetObj, 'name', {  
  enumerable: true,  
  configurable: true,   
  get: function() {     
   return name;   
},   
  set: function(val) {   

    //调用处理函数     
   observer(name, val)   
   name = val;  
}});
targetObj.name = 'Martin';targetObj.name = 'Lucas';console.info('targetObj:', targetObj)

输出结果为

...name属性的值从 Martin 改变为 LucastargetObj: {age: 1, name: 'Lucas'}...

ES6的实现使用set方法实现
class TargetObj {    constructor(age, name) {   
    this.name = name;     
   this.age = age;   
}

  set name(val) {     
   observer(name, val);        
   name = val;   
}}

let targetObj = new TargetObj(1, 'Martin');
// 定义值改变时的处理函数

function observer(oldVal, newVal) {   

// 其他处理逻辑...  
  console.info('name属性的值从 '+ oldVal +' 改变为 ' + newVal);}targetObj.name = 'Lucas';console.info(targetObj)

输出结果为

...name属性的值从 Martin 改变为 LucastargetObj: {age: 1, name: 'Lucas'}...






4 个回复

正序浏览
优秀,奈斯
回复 使用道具 举报
回复 使用道具 举报
奈斯奈斯
回复 使用道具 举报
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马