一些好用的模板引擎库

FrankKai commented 5 years ago

模板引擎，从前端的角度看，主要作用于HTML、JS，或者说是vue，react，angular中的{{ ... }}，但其实这是一种很狭隘的认识。因为模板引擎，不仅仅在前端有应用，在配置文件、源代码，同一个模板引擎，也有多种语言的实现，可以应用在不同的语言中。但是这篇文章还是主要讲前端、node端常用的一些模板引擎库。

vue.js
pug
mustache.js
underscore.js
handlebars.js
nunjucks

由于缺少react、angular的实践，因此就没有罗列。

FrankKai commented 5 years ago

vue.js

{{ xxx }}模板式渲染解析为普通文本
配合v-once指令可以仅渲染一次
配合v-html指令解析为富文本
支持javascript表达式，注意是expression
不支持javascript statement
不支持html属性

<template>
  <div>
    <p>{{name}}</p>
    <p v-once>{{age}}</p>
    <p>{{rawHtml}}</p>
    <p v-html="rawHtml"></p>
    <p>{{ok ? 'YES' : 'NO'}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Kai',
      age: 24,
      rawHtml: '<span style="color: red">This should be red.</span>',
      ok: true,
    };
  },
};
</script>

输出：

<div>
    <p>Kai</p> 
    <p>24</p> 
    <p>&lt;span style="color: red"&gt;This should be red.&lt;/span&gt;</p>
    <p>
        <span style="color: red">This should be red.</span>
    </p>
    <p>YES</p>
</div>

FrankKai commented 5 years ago

pug

pug以前叫jade
pug用来写html很清爽很简洁，多用来写html
有java、php、scala、python等多种实现

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug</title>
    <script type="text/javascript">
      if (foo) bar(1 + 5)
    </script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
    </div>
  </body>
</html>

FrankKai commented 5 years ago

mustache.js

提倡logic-less，即: no if statements, else clauses, or for loops.
可用于HTML、配置文件和源代码
有javascript、Ruby、Go等多种实现

var mustache = require("mustache")
var view = {
  title: "Joe",
  calc: function () {
    return 2 + 4;
  }
};
var output = mustache.render("{{title}} spends {{calc}}", view);

输出： "Joe spends 6"

FrankKai commented 5 years ago

underscore.js

_.template() 仅仅是underscore.js的一个方法

const _ = require("underscore")
const compiled = _.template("hello: <%= name %>");
compiled({name: 'Kai'});

输出： "hello: Kai"

FrankKai commented 5 years ago

handlebars.js

高效构建语义化的模板

兼容性好，ie6+

var handlebars = require("handlebars")
var source = "<p>Hello, my name is {{name}}. I am from {{hometown}}. I have " +
         "{{kids.length}} friends:</p>" +
         "<ul>{{#kids}}<li>{{name}}</li>{{/kids}}</ul>";
var template = handlebars.compile(source);
var data = { "name": "Kai", "hometown": "hhhot",
         "kids": [{"name": "Jack Ma"}, {"name": "Qiangdong Liu"}]};
var result = template(data);

输出：

<p>Hello, my name is Kai. I am from hhhot. I have 2 friends:</p>
<ul>
<li>Jack Ma</li>
<li>Qiangdong Liu</li>
</ul>

FrankKai commented 5 years ago

nunjucks

这个库强调了这几点：块继承，自动转换(autoescaping)，宏(macro)，异步控制

var nunjucks = require("nunjucks")
nunjucks.renderString('Hello {{ username }}', { username: 'James' });

输出： "Hello James"

FrankKai / FrankKai.github.io

一些好用的模板引擎库 #143

vue.js

pug

mustache.js

underscore.js

handlebars.js

nunjucks