# 十二.享元模式
前言
- 共享内存，节约内存空间
- 相同的数据共享使用
- 主要还是对数据、方法共享分离，将数据的方法分为内部数据、内部方法和外部数据、外部方法
- 内部状态保存在对象内部，通常不会改变，可以共享
- 外部状态保存在对象外部，可以随场景改变，不可以共享
# 1.类图
# 2.代码
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.getName = function() {
return this.name;
};
Person.prototype.getAge = function() {
return this.age;
};
let p1 = new Person();
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 3.案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<input type="radio" value="red" name="color" />红色
<input type="radio" value="red" name="yellow" />黄色
<input type="radio" value="red" name="blue" />蓝色
<button onclick="draw()">绘制</button>
<div id="container"></div>
<script>
class MyDiv {
constructor() {
this.element = document.createElement("div");
}
setColor(color) {
this.element.style = `width:100px;height:100px;background-color:${color}`;
}
}
let myDiv = new MyDiv();
function draw() {
let btns = Array.from(document.getElementsByName("color"));
let btn = btns.find((item) => item.checked);
let color = btn ? btn.value : "red";
let div = document.createElement("div");
myDiv.setColor(color);
document.getElementById("container").appendChild(div);
}
</script>
</body>
</html>
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
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