【js】vue 2.5.1 源碼學習（十一）模板編譯compileToFunctions渲染函數

時間 2019-11-29

標籤 vue 2.5.1 源碼學習十一模板編譯 compiletofunctions 渲染函數欄目 JavaScript 简体版

原文原文鏈接

大致思路（九）

本節內容：

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>