如何选择Web前端模板引擎（推荐）(2)-木庄网络博客

很难用唯一的标准去评判两个引擎哪个复杂度低，这是由使用者的思维模式不同造成的。例如前边列出的引擎在使用上以及预编译结果上的区别，不同使用者感触是不同的，这正是不同引擎存在的合理性、价值性。

有的使用者认为这个应用场景有字符串模板就满足了需求，轻量够用。
有的使用者认为字符串拼接技术的模板引擎不够强壮，不够时代感。
有的使用者认为OOP 够理性，够逻辑，够抽象。
有的使用者认为原生 HTML 才叫前端。
有的使用者认为 VDOM 适用性更广。

这些评判都有各自的理由，着眼点不同，标准也就不同了。但是我们还是可以从它们的共性去考虑它们的复杂度。

字符串类模板通常都很轻量，不在本节讨论范围之内。对于非字符串模板复杂度评判的共性标准是什么？我认为，可以考量数据绑定的复杂度。

本文所指的数据绑定不只是插值，还包括上下文以及事件，甚至是整个运行期的宿主环境。

事实上至少需要达到 VDOM 级别的引擎才具有这种能力，因为通过 VDOM 可以映射到真实的 DOM 节点。

大概有几种模式(组合)：

1.入口参数是个 Object，模板中的变量 x 是该对象的 .x 属性，例：virtual-stache-example
2.特定语法或属性，比如：Vue.js 的 ...，属性 computed、methods
3.抽象的语义化属性，比如：Vue.js 的 active 这个词适用于多种场景，容易理解且不产生歧义
4.不负责绑定，需要使用者非常熟悉原生方法，用原生方法进行绑定，比如：PowJS

这些模式只是理论方面的，通常是模板引擎设计者要解决的问题。对于使用者来说不如直接问：

1.可以在 HTML 模板中直接写最简单的 console.log(context) 来调试么?
2.可以在多层 DOM 树绑定或传递不同的上下文参数么?
3.可以在多层 DOM 树内层向上访问已经生成的 Node 么?

模板引擎团队会给你正确的解决办法，但通常和问题字面描述的目标有所差异。我觉得这就是你评判选择的关键，你对官方给出的正确方法的认可度。

嵌入到 DOM 中

嵌入到 HTML 中

PowJS 是这么实现的：

实现模板必须要实现的指令
预编译输出原生 ECMAScript 代码
模板语法结构与 ECMAScript 函数写法一致
最终，写 PowJS 模板就像在写 ECMAScript 函数。

GoHub index 中的写法

<template>
  <details func="repo" param="data" if="is.object(data.content)&&!sel(`#panel details[sha='${data.sha}']`)"
    open
    let="ctx=data.content"
    sha="{{data.sha}}"
    origin="{{ctx.Repo}}"
    repo="{{data.owner}}/{{data.repo}}"
    subdir="{{ctx.Subdir||''}}"
    filename="{{ctx.Filename}}"
    render=":ctx"
    do="this.renew(sel(`#panel details[repo='${data.owner}/${data.repo}']`))"
    break
  >
    <summary>{{ctx.Description}}</summary>
    <p if="':';" each="ctx.Package,val-pkg">
      <p title="{{pkg.Progress}}: {{pkg.Synopsis}}">{{pkg.Import}}</p>
    </p>
  </details>
  <dl func="list" param="data"
    if="!sel(`#panel details[sha='${data.sha}']`)&&':'||'';"
    each="data.content,data.sha,val-rep"
    do="this.appendTo(sel('#panel'))">
    <details sha="{{sha}}" repo="{{rep.repo}}">
      <summary>{{rep.synopsis}}</summary>
    </details>
  </dl>
</template>

多数模板引擎都会实现 if 、each 这些指令，上面的 PowJS 模板中还有：

全局对象 is、sel
模板(函数)命名 repo 、list
模板(函数)入口形参 data
自定义局部变量 ctx
下层模板(函数)形参推导 data.sha->sha
遍历值到下层模板形参推导 (ctx.Package,val-pkg)->pkg 、(data.content,val-rep)->rep
DOM 节点操作 this.renew、 this.appendTo，这直接渲染到页面 DOM 树
流程控制 break
伪节点 if="':';"，渲染时根本不生成 p 节点，它是个伪节点，相当于块代码符号 "{}"
关键是整个模板结构，指令语义和 ECMAScript 函数完全一致：

没有数据绑定，你写的是 ECMAScript 函数，传参数好了，要什么绑定
没有事件绑定，每个节点都是真实存在的，直接写 addEventListener 就好了
要调试，随便找个 do 或 if 或 let 插入 _=console.log(x), 就好了，逗号表达式几乎可以无缝插入所有原生语句
所有的业务逻辑都是使用者自己写的，PowJS 只负责把他们粘合成一个函数
导出视图是 ECMAScript 源码，下图截取自演示 My Folders