-
Notifications
You must be signed in to change notification settings - Fork 0
/
1-6-1.html
799 lines (794 loc) · 36.6 KB
/
1-6-1.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
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
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./public/favicon.ico" />
<meta http-equiv="cache-control" content="no-cache" />
<title></title>
<link rel="stylesheet" href=" https://necolas.github.io/normalize.css/8.0.1/normalize.css" />
<link rel="stylesheet" href="./hightlight/default.min.css" />
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="./css/copybutton.css" />
<link rel="stylesheet" href="./css/hightlight.css" />
<script src="./hightlight/hightlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BEVZJDBC7Z"></script>
<script src="./js/gtag.js"></script>
</head>
<body>
<header>
<nav>
<h1>
<span id="toggle-menu"></span>
<a href="index.html"></a>
</h1>
</nav>
</header>
<main>
<aside>
<nav></nav>
</aside>
<article>
<h2 id="1-6-1">1-6-1 響應式架構設計<h2>
<p>現代前端框架在功能以及解決的問題其實大同小異。都是為了快速開發出方便狀態管理以及維護的網頁程式。所以除了學會如何使用框架之外更要了解框架最終是要解決什麼問題，以及框架的設計思路有沒有什麼共同點。了解原理，不管前端框架再怎麼推陳出新我們都很快速掌握，同時在研究這些設計概念也能耳濡目染的學習人家的優美設計，提升自己的思路認知。</p>
<h3>響應式架構基本原理</h3>
<p>響應式架構在直觀上，資料在變化時不需要開發者去手動更新視圖，視圖會根據變化的資料「自動」進行更新。為完成這個過程，需要做到以下幾點：</p>
<ul>
<li>知道收集視圖依賴了哪些資料。</li>
<li>監聽依賴資料的變化</li>
<li>資料變化時，自動「通知」需要更新的視圖部分，並進行更新。</li>
</ul>
<p>接下來針對上述需求思路實作出 資料綁定、代理監聽、和發布等功能。</p>
<h4>資料綁架/資料代理</h4>
<p>感知資料變化的方法很直接，就是進行資料綁架或資料代理。我們常常會透過 Object.defineProperty 這個方法來實現這兩種操作。這個方法可以定義資料的 getter 和 setter。</p>
<pre><code class="language-js">
let data = {
stage: 'GitChat',
course: {
title: '前端開發進階',
author: 'Lucas',
publishTime: '2018年5月!'
}
}
Object.keys(data).forEach((key) => {
let currentValue = data[key]
Object.defineProperty(data, key, {
enumerable: true,
configurable: false,
get() {
console.log(`getting ${key} value now, getting value is:`, currentValue)
return currentValue
},
set(newValue) {
currentValue = newValue
console.log(`setting ${key}value now, setting value is `, currentValue)
}
})
})
</code></pre>
<p>這段程式對 data 資料的 getter 和 setter 方法進行了定義攔截，當我們讀取或改變 data 的值時，便可以監聽到這種回應，如下所示。</p>
<pre><code class="language-js">
data.course
// getting course value now, getting value is: {title: "HM",
// author："Luces",publishTime："2018年5月"}
data.course ='前端開發進階2'
// setting course value now, setting value is 前端開發進階2
</code></pre>
<p>但是這種實現有一個問題，例如執行以下程式後，只會獲得 getting course value now, getting value is: {title: "HM",author："Luces",publishTime："2018年5月"} 的輸出，修改後的 data.course.title 的資訊並沒有被列印出來。</p>
<pre><code class="language-js">
data.course.title ='前端開發進階2'
// getting course value now, getting value is: {title:"前端開發進階",author:"Lucas",publishTime:"2018年5月"}
</code></pre>
<p>出現這個問題的原因是，我們的程式只實現了一層 Object.defineProperty，或說只對 data 的第一層屬性執行了 Object.defineProperty，對於巢狀結構的參考類型資料結構 data.course，我們同樣應該進行攔截。</p>
<p>為了達到深層攔截的目的，可以將 Object.defineProperty 的邏輯抽象為 observe
函數，並改用遞迴實現，程式如下。</p>
<pre><code class="language-js">
let data = {
stage: 'GitChat',
course: {
title: '前端開發進階',
author: 'Lucas',
publishTime: '2018年5月'
}
}
const observe = (data) => {
if (!data || typeof data !== 'object') {
return
}
Object.keys(data).forEach((key) => {
let currentValue = data[key]
observe(currentValue)
Object.defineProperty(data, key, {
enumerable: true,
configurable: false,
get() {
console.log(`getting ${key} value now, getting value is:`, currentValue)
return currentValue
},
set(newValue) {
currentValue = newValue
console.log(`setting ${key} value now, setting value is`, currentValue)
}
})
})
}
observe(data)
</code></pre>
<p>這樣一來，就實現了深層資料攔截。攔截效果如下所示:</p>
<pre><code class="language-js">
data.course.title ='前端開發進階2'
// getting course value now, getting value is: {// ...}
// setting title value now,setting value is前端開發進階2
</code></pre>
<p>請注意，我們在代理 set 行為時，並沒有對 new Value 為複雜類型的情況再次遞迴呼叫 observe(new Value) 方法。也就是說，如果給 data.course.title 設定值一個如下所示的參考類型，則無法實現對 data.course.title 資料的觀察。</p>
<pre><code class="language-js">
data.course.title = {
title:'前端開發進階2'
}
</code></pre>
<p>這裡為了降低學習成本而做了一些變化，預設修改的數值符合語義，都是基本類型。</p>
<p>在嘗試對 data.course.title 進行設定值時，首先會讓取 data.course ，輸出 getting course value now, setting value is:{//...} ;設定值後,當觸發 date.course.title 的 setter，然後輸出 setting title value now, setting value is 前端開發進階2。</p>
<p>因此，對資料進行攔截並不複雜，這也是很多架構實現的第一步。</p>
<h4>監聽陣列變化</h4>
<p>將上述資料中的某一項變為陣列，如下所示。</p>
<pre><code class="language-js">
let data = {
stage: 'GitChat',
course: {
title: '前端開發進階',
author: ['Lucas', 'Ronaldo'],
publishTime: '2018年5月'
}
}
const observe = (data) => {
if (!data || typeof data !== 'object') {
return
}
Object.keys(data).forEach((key) => {
let currentValue = data[key]
observe(currentValue)
Object.defineProperty(data, key, {
enumerable: true,
configurable: false,
get() {
console.log(`getting ${key} value now, getting value is:`, currentValue)
return currentValue
},
set(newValue) {
currentValue = newValue
console.log(`setting ${key} value now, setting value is:`, currentValue)
}
})
})
}
observe(data)
data.course.author.push('Messi')
// getting course value now, getting value is: {//...}
// getting author value now, getting value is: (2) [(...), (...)]
</code></pre>
<p>此時，我們只監聽到了對 data.course 及 data.course.author 的讀取，而陣列 push 所產生的行為並沒有被攔截。這是因為 Array.prototype 上掛載的方法並不能觸發 data.course.author 屬性值的 setter，這並不屬於做設定值操作，而是呼叫陣列的 push 方法。然而對以架構為基礎的實現來說，這顯然是不滿足要求的，當陣列變化時我們也應該有所感知。</p>
<p>Vue 同樣存在這樣的問題，它的解決方法是：將陣列的常用方法進行重新定義，進而覆蓋掉原生的陣列方法，重新定義之後的陣列方法需要能夠被攔截。實現邏輯如下。</p>
<pre><code class="language-js">
const arrExtend = Object.create(Array.prototype)
const arrMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']
arrMethods.forEach((method) => {
const oldMethod = Array.prototype[method]
const newMethod = function (...args) {
oldMethod.apply(this, args)
console.log(`${method}方法被執行了`)
}
arrExtend[method] = newMethod
})
</code></pre>
<p>對陣列的7個原生方法(push、pop、shift、 unshift、 splice、 sort、 Reverse) 進行重新定義，核心換作還是呼叫原生方法 OldMethod.apply(this, args)。除此之外，還可以在呼叫 oldMethod.apply(this, arg) 的前後加入我們需要的任何邏輯。在上面程式的基礎上，我們使用陣列的 push 方法時會獲得以下結果。</p>
<pre><code class="language-js">
Array.prototype = Object.assign(Array.prototype,arrExtend)
let array = [1, 2, 3]
array.push(4)
// push 方法被執行了
</code></pre>
<p>按照以上想法執行下面的程式，並觀察輸出結果。</p>
<pre><code class="language-js">
const arrExtend = Object.create(Array.prototype)
const arrMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']
arrMethods.forEach((method) => {
const oldMethod = Array.prototype[method]
const newMethod = function (...args) {
oldMethod.apply(this, args)
console.log(`${method}方法被執行了`)
}
arrExtend[method] = newMethod
})
Array.prototype = Object.assign(Array.prototype, arrExtend)
let data = {
stage: 'GitChat',
course: {
title: '前端開發進階',
author: ['Lucas', 'Ronaldo'],
PublishTime: '2018年5月'
}
}
const observe = (data) => {
if (!data || typeof data !== 'object') {
return
}
Object.keys(data).forEach((key) => {
let currentValue = data[key]
observe(currentValue)
Object.defineProperty(data, key, {
enumerable: true,
configurable: false,
get() {
console.log(`getting ${key} value now, getting value is:`, currentValue)
return currentValue
},
set(newValue) {
currentValue = newValue
console.log(`setting ${key} value now, setting value is`, currentValue)
}
})
})
}
observe(data)
data.course.author.push('Messi')
</code></pre>
<p>執行以上程式，輸出如下。</p>
<pre><code class="language-js">
getting course value now, getting value is: {//...}
getting author value now, getting value is: (2) [(...), (...)]
// push方法被執行了
</code></pre>
<p>這種 monkey patch（猴子更新）的做法本質上就是重新定義原生方法，這樣你不是很安全，也很不優雅。因此推薦使用 ES Next 的新特性—Proxy。之前也對該特性進行過介紹，它可以完成對資料的代理。</p>
<h4>Object.defineProperty 和 Proxy 區別</h4>
<p>首先嘗試使用 Proxy 來完成程式重構，如下。</p>
<pre><code class="language-js">
let data = {
stage: 'GitChat',
course: {
title: '前端開發進階',
author: ['Lucas'],
publishTime: '2018年5月'
}
}
const observe = (data) => {
if (!data || Object.prototype.toString.call(data) !== '[object Object]') {
return
}
Object.keys(data).forEach((key) => {
let currentValue = data[key]
//事實上，Proxy也可以對函數類型進行代理。這裡只對承載資料類型的object進行處理
if (typeof currentValue === 'object') {
observe(currentValue)
data[key] = new Proxy(currentValue, {
set(target, property, value, receiver) {
// 因為使用陣列的 push方法時會引起 length 屬性的變化，所以呼叫 push 之後
// 會觸發兩次 set 操作，我們只需要保留一次即可
if (property !== 'length') {
console.log(`setting ${key} value now, setting value is`, currentValue)
}
return Reflect.set(target, property, value, receiver)
}
})
} else {
Object.defineProperty(data, key, {
enumerable: true,
configurable: false,
get() {
console.log(`getting ${key} value now, getting value is:`, currentValue)
return currentValue
},
set(newValue) {
currentValue = newValue
console.log(`setting ${key} value now, setting value is`, currentValue)
}
})
}
})
}
observe(data)
</code></pre>
<p>此時，對陣列進行以下操作。</p>
<pre><code class="language-js">
data.course.author.push('messi')
// setting author value now, setting value is ["Lucas"]
</code></pre>
<p>觀察輸出內容，發現程式已經監聽到了深層資料的變動，這已經符合我們的需求了。注意，這裡在使用 Proxy 進行代理時，並沒有對 getter 進行代理，因此上述程式的輸出結果並不像之前使用 Object.defineProperty 那樣也會輸出 getting value 。</p>
<p>了解了 Proxy 實現之後，我們對使用 Proxy 實現資料代理和使用 Object.defineProperty 實現資料攔截進行比較，可以得出以下結論。</p>
<ul>
<li>
Object.defineProperty 不能監聽陣列的變化，需要對陣列方法進行重新定義。
</li>
<li>
Object.defineProperty 必須檢查物件的每個屬性，且需要對巢狀結構結構進行深層檢查。
</li>
<li>
Proxy 的代理是針對整個物件的，而非針對物件的某個屬性的，因此不像 Object.defineProperty 必須檢查物件的每個屬性，Proxy 只需要做一層代理就可以監聽同級結構下的所有屬性變化。當然對於深層結構，遞迴還是循要進行的。
</li>
<li>
Proxy 支援代理陣列的變化。
</li>
<li>
Proxy 的第二個參數除了可以使用 set 和 get，還可以使用13種攔截方法，比 Object.defineProperty 更加強大，實際方法這裡不再一一列舉。
</li>
<li>
使用 Proxy 時，效能將被底層持續最佳化；而使用 Object.defineProperty 時，效能已經不再是最佳化重點。
</li>
</ul>
<h3>範本編譯原理介紹</h3>
<p>已經了解了如何監聽資料的變化，那麼下一步以 Vue 架構為例，先來看一個典型的用法，如下。
<pre><code class="language-html">
<body>
<div id="app">
<h1>{{stage}}平台課程：{{course.title}}</h1>
<p>{{course.title}}是 {{course.author}}發佈的課程</p>
<p>發佈時間為{{course.publishTime}}</p>
</div>
<script>
let vue = new Vue({
ele: '#app',
data: {
stage: 'GitChat',
course: 1,
title: '前端開發進階',
author: 'Lucas',
PublishTime: '2018年5月'
}
})
</script>
</body>
</code></pre>
<p>其中，範本變數是透過{{}}的表達方式進行輸出的。最後輸出的 HTML 內容應該被合適的資料進行填充取代，因此還需要進行編譯，在編譯過程中任何架構或類別庫都是相通的，舉例來說，React 中的 JSX 會被編譯為 React.CreateElement，並在產生虛擬 DOM 時進行資料填充。</p>
<p>這裡簡化一下，將以下範本內容輸出為真實的 HTML 即可。</p>
<pre><code class="language-html">
<div id="app">
<h1>{{stage}}平台課程：{{course.title}}/</hl>
<p>{{course.title}}是{{course.author}}發佈的課程</p>
<p>發佈時間為{{course.publishTime}}</p>
</div>
</code></pre>
<h4>範本編譯實現</h4>
<p>提到這樣的「範本編譯」過程，很多開發者都會想到詞法分析，進而會感到頭大。其實範本編譯的原理很簡單，就是使用「正規＋檢查」的方式，有時需要使用一些演算法知識，但是在這裡的場景中，只需要對 #app 節點下的內容進行取代，透過正規表示法識別出範本變數，取得對應的資料即可，程式如下。</p>
<pre><code class="language-js">
compile(document.querySelector('#app'), data)
function compile(el, data) {
let fragment = document.createDocumentFragment()
while ((child = el.firstChild)) {
fragment.appendChild(child)
}
// 對el中的内容進行取代
function replace(fragment) {
Array.from(fragment.childNodes).forEach((node) => {
let textContent = node.textContent
let reg = /\{\{(.*?)\}\}/g
if (node.nodeType === 3 && reg.test(textContent)) {
const nodeTextContent = node.textContent
const replaceText = () => {
node.textContent = nodeTextContent.replace(reg, (matched, placeholder) => {
return placeholder.split('.').reduce((prev, key) => {
return prev[key]
}, data)
})
}
replaceText()
}
// 如果還有子節點，則繼續遞迴 replace
if (node.childNodes && node.childNodes.length) {
replace(node)
}
})
}
replace(fragment)
el.appendChild(fragment)
return el
}
</code></pre>
<p>下面對以上程式進行分析。我們使用 fragment 變數儲存產生的真實 HTML 節點中的內容。透過 replace 方法對{{變數}}進行資料取代，同時{{變數}}的表達只會出現在 nodeType
=3 的文字類型節點中，因此對於符合 node.
nodeType === 3 && reg.test(textContent) 條件的情況，可以進行資料取得和填充。接下來，借助 replace 方法的第二個參數對字串進行一次性取代，此時對於形如 {{data.course.title}} 深層資料，可以透過 reduce 方法獲得正確的值。</p>
<p>因為 DOM 結構可能是多層的，所以對存在子節點的節點依然使用遞迴對 replace 進行取代。</p>
<h4>雙向綁定實現</h4>
<p>上述實現是單向的，透過資料變化引起了視圖變化，那麼真面中存在一個輸入框時該如何觸發資料變化呢？以下為 Vue 的特色 v-model </p>
<pre><code class="language-html">
<input v-model="inputData" type="text" >
</code></pre>
<p>舉例來說，對於以上敘述，我們需要在範本編譯中對存在 v-model 屬性的 node 進行事件監聽，在輸入框中有內容輸入時，改變 v-model 屬性值對應的資料即可（這裡對應的資料為 inputData）。為了滿足輸入內容的同時修改資料來源的需求，我們只需要增加 compile
中的 replace 方法邏輯。對於 node.nodeType === 1 的 DOM 類型，實現的虛擬程式碼如下。</p>
<pre><code class="language-js">
function replace(el, data) {
// ...
if (node.nodeType === 1) {
let attributesArray = node.attributes
Array.from(attributesArray).forEach((attr) => {
let attributeName = attr.name
let attributeValue = attr.value
if (name.includes('v-')) {
node.value = data[attributeValue]
}
node.addEventListener('input', (e) => {
let newVal = e.target.value
data[attributeValue] = newVal
// ...
// 更改資料來源，觸發 setter ...
// ...
})
})
}
if (node.childNodes && node.childNodes.length) {
replace(node)
}
}
</code></pre>
<h3>發佈/訂閱模式簡單應用</h3>
<p>作為前端開發人員，我們對所謂的「事件驅動」理念，即「事件發佈/訂閱模式（（ pub/sub 模式）」一定再熟悉不過了。這種模式是 JavaScript 與生俱來的基因：我們可以認為 Javascript 本身就是事件驅動型語言：舉例來說，應用中對第一個 button 進行了事件綁定，使用者點擊之後就會觸發按鈕對應的 click 事件。這是因為此時有特定程式正在監聽這個事件，隨之觸發了相關的處理函式</p>
<p>這個模式的好處在於能夠對程式進行解耦，實現「高內聚、低耦合」的理念。這種模式對於架構的設計同樣也不可或缺。請思考一下：透過學習前面的內容，我們是如何監聽資料變化的呢？如果最後想實現響應式 MVVM，或所謂的雙向綁定，那麼還需要根據這個資料變化做出對應的視圖更新。這個邏輯和在頁面中對 button 綁定事件處理函數是多麼相近。</p>
<pre><code class="language-js">
class Notify {
constructor() {
this.subscribers = []
}
add(handler) {
this.subscribers.push(handLer)
}
emit() {
this.subscribers.forEach((subscriber) => subscriber())
}
}
</code></pre>
<p>使用 Notify 類別產生出實體 notify 程式如下</p>
<pre><code class="language-js">
notify.add(() => {
console.log('emit here')
})
notify.emit()
// emit here
</code></pre>
<p>這就是一個簡單的事件發佈/訂閱模式實現，以上程式只用來啟發想法，實現得比較粗糙，沒有進行事件名設定，也沒有涉及很多 API，但完全能夠說明問題。其實，透過閱讀 Vue 原始程式碼也能看出 Vue 中的發佈/訂閱模式很簡單。</p>
<h3>MVVM 概述</h3>
<p>根據這些概念已經可以實現一個 MVVM 架構。其實不管是 Vue Angular 還是其他類別庫或
架構，其解決思想都是建立在前面所講的概念之上的。註：React 是單向數據流，並非雙向綁定的 MVVM 架構。當然如果要在 React 應用中實作 MVVM 只要按照先前提到的思路實作也是可以的。</p>
<p>將 MVVM 整個過程串聯起來就是：首先對資料進行深度攔截或代理，對每一個屬性的 getter和 setter進行「加工」。換句話說，需要在範本初次編譯時，解析指令（如v-model）並進行依賴收集 ({{變數}})，訂閱資料的變化。</p>
<p>這裡的依賴收集過程實際是指：當呼叫 compiler 中的 replace 方法時，我們會讀取資料進行範本變數的取代，「讀取資料時」需要做一個標記，用來表示「我依賴這一項資料」，因此我要訂閱這個屬性值的變化。Vue 中是透過定義一個 Watcher 類別來表示觀察訂閱依賴的。這就是整個依賴收集過程，換個想法再複述一遍：我們知道範本編譯過程中會讀取資料，進而觸發資料來源屬性值的 getter，因此上面所說的資料代理的「加工」就是在資料監聽的 getter 中記錄這個依賴，同時在 setter 觸發資料變化時執行依賴對應的相關操作，最後觸發範本中的資料變化的。</p>
<p>為了便於了解，下面將以上過程抽象成流程圖，如圖1所示。</p>
<img src="./assets/image/1-6-1/1.jpeg" alt="" />
<h3>虛擬 DOM</h3>
<p>虛擬 DOM 這個概念其實並沒有那麼新，甚至在前端3大架構問世之前，虛擬 DOM 就已經存在了，只不過 React 創造性地應用了虛擬 DOM，為前端發展帶來了變革。Vue 2.0也很快跟進，使得虛擬 DOM 徹底成為現代架構的重要基因。簡單來說，虛擬 DOM 就是用資料結構表示 DOM 結構，它並沒有真實掛載到 DOM 上，因此被稱為「虛擬DOM」</p>
<p>應用虛擬 DOM 的好處很直觀：操作資料結構遠比透過和瀏覽器互動去操作
DOM 快。準確了解這句話的意思就是，操作資料結構是指改變物件（虛擬DOM），這個過程比修改真實 DOM 快很多。但虛擬 DOM 最後也是要掛載到瀏覽器上成為真實 DOM 節點的，因此使用虛擬 DOM 並不能使操作DOM的次數減少，但能夠精確地取得最小的、最必要的操作 DOM 的集合。</p>
<p>這樣一來，我們抽象表示 DOM，每次透過 DOM diff 計算出視圖前後更新的最小差異，再把最小差異應用到真實 DOM 上的做法，無疑更為可靠，效能更有保障。</p>
<p>如果用 JavaScript 來表示 DOM 結構，則採用物件結構形式的實際表示如下。</p>
<pre><code class="language-js">
const chapterListVirtualDom = {
tagName: 'ul',
attributes: {
id: 'chapterList'
},
children: [
{
tagName: 'li',
attributes: { class: 'chapter' },
children: ['chapter1']
},
{
tagName: 'li',
attributes: { class: 'chapter' },
children: ['chapter2']
},
{
tagName: 'li',
attributes: { class: 'chapter' },
children: ['chapter3']
}
]
}
</code></pre>
<p>tagName 表示虛擬 DOM 對應的真實 DOM 標籤類型；attributes 是一個物件，表示真實 DOM 節點上的所有屬性；children 對應真實 DOM 的 childNodes，其中 childNodes 的每一項又是類似的結構。</p>
<p>下面來實現一個虛擬 DOM 產生類別，用於生產虛擬 DOM，程式如下。</p>
<pre><code class="language-js">
class Element {
constructor(tagName, attributes = {}, children = []) {
this.tagName = tagName
this.attributes = attributes
this.children = children
}
}
function element(tagName, attributes, children) {
return new Element(tagName, attributes, children)
}
</code></pre>
<p>上述虛擬 DOM 可以採用以下方法產生。</p>
<pre><code class="language-js">
const chapterListVirtualDom = element('ul', { id: 'list' }, [
element('li', { class: 'chapter' }, ['chapter1']),
element('li', { class: 'chapter' }, ['chapter2']),
element('li', { class: 'chapter' }, ['chapter3'])
])
</code></pre>
<p>執行以上程式，列印出的內容如下圖所示。</p>
<img src="./assets/image/1-6-1/2.jpeg" alt="" />
<p>下面繼續將虛擬 DOM 產生真實 DOM 節點。首先實現一個
setAttribute 方法，後續的程式都將使用 setAttribute 方法來對 DOM 節點進行
屬性設定，程式如下所示。</p>
<pre><code class="language-js">
const setAttribute = (node, key, value) => {
switch (key) {
case 'style':
node.style.cssText = value
break
case 'value':
let tagName = node.tagName || ''
tagName = tagName.toLowerCase()
if (tagName === 'input' || tagName === 'textarea') {
node.value = value
} else {
// 如果節點不是 input 或 textarea，則使用 setAttribute 設定屬性
node.setAttribute(key, value)
}
break
default:
node.setAttribute(key, value)
break
}
}
</code></pre>
<p>下面在 Element 類別中加入 render 原型方法，該方法的目的是根據虛擬 DOM 產生真實 DOM 片段，程式如下。</p>
<pre><code class="language-js">
class Element {
constructor(tagName, attributes = {}, children = []) {
this.tagName = tagName
this.attributes = attributes
this.children = children
}
render() {
let element = document.createElement(this.tagName)
let attributes = this.attributes
for (let key in attributes) {
setAttribute(element, key, attributes[key])
}
let children = this.children
children.forEach((child) => {
let childElement =
child instanceof Element ? child.render() : document.createTextNode(child)
// 若 child 也是虛擬節點，則遞迴進行
// 若是字串，則直接建立文字節點
element.appendChild(childElement)
})
return element
}
}
function element(tagName, attributes, children) {
return new Element(tagName, attributes, children)
}
</code></pre>
<p>有了真實的 DOM 節點片段，接下來就可以將真實的DOM 節點繪製到瀏覽器上了。可以透過 renderDom 方法實現，該方法的實現程式如下。</p>
<pre><code class="language-js">
const renderDom = (element,target)=>{
target.appendChild(element)
}
</code></pre>
<p>至此，我們便實現了產生DOM 元素的必備方法集合。完整程式如下。</p>
<pre><code class="language-js">
const setAttribute = (node, key, value) => {
switch (key) {
case 'style':
node.style.cssText = value
break
case 'value':
let tagName = node.tagName || ''
tagName = tagName.toLowerCase()
if (tagName === 'input' || tagName === 'textarea') {
node.value = value
} else {
// 如果節點不是input 或textarea，則使用setAttribute去設定屬性
node.setAttribute(key, value)
}
break
default:
node.setAttribute(key, value)
break
}
}
class Element {
constructor(tagName, attributes = {}, children = []) {
this.tagName = tagName
this.attributes = attributes
this.children = children
}
render() {
let element = document.createElement(this.tagName)
let attributes = this.attributes
for (let key in attributes) {
setAttribute(element, key, attributes[key])
}
let children = this.children
children.forEach((child) => {
let childElement =
child instanceof Element ? child.render() : document.createTextNode(child)
// 若 child 也是虛擬節點，則遞迴進行
// 若是字串，則直接建立文字節點
element.appendChild(childElement)
})
return element
}
}
function element(tagName, attributes, children) {
return new Element(tagName, attributes, children)
}
const renderDom = (element, target) => {
target.appendChild(element)
}
const chapterListVirtualDom = element('ul', { id: 'list' }, [
element('li', { class: 'chapter' }, ['chapter1']),
element('li', { class: 'chapter' }, ['chapter2']),
element('li', { class: 'chapter' }, ['chapter3'])
])
const dom = chapterListVirtualDom.render()
renderDom(dom, document.body)
</code></pre>
<p>執行上面函式後，便可以獲得真實的 DOM 元素了，結果如下圖所示。</p>
<img src="./assets/image/1-6-1/3.jpeg" alt="" />
<h4>虚擬 DOM diff</h4>
<p>有了上述基礎，接下來便可以產出一份虛擬 DOM，並繪製在瀏覽器中了。
使用者進行特定操作後，會產出一份新的虛擬DOM，如何得出前後兩份虛擬 DOM的差異，並交給瀏覽器需要更新的結果呢？這就有關 DOM diff 的內容了。</p>
<p>從直觀上來看，因為虛擬DOM 是個樹狀結構，所以我們需要對兩份虛擬
DOM進行遞廻比較，並將變化儲存到變數 patches 中，程式如下。</p>
<pre><code class="language-js">
const diff = (oldVirtualDom, newVirtualDom) => {
let patches = {}
// 遞迴樹，將比較後的結果儲存到patches中
walkToDiff(oldVirtualDom, newVirtualDom, 0, patches)
// 傳回diff結果
return patches
}
</code></pre>
<p>walkToDiff 中的前兩個參數是需要比較的虛擬 DOM 物件；第三個參數用來記錄 nodeIndex，在刪除節點時會使用，初值為0；第四個參數是一個閉包變數，用來記錄 diff 結果。</p>
<p>以下為 walkToDiff 的實現程式。</p>
<pre><code class="language-js">
let initialIndex = 0
const walkToDiff = (oldVirtualDom, newVirtualDom, index, patches) => {
let diffResult = []
// 如果 newVirtualDom 不存在，則說明該節點已經被移除，接著可以將 type 為 REMOVE 的
// 物件推進 diffResult 變數，並記錄 index
if (!newVirtualDom) {
diffResult.push({
type: 'REMOVE',
index
})
}
// 如果新舊節點都是文字節點
else if (typeof oldVirtualDom == 'string' && typeof newVirtualDom === 'string') {
// 比較文字中的內容是否相同，如果不同則記錄新的結果
if (oldVirtualDom !== newVirtualDom) {
diffResult.push({ type: 'MODIFY TEXT', data: newVirtualDom, index })
}
}
// 如果新舊節點類型相同
else if (oldVirtualDom.tagName === newVirtualDom.tagName) {
// 比較屬性是否相同
let diffAttributeResult = {}
for (let key in oldVirtualDom) {
if (oldVirtualDom[key] !== newVirtualDom[key]) {
diffAttributeResult[key] = newVirtualDom[key]
}
}
for (let key in newVirtualDom) {
// 舊節點不存在的新屬性
if (!oldVirtualDom.hasOwnProperty(key)) {
diffAttributeResult[key] = newVirtualDom[key]
}
}
if (Object.keys(diffAttributeResult).length > 0) {
diffResult.push({
type: 'MODIFY ATTRIBUTES',
diffAttributeResult
})
}
// 如果有子節點，則檢查子節點
oldVirtualDom.children.forEach((child, index) => {
walkToDiff(child, newVirtualDom.children[index], ++initialIndex, patches)
})
}
// 如果節點類型不同，已經被直接取代了，則直接將新的結果放入diffResult陣列中
else {
diffResult.push({ type: 'REPLACE', newVirtualDom })
}
if (!oldVirtualDom) {
diffResult.push({
type: 'REPLACE',
newVirtualDom
})
}
if (diffResult.length) {
patches[index] = diffResult
}
}
</code></pre>
<p>下面對 diff 函數進行測試，程式如下</p>
<pre><code class="language-js">
const chapterListVirtualDom = element('ul', { id: 'list' }, [
element('li', { class: 'chapter' }, ['chapter1']),
element('li', { class: 'chapter' }, ['chapter2']),
element('li', { class: 'chapter' }, ['chapter3'])
])
const chapterListVirtualDom1 = element('ul', { id: 'list2' }, [
element('li', { class: 'chapter2' }, ['chapter4']),
element('li', { class: 'chapter2' }, ['chapter5']),
element('li', { class: 'chapter2' }, ['chapter6'])
])
diff(chapterListVirtualDom, chapterListVirtualDom1)
</code></pre>
<img src="./assets/image/1-6-1/4.jpeg" alt="" />
<h4>最小化差異應用</h4>
<p>總結一下截至為止共做了哪些事：透過 Element class 產生了虛擬 DOM．透過 diff 方法對任意兩個虛擬 DOM 進行比對．獲得差異。那麼，如何將這個差異更新到現有的DOM 節點中呢？看上去需要使用 patch 方法來完成，程式如下。</p>
<pre><code class="language-js">
const patch = (node, patches) => {
let walker = { index: 0 }
walk(node, walker, patches)
}
</code></pre>
<p>patch 方法會接收一個真實的DOM 節點（它是現有的瀏覽器中需要進行更新的DOM節點），同時會接收一個最小化差異集合，該集合對接 diff 方法傳回的結果。patch方法內部呼叫了 walk 函數，程式如下。</p>
<pre><code class="language-js">
const walk = (node, walker, patches) => {
let currentPatch = patches[walker.index]
let childNodes = node.childNodes
childNodes.forEach((child) => {
walker.index++
walk(child, walker, patches)
})
if (currentPatch) {
doPatch(node, currentPatch)
}
}
</code></pre>
<p>walk 函數會進行本身遞迴，對目前節點的差異呼叫 doPatch 方法進行更新。</p>
<pre><code class="language-js">
const doPatch = (node, patches) => {
patches.forEach((patch) => {
switch (patch.type) {
case 'MODIFY ATTRIBUTES':
const attributes = patch.diffAttributeResult.attributes
for (let key in attributes) {
if (node.nodeType !== 1) return
const value = attributes[key]
if (value) {
setAttribute(node, key, value)
} else {
node.removeAttribute(key)
}
}
break
case 'MODIFY_TEXT':
node.textContent = patch.data
break
case 'REPLACE':
let newNode =
patch.newNode instanceof Element
? render(patch.newNode)
: document.createTextNode(patch.newNode)
node.parentNode.replaceChild(newNode, node)
break
case 'REMOVE':
node.parentNode.removeChild(node)
break
default:
break
}
})
}
</code></pre>
<p>doPatch 方法會對4種類型的 diff 進行處理，最後進行測試，程式如下。</p>
<pre><code class="language-js">
var element = chapterListVirtualDom.render()
renderDom(element, document.body)
const patches = diff(chapterListVirtualDom, chapterListVirtualDom1)
patch(element, patches)
</code></pre>
<p>將剛剛介紹的內容融入前面的完整程式中，就能夠獲得虛擬 DOM 思想的全部實現了。當然，其中還可以使用一些最佳化方法，對一些邊界情況進行保別的處理，不過如果我們去 者一些著名的虛擬 DOM 函數庫 ：snabbdom etch 等，會發現其實現思想和上述範例完全一致。</p>
<p>其實只要底層JS標準沒有大幅更新，現代前端程式的框架實作都大同小異，而且存在不少共同實作思路。以上內容可以讓我們了解其實各個框架的實作原理都差不多，如此一來則可以大幅降低未來學習新框架的成本。</p>
</article>
</main>
</body>
<script type="module" src="./js/main.js"></script>
</html>