设计模式是一套被反复使用的代码，作用是为了重用代码，工程化
proxy 代理
1
2
|
let p = new Proxy(target, handler);
|
p是一个被代理后的新对象,它拥有target的一切属性和方法.只不过其行为和结果是在handler中自定义的.
handler 对象是由 get和set 两个函数方法组成的
这两个方法会在一个对象被 get 和 set 时被调用执行,
以代替原生对象上的操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| let obj = {
a: 1,
b: 2,
}
const p = new Proxy(obj, {
get(target, key, value) {
if (key === 'c') {
return '我是自定义的一个结果';
} else {
return target[key];
}
},
set(target, key, value) {
if (value === 4) {
target[key] = '我是自定义的一个结果';
} else {
target[key] = value;
}
}
})
console.log(obj.a)
console.log(obj.c)
console.log(p.a)
console.log(p.c)
obj.name = '李白';
console.log(obj.name);
obj.age = 4;
console.log(obj.age);
p.name = '李白';
console.log(p.name);
p.age = 4;
console.log(p.age);
|
proxy 和 defineProperty (发布订阅)区别
Proxy 直接可以劫持整个对象,并返回一个新对象
Porxy 可以直接监听数组变化
等
工厂模式
类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果
1
2
3
4
5
6
7
8
9
10
11
12
| function CreatePerson(name,age,sex) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sex = sex;
obj.sayName = function(){
return this.name;
}
return obj;
}
var p1 = new CreatePerson("longen",'28','男');
var p2 = new CreatePerson("tugenhua",'27','女');
|
解决多个类似对象声明的问题，也就是为了解决实列化对象产生重复的问题。
工厂模式最重要的优点是：
可以实现一些相同的方法，这些相同的方法我们可以放在父类中编写代码，
那么需要实现具体的业务逻辑，那么可以放在子类中重写该父类的方法，去实现自己的业务逻辑；
第一：弱化对象间的耦合，防止代码的重复。在一个方法中进行类的实例化，可以消除重复性的代码。
第二：重复性的代码可以放在父类去编写，子类继承于父类的所有成员属性和方法，子类只专注于实现自己的业务逻辑。
单体模式(单例模式)
单体模式是一个用来 划分命名空间 并将 一批属性和方法组织在一起的对象，如果它可以被实例化，那么它 只能被实例化一次。
保证一个类仅有一个实例，并提供一个访问它的全局访问点
- 字面量划分命名空间，减少全局变量
- 组织一批 属性和方法，易于维护
- 仅能被实例化一次
通过 对象字面量创建单体模式
使用一个变量来 标识该类是否被实例化，如果未被实例化的话，那么我们可以实例化一次，否则的话，直接返回已经被实例化的对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var Singleton = function(name){
this.name = name;
this.instance = null;
};
Singleton.prototype.getName = function(){
return this.name;
}
function getInstance(name) {
if(!this.instance) {
this.instance = new Singleton(name);
}
return this.instance;
}
var a = getInstance("aa");
var b = getInstance("bb");
|
例：弹窗盒子
使用单体模式来实现弹窗效果，只需实例化一次
而不是每次创建、删除 DOM 节点，消耗性能
模块模式
以对象字面量的形式，向外暴露单例模式内部的 私有变量和方法
1
2
3
4
5
6
7
8
9
10
11
12
13
| var singleMode = (function(){
var privateNum = 112;
function privateFunc(){
}
return {
publicMethod1: publicMethod1,
publicMethod2: publicMethod1
};
})();
|