Jiahonzheng's Blog

原生 JavaScript 实现观察者模式

字数统计: 249阅读时长: 1 min
2018/04/14 Share

ES5 下的实现

在 ES5 中,我们通过 Object.defineProperty 方法定义对象属性的设置和获取,并在进行设置时执行相关的处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 创建对象
var targetObj = {
age: 1
};

// 定义值改变时的处理函数
function observer(oldVal, newVal) {
console.log('name属性的值从' + oldVal + '改变为' + newVal);
}

Object.defineProperty(targetObj, 'name', {
enumerable: true,
configurable: true,
get: function() {
return name;
},
set: function(val) {
observer(name, val);
name = val;
}
});

targetObj.name = 'Test A'; // name属性的值从改变为Test A
targetObj.name = 'Test B'; // name属性的值从Test A改变为Test B

ES6 下的实现

在 ES6 中,我们通过使用 set 方法在设置对象属性时进行相关处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class TargetObj {
constructor(name) {
this.name = name;
}
set name(val) {
observer(name, val);
name = val;
}
}

// 定义值改变时的处理函数
function observer(oldVal, newVal) {
console.log('name属性的值从' + oldVal + '改变为' + newVal);
}

let targetObj = new TargetObj('Test A'); // name属性的值从改变为Test A

targetObj.name = 'Test B'; // name属性的值从Test A改变为Test B
CATALOG
  1. 1. ES5 下的实现
  2. 2. ES6 下的实现