Vue源码解析之mustache模板引擎

一 介绍

模板引擎是将数据要变为视图最优雅的解决方案
Vue源码解析之mustache模板引擎_第1张图片

Vue源码解析之mustache模板引擎_第2张图片

 历史上曾出现过的数据变为视图的方法:

纯DOM法、数据join法、ES6的反引导法、模板引擎

纯DOM法:




    
    
    
    Document


    

    数组join法:( join 的参数 不可以省略,否则得到的 str 字符串会是以逗号间隔的)

    
    
    
        
        
        
        
    
    
        

      ES6的反引导法:

      
      
      
          
          
          
          Document
      
      
          

        二 mustache基本语法

        (1)渲染循环对象数组

        
            

        (2)不循环

           

        (3)渲染循环简单数组

          

        (4)数组的嵌套情况

          

        (5)布尔值

         

        三 mustache库的机理

        mustache库底层重点要做两个事情:
        ①将模板字符串编译为tokens形式
        ②将tokens结合数据,解析为dom字符串
         

        Vue源码解析之mustache模板引擎_第3张图片

        tokens是一个JS的嵌套数组, 就是模板字符串的JS表示
        它是“抽象语法树”、“虚拟节点”等等的鼾山鼻祖
         当模板字符串中有循环存在时,它将被编译为嵌套更深的tokens

        Vue源码解析之mustache模板引擎_第4张图片

         当循环是双重的,那么tokens会更深一层

        Vue源码解析之mustache模板引擎_第5张图片

         

         

        你可能感兴趣的:(前端,开发语言)