VUE源码解析-Mustache

手写源码地址

模板引擎

数据变为视图的方式

1.纯dom：笨拙，没有实战价值

2.数组join：本质是字符串

3. es6的反引号法：es6中新增的${xxx}
   

4. 模板引擎：将数据变为视图最优雅的解决方案
   

简介

mustache是最早的模板引擎库，底层实现机理为后续模板引擎的发展提供了崭新的思路

mustache基本使用

1. 引入mustache库.v4.0.1支持模块引入
2. 使用模板语法

遍历数组

1. 简单数据循环

    var templateStr2 = `
    <ul>
    {{#fruits}}
        <li>{{.}}</li>
    {{/fruits}}
    </ul>
     `
     var data2 = {
         fruits: ['apple', 'strawberry', 'banana', 'pear']
     }
     var domStr2 = Mustache.render(templateStr2, data2);
     list5.innerHTML = domStr2;

2.复杂数据循环

        var list3 = document.getElementById('mustacheLoop');
        var templateStr = `
        <ul>
        {{#arr}}
            <li>
                <div class='hd'>{{name}}的个人信息<div>
                <div class='bd'>
                    <p>姓名：{{name}}</p>
                    <p>年龄：{{age}}</p>
                    <p>性别：{{sex}}</p>
                </div>
            </li>
        {{/arr}}
        </ul>
         `;
        var data = {
            arr : [{
            'name': 'Xiaoming',
            'age': 12,
            'sex': 'man'
        }, {
            'name': 'Xiaohong',
            'age': 14,
            'sex': 'female'
        }, {
            'name': 'Xiaoqiang',
            'age': 16,
            'sex': 'man'
        }]
        };
        var domStr = Mustache.render(templateStr, data);
        list3.innerHTML = domStr;

3.数组嵌套

var templateStr3 = `
        <ul>
        {{#arr}}
            <li>
                <div class='hd'>{{name}}的个人信息<div>
                <div class='bd'>
                    <p>姓名：{{name}}</p>
                    <p>年龄：{{age}}</p>
                    <p>性别：{{sex}}</p>
                    <p>爱好:
                      <ol>
                        {{#hobbits}}
                        <li>{{.}}<li>
                        {{/hobbits}}
                      </ol>
                    </p>
                </div>
            </li>
        {{/arr}}
        </ul>
        `
        var data3 = {
            arr: [{
                'name': 'Xiaoming',
                'age': 12,
                'sex': 'man',
                hobbits: ['singing', 'dancing', 'riding']
            }, {
                'name': 'Xiaohong',
                'age': 14,
                'sex': 'female',
                hobbits: ['play game', 'painting', 'reading']
            }, {
                'name': 'Xiaoqiang',
                'age': 16,
                'sex': 'man',
                hobbits: ['writing', 'cooking', 'shopping']
            }]
        };
        var domStr3 = Mustache.render(templateStr3, data3);
        list6.innerHTML = domStr3;

4.非循环

        var list4 = document.getElementById('mustacheNoLoop');
        var templateStr1 = `
        <h1>this is {{type}} {{method}}</h1>`;
        var data1 = {
            type: 'no loop',
            method: 'mustache'
        }
        var domStr1 = Mustache.render(templateStr1, data1);
        list4.innerHTML = domStr1

布尔值

//布尔值
        var templateStr4 = `
        {{#show}}
        <h1>{{showMessage}}</h1>
        {{/show}}
        {{#hidden}}
        <h1>{{hideMessage}}</h1>
        {{/hidden}}
        `;
        var data4 = {
            show: true,
            hidden: false,
            showMessage: 'show is true',
            hideMessage: 'hidden is false'
        };
        var domStr4 = Mustache.render(templateStr4, data4);
        list7.innerHTML = domStr4;

mustache的底层核心机理

最简单的模板引擎实现机理

利用正则表达式中的replace()方法,匹配进行替换

 let temp = '<h1> today is {{year}}-{{month}}-{{day}}</h1>';
        let da = {
            year: new Date().getFullYear(),
            month: new Date().getMonth() + 1,
            day: new Date().getDate()
        };

        function render(template, data) {
            return template.replace(/\{\{(\w+)\}\}/g, function(findstr, $1) {
                return data[$1];
            });
        }
        let res = render(temp, da);
        console.log(res);

tokens

• JS的嵌套数组,即模板字符串的JS表示

• 模板字符串有循环时,被编译为嵌套更深的tokens
  
  

• mustache底层核心操作:

  1. 将模板字符串编译为tokens形式
  2. 将tokens结合数据,解析为dom字符串

手写mustache库

1. 模块打包工具:webpack rollup parcel

2. mustache官方使用rollup进行模块化打包,本文使用webpack进行模块化打包,利于在浏览器中实时调试

3. 生成库是UMD的,意味着它可以同时在nodejs和浏览器中使用,使用一个"通用头"便可实现UMD
   

4. 初始化:npm init

5. 安装构建工具:npm i -D webpack@4 webpack-dev-server@3

6. 配置文件

7. 手写scanner类
   

8. 生成tokens数组

9. 将零散的tokens组合起来

10. 将tokens结合数据,解析为dom字符串

11. 手写lookup函数

12. 手写parseArray函数