前端框架日新月异,而其中的数据绑定已经成为了一个框架最基础的功能。我们常常使用的单向绑定、双向绑定、事件绑定、样式绑定等,里面具体怎么实现,而当我们数据变动的时候又会触发怎样的底部流程呢?
前言
从事前端的朋友可能都知道,Web 前端领域里用到的模板引擎技术主要有三种,它们分别是:
而今天我们会着重介绍基于字符串的模板引擎的实现原理,分析它的优点缺点以及使用的场景。
石器时代
在进入正文之前,我们先回顾一下在模板引擎出现之前的时代,我们暂且称之为“石器时代”,我们是如何利用JS改变页面结构的。比如说下面的代码:
<div id="container">
我们正处于刀耕火种的石器时代
</div>
如果我们需要修改 container 里面的内容,一般有2种方法:
一种是通过 JS 的 DOM API
直接操作 DOM
var newTxt = '石器时代需要自己撸工具,摩擦摩擦,似魔鬼的步伐...';
var container = document.getElementById('container');
var desc = document.createElement('H1');
var txt = document.createTextNode(newTxt);
desc.appendChild(txt);
container.replaceChild(desc, container.childNodes[0]);
另一种是通过 innerHTML
批量修改 DOM 结构
var newTxt = '石器时代需要自己撸工具,摩擦摩擦,似魔鬼的步伐...';
var template = '<H1>' + newTxt + '</H1>';
var container = document.getElementById('container');
container.innerHTML=template;
相比之下,第二种方式通过 innerHTML 更新 DOM 要简单许多,它无需考虑 DOM 的层级结构,只要做简单的字符串拼接就能实现需求。但这种方式的问题是代码可读性很差,开发中还必须同时保证最终拼接的字符串的正确性。不然,当你需要作出修改时,面对一坨的字符无疑是一件非常痛苦的事。
青铜时代
在上面的例子中,我们的需求是将一个变量注入到模板当中,类似 ES6 的模板字符串:
var newTxt = '石器时代需要自己撸工具,摩擦摩擦,似魔鬼的步伐...';
var template = `<H1>${newTxt}</H1>`;
但 ES6 这种现代化的常规武器,对石器时代而言已经是天方夜谭了。当然了,部落里的老司机可以凭借深厚的 JS 功底,撸出了各种基于字符串的模板。这些模板又可以细分为两种情况:一种是不包含逻辑处理,只作数据绑定用的,如 mustache.js ;另一种是既有逻辑处理,也有数据绑定的,如 EJS 。
下面,我以 EJS 的语法为例,实现一个简单的字符串模板引擎。模版引擎的编译流程如下:
首先,需要编译模板字符串,将其转换为 JS 能够理解的语法。
第一步是利用正则表达式,区分出字符串中哪些是模板语法,哪些是正常的 HTML 标签。以下是一个 EJS 语法的例子:
<ul>
<% for(var i=0; i<supplies.length; i++) {%>
<li><%= supplies[i] %></li>
<% } %>
</ul>
在‘<%=’和‘%>’之间是 JS 的表达式,而在‘<%’和’%>‘之间是普通的 JS 语句,可以进行逻辑判断和条件循环等操作。可以使用以下正则表达式抽取:
// 匹配表达式,只能有一行
let evalExpr = /\<\%\=(.+?)\%\>/g;
// 匹配语句,可以有多行
let expr = /\<\%([\s\S]+?)\%\>/g;
对于普通的 HTML 标签,需要用自定义的 echo 函数包裹一下,在使用 eval 函数编译的时候直接输出字符串。echo 函数的定义如下:
// 临时变量,保存编译后的模板字符串
let output = "";
// 直接将html字符串拼接到output后面
function echo(html){
output += html;
}
完整的 compile 函数代码如下:
function compile(template){
// 匹配表达式,只能有一行
let evalExpr = /\<\%\=(.+?)\%\>/g;
// 匹配语句,可以有多行
let expr = /\<\%([\s\S]+?)\%\>/g;
// 内容为空的部分
let empty = /echo\(\"\"\);/g;
template = template
// 转换JS表达式
.replace(evalExpr, '`); \n echo( $1 ); \n echo(`')
// 转换JS语句
.replace(expr, '`); \n $1 \n echo(`');
// 在模板的最外层包裹一个echo
template = 'echo(`' + template + '`);';
// 清除空的echo
template = template
.replace(empty, "");
// 保存编译后的字符串,此处用了ES6的模板字符串特性,相当于eval了一下
let script =
`(function parse(data){
// 临时变量,保存编译后的模板字符串
var output = "";
// 直接将html字符串拼接到output后面
function echo(html){
output += html;
}
// 包含echo的模板字符串
${ template }
return output;
})`;
return script;
}
经过正则表达式处理后,下面这段代码:
<ul>
<% for(var i=0; i<supplies.length; i++) {%>
<li><%= supplies[i] %></li>
<% } %>
</ul>
会转化为以下形式:
echo(`<ul>`);
for(var i=0; i<data.supplies.length; i++) {
echo(`<li>`);
echo( data.supplies[i] );
echo(`</li>`);
}
echo(`</ul>`);
第二步是将模板中用到的数据 data
注入到 compile 函数的 parse 子函数中,生成最终的字符串。
最后,我们再通过 innerHTML ,把字符串插入到 DOM 合适的位置。
字符串模板的优缺点
字符串模板之所以能够更新页面,最核心的原理是使用 innerHTML 这个 api 将字符串直接插入到 DOM 节点中。因此,我们分析字符串模板的优缺点就离不开使用 innerHTML 更新DOM 的优缺点。
先谈谈优点:
再来谈谈缺点:
总结
综上所述,我们可以很简单的总结出字符串模板引擎的使用场景:如果你的应用比较简单,交互也不多,也希望有一个快速的首屏时间,请使用字符串模板引擎。反之,更先进的基于Dom 或者虚拟 Dom 操作的模板引擎可能是更好的选择。