工厂模式(Factory mode)
普通工厂模式,就是建立一个工厂类,对实现了同一接口的一些类进行实例的创建。首先看下关系图:
工厂模式就是我们提供一个模子,然后通过这个模子复制出需要的对象。我们需要多少个,就复制多少个
var createPerson = function (name, age) {
// 声明一个中间对象,该对象就是工厂模式的模子
var o = new Object();
// 依次添加我们需要的属性与方法
o.name = name;
o.age = age;
o.getName = function () {
return this.name;
};
return o;
};
// 创建两个实例
var perTom = createPerson("TOM", 20);
var PerJake = createPerson("Jake", 22);
观察者模式(Observer mode)
指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行。
const person = observable({
name: "张三",
age: 20,
});
function print() {
console.log(`${this.name}, ${this.age}`);
}
observe(print);
person.name = "李四";
// 输出 李四, 20
const p2 = observable({
name: "易烊千玺",
age: "17",
});
p2.name = "TFBoys易烊千玺";
// 输出 TFBoys易烊千玺, 17
上面代码中,数据对象 person 是观察目标,函数 print 是观察者。一旦数据对象发生变化,print就会自动执行。
下面,使用 Proxy 写一个观察者模式的最简单实现,即实现 observable 和 observe 这两个函数。思路是 observable 函数返回一个原始对象的 Proxy 代理,拦截赋值操作,触发充当观察者的各个函数。
const queuedObservers = new Set();
const observe = (fn) => queuedObservers.add(fn);
const observable = (obj) => new Proxy(obj, { set });
function set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
queuedObservers.forEach((observer) => observer.apply(receiver));
return result;
}
参考资料:阮一峰 ECMAScript6 入门