Vue源码解析之mustache模板引擎

一 介绍

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

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

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

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

纯DOM法:




    
    
    
    Document


    
  • 小明
    小明的基本信息

    姓名: 小明

    年龄12

    性别男

  • 小红
    小红的基本信息

    姓名: 小红

    年龄11

    性别女

  • 小强
    小强的基本信息

    姓名: 小强

    年龄13

    性别男

  • 小明 的信息

    姓名:小明

    年龄:12

    性别: 男

  • 小红 的信息

    姓名:小红

    年龄:11

    性别: 女

  • 小强 的信息

    姓名:小强

    年龄:13

    性别: 男

  • 小明的基本信息

    姓名: 小明

    性别: 男

    年龄: 12

  • 小红的基本信息

    姓名: 小红

    性别: 女

    年龄: 11

  • 小强的基本信息

    姓名: 小强

    性别: 男

    年龄: 13

数组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张图片

       

       

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