这次，来学习下Vue是如何解析HTML代码的。
template 解析用在哪
从之前学习 Render 的过程中我们知道，template 的编译在 $mount 方法中出现过。
// src/platforms/web/entry-runtime-with-compiler.js
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && query(el)
/* istanbul ignore if */
if (el === document.body || el === document.documentElement) {
return this
}
const options = this.$options
// resolve template/el and convert to render function
if (!options.render) {
let template = options.template
if (template) {
if (typeof template === 'string') {
if (template.charAt(0) === '#') {
// 首字母为#号，看作是ID。
template = idToTemplate(template)
}
} else if (template.nodeType) {
// 为真实 DOM，直接获取html
template = template.innerHTML
} else {
return this
}
} else if (el) {
// 获取 HTML
template = getOuterHTML(el)
}
if (template) {
// 进行编译并赋值给 vm.$options
const { render, staticRenderFns } = compileToFunctions(template, {
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this)
// 渲染函数
options.render = render
// 静态渲染方法
options.staticRenderFns = staticRenderFns
}
}
return mount.call(this, el, hydrating)
}
其实以上代码总结起来就4步：
- 获取el元素。
- 判断el是否为body或者html。
- 为$options编译render函数。
- 执行之前的mount函数。
关键在于第三步，编译 render 函数上。先获取 template，即获取HTML内容，然后执行 compileToFunctions 来编译，最后将 render 和 staticRenderFns 传给 vm.$options 对象。
顺便看看这两个方法都用在哪里？
// src/core/instance/render.js
Vue.prototype._render = function (): VNode {
try {
vnode = render.call(vm._renderProxy, vm.$createElement)
} catch (e) {
handleError(e, vm, `render`)
}
return vnode
}
// src/core/instance/render-helpers/render-static.js
export function renderStatic (
index: number,
isInFor: boolean
): VNode | Array<VNode> {
const cached = this._staticTrees || (this._staticTrees = [])
let tree = cached[index]
if (tree && !isInFor) {
return tree
}
// otherwise, render a fresh tree.
tree = cached[index] = this.$options.staticRenderFns[index].call(
this._renderProxy,
null,
this
)
markStatic(tree, `__static__${index}`, false)
return tree
}
由此可见，template 编译生成的方法都用在了渲染行为中。
编译 template 的整体逻辑
下面我们顺着编译代码往下找。在 mount 方法中执行了 compileToFunctions 方法。
const { render, staticRenderFns } = compileToFunctions(template, {
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this)
找到方法的所在之处：
// src/platforms/web/compiler/index.js
const { compile, compileToFunctions } = createCompiler(baseOptions)
// src/compiler/index.js
export const createCompiler = createCompilerCreator(function baseCompile (
template: string,
options: CompilerOptions
): CompiledResult {
// 将template转为AST语法树对象
const ast = parse(template.trim(), options)
if (options.optimize !== false) {
// 优化
optimize(ast, options)
}
// 生成渲染代码
const code = generate(ast, options)
return {
ast,
render: code.render,
staticRenderFns: code.staticRenderFns
}
})
先看里面的 baseCompile 方法，其作用为将 HTML 字符串转为 AST 抽象语法树对象，并进行优化，最后生成渲染代码。返回值中 render 为渲染字符串，staticRenderFns 为渲染字符串数组。
之后再来看看 createCompilerCreator 方法：
// src/compiler/create-compiler.js
export function createCompilerCreator (baseCompile: Function): Function {
return function createCompiler (baseOptions: CompilerOptions) {
function compile (
template: string,
options?: CompilerOptions
): CompiledResult {
const finalOptions = Object.create(baseOptions)
const errors = []
const tips = []
finalOptions.warn = (msg, tip) => {
(tip ? tips : errors).push(msg)
}
if (options) {
// merge custom modules
if (options.modules) {
finalOptions.modules =
(baseOptions.modules || []).concat(options.modules)
}
// merge custom directives
if (options.directives) {
finalOptions.directives = extend(
Object.create(baseOptions.directives || null),
options.directives
)
}
// copy other options
for (const key in options) {
if (key !== 'modules' && key !== 'directives') {
finalOptions[key] = options[key]
}
}
}
// 执行传入的编译方法，并返回结果对象
const compiled = baseCompile(template, finalOptions)
if (process.env.NODE_ENV !== 'production') {
errors.push.apply(errors, detectErrors(compiled.ast))
}
compiled.errors = errors
compiled.tips = tips
return compiled
}
return {
compile,
compileToFunctions: createCompileToFunctionFn(compile)
}
}
}
来看 compile 方法：合并 option 配置参数，然后执行外部传入的 baseCompile 方法，返回方法执行的返回结果。最终返回 { compile, compileToFunctions }，
createCompileToFunctionFn 代码如下：
export function createCompileToFunctionFn (compile: Function): Function {
// 定义缓存
const cache = Object.create(null)
return function compileToFunctions (
template: string,
options?: CompilerOptions,
vm?: Component
): CompiledFunctionResult {
options = extend({}, options)
const warn = options.warn || baseWarn
delete options.warn
// 确认缓存，有缓存直接返回
const key = options.delimiters
? String(options.delimiters) + template
: template
if (cache[key]) {
return cache[key]
}
// compile
const compiled = compile(template, options)
// turn code into functions
const res = {}
const fnGenErrors = []
// 生成 render 和 staticRenderFns 方法
res.render = createFunction(compiled.render, fnGenErrors)
res.staticRenderFns = compiled.staticRenderFns.map(code => {
return createFunction(code, fnGenErrors)
})
// 返回方法并缓存
return (cache[key] = res)
}
}
这里就找到了我们在 mount 方法中看到的 render 和 staticRenderFns 方法了。createCompileToFunctionFn 方法其实就是将传入的 render 和 staticRenderFns 字符串转为真实方法。
至此，捋一下思路：
template的编译用于render渲染行为中，所以template最后生成渲染函数。
template 的解析过程中
- 通过 baseCompile 方法进行编译；
- 通过 createCompilerCreator 中的 compile 方法合并配置参数并返回 baseCompile 方法执行结果；
- createCompilerCreator 返回 compile 方法和 compileToFunctions 方法；
- compileToFunctions 方法用于将方法字符串生成真实方法。
其实 const { compile, compileToFunctions } = createCompiler(baseOptions) 就是 createCompilerCreator 的返回结果。所以，在 mount 中使用的 compileToFunctions 方法就是 createCompileToFunctionFn 方法生成的。
baseCompile
整体思路滤清了，来看看关键的 baseCompile 方法。该方法进行了三步操作：
- parse 将HTML解析为 AST 元素。
- optimize 渲染优化。
- generate 解析成基本的 render 函数。
parse
先来讲讲AST抽象语法树。维基百科的解释是：
在计算机科学中，抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。
parse 方法的最终目的就是将 template 解析为 AST 元素对象。在 parse 解析方法中，用到了大量的正则。正则的具体用法之前写过一篇文章：一起来理解正则表达式。代码量很多，考虑了各种解析的情况。这里不赘述太多，找一条主线来学习，其他内容我将在项目中注释。
来看看 parse 方法。
export function parse (
template: string,
options: CompilerOptions
): ASTElement | void {
// 定义了各种参数和方法
parseHTML(template, {
warn,
expectHTML: options.expectHTML,
isUnaryTag: options.isUnaryTag,
canBeLeftOpenTag: options.canBeLeftOpenTag,
shouldDecodeNewlines: options.shouldDecodeNewlines,
shouldDecodeNewlinesForHref: options.shouldDecodeNewlinesForHref,
shouldKeepComment: options.comments,
start (tag, attrs, unary) {},
end () {}
chars (text: string) {},
comment (text: string) {}
)
return root
}
实际上 parse 就是 parseHTML 的过程，最后返回AST元素对象。其中，传入的 options 配置对象中，start、end、chars、comment方法都会在 parseHTML 方法中用到。其实类似于生命周期钩子，在某个阶段执行。
parseHTML 方法是正则解析HTML的过程，这部分我将在之后的博客中单独说下，也可以看项目的注释，将不定时更新项目注释。
optimize
该方法只是做了些标记静态节点的行为，目的是为了在重新渲染时不重复渲染静态节点，以达到性能优化的目的。
export function optimize (root: ?ASTElement, options: CompilerOptions) {
if (!root) return
isStaticKey = genStaticKeysCached(options.staticKeys || '')
isPlatformReservedTag = options.isReservedTag || no
// 标记所有非静态节点
markStatic(root)
// 标记静态根节点
markStaticRoots(root, false)
}
generate
generate 方法用于将 AST 元素生成 render 渲染字符串。
export function generate (
ast: ASTElement | void,
options: CompilerOptions
): CodegenResult {
const state = new CodegenState(options)
const code = ast ? genElement(ast, state) : '_c("div")'
return {
render: `with(this){return ${code}}`,
staticRenderFns: state.staticRenderFns
}
}
最后生成如下这样的渲染字符串：
with(this){return _c('div',{attrs:{"id":"app"}},[_c('button',{on:{"click":hey}},[_v(_s(message))])])}
其中的 _c _v _s 等方法在哪里呢~这个我们之前说起过:
// src/core/instance/render.js
// 创建vnode元素
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
// src/core/instance/render-helper/index.js
export function installRenderHelpers (target: any) {
target._o = markOnce
target._n = toNumber
target._s = toString
target._l = renderList
target._t = renderSlot
target._q = looseEqual
target._i = looseIndexOf
target._m = renderStatic
target._f = resolveFilter
target._k = checkKeyCodes
target._b = bindObjectProps
target._v = createTextVNode
target._e = createEmptyVNode
target._u = resolveScopedSlots
target._g = bindObjectListeners
}
最后
其实template部分真的内容展开超级多，之后会展开细说。原本计划大前天就把博客写出来的，结果看代码看着看着绕进去了。所以，还是那句话，看代码得抓住主线，带着问题去看，不要在意细枝末节。
这也算是我的经验教训了，以后每次看代码，牢记待着明确的问题去看去解决。想一次看懂整个项目的代码是不可行的。
下期预告，parseHTML 细节解析
Vue.js学习系列
鉴于前端知识碎片化严重，我希望能够系统化的整理出一套关于Vue的学习系列博客。
Vue.js学习系列项目地址
本文源码已收入到GitHub中，以供参考，当然能留下一个star更好啦-。
https://github.com/violetjack/VueStudyDemos
关于作者
VioletJack，高效学习前端工程师，喜欢研究提高效率的方法，也专注于Vue前端相关知识的学习、整理。
欢迎关注、点赞、评论留言~我将持续产出Vue相关优质内容。
新浪微博： http://weibo.com/u/2640909603
掘金：https://gold.xitu.io/user/571d953d39b0570068145cd1
CSDN: http://blog.csdn.net/violetjack0808
简书： http://www.jianshu.com/users/54ae4af3a98d/latest_articles
Github： https://github.com/violetjack
