vue源码-mustache模板引擎分析(四)-手写实现mustache库_mustache npm

一.构建环境

（1）新建名为TemplateEngine的文件夹，然后
      

npm init  

npm i

npm i webpack@4 -D

npm i webpack-cli@3 -D

npm i webpack-dev-server@3 -D

使用webpack和webpack-dev-server构建 

-webpack侧重开发体验，结合webpack-dev-server实时更新

-nodeis调试控制台不太好用

-rollup更擅长于最终把几个js文件打包一起

-生成库UMD,同时在nodejs.js环境和浏览器环境中使用，实现UMD,只需一个“通用头”

 新建一个webpack.config.js文件

const path = require('path')
module.exports = {
    //模式，开发
    mode:'development',
    //入口
    entry:'./src/index.js',
    //打包到什么文件
    output:{
        filename:'bundle.js'
    },
    //配置一下webpack-dev-server
    devServer:{
        //静态文件根目录
        contentBase:path.join(__dirname,'www'),
        //不压缩
        compress:false,
        //端口号
        port:8080,
        //虚拟打包的路径，bundle.js文件没有真正的生成
        publicPath:'/xuni/'
    }
}

接着在package.json文件改动：

 "scripts": {
    "dev": "webpack-dev-server"
  },

刚刚看到关于学习源码的建议：

（1）源码思想要借鉴，而不要抄袭，要能够发现源码中书写的精彩的地方。

（2）将独立的功能拆写为独立的js文件中完成，通常是一个独立的类，每个单独的功能必须能独立的“单元测试”。

（3）应该围绕中心功能，先把主干完成，然后修剪枝叶

（4）功能并不需要一步到位，功能的扩展要一步步完成，有的非核心功能甚至不需要实现

---

二.将模板字符串变成tokens

 举个简单的例子~

我买了一个{{thing}}，好{{mood}}啊

主要思想：

设置一个指针，从下标为0开始扫描，碰到 {{ 则停止扫描并返回之前经过的文字【“我买了一个”】，接着又继续扫描碰到 }} 则停止扫描并返回之前经过的文字【“thing”】,又继续干活碰到 {{ 停止扫描并返回之前经过的文字【“，好”】，接着又继续扫描碰到 }} 则停止扫描并返回之前经过的文字【“mood”】，接下来以此类推。

新建一个Scanner.js文件，实现一个Scanner类【扫描器类】，类里实现两个方法：

一个是scanUtils方法，主要功能：让指针进行扫描，直到遇见指定内容结束，并且能够返回结束之前路过的文字；

另一个是scan方法，主要功能：走过指定内容，没有返回值

三个属性：

 templateStr 接收过来的模板字符串

 pos 起始位置（可以理解为指针）

tail 扫描过后的字符串，一开始设置为templateStr

export default class Scanner{
   constructor(templateStr){
     this.templateStr = templateStr;
     this.pos = 0;
     this.tail = this.templateStr
   }
   //功能弱，就是走过指定内容，没有返回值
   scan(tag){
        if(this.tail.indexOf(tag)==0){
            this.pos+=tag.length
            this.tail = this.templateStr.substring(this.pos)
 
        }
   }
   //让指针进行扫描，直到遇见指定内容结束，并且能够返回结束之前路过的文字
   scanUtils(stopTag){
    let pos_backup = this.pos   
    //当尾巴的开头不是stopTag的时候，就说明还没有扫描stopTag
    while(this.tail.indexOf(stopTag)!=0 && !this.eos()){
        this.pos++
        //改变尾巴为从当前指针这个字符开始，到后面全部字符
        this.tail = this.templateStr.substring(this.pos)
    }
    return this.templateStr.substring(pos_backup,this.pos)
   }
   //判断指针是否到头，返回布尔值
   eos(){
     return this.pos>=this.templateStr.length
   }
}

---

三.生成tokens数组

新建一个parseTemplateToTokens.js文件，向外暴露一个函数，函数名为parseTemplateToTokens，接收的参数为templateStr

var tokens = []

var words;

扫描器类已经准备好，接下来就让扫描器干活！

var scanner = new Scanner(templateStr)

思想：

