【js】vue 2.5.1 源码学习 （十一） 模板编译compileToFunctions渲染函数

大体思路（九）
本节内容：
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.js
index.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>
View Code

如有问题或者疑惑，欢迎评论。

 
posted @ 2019-07-12 16:00  逆风-鬼刀  阅读(623)  评论(0)  编辑  收藏  举报