【Vue源码】mustache模板引擎 - 基本使用 - 底层原理 - 手写实现

最新推荐文章于 2024-04-08 09:33:09 发布

YK菌

最新推荐文章于 2024-04-08 09:33:09 发布

阅读量1.3k

点赞数 5

分类专栏：前端框架Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_44972008/article/details/115014168

版权

本文详细介绍了模板引擎的发展历史，重点讲解了mustache的基本使用和工作原理。通过实例展示了如何使用mustache进行数据绑定，并探讨了其背后的replace()方法和正则表达式实现。此外，文章还手把手教你配置webpack环境，逐步实现mustache库，包括Scanner扫描器类的创建，tokens数组的生成和解析，以及如何处理空格问题。

摘要由CSDN通过智能技术生成

来自尚硅谷的课程笔记课程链接[尚硅谷邵山欢（考拉老师）Vue之mustache模板引擎]
加入大量的注释以及改写

1. 模板引擎的介绍

1.1 模板引擎是什么？

模板引擎是将数据data变为视图view（html）的解决方案

数据：
在这里插入图片描述
视图：

Vue的解决方案

<li v-for="item in arr"></li>

1.2 模板引擎是怎么来的？（发展历史）

在这里插入图片描述

1. 使用原生的DOM操作

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_数据变为视图-纯DOM法</title>
</head>

<body>
  <ul id="list"></ul>
  
  <script>
    var arr = [
      {
     name: '小明', age: 12, sex: '男' },
      {
     name: '小红', age: 11, sex: '女' },
      {
     name: '小强', age: 13, sex: '男' },
    ]
    
    var list = document.getElementById('list')

    for (let i = 0; i < arr.length; i++) {
    
      // 每遍历一项，都要用 DOM 方法去创建 li 标签
      let oLi = document.createElement('li')
      
      // 创建 hd 这个 div
      let hdDiv = document.createElement('div')
      hdDiv.className = 'hd'
      hdDiv.innerText = arr[i].name + '的基本信息'
      oLi.appendChild(hdDiv)

      // 创建 bd 这个 div
      let bdDiv = document.createElement('div')
      bdDiv.className = 'bd'
      oLi.appendChild(bdDiv)
      
      // 创建 3 个 p 标签
      let p1 = document.createElement('p')
      p1.innerText = '姓名：' + arr[i].name
      bdDiv.appendChild(p1)
      let p2 = document.createElement('p')
      p2.innerText = '年龄：' + arr[i].age
      bdDiv.appendChild(p2)
      let p3 = document.createElement('p')
      p3.innerText = '性别：' + arr[i].sex
      bdDiv.appendChild(p3)
      
      // 创建的节点是孤儿节点，所以必须要上树才能让用户看见
      list.appendChild(oLi)
    }
  </script>

</body>

</html>

2. 使用数组中的join方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_数据变为视图-数组join法</title>
</head>

<body>
  <ul id="list">
  </ul>
  <script>
    var arr = [
      {
     name: '小明', age: 12, sex: '男' },
      {
     name: '小红', age: 11, sex: '女' },
      {
     name: '小强', age: 13, sex: '男' },
    ]
    var list = document.getElementById('list')
    
    // 遍历 arr 数组，每遍历一项，就以字符串的视角将HTML字符串添加到list中
    for (let i = 0; i < arr.length; i++) {
    
      list.innerHTML += [
        '<li>',
        '  <div class="hd">' + arr[i].name + '的信息</div>',
        '  <div class="bd">',
        '    <p>姓名：' + arr[i].name + '</p>',
        '    <p>年龄：' + arr[i].age + '</p>',
        '    <p>性别：' + arr[i].sex + '</p>',
        '  </div>',
        '</li>'
      ].join('')
    }
  </script>

</body>

</html>

3. 使用ES6反引号的方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03_数据变为视图-ES6反引号法</title>
</head>

<body>
  <ul id="list">
  </ul>
  <script>
    var arr = [
      {
     name: '小明', age: 12, sex: '男' },
      {
     name: '小红', age: 11, sex: '女' },
      {
     name: '小强', age: 13, sex: '男' },
    ]
    var list = document.getElementById('list')
    // 遍历 arr 数组，每遍历一项，就以字符串的视角将HTML字符串添加到list中
    for (let i = 0; i < arr.length; i++) {
    
      list.innerHTML += `
        <li>
          <div class="hd">${
      arr[i].name}的基本信息</div>
          <div class="bd">
            <p>姓名：${
      arr[i].name}</p>
            <p>年龄：${
      arr[i].age}</p>
            <p>性别：${
      arr