当this.pos<this.templateStr.length时，先执行scanner.scanUtils('{{')，返回一个word用于收集开始标记出现之前的文字；接着判断文字内容不为空的话就push到tokens数组里，push的内容为['text',words],然后过双大括号scanner.scan("{{")，执行到这一步，意味着咱们进入到了 {{ 里，接着 words = scanner.scanUtils('}}')，这里的words就是{{}}中间的东西；接着判断一下首字符words[0]，如果为#,tokens.push(['#',words.substring(1)]);如果为/,tokens.push(['/',words.substring(1)]);否则就返回tokens.push(['name',words])，接着过掉双大括号scanner.scan('}}')，最后就返回token。

import Scanner from './Scanner'
import nestTokens from './nestTokens'
export  default function parseTemplateToTokens(templateStr){
    var tokens = [];
    var words ;
    //创建扫描器
    var scanner = new Scanner(templateStr)
    //让扫描器工作
    while(!scanner.eos()){
        //收集开始标记出现之前的文字
        words = scanner.scanUtils('{{')
        //存起来
        if(words!=''){
            tokens.push(['text',words])
        }
        //过双大括号
        scanner.scan("{{")
 
        //收集开始标记出现之前的文字
        words = scanner.scanUtils('}}')
        //这里的words就是{{}}中间的东西，接着判断一下首字符
        if(words!=""){
            if(words[0]=='#'){
                //存起来，从下标为1的项开始存，因为下标为0的项是#
                tokens.push(['#',words.substring(1)])
            }else if(words[0]=='/'){
                //存起来，从下标为1的项开始存，因为下标为0的项是/
                tokens.push(['/',words.substring(1)])
            }else{
                tokens.push(['name',words])
            }
        }
        //过双大括号
        scanner.scan('}}')
    }
 
     return tokens;
    //return nestTokens(tokens);
}

---

四.将零散的tokens嵌套起来

新建一个nestTokens.js,向外暴露一个函数，函数名为nestTokens，接收的参数为tokens

 var nestTokens = [];

  var sections = [];

  var collector = nestTokens;//这一步是关键，利用引用类型传递

思想：

利用栈（sections）先进后出的特点，遍历所有的tokens，

遇到一个 #，就把当前 token 放入这个栈中，让 collector 指向这个 token 的第三个元素。遇到下一个 # 就把新的 token 放入栈中，collector 指向新的 token 的第三个元素。遇到 / 就把栈顶的 token 移出栈，collector 指向移出完后的栈顶 token。

利用了栈的先进后出的特点，保证了遍历的每个 token 都能放在正确的地方，也就是 collector 都能指向正确的地址。

export default function nestTokens(tokens){
   var nestTokens = [];
   var sections = [];
   var collector = nestTokens;
   var token;
   for(let i=0;i<tokens.length;i++){
       token = tokens[i];
       switch(token[0]){
           case '#':
               collector.push(token);
               sections.push(token);
               collector = token[2] = []; 
               break;
           case '/':
              sections.pop();
              collector = sections.length>0?sections[sections.length-1][2]:nestTokens
               break;
            default:
              collector.push(token)
              break;    
       }
    }
    return nestTokens
}

---

五.将tokens结合数据，解析为dom字符串

上面已经将模板字符串编译为tokens，接下来让数据与tokens结合，新建一个文件名叫renderTemplate.js,向外暴露renderTemplate函数，接收的参数为tokens和data。

在index.js中

//全局提供TemplateEngine对象
window.TemplateEngine = {
    //渲染方法
    render(templateStr,data){
      //让模板字符串变为tokens数组
      var tokens = parseTemplateToTokens(templateStr)
      //让tokens数组变为dom字符串
      var result = renderTemplate(tokens,data)
      console.log(result)
      return result
    }
}

在www/index.html中

    var str =  TemplateEngine.render(template,data);
    var box = document.getElementById("box") 
    box.innerHTML =  str 

思想：

 遍历tokens，例如:['text',"<li>学生"]，若token开头的第一个字符是text，拼接token[1]

例如:['name',"name"]，若token开头的第一个字符是name，拼接data[token[1]],但在这里要注意的是，如果在模板字符串中使用{{a.b.c}},data['a.b.c']读不出来，会显示undefined；

所以在这里写一个函数，可以在dataObj对象中寻找用连续点符号.的keyName属性，比如

 dataObj = {
   a:{
    b:{
         c:100
        }
     }
  }
  lookup(dataObj,'a.b.c') ---> 100

export default function lookup(dataObj,keyName){
 var temp ;
 var keys;
 if(keyName.indexOf(".")!=0&&keyName!='.'){
     keys = keyName.split(".");//['a','b','c']
     temp = dataObj
     for(let i=0;i<keys.length;i++){
         temp = temp[keys[i]]
     }
     return temp
 }
 return dataObj[keyName]
}

例如:['#',"students",[...]]，若token开头的第一个字符是#，我们就是去解析当前的token，要再次递归调用 renderTemplate 函数。

这里新定义了一个 parseArray 函数来处理，接收的参数是当前的token和data，返回字符串。通过lookup(data,token[1])得到整体数据data中这个数组要使用的部分，接着遍历这个数组，而不是遍历token，数组中的数据有几条就遍历几次。再次递归调用renderTemplate（），传入第一个参数是token[2],第二个参数是当前的v[i],但在这里还要考虑的一点是如果data只是一个简单循环数组，在模板上通过{{.}}显示到页面，那么第二个参数传的就是 ".":v[i]

import lookup from './lookup'
import renderTemplate from './renderTemplate'
/**
 * 处理数组，结合renderTemplate实现递归
 * 注意：这个函数接收的参数是token而不是tokens
 * token为['#', 'arr',[...]]
 * data[arr]--->数据
 */
export default function parseArray(token,data){
    //得到整体数据data中这个数组要使用的部分
    let v = lookup(data,token[1])
    //结果字符串
    let resultStr = ""
    //遍历v数组，v一定是数组
    //注意：下面这个循环可能是整个包中最难思考的一个循环
    //它是遍历数据，而不是遍历token。数组中的数据有几条，就要遍历几条
    for(let i=0;i<v.length;i++){
        //若循环简单数组时
        resultStr += renderTemplate(token[2],{
            ".":v[i],
            ...v[i]
        })
    }
    return resultStr;
}

最后！renderTemplate函数：

import lookup from './lookup'
import parseArray from './parseArray'
export default function renderTemplate(tokens,data){
    
    var str = ''
    var token;
    for(let i=0;i<tokens.length;i++){
       token = tokens[i];
       if(token[0]=='text'){
          str+=token[1]
       }else if(token[0]=='name'){
           str+=lookup(data,token[1]);
       }else if(token[0]=='#'){
           str+=parseArray(token,data)
       }
    }
    return str
}

一个简单的模板引擎源码就写出来啦！！！

源码：https://github.com/crush12132/study_TemplateEngine