大体思路（九）
本节内容：
1. compileToFunctions定位
1. compileToFunctions定位
==> createCompiler = createCompilerCreator(function beasCompile(){}) // 创建编译器的编译器 编译器的爷爷。
==> beasOptions 编译器默认预留选项
==> createCompiler(beasOptions) 创建一个编译器。返回一个对象
==> { compile: function{} ,conpileToFunctions:function{} }
==> compileToFunctions(template,{用户配置和兼容},this)
==> createCompilerCreator(beasCompile){
return function createCompiler(beasOptions){
function compiler(template,options){
// 编译器核心方法
}
return {
compile: compiler,
conpileToFunctions: createComilpeToFunctionFn(compiler)
}
}
}
==> createComilpeToFunctionFn(compile){
// 缓存对象 存储 编译结果
var cache = Object.create(null)
return function comilpeToFunctions(template,options,vm) {
try{
new Function('return 1')
}catch(e){
if(e.toString().match(/unsafe-eval|csp/)){
console.error('您当前的环境禁止不安全评估的内容安全策略，模版编译无法在此环境中工作')
}
}
var key = template
// 缓存作用，编译过后不重复编译
if(!cache[key]){
return cache[key]
}
var compiled = compile(template,options)
/// comilped.errors 错误信息 compiled.tips 提示信息
if（）{} if(){}
var res = {}
var fnGenErrors = []
res.render = createFuntion(compiled.render,fnGenErrors);
res.staticRenderFns = compiled
return res; }
}
==> compiler(template,options){
finalOptions =
errors = [] tips = []
// if(options) 检测用户有那些自定义配置，最终扩展到 finalOptions
var compiled = beasCompile(template,finalOptions)
errors tips
return compiled;
}
==> beasCompile(template,options){
// 把模版解析成抽象的语法树(AST) parse 函数
// 根据给点的AST 生成目标平台需要的代码 “函数题的字符串” generate() 函数new Function()
var ast = pares()
var code = generate(ast,options); // 函数体字符串
return {
// ast:ast,
render:code.render, // 渲染函数
// staticRenderFns: code.staticRenderFns }
}
==> createFuntion(code,error){
try{
new Function(code)
}catch(){ }
}
2. compileToFunctions 作用
3. 模版编译代码组织结构
本节将新内容分开写到compileToFunctions 分析学习后，在合并到vue.js,如下是compileToFunctions.js
compileToFunctions.js
index.html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>第九课</title>
</head>
<body>
<div id="app">
<!-- <huml></huml> --> </div>
<script src="vue.js"></script>
<!-- <script src="vue2.5.1.js"></script> -->
<script type="text/javascript">
var componentA = {
el: "#app"
}
var vm = new Vue({
el:"#app",
data: {
message: "hello Vue",
key: "wodow",
test: 1, list: {
b:1
},
aa:{
b: [1,2,3]
}
},
beforeCreate: function(){
console.log('我钩子函数beforeCreate') },
mounted: function(){
this.url = 'eeeee'
},
components:{
humle: componentA
}
})
vm.test = 2;
// console.log(vm.aa)
</script>
</body>
</html>
如有问题或者疑惑，欢迎评论。