-
Notifications
You must be signed in to change notification settings - Fork 16
/
30.设计模式.htm
193 lines (177 loc) · 71.2 KB
/
30.设计模式.htm
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<!-- saved from url=(0080)https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5bdc74186fb9a049ab0d0b6b -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover"><meta name="google-site-verification" content="cCHsgG9ktuCTgWgYfqCJql8AeR4gAne4DTZqztPoirE"><meta name="apple-itunes-app" content="app-id=987739104"><meta name="baidu-site-verification" content="qiK2a1kcFc"><meta name="360-site-verification" content="4c3c7d57d59f0e1a308462fbc7fd7e51"><meta name="sogou_site_verification" content="c49WUDZczQ"><style>body {
font-size: 16px;
line-height: 2;
}
a, button, input {
margin: 1rem 1.5rem;
}
img {
width: 0;
height: 0;
}
#juejin {
overflow-x: hidden;
}</style><title data-vue-meta="true">前端面试之道 - yck - 掘金小册</title><link rel="apple-touch-icon" sizes="180x180" href="https://b-gold-cdn.xitu.io/favicons/v2/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon-16x16.png"><link rel="manifest" href="https://b-gold-cdn.xitu.io/favicons/v2/manifest.json"><link rel="mask-icon" href="https://b-gold-cdn.xitu.io/favicons/v2/safari-pinned-tab.svg" color="#5bbad5"><link rel="shortcut icon" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon.ico"><meta name="msapplication-config" content="https://b-gold-cdn.xitu.io/favicons/v2/browserconfig.xml"><meta name="theme-color" content="#ffffff"><link rel="search" title="掘金" href="https://b-gold-cdn.xitu.io/conf/search.xml" type="application/opensearchdescription+xml"><link rel="stylesheet" href="./30.设计模式_files/ionicons.min.css"><link rel="stylesheet" href="./30.设计模式_files/iconfont.css"><link href="./30.设计模式_files/0.6c6fc7db91a7d5cf8ffb.css" rel="stylesheet"><script async="" src="./30.设计模式_files/hm.js"></script><script async="" src="./30.设计模式_files/analytics.js"></script><script type="text/javascript" async="" src="./30.设计模式_files/vds.js"></script><script charset="utf-8" src="./30.设计模式_files/12.25eae53404ada9976238.js"></script><meta data-vmid="keywords" name="keywords" content="掘金,稀土,Vue.js,微信小程序,Kotlin,RxJava,React Native,Wireshark,敏捷开发,Bootstrap,OKHttp,正则表达式,WebGL,Webpack,Docker,MVVM" data-vue-meta="true"><meta data-vmid="description" name="description" content="掘金是一个帮助开发者成长的社区，是给开发者用的 Hacker News，给设计师用的 Designer News，和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货，其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时，掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户，我们相信你也可以在这里有所收获。" data-vue-meta="true"><script async="" src="./30.设计模式_files/aliplayer-min.js"></script></head><body><div id="juejin" data-v-35e99930=""><div class="global-component-box" data-v-35e99930=""><!----><div data-v-330b09d9="" data-v-35e99930="" class="alert-list alert-list"></div><!----><!----><!----><div class="emoji-barrage" data-v-0f3d7540="" data-v-35e99930=""><!----></div><div class="book-new-user-award-popup" style="display:none;" data-v-1596580a="" data-v-35e99930=""><div class="content-box" style="display:;" data-v-1596580a=""><div class="close ion-close-round" data-v-1596580a=""></div><div class="header" data-v-1596580a=""><div class="icon" data-v-1596580a=""><img src="./30.设计模式_files/icon.a87e5ae.svg" data-v-1596580a=""></div><div class="txt" data-v-1596580a="">新人专享好礼</div></div><div class="desc" data-v-1596580a="">凡未购买过小册的用户，均可领取三张 5 折新人专享券，购买小册时自动使用专享券，最高可节省 45 元。</div><div class="tickets" data-v-1596580a=""><div class="ticket" data-v-1596580a=""><div class="ticket__inner" data-v-1596580a=""><div class="enjoy" data-v-1596580a=""><span class="new-title" data-v-1596580a="">小册新人 5 折券</span></div><div class="sale" data-v-1596580a="">最高可省 15 元</div></div></div><div class="ticket" data-v-1596580a=""><div class="ticket__inner" data-v-1596580a=""><div class="enjoy" data-v-1596580a=""><span class="new-title" data-v-1596580a="">小册新人 5 折券</span></div><div class="sale" data-v-1596580a="">最高可省 15 元</div></div></div><div class="ticket" data-v-1596580a=""><div class="ticket__inner" data-v-1596580a=""><div class="enjoy" data-v-1596580a=""><span class="new-title" data-v-1596580a="">小册新人 5 折券</span></div><div class="sale" data-v-1596580a="">最高可省 15 元</div></div></div></div><div class="remark" data-v-1596580a="">注：专享券的使用期限在领券的七天内。</div><div class="submit-btn" data-v-1596580a="">一键领取</div></div><div class="model success" style="display:none;" data-v-1596580a=""><div class="heading" data-v-1596580a="">领取成功</div><div class="content-text" data-v-1596580a="">购买小册时自动使用专享券</div><div class="btn-success-footer" data-v-1596580a=""><div class="btn-ok" data-v-1596580a="">知道了</div><div class="btn-ok btn-link" data-v-1596580a="">前往小册首页</div></div></div><div class="model fail" style="display:none;" data-v-1596580a=""><div class="heading" data-v-1596580a="">领取失败</div><div class="content-text" data-v-1596580a="">本活动仅适用于小册新用户</div><div class="btn-ok" data-v-1596580a="">知道了</div></div></div><!----><!----><div class="bind-phone-number-modal-box" data-v-b421b7f4="" data-v-35e99930=""><div st:block="bindPhoneNumberModal" class="modal-mask" style="display:none;" data-v-b421b7f4=""></div><form class="bind-phone-number-form" style="display:none;" data-v-b421b7f4=""><i title="关闭" class="close-btn ion-close-round" data-v-b421b7f4=""></i><h1 class="title" data-v-b421b7f4="">提示</h1><h2 class="hint" data-v-b421b7f4="">根据我国<a href="http://www.npc.gov.cn/npc/xinwen/2016-11/07/content_2001605.htm" target="_blank" style="color:#007fff">《网络安全法》</a>，您需要绑定手机号后才可在掘金社区内发布内容。</h2><div class="input-group" data-v-b421b7f4=""><div class="input-box" data-v-b421b7f4=""><input maxlength="64" placeholder="请输入要绑定的手机号码" value="" class="input" data-v-b421b7f4=""></div><!----><!----></div><button st:name="bindBtn" class="btn" data-v-b421b7f4="">绑定手机</button></form></div></div><!----><div data-v-54b8e7d6="" data-v-35e99930="" class="book-read-view"><section data-v-54b8e7d6="" class="book-section"><div data-v-54b8e7d6="" class="book-summary"><div data-v-54b8e7d6="" class="book-summary-masker"></div><div data-v-54b8e7d6="" class="book-summary-inner"><div data-v-54b8e7d6="" class="book-summary__header"><a data-v-54b8e7d6="" href="https://juejin.im/books" target="" rel="" class="logo"><img data-v-54b8e7d6="" src="./30.设计模式_files/logo.a7995ad.svg"></a><div data-v-54b8e7d6="" class="label">小册</div><!----></div><!----><div data-v-d0eb2184="" data-v-54b8e7d6="" class="book-directory book-directory bought"><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">1</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">小册食用指南</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">2</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 基础知识点及常考面试题（一）</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">3</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 基础知识点及常考面试题（二）</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">4</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">ES6 知识点及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">5</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 异步编程及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">6</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">手写 Promise</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">7</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Event Loop</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">8</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 进阶知识点及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">9</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 思考题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">10</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">DevTools Tips</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">11</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">浏览器基础知识点及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">12</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">浏览器缓存机制</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">13</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">浏览器渲染原理</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">14</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">安全防范知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">15</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">从 V8 中看 JS 性能优化</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">16</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">性能优化琐碎事</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">17</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Webpack 性能优化</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">18</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">实现小型打包工具</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">19</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">React 和 Vue 两大框架之间的相爱相杀</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">20</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Vue 常考基础知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">21</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Vue 常考进阶知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">22</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">React 常考基础知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">23</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">React 常考进阶知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">24</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">监控</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">25</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">UDP</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">26</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">TCP</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">27</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">HTTP 及 TLS</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">28</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">HTTP/2 及 HTTP/3</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">29</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">输入 URL 到页面渲染的整个流程</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section route-active section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">30</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">设计模式</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">31</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">常见数据结构</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">32</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">常考算法题解析</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">33</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">CSS 常考面试题资料</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">34</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">如何写好一封简历</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">35</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">面试常用技巧</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">36</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">前方的路，让我们结伴同行</div><!----><!----></div><!----></a></div><div data-v-54b8e7d6="" class="book-summary__footer"><div data-v-54b8e7d6="" class="qr-icon"><img data-v-54b8e7d6="" src="./30.设计模式_files/qr-icon.881015a.svg"></div><div data-v-54b8e7d6="" class="qr-tips"><span data-v-54b8e7d6="" class="ion-close"></span><div data-v-54b8e7d6="" class="title"><span data-v-54b8e7d6="">关注公众号</span><span data-v-54b8e7d6="">领取优惠码</span></div><div data-v-54b8e7d6="" class="qr-img"><img data-v-54b8e7d6="" src="./30.设计模式_files/wx-qr.13d8b4d.png"></div></div></div></div></div><div data-v-54b8e7d6="" class="book-content"><div data-v-54b8e7d6="" class="book-content-inner"><div data-v-54b8e7d6="" class="book-content__header visible"><div data-v-54b8e7d6="" class="switch"><img data-v-54b8e7d6="" src="./30.设计模式_files/icon.3e69d5a.svg"></div><div data-v-54b8e7d6="" class="menu"><img data-v-54b8e7d6="" src="./30.设计模式_files/menu.74b9add.svg"></div><div data-v-54b8e7d6="" class="title"><a data-v-54b8e7d6="" href="https://juejin.im/book/5bdc715fe51d454e755f75ef" target="" rel="">前端面试之道</a></div><div data-v-ad718278="" data-v-54b8e7d6="" class="user-auth user-auth"><div data-v-ad718278="" class="nav-item menu"><div data-v-6795359b="" data-v-67a669a2="" data-v-ad718278="" data-src="https://mirror-gold-cdn.xitu.io/168e08e4f81e924deaa?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar loaded" style="background-image: url("https://mirror-gold-cdn.xitu.io/168e08e4f81e924deaa?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1");"></div><div data-v-ad718278="" class="nav-menu user-dropdown-list" style="display: none;"><ul data-v-ad718278="" class="nav-menu-item-group"><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278=""><i data-v-ad718278="" class="fengwei fw-write"></i><span data-v-ad718278="">写文章</span></a></li><!----><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278=""><i data-v-ad718278="" class="fengwei fw-draft"></i><span data-v-ad718278="">草稿</span></a></li></ul><ul data-v-ad718278="" class="nav-menu-item-group"><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/user/5aa105a7518825555f0c8a90"><i data-v-ad718278="" class="fengwei fw-person"></i><span data-v-ad718278="">我的主页</span></a></li><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/user/5aa105a7518825555f0c8a90/likes"><i data-v-ad718278="" class="fengwei fw-like"></i><span data-v-ad718278="">我喜欢的</span></a></li><!----><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/user/5aa105a7518825555f0c8a90/collections"><i data-v-ad718278="" class="fengwei fw-collection"></i><span data-v-ad718278="">我的收藏集</span></a></li><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/user/5aa105a7518825555f0c8a90/books?type=bought"><i data-v-ad718278="" class="fengwei fw-bought"></i><span data-v-ad718278="">已购</span></a></li><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/subscribe"><i data-v-ad718278="" class="fengwei fw-tag"></i><span data-v-ad718278="">标签管理</span></a></li></ul><ul data-v-ad718278="" class="nav-menu-item-group"><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/user/settings"><i data-v-ad718278="" class="fengwei fw-setting"></i><span data-v-ad718278="">设置</span></a></li><li data-v-ad718278="" class="nav-menu-item more"><a data-v-ad718278=""><i data-v-ad718278="" class="fengwei fw-info"></i><span data-v-ad718278="">关于</span><i data-v-ad718278="" class="ion-chevron-right more-icon"></i></a><div data-v-ad718278="" class="nav-menu more-dropdown-list"><ul data-v-ad718278="" class="nav-menu-item-group"><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/app" target="_blank">下载应用</a></li><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/about" target="_blank">关于</a></li><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://xitu.io/jobs" target="_blank">加入我们</a></li><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://github.com/xitu/gold-miner" rel="nofollow noopener noreferrer" target="_blank">翻译计划</a></li><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://bd.juejin.im/?utm_campaign=bd&utm_source=web&utm_medium=nav" target="_blank">合作伙伴</a></li></ul></div></li></ul><ul data-v-ad718278="" class="nav-menu-item-group"><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278=""><i data-v-ad718278="" class="fengwei fw-logout"></i><span data-v-ad718278="">登出</span></a></li></ul></div></div><!----></div><!----></div><div data-v-54b8e7d6="" class="book-body transition--next"><div data-v-4842038c="" data-v-54b8e7d6="" class="section-view book-section-content"><div data-v-f8875076="" data-v-4842038c="" class="section-content"><div data-v-f8875076="" class="section-page book-section-view"><div data-v-f8875076="" class="entry-content article-content"><h1 class="heading" data-id="heading-0">设计模式</h1>
<p>设计模式总的来说是一个抽象的概念，前人通过无数次的实践总结出的一套写代码的方式，通过这种方式写的代码可以让别人更加容易阅读、维护以及复用。</p>
<p>这一章节我们将来学习几种最常用的设计模式。</p>
<h2 class="heading" data-id="heading-1">工厂模式</h2>
<p>工厂模式分为好几种，这里就不一一讲解了，以下是一个简单工厂模式的例子</p>
<pre><code class="hljs js" lang="js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Man</span> </span>{
<span class="hljs-keyword">constructor</span>(name) {
<span class="hljs-keyword">this</span>.name = name
}
alertName() {
alert(<span class="hljs-keyword">this</span>.name)
}
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Factory</span> </span>{
<span class="hljs-keyword">static</span> create(name) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Man(name)
}
}
Factory.create(<span class="hljs-string">'yck'</span>).alertName()
</code></pre><p>当然工厂模式并不仅仅是用来 new 出<strong>实例</strong>。</p>
<p>可以想象一个场景。假设有一份很复杂的代码需要用户去调用，但是用户并不关心这些复杂的代码，只需要你提供给我一个接口去调用，用户只负责传递需要的参数，至于这些参数怎么使用，内部有什么逻辑是不关心的，只需要你最后返回我一个实例。这个构造过程就是工厂。</p>
<p>工厂起到的作用就是隐藏了创建实例的复杂度，只需要提供一个接口，简单清晰。</p>
<p>在 Vue 源码中，你也可以看到工厂模式的使用，比如创建异步组件</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createComponent</span> (<span class="hljs-params">
Ctor: Class<Component> | Function | Object | void,
data: ?VNodeData,
context: Component,
children: ?Array<VNode>,
tag?: string
</span>): <span class="hljs-title">VNode</span> | <span class="hljs-title">Array</span><<span class="hljs-title">VNode</span>> | <span class="hljs-title">void</span> </span>{
<span class="hljs-comment">// 逻辑处理...</span>
<span class="hljs-keyword">const</span> vnode = <span class="hljs-keyword">new</span> VNode(
<span class="hljs-string">`vue-component-<span class="hljs-subst">${Ctor.cid}</span><span class="hljs-subst">${name ? <span class="hljs-string">`-<span class="hljs-subst">${name}</span>`</span> : <span class="hljs-string">''</span>}</span>`</span>,
data, <span class="hljs-literal">undefined</span>, <span class="hljs-literal">undefined</span>, <span class="hljs-literal">undefined</span>, context,
{ Ctor, propsData, listeners, tag, children },
asyncFactory
)
<span class="hljs-keyword">return</span> vnode
}
</code></pre><p>在上述代码中，我们可以看到我们只需要调用 <code>createComponent</code> 传入参数就能创建一个组件实例，但是创建这个实例是很复杂的一个过程，工厂帮助我们隐藏了这个复杂的过程，只需要一句代码调用就能实现功能。</p>
<h2 class="heading" data-id="heading-2">单例模式</h2>
<p>单例模式很常用，比如全局缓存、全局状态管理等等这些只需要一个对象，就可以使用单例模式。</p>
<p>单例模式的核心就是保证全局只有一个对象可以访问。因为 JS 是门无类的语言，所以别的语言实现单例的方式并不能套入 JS 中，我们只需要用一个变量确保实例只创建一次就行，以下是如何实现单例模式的例子</p>
<pre><code class="hljs js" lang="js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Singleton</span> </span>{
<span class="hljs-keyword">constructor</span>() {}
}
Singleton.getInstance = (<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">let</span> instance
<span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">if</span> (!instance) {
instance = <span class="hljs-keyword">new</span> Singleton()
}
<span class="hljs-keyword">return</span> instance
}
})()
<span class="hljs-keyword">let</span> s1 = Singleton.getInstance()
<span class="hljs-keyword">let</span> s2 = Singleton.getInstance()
<span class="hljs-built_in">console</span>.log(s1 === s2) <span class="hljs-comment">// true</span>
</code></pre><p>在 Vuex 源码中，你也可以看到单例模式的使用，虽然它的实现方式不大一样，通过一个外部变量来控制只安装一次 Vuex</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">let</span> Vue <span class="hljs-comment">// bind on install</span>
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">install</span> (<span class="hljs-params">_Vue</span>) </span>{
<span class="hljs-keyword">if</span> (Vue && _Vue === Vue) {
<span class="hljs-comment">// 如果发现 Vue 有值，就不重新创建实例了</span>
<span class="hljs-keyword">return</span>
}
Vue = _Vue
applyMixin(Vue)
}
</code></pre><h2 class="heading" data-id="heading-3">适配器模式</h2>
<p>适配器用来解决两个接口不兼容的情况，不需要改变已有的接口，通过包装一层的方式实现两个接口的正常协作。</p>
<p>以下是如何实现适配器模式的例子</p>
<pre><code class="hljs js" lang="js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Plug</span> </span>{
getName() {
<span class="hljs-keyword">return</span> <span class="hljs-string">'港版插头'</span>
}
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Target</span> </span>{
<span class="hljs-keyword">constructor</span>() {
<span class="hljs-keyword">this</span>.plug = <span class="hljs-keyword">new</span> Plug()
}
getName() {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.plug.getName() + <span class="hljs-string">' 适配器转二脚插头'</span>
}
}
<span class="hljs-keyword">let</span> target = <span class="hljs-keyword">new</span> Target()
target.getName() <span class="hljs-comment">// 港版插头 适配器转二脚插头</span>
</code></pre><p>在 Vue 中，我们其实经常使用到适配器模式。比如父组件传递给子组件一个时间戳属性，组件内部需要将时间戳转为正常的日期显示，一般会使用 <code>computed</code> 来做转换这件事情，这个过程就使用到了适配器模式。</p>
<h2 class="heading" data-id="heading-4">装饰模式</h2>
<p>装饰模式不需要改变已有的接口，作用是给对象添加功能。就像我们经常需要给手机戴个保护套防摔一样，不改变手机自身，给手机添加了保护套提供防摔功能。</p>
<p>以下是如何实现装饰模式的例子，使用了 ES7 中的装饰器语法</p>
<pre><code class="hljs js" lang="js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">readonly</span>(<span class="hljs-params">target, key, descriptor</span>) </span>{
descriptor.writable = <span class="hljs-literal">false</span>
<span class="hljs-keyword">return</span> descriptor
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Test</span> </span>{
@readonly
name = <span class="hljs-string">'yck'</span>
}
<span class="hljs-keyword">let</span> t = <span class="hljs-keyword">new</span> Test()
t.yck = <span class="hljs-string">'111'</span> <span class="hljs-comment">// 不可修改</span>
</code></pre><p>在 React 中，装饰模式其实随处可见</p>
<pre><code class="hljs js" lang="js"><span class="hljs-keyword">import</span> { connect } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-redux'</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
<span class="hljs-comment">// ...</span>
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> connect(mapStateToProps)(MyComponent)
</code></pre><h2 class="heading" data-id="heading-5">代理模式</h2>
<p>代理是为了控制对对象的访问，不让外部直接访问到对象。在现实生活中，也有很多代理的场景。比如你需要买一件国外的产品，这时候你可以通过代购来购买产品。</p>
<p>在实际代码中其实代理的场景很多，也就不举框架中的例子了，比如事件代理就用到了代理模式。</p>
<pre><code class="hljs html" lang="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ul"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>1<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>2<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>3<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>4<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>5<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
<span class="hljs-keyword">let</span> ul = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#ul'</span>)
ul.addEventListener(<span class="hljs-string">'click'</span>, (event) => {
<span class="hljs-built_in">console</span>.log(event.target);
})
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</code></pre><p>因为存在太多的 <code>li</code>，不可能每个都去绑定事件。这时候可以通过给父节点绑定一个事件，让父节点作为代理去拿到真实点击的节点。</p>
<h2 class="heading" data-id="heading-6">发布-订阅模式</h2>
<p>发布-订阅模式也叫做观察者模式。通过一对一或者一对多的依赖关系，当对象发生改变时，订阅方都会收到通知。在现实生活中，也有很多类似场景，比如我需要在购物网站上购买一个产品，但是发现该产品目前处于缺货状态，这时候我可以点击有货通知的按钮，让网站在产品有货的时候通过短信通知我。</p>
<p>在实际代码中其实发布-订阅模式也很常见，比如我们点击一个按钮触发了点击事件就是使用了该模式</p>
<pre><code class="hljs html" lang="html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ul"</span>></span><span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
<span class="hljs-keyword">let</span> ul = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'#ul'</span>)
ul.addEventListener(<span class="hljs-string">'click'</span>, (event) => {
<span class="hljs-built_in">console</span>.log(event.target);
})
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
</code></pre><p>在 Vue 中，如何实现响应式也是使用了该模式。对于需要实现响应式的对象来说，在 <code>get</code> 的时候会进行依赖收集，当改变了对象的属性时，就会触发派发更新。</p>
<h2 class="heading" data-id="heading-7">外观模式</h2>
<p>外观模式提供了一个接口，隐藏了内部的逻辑，更加方便外部调用。</p>
<p>举个例子来说，我们现在需要实现一个兼容多种浏览器的添加事件方法</p>
<pre><code class="hljs js" lang="js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addEvent</span>(<span class="hljs-params">elm, evType, fn, useCapture</span>) </span>{
<span class="hljs-keyword">if</span> (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture)
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (elm.attachEvent) {
<span class="hljs-keyword">var</span> r = elm.attachEvent(<span class="hljs-string">"on"</span> + evType, fn)
<span class="hljs-keyword">return</span> r
} <span class="hljs-keyword">else</span> {
elm[<span class="hljs-string">"on"</span> + evType] = fn
}
}
</code></pre><p>对于不同的浏览器，添加事件的方式可能会存在兼容问题。如果每次都需要去这样写一遍的话肯定是不能接受的，所以我们将这些判断逻辑统一封装在一个接口中，外部需要添加事件只需要调用 <code>addEvent</code> 即可。</p>
<h2 class="heading" data-id="heading-8">小结</h2>
<p>这一章节我们学习了几种常用的设计模式。其实设计模式还有很多，有一些内容很简单，我就没有写在章节中了，比如迭代器模式、原型模式，有一些内容也是不经常使用，所以也就不一一列举了。</p>
<p>如果你还想了解更多关于设计模式的内容，可以阅读<a target="_blank" href="https://link.juejin.im/?target=https%3A%2F%2Fbook.douban.com%2Fsubject%2F26382780%2F" rel="nofollow noopener noreferrer">这本书</a>。</p>
</div><section data-v-f8875076="" class="book-comments"><div data-v-f8875076="" class="box-title">留言</div><div data-v-f8875076="" class="comment-box"><div data-v-805e4f50="" data-v-f8875076="" class="comment-form comment-form" id="comment"><div data-v-6795359b="" data-v-67a669a2="" data-v-805e4f50="" data-src="https://mirror-gold-cdn.xitu.io/168e08e4f81e924deaa?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar loaded" style="background-image: url("https://mirror-gold-cdn.xitu.io/168e08e4f81e924deaa?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1");"></div><div data-v-b84335ea="" data-v-805e4f50="" class="auth-card"><div data-v-b84335ea="" class="auth-cover"><span data-v-b84335ea="" class="hint"></span>您需要<a data-v-b84335ea="">绑定手机号</a>后才可在掘金社区内发布内容。</div><textarea data-v-805e4f50="" data-v-b84335ea="" placeholder="评论将在后台进行审核，审核通过后对所有人可见" class="content-input" style="overflow: hidden; overflow-wrap: break-word; height: 60px;"></textarea></div><div data-v-805e4f50="" class="action-box" style="display: none;"><div data-v-76be0714="" data-v-805e4f50="" class="image-uploader image-uploader" style="display: none;"><input data-v-76be0714="" type="file" class="input"><button data-v-76be0714="" class="upload-btn"><i data-v-76be0714="" class="icon ion-image"></i><span data-v-76be0714="">上传图片</span></button></div><div data-v-805e4f50="" class="submit-box"><span data-v-805e4f50="" class="submit-text">Ctrl or ⌘ + Enter</span><button data-v-805e4f50="" class="submit-btn">评论</button></div></div><!----></div></div><ul data-v-4c55bf38="" data-v-f8875076="" st:block="commentList" class="comment-list comment-list"><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5c680b246fb9a049a62d1eac" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/5c680b246fb9a049a62d1eac" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://mirror-gold-cdn.xitu.io/168f66b8bfbbfb88ed1?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5c680b246fb9a049a62d1eac" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/5c680b246fb9a049a62d1eac" target="_blank" rel="" class="username" data-v-340b99e1="">wenting<!----></a></div><div data-v-3e0a9536="" class="position"></div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">适配器模式不是很懂，太抽象了</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">0</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style="display: none;"></div></span><span data-v-3e0a9536="" class="date">2月前</span><!----></div><!----></div><!----></div></li><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="595f9653f265da6c3e3ce5a7" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/595f9653f265da6c3e3ce5a7" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://user-gold-cdn.xitu.io/2019/1/28/168932a9273b20e6?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="595f9653f265da6c3e3ce5a7" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/595f9653f265da6c3e3ce5a7" target="_blank" rel="" class="username" data-v-340b99e1="">sammui4<!----></a></div><div data-v-3e0a9536="" class="position">切图仔</div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">居然没有策略模式 = =</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">0</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style="display: none;"></div></span><span data-v-3e0a9536="" class="date">2月前</span><!----></div><!----></div><!----></div></li><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="57a83fca128fe10054901323" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/57a83fca128fe10054901323" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://user-gold-cdn.xitu.io/2018/5/22/16385a27566b6dbb?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="57a83fca128fe10054901323" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/57a83fca128fe10054901323" target="_blank" rel="" class="username" data-v-340b99e1="">嘿黑<!----></a></div><div data-v-3e0a9536="" class="position"></div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">发布订阅模式也叫观察者模式？两个并不是一回事吧</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">11</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">收起评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style=""></div></span><span data-v-3e0a9536="" class="date">3月前</span><!----></div><div data-v-42ee4f35="" data-v-3e0a9536="" class="sub-comment-box sub-comment-box"><div data-v-42ee4f35="" class="sub-comment-box__top"><div data-v-42ee4f35="" class="icon-close"></div><h3 data-v-42ee4f35="">评论</h3></div><div data-v-42ee4f35="" class="sub-comment-box__inner"><div data-v-42ee4f35=""><ul data-v-42ee4f35="" class="sub-comment-list"><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="598e8ea0f265da3e327ee8a5" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="598e8ea0f265da3e327ee8a5" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/598e8ea0f265da3e327ee8a5" target="_blank" rel="" class="username username" data-v-340b99e1="">卷家老大<!----></a></div><div data-v-b9a92622="" class="position"></div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">应该是一回事</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">3月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="58fc6c1d1b69e60058987fc7" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://mirror-gold-cdn.xitu.io/168e08491ddd842d572?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="58fc6c1d1b69e60058987fc7" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/58fc6c1d1b69e60058987fc7" target="_blank" rel="" class="username username" data-v-340b99e1="">incuisting<a data-v-7bb9dea1="" data-v-3052f648="" href="https://juejin.im/book/5c90640c5188252d7941f5bb/section/5c9065385188252da6320022" target="_blank" rel="" class="rank"><img data-v-7bb9dea1="" src="./30.设计模式_files/lv-1.636691c.svg" alt="lv-1"></a></a></div><div data-v-b9a92622="" class="position"></div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">不是一回事吧</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">2月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="582923862e958a005eb8a341" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://user-gold-cdn.xitu.io/2018/8/29/16586302f4f9c5ea?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="582923862e958a005eb8a341" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/582923862e958a005eb8a341" target="_blank" rel="" class="username username" data-v-340b99e1="">陈建光<a data-v-7bb9dea1="" data-v-3052f648="" href="https://juejin.im/book/5c90640c5188252d7941f5bb/section/5c9065385188252da6320022" target="_blank" rel="" class="rank"><img data-v-7bb9dea1="" src="./30.设计模式_files/lv-2.f597b88.svg" alt="lv-2"></a></a></div><div data-v-b9a92622="" class="position">front-end</div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">不是一回事</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">2月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5c7fcd83f265da2daa317b1f" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://mirror-gold-cdn.xitu.io/169533ad29dc142af82?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5c7fcd83f265da2daa317b1f" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/5c7fcd83f265da2daa317b1f" target="_blank" rel="" class="username username" data-v-340b99e1="">风中的承诺<!----></a></div><div data-v-b9a92622="" class="position">前端程序猿</div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">可以说一回事 也可以说不是一回事。观察者通常是一对一的关系 观察者和被观察者之间的事情，发布订阅模式 是一种一对多的观察者模式 发布订阅模式 ~= 观察者+中介模式。个人理解</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">2月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li></ul><!----></div><form data-v-42ee4f35="" class="reply-form"><div data-v-b84335ea="" data-v-42ee4f35="" class="auth-card"><div data-v-b84335ea="" class="auth-cover"><span data-v-b84335ea="" class="hint"></span>您需要<a data-v-b84335ea="">绑定手机号</a>后才可在掘金社区内发布内容。</div><textarea data-v-42ee4f35="" data-v-b84335ea="" rows="1" maxlength="1024" placeholder="评论审核通过后显示" style="overflow: hidden; overflow-wrap: break-word; height: 31px;"></textarea></div><button data-v-42ee4f35="" class="reply-btn">评论</button></form></div></div></div><!----></div></li><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5be906186fb9a049d05d4145" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/5be906186fb9a049d05d4145" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://mirror-gold-cdn.xitu.io/168e0960ce1bacf4f67?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5be906186fb9a049d05d4145" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/5be906186fb9a049d05d4145" target="_blank" rel="" class="username" data-v-340b99e1="">泡泡君<!----></a></div><div data-v-3e0a9536="" class="position"></div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html collapsed">不太明白单例模式中，Singleton.getInstance为什么要是一个IIFE，尝试着改成
Singleton.getInstance = function() {
let instance
return function() {
if (!instance) {
instance = new Singleton()
}
return instance…</span><span data-v-3e0a9536="" class="show-all">展开全部</span></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">0</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">收起评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style=""></div></span><span data-v-3e0a9536="" class="date">3月前</span><!----></div><div data-v-42ee4f35="" data-v-3e0a9536="" class="sub-comment-box sub-comment-box"><div data-v-42ee4f35="" class="sub-comment-box__top"><div data-v-42ee4f35="" class="icon-close"></div><h3 data-v-42ee4f35="">评论</h3></div><div data-v-42ee4f35="" class="sub-comment-box__inner"><div data-v-42ee4f35=""><ul data-v-42ee4f35="" class="sub-comment-list"><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5be906186fb9a049d05d4145" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://mirror-gold-cdn.xitu.io/168e0960ce1bacf4f67?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5be906186fb9a049d05d4145" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/5be906186fb9a049d05d4145" target="_blank" rel="" class="username username" data-v-340b99e1="">泡泡君<!----></a></div><div data-v-b9a92622="" class="position"></div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">是因为要通过IIFE来创建一个作用域吗？这样返回的函数就会形成闭包，拥有对这个作用域中instance的访问权限？</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">3月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5aadd5e7518825556d0de2eb" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://user-gold-cdn.xitu.io/2018/11/16/1671a30d56899c1c?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5aadd5e7518825556d0de2eb" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/5aadd5e7518825556d0de2eb" target="_blank" rel="" class="username username" data-v-340b99e1="">1同志<!----></a></div><div data-v-b9a92622="" class="position"></div></div></div><div data-v-b9a92622="" class="content"><span data-v-b9a92622="" class="text-reply">回复<a data-v-b9a92622="" href="https://juejin.im/user/5be906186fb9a049d05d4145" target="_blank" rel=""><span data-v-b9a92622="" class="username">泡泡君</span></a>：</span><span data-v-b9a92622="" class="content-html">你说的是对的，其实目的就是不想创建一个全局变量instance而已</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">3月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="59a238b36fb9a024747efae1" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://mirror-gold-cdn.xitu.io/168e087e14fee648cbb?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="59a238b36fb9a024747efae1" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/59a238b36fb9a024747efae1" target="_blank" rel="" class="username username" data-v-340b99e1="">saifeiLee<!----></a></div><div data-v-b9a92622="" class="position">前端工程师</div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">按照你的写法，调用Singleton.getInstance()函数返回的是一个函数，而非instance。通过IIFE,Singleton.getInstance()方法形成闭包，保证每次调用所访问的instance变量是同一个变量。</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">3月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5c680b246fb9a049a62d1eac" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://mirror-gold-cdn.xitu.io/168f66b8bfbbfb88ed1?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5c680b246fb9a049a62d1eac" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/5c680b246fb9a049a62d1eac" target="_blank" rel="" class="username username" data-v-340b99e1="">wenting<!----></a></div><div data-v-b9a92622="" class="position"></div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">请问一下这个getInstance不是已经在声明的时候就已经立即执行返回一个实例了吗？下面为什么还要执行？</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">2月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5be906186fb9a049d05d4145" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://mirror-gold-cdn.xitu.io/168e0960ce1bacf4f67?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5be906186fb9a049d05d4145" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/5be906186fb9a049d05d4145" target="_blank" rel="" class="username username" data-v-340b99e1="">泡泡君<!----></a></div><div data-v-b9a92622="" class="position"></div></div></div><div data-v-b9a92622="" class="content"><span data-v-b9a92622="" class="text-reply">回复<a data-v-b9a92622="" href="https://juejin.im/user/59a238b36fb9a024747efae1" target="_blank" rel=""><span data-v-b9a92622="" class="username">saifeiLee</span></a>：</span><span data-v-b9a92622="" class="content-html">谢谢，恍然大悟！</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">1月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li></ul><ul data-v-2d125ce2="" data-v-42ee4f35="" class="pagination pagination"><!----><li data-v-2d125ce2="" class="item current">1</li><li data-v-2d125ce2="" class="item">2</li><li data-v-2d125ce2="" class="item">下一页</li></ul></div><form data-v-42ee4f35="" class="reply-form"><div data-v-b84335ea="" data-v-42ee4f35="" class="auth-card"><div data-v-b84335ea="" class="auth-cover"><span data-v-b84335ea="" class="hint"></span>您需要<a data-v-b84335ea="">绑定手机号</a>后才可在掘金社区内发布内容。</div><textarea data-v-42ee4f35="" data-v-b84335ea="" rows="1" maxlength="1024" placeholder="评论审核通过后显示" style="overflow: hidden; overflow-wrap: break-word; height: 31px;"></textarea></div><button data-v-42ee4f35="" class="reply-btn">评论</button></form></div></div></div><!----></div></li><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="589870972f301e006970b734" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/589870972f301e006970b734" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="589870972f301e006970b734" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/589870972f301e006970b734" target="_blank" rel="" class="username" data-v-340b99e1="">烛火星光1<!----></a></div><div data-v-3e0a9536="" class="position">前端工程师</div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">发布订阅模式和代理模式的两端js代码一模一样，那么这个利用父节点作为事件代理的函数，究竟是代理模式还是发布订阅模式？还是两者都是？如果两者都可以，那么这两者的区别究竟是啥呢？</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">0</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">收起评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style=""></div></span><span data-v-3e0a9536="" class="date">3月前</span><!----></div><div data-v-42ee4f35="" data-v-3e0a9536="" class="sub-comment-box sub-comment-box"><div data-v-42ee4f35="" class="sub-comment-box__top"><div data-v-42ee4f35="" class="icon-close"></div><h3 data-v-42ee4f35="">评论</h3></div><div data-v-42ee4f35="" class="sub-comment-box__inner"><div data-v-42ee4f35=""><ul data-v-42ee4f35="" class="sub-comment-list"><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://user-gold-cdn.xitu.io/2018/10/30/166c3fd3666b5d05?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/574f8d8d2e958a005fd4edac" target="_blank" rel="" class="username username" data-v-340b99e1="">yck<a data-v-7bb9dea1="" data-v-3052f648="" href="https://juejin.im/book/5c90640c5188252d7941f5bb/section/5c9065385188252da6320022" target="_blank" rel="" class="rank"><img data-v-7bb9dea1="" src="./30.设计模式_files/lv-6.74bd93a.svg" alt="lv-6"></a></a></div><div data-v-b9a92622="" class="position">前端开发 @ 宋小菜</div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">发布订阅模式核心是 addEventListener...</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">3月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5c358ca16fb9a049fc03b63a" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://mirror-gold-cdn.xitu.io/168e09b8771831980b9?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5c358ca16fb9a049fc03b63a" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/5c358ca16fb9a049fc03b63a" target="_blank" rel="" class="username username" data-v-340b99e1="">zexiplus<!----></a></div><div data-v-b9a92622="" class="position">web前端 @ iPanel</div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">本来应该绑定在li元素上的事件， 代理到了父元素ul上， 这一点是代理模式的体现， 而对dom事件的监听（addEventListener）是发布订阅模式的体现， 这段代码两个模式都有体现</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">3月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5c2e37f4e51d45518e146e2e" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5c2e37f4e51d45518e146e2e" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/5c2e37f4e51d45518e146e2e" target="_blank" rel="" class="username username" data-v-340b99e1="">易水寒YSP<!----></a></div><div data-v-b9a92622="" class="position"></div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">点赞！</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">3月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li></ul><!----></div><form data-v-42ee4f35="" class="reply-form"><div data-v-b84335ea="" data-v-42ee4f35="" class="auth-card"><div data-v-b84335ea="" class="auth-cover"><span data-v-b84335ea="" class="hint"></span>您需要<a data-v-b84335ea="">绑定手机号</a>后才可在掘金社区内发布内容。</div><textarea data-v-42ee4f35="" data-v-b84335ea="" rows="1" maxlength="1024" placeholder="评论审核通过后显示" style="overflow: hidden; overflow-wrap: break-word; height: 31px;"></textarea></div><button data-v-42ee4f35="" class="reply-btn">评论</button></form></div></div></div><!----></div></li><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5a026ff3f265da43062a31c5" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/5a026ff3f265da43062a31c5" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://user-gold-cdn.xitu.io/2018/1/24/161276a5244ab1dc?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5a026ff3f265da43062a31c5" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/5a026ff3f265da43062a31c5" target="_blank" rel="" class="username" data-v-340b99e1="">不曾亏欠<!----></a></div><div data-v-3e0a9536="" class="position">web前端开发</div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">点赞！</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">1</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style="display: none;"></div></span><span data-v-3e0a9536="" class="date">4月前</span><!----></div><!----></div><!----></div></li><!----></ul></section></div></div><!----><!----></div></div><div data-v-5cee32d6="" data-v-54b8e7d6="" class="book-handle book-direction"><div data-v-5cee32d6="" class="step-btn step-btn--prev"><img data-v-5cee32d6="" src="./30.设计模式_files/prev.87ad47e.svg"></div><div data-v-5cee32d6="" class="step-btn step-btn--next"><img data-v-5cee32d6="" src="./30.设计模式_files/next.54d8a35.svg"></div><!----><!----></div><!----></div></div></section><!----><!----><!----><div data-v-cd2ca6a6="" data-v-54b8e7d6="" class="image-viewer-box"><!----></div></div><!----></div>
<script type="text/javascript" src="./30.设计模式_files/runtime.9706721e848de1201705.js"></script><script type="text/javascript" src="./30.设计模式_files/0.8216307424ab4cc6932c.js"></script><script type="text/javascript" src="./30.设计模式_files/1.245e4b7164597257667b.js"></script>
</body></html>