编写一个简单的JavaScript模板引擎

本文首发于我的知乎专栏，转发于掘金。若需要用于商业用途，请经本人同意。

尊重每一位认真写文章的前端大佬，文末给出了本人思路的参考文章。

前言

能够访问到这篇文章的同学，初衷是想知道如何编写 的模板引擎。为了照顾一些没有使用过模板引擎的同学，先来稍微介绍一下什么叫模板引擎。

如果没有使用过模板引擎，但是又尝试过在页面渲染一个列表的时候，那么一般的做法是通过拼接字符串实现的，如下：

<ul><% for (var i = 0; i < obj.users.length; i++) { %>	<li>		<a href="<%= obj.users[i].url %>">			<%= obj.users[i].name %>		</a>	</li><% } %></ul>

const arr = [{	"name": "google",	"url": "https://www.google.com"}, {	"name": "baidu",	"url": "https://www.baidu.com/"}, {	"name": "凯斯",	"url": "https://www.zhihu.com/people/Uncle-Keith/activities"}]const html = tmpl('list', arr)console.log(html)

" <ul>    <li><a href="https://www.google.com">google</a>    </li>    <li><a href="https://www.baidu.com/">baidu</a>    </li>    <li><a href="https://www.zhihu.com/people/Uncle-Keith/activities">凯斯</a>    </li></ul> "

<  type="text/html" id="template">	<ul>		<% if (obj.show) { %>			<% for (var i = 0; i < obj.users.length; i++) { %>				<li>					<a href="<%= obj.users[i].url %>">						<%= obj.users[i].name %>					</a>				</li>			<% } %>		<% } else { %>			<p>不展示列表</p>		<% } %>	</ul></ >

let tpl = ''const tmpl = (str, data) => {    // 如果是模板字符串，会包含非单词部分（<, >, %,  等）；如果是id，则需要通过getElementById获取    if (!/[sW]/g.test(str)) {        tpl = document.getElementById(str).innerHTML    } else {        tpl = str    }}

2. HTML结构与 语句、变量分离

这一步骤是引擎中最最最重要的步骤，如果实现了，那就是实现了一大步了。所以我们使用两种方法来实现。假如获取到的模板字符串如下：

" <ul>	<% if (obj.show) { %>		<% for (var i = 0; i < obj.users.length; i++) { %>			<li>				<a href="<%= obj.users[i].url %>">					<%= obj.users[i].name %>				</a>			</li>		<% } %>	<% } else { %>		<p>不展示列表</p>	<% } %></ul> "

let tpl = ''const tmpl = (str, data) => {  // 如果是模板字符串，会包含非单词部分（<, >, %,  等）；如果是id，则需要通过getElementById获取  if (!/[sW]/g.test(str)) {      tpl = document.getElementById(str).innerHTML  } else {      tpl = str  }  let result = `let p = []; p.push('`  result += `${	tpl.replace(/[
	]/g, '')	   .replace(/<%=s*([^%>]+?)s*%>/g, "'); p.push($1); p.push('")	   .replace(/<%/g, "');")	   .replace(/%>/g, "p.push('")  }`  result += "'); return p.join('');"      }

" let p = [];p.push('<ul>');if (obj.show) {    p.push('');    for (var i = 0; i < obj.users.length; i++) {        p.push('<li><a href="');        p.push(obj.users[i].url);        p.push('">');        p.push(obj.users[i].name);        p.push('</a></li>');    }    p.push('');} else {    p.push('<p>不展示列表</p>');}p.push('</ul>');return p.join(''); "

p.push('for(var i =0; i < obj.users.length; i++){')  // 无效p.push('obj.users[i].name') // 无效p.push(for(var i =0; i < obj.users.length; i++){)  // 报错

str.replace(/\/g, '\\')    .replace(/'/g, "\'")

let tpl = ''const tmpl = (str, data) => {  // 如果是模板字符串，会包含非单词部分（<, >, %,  等）；如果是id，则需要通过getElementById获取  if (!/[sW]/g.test(str)) {      tpl = document.getElementById(str).innerHTML  } else {      tpl = str  }  let result = `let p = []; p.push('`  result += `${	tpl.replace(/[
	]/g, '')           .replace(/\/g, '\\')           .replace(/'/g, "\'")	   .replace(/<%=s*([^%>]+?)s*%>/g, "'); p.push($1); p.push('")	   .replace(/<%/g, "');")	   .replace(/%>/g, "p.push('")  }`  result += "'); return p.join('');"      }

