Vue源码探析之mustache模板引擎学习笔记+手写完成mustache功能（阉割版）

本文链接：https://blog.youkuaiyun.com/weixin_54515240/article/details/130198895

一、模板引擎是什么？

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

1.数据转为视图的发展史

1.1纯DOM法：

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="list">

    </ul>
    <script>
        var arr = [
            {
     "name":"某可","age":18,"sex":"男"},
            {
     "name":"某鸿","age":18,"sex":"男"},
            {
     "name":"小李","age":5,"sex":"女"}
        ]

        var list = document.getElementById('list')

        for (var 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 + '的基本信息'
            // 创建bd这个div
            let bdDiv = document.createElement('div')
            bdDiv.className = 'bd'
            // 创建三个p标签
            let p1 = document.createElement('p')
            p1.innerText = '姓名：' + arr[i].name

            let p2 = document.createElement('p')
            p2.innerText = '年龄：' + arr[i].age

            let p3 = document.createElement('p')
            p3.innerText = '性别：' + arr[i].sex

            //创建的节点都是孤儿节点，所以必须上树才能被用户看到
            oLi.appendChild(hdDiv)

            hdDiv.appendChild(bdDiv)

            bdDiv.appendChild(p1)

            bdDiv.appendChild(p2)

            bdDiv.appendChild(p3)
            
            list.appendChild(oLi)
        }
    </script>
</body>
</html>

总结：
纯DOM操作数据转换成视图每一步都在操作DOM，这样不仅页面开销大，而且非常麻烦，每次都需要创建并上树，数据和视图耦合度很高，也很难辨识，代码阅读性也差。

1.2数组join法：

前期背景：
由于字符串" " ’ ‘定义的字符内容是不允许换行，反引号是ES6的新语法，以前也没有，但是数组可以换行展示，能够显示结构的层次，然后通过join(’')方法可以实现字符拼接显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="list">

    </ul>
    <script>
        var arr