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