let tpl = ''let match = ''  // 记录exec函数匹配到的值// 匹配模板idconst idReg = /[sW]/g// 匹配 语句或变量const tplReg = /<%=?s*([^%>]+?)s*%>/gconst add = (str, result) => {	str = str.replace(/[
	]/g, '')		.replace(/\/g, '\\')		.replace(/'/g, "\'")	result += `result.push('${string}');`	return result}const tmpl = (str, data) => {	// 记录HTML结构匹配的开始位置	let cursor = 0	let result = 'let result = [];'	// 如果是模板字符串，会包含非单词部分（<, >, %,  等）；如果是id，则需要通过getElementById获取	if (!idReg.test(str)) {		tpl = document.getElementById(str).innerHTML	} else {		tpl = str	}        // 使用exec函数，每次匹配成功会动态改变index的值	while (match = tplReg.exec(tpl)) {		result = add(tpl.slice(cursor, match.index), result) // 匹配HTML结构		result = add(match[1], result)		             // 匹配 语句、变量		cursor = match.index + match[0].length	             // 改变HTML结果匹配的开始位置	}	result = add(tpl.slice(cursor), result)								 // 匹配剩余的HTML结构	result += 'return result.join("")'}console.log(tmpl('template'))

" let result =[];result.push('<ul>');result.push('if (obj.show) {');result.push('');result.push('for (var i = 0; i < obj.users.length; i++) {');result.push('<li><a href="');result.push('obj.users[i].url');result.push('">');result.push('obj.users[i].name');result.push('</a></li>');result.push('}');result.push('');result.push('} else {');result.push('<p>什么鬼什么鬼</p>');result.push('}');result.push('</ul>');return result.join("") "

let tpl = ''let match = ''  // 记录exec函数匹配到的值// 匹配模板idconst idReg = /[sW]/g// 匹配 语句或变量const tplReg = /<%=?s*([^%>]+?)s*%>/gconst keyReg = /(for|if|else|switch|case|break|{|})/g   // **** 增加正则匹配语句const add = (str, result, js) => {	str = str.replace(/[
	]/g, '')		.replace(/\/g, '\\')		.replace(/'/g, "\'")        // **** 增加三元表达式的判断，三种情况： 语句、 变量、HTML结构。	result += js ? str.match(keyReg) ? `${str}` : `result.push(${str});` : `result.push('${str}');`	return result}const tmpl = (str, data) => {	// 记录HTML结构匹配的开始位置	let cursor = 0	let result = 'let result = [];'	// 如果是模板字符串，会包含非单词部分（<, >, %,  等）；如果是id，则需要通过getElementById获取	if (!idReg.test(str)) {		tpl = document.getElementById(str).innerHTML	} else {		tpl = str	}        // 使用exec函数，每次匹配成功会动态改变index的值	while (match = tplReg.exec(tpl)) {		result = add(tpl.slice(cursor, match.index), result) // 匹配HTML结构		result = add(match[1], result, true)		     // **** 匹配 语句、变量		cursor = match.index + match[0].length	             // 改变HTML结果匹配的开始位置	}	result = add(tpl.slice(cursor), result)		             // 匹配剩余的HTML结构	result += 'return result.join("")'}console.log(tmpl('template'))

" let result = [];result.push('<ul>');if (obj.show) {    result.push('');    for (var i = 0; i < obj.users.length; i++) {        result.push('<li><a href="');        result.push(obj.users[i].url);        result.push('">');        result.push(obj.users[i].name);        result.push('</a></li>');    }    result.push('');} else {    result.push('<p>什么鬼什么鬼</p>');}result.push('</ul>');return result.join("") "

console.log('开始计算字符串拼接')const start2 = Date.now()let str = ''for (var i = 0; i < 9999999; i++) {  str += '1'}const end2 = Date.now()console.log(`字符串拼接运行时间: ${end2 - start2}`ms)console.log('----------------')console.log('开始计算数组拼接')const start1 = Date.now()const arr = []for (var i = 0; i < 9999999; i++) {  arr.push('1')}arr.join('')const end1 = Date.now()console.log(`数组拼接运行时间: ${end1 - start1}`ms)

function test () {}const test = function test () {}

const test = new Function('arg1', 'arg2', ... , 'console.log(arg1 + arg2)')test(1 + 2) // 3

鱼和熊掌不可得兼，渲染便利的同时带来了部分的性能损失

Function构造函数可以传入多个参数，最后一个参数代表执行的语句。因此我们可以这样

let tpl = ''// 匹配模板的idlet idReg = /[sW]/gconst cache = {}const add = tpl => {	// 匹配成功的值做替换操作	return tpl.replace(/[
	]/g, '')		.replace(/\/g, '\\')		.replace(/'/g, "\'")		.replace(/<%=s*([^%>]+?)s*%>/g, "'); p.push($1); p.push('")		.replace(/<%/g, "');")		.replace(/%>/g, "p.push('")}const tmpl = (str, data) => {	let result = `let p = []; p.push('`        // 如果是模板字符串，会包含非单词部分（<, >, %,  等）；如果是id，则需要通过getElementById获取	if (!idReg.test(str)) {		tpl = document.getElementById('template').innerHTML		if (cache[str]) {			return cache[str].apply(data)		}	} else {		tpl = str	}	result += add(tpl)	result += "'); return p.join('');"	let fn = new Function(result)		// 转成可执行的JS代码	if (!cache[str] && !idReg.test(str)) {	// 只用传入的是id的情况下才缓存模板		cache[str] = fn	}	return fn.apply(data)										// apply改变函数执行的作用域}