模板引擎

[luoway]

为Web网页添加服务端支持的一大优势是，可以动态地返回Web网页资源。

如果你使用过PHP开发网页应用，那么你肯定对PHP支持书写HTML代码模板，并内嵌PHP代码逻辑动态返回HTML内容，留有印象。

在 Node.js 中，没有内置支持 HTML 标记语言，只能通过字符串拼接来完成 HTML 文档并作为HTTP服务返回内容。

代替用户完成 HTML 字符串拼接的工具，称为模板引擎。模板引擎往往会实现一种模板语法，或者说定义一种DSL（领域特定语言），用于简化书写并实现IDE高亮等开发支持。

EJS

EJS 是JavaScript最受欢迎的模板引擎。它通过嵌入式标签配合JS语法，实现易用的模板引擎功能。

<%
  let tpl = "<scritp>alert('tpl')</script>"
-%>
<%# 输出转义后的tpl -%>
<%= tpl %>
<%# 输出未转义的tpl -%>
<%- tpl %>

以上内容运行后得到以下输出

<scritp>alert('tpl')</script>
<scritp>alert('tpl')</script>

pug

pug 是一种采用自定义DSL的模板引擎，这个DSL省略了许多HTML的符号，配合语法规则，开发者可以用最少的代码完成 HTML 模板需求。

pug 曾用名 Jade，由于 Jade 被注册为商标，因此改名。

- let tpl = "<scritp>alert('tpl')</script>"
= tpl
//- pug 由于语法简洁，相对地在输出空格、换行时比较麻烦
| 
|
!= tpl

以上内容运行后得到以下输出

<scritp>alert('tpl')</script> 
<scritp>alert('tpl')</script>

pug 的模板语法简洁，让人印象深刻。

即使现在越来越多人使用的React、Vue等框架自带模板引擎 jsx、vue-template，开发者也热衷于使用 pug 替代框架自带模板引擎。

在不同框架中 pug 编译的产物，需要是框架对应的模板语法，再由框架的模板进行处理。

在React中使用pug

babel-plugin-transform-react-pug

export const ReactComponent = props => pug`
  .wrapper
    if props.shouldShowGreeting
      p.greeting Hello World!

    button(onClick=props.notify) Click Me
`

编译为

export const ReactComponent = props => (
  <div className="wrapper">
    {props.shouldShowGreeting ? (
      <p className="greeting">Hello World!</p>
    ) : null}
    <button onClick={props.notify}>Click Me</button>
  </div>
)

由于 jsx 有着模板引擎相似的语法结构，使用 pug 可以有效地编译为 jsx

在Vue中使用pug

pug-plain-loader

<template lang="pug">
  .wrapper
    p.greeting(v-if="shouldShowGreeting") Hello World!

    button(@click="notify") Click Me
</template>

编译为

<template>
  <div class="wrapper">
    <p class="greeting" v-if="shouldShowGreeting">Hello World!</p>
    <button @click="notify">Click Me</button>
  </div>
</template>

在Vue中，由于Vue的模板语法中的条件、循环由标签属性实现，pug只需要用到属性语法，以编译为Vue模板语法。

但这样实际上没有使用 pug 的完整功能，因此 pug 不适合在Vue中使用。

参考资料

• EJS
• pug