8000 编译原理的调用链路 · gitbu/learn-vue@69399fc · GitHub
[go: up one dir, main page]
Skip to content

Commit 69399fc

Browse files
author
buaiping
committed
编译原理的调用链路
1 parent 94c2329 commit 69399fc

File tree

10 files changed

+43
-95
lines changed

10 files changed

+43
-95
lines changed

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎docs/.vuepress/config.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,19 @@ module.exports = {
101101
title: '编译原理',
102102
collapsable: false,
103103
children: [
104-
'模板编译/概览'
104+
'模板编译/概览',
105+
{
106+
title: '调用链路',
107+
collapsable: true,
108+
children: [
109+
'模板编译/调用链路/图解链路',
110+
'模板编译/调用链路/调用编译',
111+
'模板编译/调用链路/compileToFunctions',
112+
'模板编译/调用链路/createCompiler',
113+
'模板编译/调用链路/createCompilerCreator',
114+
'模板编译/调用链路/createCompileToFunctionFn',
115+
]
116+
},
105117
]
106118
}
107119
]

‎docs/.vuepress/public/assets/编译调用链路.svg‎

Lines changed: 2 additions & 0 deletions
Loading

‎docs/vue2/模板编译/调用链路/compileToFunctions.md‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
# compileToFunctions和
1+
# 传入baseOptions
22

3-
```js
3+
```js {6}
44
/* @flow */
55

66
import { baseOptions } from './options'
77
import { createCompiler } from 'compiler/index'
8-
8+
// 这个只干了一件事儿，传入baseOptions
99
const { compile, compileToFunctions } = createCompiler(baseOptions)
1010

1111
export { compile, compileToFunctions }
1212

13-
```
14-
13+
```

‎docs/vue2/模板编译/调用链路/createCompileToFunctionFn.md‎

Lines changed: 7 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# createCompileToFunctionFn
1+
# 生成render函数
22

3-
```js
3+
```js {12-19,42,47-52}
44
/* @flow */
55

66
import { noop, extend } from 'shared/util'
@@ -33,85 +33,28 @@ export function createCompileToFunctionFn (compile: Function): Function {
3333
const warn = options.warn || baseWarn
3434
delete options.warn
3535

36-
/* istanbul ignore if */
37-
if (process.env.NODE_ENV !== 'production') {
38-
// detect possible CSP restriction
39-
try {
40-
new Function('return 1')
41-
} catch (e) {
42-
if (e.toString().match(/unsafe-eval|CSP/)) {
43-
warn(
44-
'It seems you are using the standalone build of Vue.js in an ' +
45-
'environment with Content Security Policy that prohibits unsafe-eval. ' +
46-
'The template compiler cannot work in this environment. Consider ' +
47-
'relaxing the policy to allow unsafe-eval or pre-compiling your ' +
48-
'templates into render functions.'
49-
)
50-
}
51-
}
52-
}
53-
54-
// check cache
36+
// 如果有编译直接用之前的
5537
const key = options.delimiters
5638
? String(options.delimiters) + template
5739
: template
5840
if (cache[key]) {
5941
return cache[key]
6042
}
6143

62-
// compile
44+
// 调用编译
6345
const compiled = compile(template, options)
6446

65-
// check compilation errors/tips
66-
if (process.env.NODE_ENV !== 'production') {
67-
if (compiled.errors && compiled.errors.length) {
68-
if (options.outputSourceRange) {
69-
compiled.errors.forEach(e => {
70-
warn(
71-
`Error compiling template:\n\n${e.msg}\n\n` +
72-
generateCodeFrame(template, e.start, e.end),
73-
vm
74-
)
75-
})
76-
} else {
77-
warn(
78-
`Error compiling template:\n\n${template}\n\n` +
79-
compiled.errors.map(e => `- ${e}`).join('\n') + '\n',
80-
vm
81-
)
82-
}
83-
}
84-
if (compiled.tips && compiled.tips.length) {
85-
if (options.outputSourceRange) {
86-
compiled.tips.forEach(e => tip(e.msg, vm))
87-
} else {
88-
compiled.tips.forEach(msg => tip(msg, vm))
89-
}
90-
}
91-
}
92-
9347
// turn code into functions
9448
const res = {}
9549
const fnGenErrors = []
50+
// 生成render函数
9651
res.render = createFunction(compiled.render, fnGenErrors)
52+
// 生成静态的render函数
9753
res.staticRenderFns = compiled.staticRenderFns.map(code => {
9854
return createFunction(code, fnGenErrors)
9955
})
10056

101-
// check function generation errors.
102-
// this should only happen if there is a bug in the compiler itself.
103-
// mostly for codegen development use
104-
/* istanbul ignore if */
105-
if (process.env.NODE_ENV !== 'production') {
106-
if ((!compiled.errors || !compiled.errors.length) && fnGenErrors.length) {
107-
warn(
108-
`Failed to generate render function:\n\n` +
109-
fnGenErrors.map(({ err, code }) => `${err.toString()} in\n\n${code}\n`).join('\n'),
110-
vm
111-
)
112-
}
113-
}
114-
57+
// 缓存并返回
11558
return (cache[key] = res)
11659
}
11760
}

