html模板引擎的作用,如何用javascript实现一个模板引擎

模板引擎简介

模板引擎是html渲染必不可少的工具，前端开发的同学经历了从最原始的字符串拼接、用数组push/join，发展到封装简单的string.format函数，再到功能更加强大的模板引擎，可以在模板中内嵌处理逻辑。

传统的页面开发语言技术asp.net,php,jsp都内置了模板引擎，javascrip常见的模板引擎有jquery的tmpl插件，underscore的template函数，ejs、jade、artTemplate等,以ejs为例，模板语法如下：

复制代码

模板中可以直接访问绑定的数据源变量，并且可以支持任意的javascript代码片段，如if,for循环等

原理

我们从需求出发，想一想把上面的模板字符串中的变量替换成数据源中的变量值，并支持嵌入的if等逻辑，需要怎样实现？能支持内嵌js代码执行，那肯定是要使用eval来编译的，只要把模板看成两部分，一部分是在百分号以内的，使用eval执行；另一部分是在百分号以外的，原样输出； 最后顺序拼接成一个完整的字符串就可以了。

正则表达式分割字符串

首先要把模板，按照%分隔进行拆分成多个代码片段，并按顺序存入到数组中

分割模板字符串可以用String对象的split方法，很多人不知道split方法是可以支持正则表达式的，因为我们的分隔符有两个，所以要用正则表达式，可以同时匹配这两个字符，代码就只有一行：

var arr=str.split(/(\)/gm);

复制代码

拆分后的代码片段生成一个数组，我们遍历一下这个数组，将代码片段分成3种类型

javascript代码

html片段(原样输出的字符)

用输出的变量值

只要按顺序拼接生成的字符串代码，最终编译执行字符串代码就可以了

编译字符串的方法

1. eval

js最常见的编译字符串的方法当然是eval，可以直接在当前函数作用域将一个字符串编译成可执行代码，有一条代码规范叫做don't be eval，这是因为使用eval是用代码生成代码，会让代码更加难以看懂，并且会有一些性能损耗。

2. new Function

与eval功能相似，不同的是他会将传入的字符串代码编辑后生成一个function，而且可以生成函数的参数，更加方便调用，封装性隔离性更好。调用形式：new Function(args,functionBody)，为了更好的可读性，我们选择new Function

3. setTimeout/setInterval

setTimeout/setInterval 的第一个参数，可以传入一个函数，这是最常规的用法，也可以传入一个字符串，使用字符串的时候自动调用eval执行，这个用法不太常见。

作用域问题

模板中肯定需要一些动态变量，就是所谓的数据源，模板编译后是生成独立函数的，作用域是隔离的，而数据源是在业务代码中，有独立的作用域，不能直接访问，那么怎么能把两个不同的作用域连接起来呢，with，只有with能做到，将指定的对象插入到当前作用域链的顶端。

完整代码实现

function render(tpl,data){

tpl=tpl.replace(/(\r|\n)/ig,"");

var arr=tpl.split(/(\)/gm);//拆分模板

var funcBody=["with(this){\r\nvar result=[];"];

var item,codeType;

codeType=0;

for(var i=0;i

item=arr[i];

//将代码片段分为3类

if(item=="

codeType=1;

continue;

}else if(item=="

codeType=2;

continue;

}else if(item=="%>"){

codeType=0;

continue;

}

//为3类代码片段生成最终可被eval的函数体

if(codeType==0){ //字符

funcBody.push("result.push(\"");

funcBody.push(item);

funcBody.push("\");\r\n");

}else if(codeType==1){ //代码

funcBody.push(item);

funcBody.push("\r\n");

}else if (codeType==2){ //代码输出

funcBody.push("result.push(");

funcBody.push(item);

funcBody.push(");\r\n");

}

}

funcBody.push("return result.join('')\r\n}");

var template_func=new Function(["renderData"],funcBody.join(""));

return template_func.apply(data,[data]);

}

复制代码

测试一下

var html=render(""

+"

+" ",

{list:["javascript","css","node.js"]})

document.write(html)

复制代码

完美运行

我们来看一下最终编译后生成的函数是什么样子的，如下图：

由于生成的函数是用apply调用的，template_inner.apply(data,[data]),所以函数内部的this指向传入的数据源(data变量)，因此可以在模板中直接使用传入的数据源对象

模板引擎与ES6模板字符串对比

ES6新增了模板字符串功能，不同于普通字符串的单引号和双引号，模板字符用`符号定义，在模板字符中直接可以通过${变量名}访问当前作用域内的变量并直接输出该变量的值，并且在js文件中定义大段的html字符串时，一般是把html片段粘帖进来，包含很多换行符，而模板字符串可以直接兼容换行符，使用起来非常方便。上文中的模板，用ES6的模板字符串来实现，代码也非常精简，如下：

var user={name:"windy"};

var str=`

${user.name}

`

复制代码

ES6模板字符串与普通的模板引擎相比，最大区别在于开发流程的不同，业务逻辑是在js中实现的，模板只实现纯净的变量替换功能，代码与逻辑分离，比较规范易用，可维护也较好，而普通的模板引擎不仅实现了变量替换，还可以内嵌js逻辑代码，更加灵活和强大。

最后，推荐一下个人的开源项目，内置了模板引擎的node.js web开发框架，webcontext: