说说如何用 javascript 实现一个模板引擎-mile米乐体育

获取到 div 文本节点后，我们也可以知道获取到的第一个关键字符是{%，也就是上面的endindex是我们要的索引，记得要更新剩余的字符，直接通过 slice 更新即可：

// 2 是 {% 的长度 str = str.slice(endindex   2);

而此时我们就可以知道匹配到的当前关键字符是{%，那么他的闭合处就肯定是%}，因此就可以再通过

const expression = str.slice(0, str.indexof('%}'))

获取到 if test > 1 这个字符串了。然后我们再通过正则/^if\s ([\s\s] )$/匹配，就可以知道这个字符串是 if 的标签，同时可以获得test > 1这一个捕获组，然后就可以创建我们的第二个节点，if 的块级节点了。

因为 if 是个块级节点，那么继续往下匹配的时候，在遇到 {% endif %} 之前的所有节点，都是属于 if 节点的子节点，所以我们在创建节点时要给它一个children数组属性，用来保存子节点。

紧接着再重复上面的操作，获取下一个{%以及{{的位置，跟上面的逻辑差不多，获取到{{的位置后再判断}}的位置，就可以创建第三个节点，test 的变量节点，并且 push 到 if 节点的子节点列表中。

创建完变量节点后继续重复上述操作，就能够获取到{% endif %}这个闭合节点，当遇到该节点之后的节点，就不能保存到 if 节点的子节点列表中了。紧接着就又是一个文本节点。

相对比较完整的实现如下：

const root = []; let parent; function parse(str){     const matches = str.match(/{{|{%/);     const isblock = matches[0] === '{%';     const endindex = matches.index;      const chars = str.slice(0, matches ? endindex : str.length);     if(chars.length) {      ...创建文本节点      }      if(!matches) return;      str = str.slice(endindex   2);     const leftstart = matches[0];     const rightend = isblock ? '%}' : '}}';     const rightendindex = str.indexof(rightend);     const expression = str.slice(0, rightendindex)      if(isblock) {         ...创建块级节点 el          parent = el;     } else {         ...创建变量节点 el     }      (parent ? parent.children : root).push(el);     parse(str.slice(rightendindex   2)); }

当然，具体实现起来还是有其他东西要考虑的，比如一个文本是{% {{ test }}，就要考虑到{%的干扰等。还有比如 else 还有 elseif 节点的处理，这两个是需要关联到 if 标签上的，这个也是需要特殊处理的。不过大概逻辑基本上就是以上。

组合 html

创建好 ast 后，要渲染 html 的时候，就只需要遍历语法树，根据节点类型做出不同的处理即可。

比如，如果是文本节点，就直接html = el.text即可。如果是if节点，则判断表达式，比如上面的test > 1，有两种办法可以实现表达式的计算，一种就是eval，还有一种就是new function了，eval 会有安全性问题，因此就不考虑了，而是使用new function的方式来实现。变量节点的计算也一样，用new function来实现。

封装后具体实现如下：

function computedexpression(obj, expression) {   const methodbody = `return (${expression})`;   const funcstring = obj ? `with(__obj__){ ${methodbody} }` : methodbody;   const func = new function('__obj__', funcstring);   try {     let result = func(obj);     return (result === undefined || result === null) ? '' : result;   } catch (e) {     return '';   } }

使用 with ，可以让在 function 中执行的语句关联对象，比如

with({ a: '123' }) {     console.log(a); // 123 }

虽然 with 不推荐在编写代码的时候使用，因为会让 js 引擎无法对代码进行优化，但是却很适合用来做这种模板编译，会方便很多。包括 vue 中的 render function 也是用 with 包裹起来的。不过 nunjucks 是没有用 with 的，它是自己来解析表达式的，因此在 nunjucks 的模板语法中，需要遵循它的规范，比如最简单的条件表达式，如果用 with 的话，直接写{{ test ? 'good' : 'bad' }}，但是在 nunjucks 中却要写成�{{ 'good' if test else 'bad' }}。

anyway，各有各的好吧。

实现多级作用域

在将 ast 转换成 html 的时候，有一个很常见的场景就是多级作用域，比如在一个 for 循环中再嵌套一个 for 循环。而如何在做这个作用域分割，其实也是很简单，就是通过递归。

比如我的对一个 ast 树的处理方法命名为：processast(ast, scope)，再比如最初的 scope 是

{    list: [    { subs: [1, 2, 3] },    { subs: [4, 5, 6] }    ]   }

那么 processast 就可以这么实现：

function processast(ast, scope) {     ...     if(ast.for) {         const list = scope[ast.item]; // ast.item 自然就是列表的 key ，比如上面的 list         list.foreach(item => {             processast(ast.children, object.assign({}, scope, {                 [ast.key]: item,  // ast.key 则是 for key in list 中的 key             }))         })     }     ... }

就简单通过一个递归，就可以把作用域一直传递下去了。

filter 功能实现

实现上面功能后，组件就已经具备基本的模板渲染能力，不过在用模板引擎的时候，还有一个很常用的功能就是 filter 。一般来说 filter 的使用方式都是这这样 {{ test | filter1 | filter2 }}，这个的实现也说一下，这一块的实现我参考了 vue 的解析的方式，还是蛮有意思的。

还是举个例子：

{{ test | filter1 | filter2 }}

在构建 ast 的时候，就可以获取到其中的test | filter1 | filter2，然后我们可以很简单的就获取到 filter1 和 filter2 这两个字符串。起初我的实现方式，是把这些 filter 字符串扔进 ast 节点的 filters 数组中，在渲染的时候再一个一个拿出来处理。

不过后来又觉得为了性能考虑，能够在 ast 阶段就能做完的工作就不要放到渲染阶段了。因此就改成 vue 的方法组合方式。也就是把上面字符串变成：

_$f('filter2', _$f('filter1', test))

预先用个方法包裹起来，在渲染的时候，就不需要再通过循环去获取 filter 并且执行了。具体实现如下：

const filterre = /(?:\|\s*\w \s*) $/; const filtersplitre = /\s*\|\s*/; function processfilter(expr, escape) {   let result = expr;   const matches = expr.match(filterre);   if (matches) {     const arr = matches[0].trim().split(filtersplitre);     result = expr.slice(0, matches.index);      // add filter method wrapping     utils.foreach(arr, name => {       if (!name) {         return;       }        // do not escape if has safe filter       if (name === 'safe') {         escape = false;         return;       }        result = `_$f('${name}', ${result})`;     });   }    return escape ? `_$f('escape', ${result})` : result; }

上面还有一个就是对 safe 的处理，如果有 safe 这个 filter ，就不做 escape 了。完成这个之后，有 filter 的 variable 都会变成_$f('filter2', _$f('filter1', test))这种形式了。因此，此前的 computedexpression 方法也要做一些改造了。

function processfilter(filtername, str) {   const filter = filters[filtername] || globalfilters[filtername];    if (!filter) {     throw new error(`unknown filter ${filtername}`);   }    return filter(str); }  function computedexpression(obj, expression) {   const methodbody = `return (${expression})`;   const funcstring = obj ? `with(_$o){ ${methodbody} }` : methodbody;   const func = new function('_$o', '_$f', funcstring);   try {     const result = func(obj, processfilter);     return (result === undefined || result === null) ? '' : result;   } catch (e) {     // only catch the not defined error     if (e.message.indexof('is not defined') >= 0) {       return '';     } else {       throw e;     }   } }

其实也是很简单，就是在 new function 的时候，多传入一个获取 filter 的方法即可，然后有 filter 的 variable 就能被正常识别解析了。

至此，ast 构建、ast 到 html 的转换、多级作用域以及 filter 的实现，都已经基本讲解完成。

贴一下自己实现的一个模板引擎轮子：https://github.com/whxaxes/mus

算是实现了大部分模板引擎该有的功能，欢迎各路豪杰 star 。