[TOC]
*****
## web-compiler web编译
>[info] import
~~~
;(导入)扩展,基础编译,web指令,web基础工具
import { extend } from 'shared/util'
import { compile as baseCompile } from 'compiler/index'
import directives from 'web/compiler/directives/index'
import { isReservedTag, isUnaryTag, mustUseProp, getTagNamespace } from 'web/util/index'
~~~
>[info] module
~~~
;分别存储保留空白,非保留空白
const cache1 = Object.create(null)
const cache2 = Object.create(null)
;编译配置项
const baseOptions = {
expectHTML: true,
directives,
isReservedTag,
isUnaryTag,
mustUseProp,
getTagNamespace
}
;web编译入口
export function compile (template, options) {
options = options
? extend(extend({}, baseOptions), options)
: baseOptions
return baseCompile(template, options)
}
;编译成渲染函数
export function compileToFunctions (template, options = {}) {
;是否保留空白节点
options.preserveWhitespace = options.preserveWhitespace !== false
const cache = options.preserveWhitespace ? cache1 : cache2
;缓存检查
if (cache[template]) {
return cache[template]
}
;准备编译
const res = {}
const compiled = compile(template, options)
;渲染函数获取
res.render = new Function(compiled.render)
;静态渲染函数
const l = compiled.staticRenderFns.length
if (l) {
res.staticRenderFns = new Array(l)
for (let i = 0; i < l; i++) {
res.staticRenderFns[i] = new Function(compiled.staticRenderFns[i])
}
}
;缓存编译结果
return (cache[template] = res)
}
~~~
>[info] export
- 概述
- 框架结构
- 编译入口(\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源码分析资料