‎docs/vue2/模板编译/调用链路/createCompiler.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
1-
# createCompiler
1+
# 传入编译器
22

3-
```js
3+
```js {6,9,12}
44
export const createCompiler = createCompilerCreator(function baseCompile (
55
template: string,
66
options: CompilerOptions
77
): CompiledResult {
8+
// 生成dom的抽象语法树
89
const ast = parse(template.trim(), options)
10+
// 优化dom diff, 一些静态的html就不会再去dom diff
911
if (options.optimize !== false) {
1012
optimize(ast, options)
1113
}
14+
// 生成字符串的render函数
1215
const code = generate(ast, options)
1316
return {
1417
ast,

‎docs/vue2/模板编译/调用链路/createCompilerCreator.md‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
# createCompilerCreator
1+
# 生成编译函数
22

3-
```js
3+
```js {22-41,46}
44
/* @flow */
55

66
import { extend } from 'shared/util'
77
import { detectErrors } from './error-detector'
88
import { createCompileToFunctionFn } from './to-function'
99

10+
// 这里就是一个闭包函数,接受基础的编译器和一些基础的配置项
1011
export function createCompilerCreator (baseCompile: Function): Function {
1112
return function createCompiler (baseOptions: CompilerOptions) {
1213
function compile (
@@ -20,25 +21,8 @@ export function createCompilerCreator (baseCompile: Function): Function {
2021
let warn = (msg, range, tip) => {
2122
(tip ? tips : errors).push(msg)
2223
}
23-
24+
// 合并传出的options和baseOptions
2425
if (options) {
25-
if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
26-
// $flow-disable-line
27-
const leadingSpaceLength = template.match(/^\s*/)[0].length
28-
29-
warn = (msg, range, tip) => {
30-
const data: WarningMessage = { msg }
31-
if (range) {
32-
if (range.start != null) {
33-
data.start = range.start + leadingSpaceLength
34-
}
35-
if (range.end != null) {
36-
data.end = range.end + leadingSpaceLength
37-
}
38-
}
39-
(tip ? tips : errors).push(data)
40-
}
41-
}
4226
// merge custom modules
4327
if (options.modules) {
4428
finalOptions.modules =
@@ -61,6 +45,7 @@ export function createCompilerCreator (baseCompile: Function): Function {
6145

6246
finalOptions.warn = warn
6347

48+
// 调用基础编译器
6449
const compiled = baseCompile(template.trim(), finalOptions)
6550
if (process.env.NODE_ENV !== 'production') {
6651
detectErrors(compiled.ast, warn)

‎docs/vue2/模板编译/调用链路/图解链路.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# 图解链路
2+
3+
<img :src="$withBase('/assets/编译调用链路.svg')">

‎docs/vue2/模板编译/调用链路/调用编译.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
# 调用编译
2+
看高亮部分
23

34
*src/platforms/web/entry-runtime-with-compiler.js*
45

5-
```js
6+
```js {66-72}
67
/* @flow */
78

89
import config from 'core/config'
@@ -36,6 +37,7 @@ Vue.prototype.$mount = function (
3637

3738
const options = this.$options
3839
// resolve template/el and convert to render function
40+
// 如果没有render函数的话就获取我们传入的el或template作为模板
3941
if (!options.render) {
4042
let template = options.template
4143
if (template) {
@@ -66,7 +68,7 @@ Vue.prototype.$mount = function (
6668
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
6769
mark('compile')
6870
}
69-
71+
// 传入template和option进行编译
7072
const { render, staticRenderFns } = compileToFunctions(template, {
7173
outputSourceRange: process.env.NODE_ENV !== 'production',
7274
shouldDecodeNewlines,

‎vue-dev/src/compiler/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export const createCompiler = createCompilerCreator(function baseCompile (
1313
options: CompilerOptions
1414
): CompiledResult {
1515
const ast = parse(template.trim(), options)
16-
debugger
1716
if (options.optimize !== false) {
1817
optimize(ast, options)
1918
}

0 commit comments

Comments
 (0)
0