前端模板的生长
模板能够说是前端开辟最常打仗的东西之一。将页面牢固稳定的内容抽出成模板，效劳端返回的动态数据装填到模板中预留的坑位，末了组装成完全的页面html字符串交给浏览器去剖析。
模板能够大大提拔开辟效力，假如没有模板开辟人员怕是要手动拼写字符串。
var tpl = '<p>' + user.name + '</p>';
$('body').append(tpl);在近年前端生长过程当中，模板也随着变化：
1. php模板 JSP模板
初期还没有前后端星散时代，前端只是后端项目中的一个文件夹，这时代的php和java都供应了各自的模板引擎。以JSP为例：java web运用的页面一般是一个个.jsp的文件，这个文件内容是大部分的html以及一些模板自带语法，本质上是纯文本，然则既不是html也不是java。
JSP语法：index.jsp
<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>这个时代的模板引擎，每每是效劳端来编译模板字符串，天生html字符串给客户端。
2. handlebar mustache通用模板
09年node宣布，JavaScript也能够来完成效劳端的功用，这也大大的轻易了开辟人员。mustache和handlebar模板的降生轻易了前端开辟人员，这两个模板均运用JavaScript来完成，今后前端模板既能够在效劳端运转，也能够在客户端运转，然则大多数运用场景都是js依据效劳端异步猎取的数据套入模板，天生新的dom插进去页码。 对前端后端开辟都非常有益。
mustache语法：index.mustache
<p>Username: {{user.name}}</p>
{{#if (user.gender === 2)}}
<p>女</p>
{{/if}}3. vue中的模板 React中的JSX
接下来到了新生代，vue中的模板写法跟之前的模板有所不同，而且功用越发壮大。既能够在客户端运用也能够在效劳端运用，然则运用场景上差异非常大：页面每每依据数据变化，模板天生的dom发生变化，这关于模板的机能请求很高。
vue语法：index.vue
<p>Username: {{user.name}}</p>
<template v-if="user.gender === 2">
<p>女</p>
</div> 模板完成的功用
无论是从JSP到vue的模板，模板在语法上愈来愈轻便，功用愈来愈雄厚，然则基本功用是不能少的：
- 变量输出（转义/不转义）:出于平安斟酌，模板基本默许都会将变量的字符串转义输出，固然也完成了不转义输出的功用，郑重运用。
- 前提推断（if else）：开辟中常常须要的功用。
- 轮回变量：轮回数组，天生许多反复的代码片断。
- 模板嵌套：有了模板嵌套，能够削减许多反复代码，而且嵌套模板集成作用域。
以上功用基本涵盖了大多数模板的基本功用，针对这些基本功用就能够探讨模板怎样完成的。
模板完成道理
正如题目所说的，模板本质上都是纯文本的字符串，字符串是怎样操纵js顺序的呢？
模板用法上：
var domString = template(templateString, data);模板引擎获获得模板字符串和模板的作用域，经由编译以后天生完全的DOM字符串。
大多数模板完成道理基本一致：
模板字符串起首经由过程种种手腕剥离出一般字符串和模板语法字符串天生笼统语法树AST；然后针对模板语法片断举行编译，时期模板变量均去引擎输入的变量中查找；模板语法片断天生出一般html片断，与原始一般字符串举行拼接输出。
实在模板编译逻辑并没有迥殊庞杂，至于vue这类动态绑定数据的模板有时间能够参考文末链接。
疾速完成简朴的模板
如今以mustache模板为例，手动完成一个完成基本功用的模板。
模板字符串模板：index.txt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<h1>Panda模板编译</h1>
<h2>一般变量输出</h2>
<p>username： {{common.username}}</p>
<p>escape：{{common.escape}}</p>
<h2>不转义输出</h2>
<p>unescape：{{&common.escape}}</p>
<h2>列表输出：</h2>
<ul>
{{#each list}}
<li class="{{value}}">{{key}}</li>
{{/each}}
</ul>
<h2>前提输出：</h2>
{{#if shouldEscape}}
<p>escape{{common.escape}}</p>
{{else}}
<p>unescape：{{&common.escape}}</p>
{{/if}}
</body>
</html>模板对应数据：
module.exports = {
common: {
username: 'Aus',
escape: '<p>Aus</p>'
},
shouldEscape: false,
list: [
{key: 'a', value: 1},
{key: 'b', value: 2},
{key: 'c', value: 3},
{key: 'd', value: 4}
]
};模板的运用要领：
var fs = require("fs");
var tpl = fs.readFileSync('./index.txt', 'utf8');
var state = require('./test');
var Panda = require('./panda');
Panda.render(tpl, state)然厥后完成模板：
1. 正则切割字符串
模板引擎猎取到模板字符串以后，一般要运用正则切割字符串，区分出那些是静态的字符串，那些是须要编译的代码块，天生笼统语法树（AST）。
// 将未处置惩罚过的字符串举行分词，构成字符组tokens
Panda.prototype.parse = function (tpl) {
var tokens = [];
var tplStart = 0;
var tagStart = 0;
var tagEnd = 0;
while (tagStart >= 0) {
tagStart = tpl.indexOf(openTag, tplStart);
if (tagStart < 0) break;
// 纯文本
tokens.push(new Token('text', tpl.slice(tplStart, tagStart)));
tagEnd = tpl.indexOf(closeTag, tagStart) + 2;
if (tagEnd < 0) throw new Error('{{}}标签未闭合');
// 细分js
var tplValue = tpl.slice(tagStart + 2, tagEnd - 2);
var token = this.classifyJs(tplValue);
tokens.push(token);
tplStart = tagEnd;
}
// 末了一段
tokens.push(new Token('text', tpl.slice(tagEnd, tpl.length)));
return this.parseJs(tokens);
};这一步支解字符串一般运用正则来完成的，背面检索字符串会大批用到正则要领。
在这一步一般能够检查出模板标签闭合非常，并报错。
2. 模板语法的分类
天生AST以后，一般字符串不须要再管了，末了会直接输出，专注于模板语法的分类。
// 特地处置惩罚模板中的js
Panda.prototype.parseJs = function (tokens) {
var sections = [];
var nestedTokens = [];
var conditionsArray = [];
var collector = nestedTokens;
var section;
var currentCondition;
for (var i = 0; i < tokens.length; i++) {
var token = tokens[i];
var value = token.value;
var symbol = token.type;
switch (symbol) {
case '#': {
collector.push(token);
sections.push(token);
if(token.action === 'each'){
collector = token.children = [];
} else if (token.action === 'if') {
currentCondition = value;
var conditionArray;
collector = conditionArray = [];
token.conditions = token.conditions || conditionsArray;
conditionsArray.push({
condition: currentCondition,
collector: collector
});
}
break;
}
case 'else': {
if(sections.length === 0 || sections[sections.length - 1].action !== 'if') {
throw new Error('else 运用毛病');
}
currentCondition = value;
collector = [];
conditionsArray.push({
condition: currentCondition,
collector: collector
});
break;
}
case '/': {
section = sections.pop();
if (section && section.action !== token.value) {
throw new Error('指令标签未闭合');
}
if(sections.length > 0){
var lastSection = sections[sections.length - 1];
if(lastSection.action === 'each'){
collector = lastSection.chidlren;
} else if (lastSection.action = 'if') {
conditionsArray = [];
collector = nestedTokens;
}
} else {
collector = nestedTokens;
}
break;
}
default: {
collector.push(token);
break;
}
}
}
return nestedTokens;
}上一步我们天生了AST，这个AST在这里就是一个分词token数组：
[
Token {},
Token {},
Token {},
]这个token就是每一段字符串，离别记录了token的范例，行动，子token，前提token等信息。
/**
* token类示意每一个分词的规范数据结构
*/
function Token (type, value, action, children, conditions) {
this.type = type;
this.value = value;
this.action = action;
this.children = children;
this.conditions = conditions;
}在这一步要将轮回要领中的子token嵌套到对应的token中，以及前提衬着子token嵌套到对应token中。
这步完成以后，一个规范的带有嵌套关联的AST完成了。
3. 变量查找与赋值
如今最先依据token中的变量查找到对应的值，依据响应功用天生值得字符串。
/**
* 剖析数据结构的类
*/
function Context (data, parentContext) {
this.data = data;
this.cache = { '.': this.data };
this.parent = parentContext;
}
Context.prototype.push = function (data) {
return new Context(data, this);
}
// 依据字符串name找到实在的变量值
Context.prototype.lookup = function lookup (name) {
name = trim(name);
var cache = this.cache;
var value;
// 查询过缓存
if (cache.hasOwnProperty(name)) {
value = cache[name];
} else {
var context = this, names, index, lookupHit = false;
while (context) {
// user.username
if (name.indexOf('.') > 0) {
value = context.data;
names = name.split('.');
index = 0;
while (value != null && index < names.length) {
if (index === names.length - 1) {
lookupHit = hasProperty(value, names[index]);
}
value = value[names[index++]];
}
} else {
value = context.data[name];
lookupHit = hasProperty(context.data, name);
}
if (lookupHit) {
break;
}
context = context.parent;
}
cache[name] = value;
}
return value;
}为了进步查找效力，采纳缓存代办，每次查找到的变量存储途径轻易下次疾速查找。
不同于JavaScript编译器，模板引擎在查找变量的时刻找不到对应变量即停止查找，返回空并不会报错。
4. 节点的前提衬着与嵌套
这里最先讲模板语法token和一般字符串token最先一致编译天生字符串，并拼接成完全的字符串。
// 依据tokens和context夹杂拼接字符串输出效果
Panda.prototype.renderTokens = function (tokens, context) {
var result = '';
var token, symbol, value;
for (var i = 0, numTokens = tokens.length; i < numTokens; ++i) {
value = undefined;
token = tokens[i];
symbol = token.type;
if (symbol === '#') value = this.renderSection(token, context);
else if (symbol === '&') value = this.unescapedValue(token, context);
else if (symbol === '=') value = this.escapedValue(token, context);
else if (symbol === 'text') value = this.rawValue(token);
if (value !== undefined) result += value;
}
return result;
}5. 绘制页面
页面字符串已剖析完成，能够直接输出：
Panda.prototype.render = function (tpl, state) {
if (typeof tpl !== 'string') {
return new Error('请输入字符串！');
}
// 剖析字符串
var tokens = this.cache[tpl] ? tokens : this.parse(tpl);
// 剖析数据结构
var context = state instanceof Context ? state : new Context(state);
// 衬着模板
return this.renderTokens(tokens, context);
};输出页面字符串被浏览器剖析，就涌现了页面。
以上只是简朴的模板完成，并没有经由体系测试，仅供进修运用，源码传送门。成熟的模板引擎是有完全的非常处置惩罚，变量查找剖析，作用域替代，优化衬着，断点调试等功用的。
总结
前端模板这块能做的东西还许多，许多框架都是集成模板的功用，合营css，js等夹杂编译天生剖析好款式和绑定胜利事宜的dom。
别的完成模板的体式格局也有许多，本文的完成体式格局参考了mustache源码，模板标签内的代码被剖析，然则是经由过程代码片断分类，变量查找的体式格局来实行的，将纯字符串的代码变成了被诠释器实行的代码。
别的向vue这类能够完成双向绑定的模板能够抽闲多看一看。
参考资料
- 前端模板的道理与完成
- Vue 模板编译道理
- 现一个前端模板引擎
- mustache
- [怎样挑选-Web-前端模板引擎
