-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·89 lines (89 loc) · 3.96 KB
/
index.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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html>
<head>
<script src="jquery.js"></script>
<script src="app.js"></script>
</head>
<body>
<div>
<h3>装饰者模式 Decorator Pattern</h3>
<p id="decorator-p">
装饰者模式是一种动态地往一个类中添加新的行为的设计模式。就功能而言，修饰模式相比生成子类更为灵活，这样可以给某个对象而不是整个类添加一些功能。</p>
<ul>
<li>+ 比静态继承更灵活</li>
<li>+ 避免类变得太过复杂</li>
<li>- 有许多小对象，难以学习</li>
</ul>
<button id="decorator-init">generate</button>
<button id="decorator-bold">bold</button>
<button id="decorator-red">red</button>
<button id="decorator-big">big</button>
<button id="decorator-unbold">unbold</button>
<button id="decorator-unred">unred</button>
<button id="decorator-unbig">unbig</button>
<button id="decorator-origin">origin</button>
</div>
<hr>
<div>
<h3>策略模式 Strategy Pattern</h3>
<ul>
<li>+ 抽象算法，便于重用</li>
<li>+ 消除了条件语句</li>
</ul>
<p>策略模式指的是代码的客户端可以用同一个接口，同时根据上下文从多个算法中选择一个用于处理特定任务的算法。</p>
<input type="text" id="strategy-name" placeholder="Username can not be empty">
<input type="text" id="strategy-num" placeholder='Phone Number should be number'>
<input type="submit" id="strategy-submit">
</div>
<hr>
<div>
<h3>代理模式（虚拟代理） Proxy Pattern</h3>
<p>代理模式是指一个类可以作为其它东西的接口。代理者可以作任何东西的接口：网络连接、存储器中的大对象、文件或其它昂贵或无法复制的资源。</p>
<ul>
<li>+ 虚拟代理可以进行最优化</li>
</ul>
<input type="checkbox" id="checkbox1">
<input type="checkbox" id="checkbox2">
<input type="checkbox" id="checkbox3">
<input type="checkbox" id="checkbox4">
</div>
<hr>
<div>
<h3>中介者模式 Mediator Pattern</h3>
<p>中介者模式是让一个对象充当各个对象相互通信的中介者，以促进各个对象的松耦合，提高可维护性。</p>
<ul>
<li>+减少了子类生成</li>
<li>+将各个对象解耦</li>
<li>+简化了对象协议</li>
<li>+对对象如何协作进行了抽象</li>
<li>-中介者自身可能会变得难以维护</li>
</ul>
</div>
<hr>
<div>
<h3>观察者模式（发布订阅模式） Observer Pattern</h3>
<p>观察者模式是指由一个目标对象管理所有依赖于它的观察者对象，并且在它本身的状态改变时主动发出通知。</p>
<ul>
<li>+目标和观察者之间的抽象耦合</li>
<li>+可以随时添加删除观察者</li>
</ul>
<button id="observer-publisher-greet">greet</button>
<button id="observer-subscribe-p1">subscribe1</button>
<button id="observer-subscribe-p2">subscribe2</button>
<button id="observer-subscribe-p3">subscribe3</button>
<button id="observer-unsubscribe-p1">unsubscribe1</button>
<button id="observer-unsubscribe-p2">unsubscribe2</button>
<button id="observer-unsubscribe-p3">unsubscribe3</button>
<p id="observer-publisher-p"></p>
<p id="observer-p1"></p>
<p id="observer-p2"></p>
<p id="observer-p3"></p>
</div>
<hr>
<footer>
<h3>参考文献</h3>
<p>1、GoF. 设计模式 可复用面向对象软件的基础. 机械工业出版社. 2000</p>
<p>2、Stoyan Stefanov. JavaScript模式. 中国电力出版社. 2012</p>
<p>3、曾探. JavaScript设计模式与开发实践. 人民邮电出版社. 2015</p>
</footer>
</body>
</html>