Appearance
工厂模式
介绍
- 将 new 操作单独封装
- 遇到 new 时，就要考虑是否该使用工厂模式
示例
- 你去购买汉堡，直接点餐、取餐，不会自己亲手做
- 商店要“封装”做汉堡的工作，做好直接给买者
传统 UML 类图
简化 UML 类图
JavaScript 代码演示
javascript
class Product {
constructor(name) {
this.name = name
}
init() {
alert('init')
}
fun1() {
alert('fun1')
}
fun2() {
alert('fun2')
}
}
class Creator {
create(name) {
return new Product(name);
}
}
// 测试
let creator = new Creator();
let p = creator.create('p1');
p.init()
p.fun1()
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
JQuery
$('div'), 和 new $('div') 有何区别
- 第一：书写麻烦，jQuery 的链式操作将成为噩梦
- 第二：一旦 jQuery 名字变化，将是灾难性的
javascript
class jQuery {
constructor(selector) {
let slice = Array.prototype.slice;
let dom = slice.call(document.querySelectorAll(selector));
let len = dom ? dom.length : 0
for (let i = 0; i < len; 1++) {
this[i] = dom[i]
}
this.length = len;
this.selector = selector;
}
append(node) {
console.log(node);
}
addClass(name) {
console.log(name);
}
html(data) {
console.log(data);
}
// 此处省路若干 API
};
window.$ = function (selector) {
return new jQuery(selector)
}
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
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
设计原则验证
- 构造函数和创建者分离
- 符合开放封闭原则