• Vue源码解析之mustache模板引擎

    一 介绍

    模板引擎是将数据要变为视图最优雅的解决方案

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

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

    纯DOM法：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <ul id="list">ul>
    11.     <script>
    12.     var arr=[
    13.         {"name":"小明","age":12,"sex":"男"},
    14.         {"name": "小红","age":11,"sex":"女"},
    15.          {"name":"小强","age":13,"sex":"男"}
    16. ]
    17. var list=document.getElementById('list');
    18. for(var i=0;ilength;i++){
    19.     let oli=document.createElement('li');
    20.     oli.innerText=arr[i].name;
    21.     //创建的节点是孤儿节点，所以必须要上树才能被用户看见
    22.     //创建hd这个div
    23.     let hdDiv = document . createElement('div');
    24.      hdDiv.className = 'hd' ;
    25.      hdDiv.innerText = arr[i].name+'的基本信息'; 
    26.     //创建bd这个div
    27.     let bdDiv = document . createElement( 'div' );
    28.     bdDiv.className = 'bd' ;
    29.     //创建三个p
    30.     let p1 = document.createElement('p');
    31.      p1.innerText = ' 姓名: ' + arr[i ] . name;
    32.      bdDiv.appendChild(p1);
    33.      let p2 = document . createElement('p');
    34.       p2.innerText = '年龄'+arr[i].age ;
    35.      bdDiv.appendChild(p2);
    36.      let p3 = document . createElement('p');
    37.      p3. innerText ='性别'+arr[i].sex;
    38.      bdDiv.appendChild(p3);
    39.      oli.appendChild(hdDiv);
    40.      oli.appendChild(bdDiv);
    41.      list.appendChild(oli);
    42. }
    43.     script>
    44. body>
    45. html>

    数组join法：（ join 的参数 不可以省略，否则得到的 str 字符串会是以逗号间隔的）

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>title>
    8. head>
    9. <body>
    10.     <ul id="list">ul>
    11.     <script>
    12.     var arr=[
    13.         {"name":"小明","age":12,"sex":"男"},
    14.         {"name": "小红","age":11,"sex":"女"},
    15.          {"name":"小强","age":13,"sex":"男"}
    16. ]
    17. var list=document.getElementById('list');
    18. //遍历arr数组，每遍历-项，就以字符串的视角将HTML字符串添加到list中
    19. for(let i=0;ilength;i++){
    20. list.innerHTML+=
    21. [
    22. '
    23. ',
  • '
    ' + arr[i].name + ' 的信息
    '    ,
  • '
    ',
  • '

    姓名:'+ arr[i].name + '

    '    ,
  • '

    年龄:' + arr[i].age+'

    '     ,
  • '

    性别: ' + arr[i].sex +'

    '    ,
  • '
    ',
  • '
    • '
  • ].join('')
  • }
  • script>
  • body>
  • html>

    • ES6的反引导法：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <ul id="list">ul>
    11.     <script>
    12.     var arr=[
    13.         {"name":"小明","age":12,"sex":"男"},
    14.         {"name": "小红","age":11,"sex":"女"},
    15.          {"name":"小强","age":13,"sex":"男"}
    16. ]
    17. var list=document.getElementById('list');
    18. //遍历arr数组，每遍历- -项，就以字符串的视角将HTML字符串添加到list中
    19. for(let i=0;ilength;i++){
    20.     list.innerHTML +=`
    21.      
    23.        
      ${arr[i].name}的基本信息
    24.         
    25.          
      姓名: ${arr[i].name}
    26.          
      性别: ${arr[i].sex}
    27.          
      年龄: ${arr[i].age}
    28.         
    29.     
    30. `;
    31. }
    32. script>
    33. body>
    34. html>

    二 mustache基本语法

    （1）渲染循环对象数组

    1.  
    2.     <div id="container">div>
    3.  
    4.     
    5.     
    6.     <script type="text/template" id="mytemplate">
    7.         <ul>
    8.             {{#arr}}
    9.                 <li>
    10.                     <div class="hd">{{name}}的基本信息div>    
    11.                     <div class="bd">
    12.                         <p>姓名：{{name}}p>    
    13.                         <p>性别：{{sex}}p>    
    14.                         <p>年龄：{{age}}p>    
    15.                     div>
    16.                 li>
    17.             {{/arr}}
    18.         ul>
    19.     script>
    20.  
    21.     <script src="jslib/mustache.js">script>
    22.     <script>
    23.         var templateStr = document.getElementById('mytemplate').innerHTML;
    24.  
    25.         var data = {
    26.             arr: [
    27.                 { "name": "几斗", "age": 12, "sex": "男" },
    28.                 { "name": "亚瑟", "age": 11, "sex": "女" },
    29.                 { "name": "尉氏", "age": 13, "sex": "男" }
    30.             ]
    31.         };
    32.  
    33.         var domStr = Mustache.render(templateStr, data);
    34.         var container = document.getElementById('container');
    35.         container.innerHTML = domStr;
    36.     script>

    （2）不循环

    1.    <div id="container">div>
    2.  
    3.     <script src="jslib/mustache.js">script>
    4.     <script>
    5.         var templateStr = `
    6.             
      我买了一个{{thing}}，好{{mood}}啊
    7.         `;
    8.  
    9.         var data = {
    10.             thing: '苹果',
    11.             mood: '开心'
    12.         };
    13.  
    14.         var domStr = Mustache.render(templateStr, data);
    15.         
    16.         var container = document.getElementById('container');
    17.         container.innerHTML = domStr;
    18.     script>

    （3）渲染循环简单数组

    1.   <div id="container">div>
    2.  
    3.     <script src="jslib/mustache.js">script>
    4.     <script>
    5.         var templateStr = `
    6.             
      •                 {{#arr}}
      •                     
      • {{.}}
        •     
      •                 {{/arr}}
      •             
      •         `;
      •  
      •         var data = {
      •             arr: ['A', 'B', 'C']
      •         };
      •  
      •         var domStr = Mustache.render(templateStr, data);
      •         
      •         var container = document.getElementById('container');
      •         container.innerHTML = domStr;
      •     script>

      （4）数组的嵌套情况

      1.   <div id="container">div>
      2.  
      3.     <script src="jslib/mustache.js">script>
      4.     <script>
      5.         var templateStr = `
      6.             
        •                 {{#arr}}
        •                     
        •                         {{name}}的爱好是：
        •                         
          1.                             {{#hobbies}} 
          2.                                 
          3. {{.}}
          4.                             {{/hobbies}} 
          5.                         
        •                     
          •     
        •                 {{/arr}}
        •             
        •         `;
        •  
        •         var data = {
        •             arr: [
        •                 {'name': '小明', 'age': 12, 'hobbies': ['游泳', '羽毛球']},
        •                 {'name': '小红', 'age': 11, 'hobbies': ['编程', '写作文', '看报纸']},
        •                 {'name': '小强', 'age': 13, 'hobbies': ['打台球']},
        •             ]
        •         };
        •  
        •         var domStr = Mustache.render(templateStr, data);
        •         
        •         var container = document.getElementById('container');
        •         container.innerHTML = domStr;
        •     script>

          • （5）布尔值

          1.  <div id="container">div>
          2.  
          3.     <script src="jslib/mustache.js">script>
          4.     <script>
          5.         var templateStr = `
          6.             {{#m}}
          7.                 
            你好
          8.             {{/m}}
          9.         `;
          10.  
          11.         var data = {
          12.             m: false//看不见
          13.             //m:true:看得见
          14.         };
          15.  
          16.         var domStr = Mustache.render(templateStr, data);
          17.         
          18.         var container = document.getElementById('container');
          19.         container.innerHTML = domStr;
          20.     script>

          三 mustache库的机理

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

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

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

           

           

        • 相关阅读:
          【HCIA-cloud】【1】云计算的定义、什么是云计算、云计算的架构与技术说明、华为云计算产品、华为内存DDR配置工具说明
          概率 | 【提神醒脑】自用笔记串联二 —— 数字特征、大数定律、统计量
          【附源码】Python计算机毕业设计网络教育平台设计
          极简非凡react hooks+arcoDesign+vite后台管理模板
          重新定义容器化 Serverless 应用的数据访问
          艾美捷Bio-Helix IRIS9 Plus预染蛋白ladder方案
          Go语言实现AI五子棋智能算法
          第一行代码Android 第九章9.4-9.5(解析JSON格式,网络编程最佳实践：发送HTTP请求的代码)
          【iVX】十五分钟制作一款小游戏，iVX真有怎么神？
          华为数通HCIA-地址分类及子网划分
        • 原文地址：https://blog.csdn.net/qq_62401904/article/details/126321758