黑马程序员技术交流社区

标题: 【上海校区】原生JavaScript实现观察者模式 [打印本页]

---

作者: ljhsnmbb    时间: 2018-7-19 01:13
标题: 【上海校区】原生JavaScript实现观察者模式


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

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

说的简单些，就是在数据发生改变时，对应的处理函数自动执行。维基的定义中涉及到了主动发出通知，按照这种方式，在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'}...

---

作者: wuqiong    时间: 2018-7-19 14:24

---

作者: 不二晨    时间: 2018-7-19 14:26
奈斯奈斯

---

作者: 吴琼老师    时间: 2018-7-19 16:43

---

作者: 不二晨    时间: 2018-7-20 11:04
优秀，奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2