[TOC]
*****
## 2 optimizer.js ast優化
>[info] import
~~~
;(導入)基礎工具
import { makeMap, isBuiltInTag } from 'shared/util'
~~~
>[info] module
~~~
;平臺保留標簽
let isPlatformReservedTag
;解析結果優化
export function optimize (root, options) {
;是否平臺保留標簽
isPlatformReservedTag = options.isReservedTag || (() => false)
;第一次遍歷
markStatic(root)
;第二次遍歷
markStaticRoots(root)
}
;第一次遍歷 標記所有非靜態節點
function markStatic (node) {
node.static = isStatic(node)
if (node.children) {
for (let i = 0, l = node.children.length; i < l; i++) {
const child = node.children[i]
markStatic(child)
if (!child.static) {
node.static = false
}
}
}
}
;第二次遍歷 標記所有靜態節點
function markStaticRoots (node) {
if (node.tag && (node.once || node.static)) {
node.staticRoot = true
return
}
if (node.children) {
for (let i = 0, l = node.children.length; i < l; i++) {
markStaticRoots(node.children[i])
}
}
}
;靜態屬性key
const isStaticKey = makeMap(
'tag,attrsList,attrsMap,plain,parent,children,' +
'staticAttrs,staticClass'
)
;靜態屬性檢測
function isStatic (node) {
return !!(node.text || node.pre || (
!node.expression && // not text with interpolation
!node.if && !node.for && // not v-if or v-for or v-else
(!node.tag || isPlatformReservedTag(node.tag)) && // not a component
!isBuiltInTag(node.tag) && // not a built-in
(node.plain || Object.keys(node).every(isStaticKey)) // no dynamic bindings
))
}
~~~
>[info] export
~~~
;(導出)解析結果優化
export function optimize (root, options) {
~~~
- 概述
- 框架結構
- 編譯入口(\entries)
- web-compiler.js(web編譯)
- web-runtime.js(web運行時)
- web-runtime-wih-compiler.js(web編譯運行)
- web-server-renderer.js(web服務器渲染)
- 核心實現 (\core)
- index.js(核心入口)
- config.js(核心配置)
- core\util(核心工具)
- core\observer(雙向綁定)
- core\vdom(虛擬DOM)
- core\global-api(核心api)
- core\instance(核心實例)
- 模板編譯(\compiler)
- compiler\parser(模板解析)
- events.js(事件解析)
- helper.js(解析助手)
- directives\ref.js(ref指令)
- optimizer.js(解析優化)
- codegen.js(渲染生成)
- index.js(模板編譯入口)
- web渲染(\platforms\web)
- compiler(web編譯目錄)
- runtime(web運行時目錄)
- server(web服務器目錄)
- util(web工具目錄)
- 服務器渲染(\server)
- render-stream.js(流式渲染)
- render.js(服務器渲染函數)
- create-renderer.js(創建渲染接口)
- 框架流程
- Vue初始化
- Vue視圖數據綁定
- Vue數據變化刷新
- Vue視圖操作刷新
- 框架工具
- 基礎工具(\shared)
- 模板編譯助手
- 核心實例工具
- Web渲染工具
- 基礎原理
- dom
- string
- array
- function
- object
- es6
- 模塊(Module)
- 類(Class)
- 函數(箭頭)
- 字符串(擴展)
- 代理接口(Proxy)
- 數據綁定基礎
- 數據綁定實現
- mvvm簡單實現
- mvvm簡單使用
- vdom算法
- vdom實現
- vue源碼分析資料