第一章 權(quán)衡藝術(shù)
1.1 命令式和聲明式
從范式上看，視圖層框架分為命令式和聲明式。
命令式：
一大特點是：關(guān)注過程
聲明式：
一大特點是：關(guān)注結(jié)果
1.2 性能與可維護性
聲明式代碼的性能不優(yōu)于命令式代碼的性能
框架本身就是封裝了命令式代碼才實現(xiàn)了面向用戶的聲明式
聲明式代碼的可維護性強
1.3 虛擬DOM的性能
為了使聲明式的性能更接近命令式的性能，這就是虛擬DOM的作用
通過innerHTML創(chuàng)建頁面的性能：HTML字符串拼接的計算量+innerHTML的DOM計算量
虛擬DOM創(chuàng)建頁面的性能：創(chuàng)建JavaScript對象的計算量+創(chuàng)建真實DOM的計算量
innerHTML更新頁面的時候：要重新構(gòu)建HTML字符串，再重新設(shè)置DOM元素的innerHTML屬性。其實就是要銷毀所有舊的DOM元素，再全量的創(chuàng)建新的DOM元素。
虛擬DOM更新頁面的時候：比較新舊虛擬DOM，找到變化的元素更新它
性能：原生JavaScript > 虛擬DOM > innerHTML(模板)
1.4 運行時和編譯時
純運行時：
編寫一個Render函數(shù)
提供一個樹型結(jié)構(gòu)的數(shù)據(jù)對象：
01 const obj = {
02 tag: 'div',
03 children: [
04 { tag: 'span', children: 'hello world' }
05 ]
06 }
Render函數(shù)：
01 function Render(obj, root) {
02 const el = document.createElement(obj.tag)
03 if (typeof obj.children === 'string') {
04 const text = document.createTextNode(obj.children)
05 el.appendChild(text)
06 } else if (obj.children) {
07 // 數(shù)組，遞歸調(diào)用 Render，使用 el 作為 root 參數(shù)
08 obj.children.forEach((child) => Render(child, el))
09 }
10
11 // 將元素添加到 root
12 root.appendChild(el)
13 }
使用：
01 const obj = {
02 tag: 'div',
03 children: [
04 { tag: 'span', children: 'hello world' }
05 ]
06 }
07 // 渲染到 body 下
08 Render(obj, document.body)
運行時+編譯時
編寫Compiler的程序，作用是把HTML字符串編譯成樹型結(jié)構(gòu)的數(shù)據(jù)對象
使用：
01 const html = `
02 <div>
03 <span>hello world</span>
04 </div>
05 `
06 // 調(diào)用 Compiler 編譯得到樹型結(jié)構(gòu)的數(shù)據(jù)對象
07 const obj = Compiler(html)
08 // 再調(diào)用 Render 進行渲染
09 Render(obj, document.body)
純編譯時：
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-wBZ0pbQQ-1686448242740)(C:\Users\virtue\AppData\Roaming\Typora\typora-user-images\image-20230213173530302.png)]
這個時候只需要Compiler函數(shù)就可以了，只通過編譯器編譯就可以了。
第二章 框架設(shè)計的核心要素
一. 提升用戶的開發(fā)體驗
二. 控制框架代碼的體積
三. 框架要做到良好的Tree-Shaking
Tree-Shaking 指的是消除哪些永遠不會被執(zhí)行的代碼，排除dead code
實現(xiàn)Tree-Shaking必須滿足模板是ESM（ES Module）依賴ESM的靜態(tài)結(jié)構(gòu)
Tree-Shaking工作原理：
目錄結(jié)構(gòu)
01 ├── demo
02 │ └── package.json
03 │ └── input.js
04 │ └── utils.js
首先安裝rollup.js
01 yarn add rollup -D
02 # 或者 npm install rollup -D
input.js和util.js文件的內(nèi)容
01 // input.js
02 import { foo } from './utils.js'
03 foo()
04 // utils.js
05 export function foo(obj) {
06 obj && obj.foo
07 }
08 export function bar(obj) {
09 obj && obj.bar
10 }
以input.js文件為入口，輸出ESM，輸出文件的名字叫作bundle.js
01 npx rollup input.js -f esm -o bundle.js
bundle.js的內(nèi)容
01 // bundle.js
02 function foo(obj) {
03 obj && obj.foo
04 }
05 foo();
Tree-Shaking中的第二個關(guān)鍵點------副作用
如果一個函數(shù)產(chǎn)生了副作用，那么就不會被消除。
副作用：當調(diào)用函數(shù)的時候會對外界產(chǎn)生影響
01 //input.js
02 import {foo} from './utils'
03
04 /*#__PURE__*/ foo()
注釋代碼 /#PURE/，其作用就是告訴 rollup.js,對于foo函數(shù)的調(diào)用不會產(chǎn)生副作用
IIFE格式的資源：iife 立刻調(diào)用的函數(shù)表達式
ESM格式的資源：esm
vue.esm-browser.js中的-browser字樣的ESM資源是直接給文章來源：http://www.zghlxwxcb.cn/news/detail-482602.html
cjs格式的資源：cjs 全稱：CommonJS文章來源地址http://www.zghlxwxcb.cn/news/detail-482602.html
到了這里，關(guān)于Vue.js設(shè)計與實現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
