javascript模板引擎实例分析
本篇内容主要讲解“javascript模板引擎实例分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript模板引擎实例分析”吧!
JavaScript模板引擎是一种将html结构与其中包含内容分离的方法，是为了使用户界面与业务数据分离而产生的，可以生成一个标准的html文档；模板引擎就是在让动态页面渲染的时候，可以用于简化字符串拼接操作的东西。
本教程操作环境：windows10系统、javascript1.8.5版、Dell G3电脑。
javascript模板引擎是什么
模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
模板引擎就是为了让动态页面渲染的时候，可以简化字符串的拼接操作的东西。
JavaScript模板是一种将HTML结构与其中包含的内容分离的方法。 模板系统通常会引入一些新语法，但通常使用起来非常简单，尤其是如果我们以前在其他地方使用过模板系统（例如PHP中的Twig ）。 需要注意的有趣一点是，令牌替换通常由双大括号（ {{ ... }} ）表示，Mustache和Handlebars源自其大括号（提示：将其侧向查看相似性）。
比如我们需要在页面渲染一个列表：
<li>111</li> <li>222</li> <li>333</li>
列表中的数据是动态获取的一个数组data=['111','222','333']。那么我们直接用代码写，需要循环data，然后拼接每一个li的数据。写惯了页面的同学，希望把代码逻辑直接写在一个html里面，只要更换数据源，就能输出不同的页面代码了。比如我们可以这样写：
for(var i = 0; i < this.list.length; i++){
<li>this.list[i]</li>
}当更换this.list的数据后，就可以获得不同的结果了。但是这样的代码，是没法区分哪里是逻辑代码，哪里是html本身的代码的。所以我们加入了一些标记符，我们这里用<% %>来包裹住逻辑代码。
<%for(var i = 0; i < this.list.length; i++){%>
<li><%=this.list[i]%></li>
<%}%>这段代码我们可以加在script标签内，修改type为text/html或者其它格式，在需要使用的时候，通过dom获取到里面的文本内容。如果js可以理解这段代码，就可以通过变更数据源来更新模板内容了。我们可以通过正则匹配，捕获所有的逻辑代码，然后进行分析。这里我取了巧，利用js可以new Function执行代码的途径，将逻辑代码以外的部分，加成了一个字符串，执行后输出最后的字符串结果：var etj = function (str, data) {
var reg = /^<%.*?%>/,
reg2 = /^(.*?)<%/,
str2 = 'var str = "";',
str = str.replace(/[\r\t\n]/g, " ");
while (str.length) {
if (match = reg.exec(str)) {
if (/^<%=/.exec(str)) {
str = str.replace(match[0], '');
str2 += ('str +' + match[0].replace(/<%|%>/g, ''));
str2 += ';';
} else {
str = str.replace(match[0], '');
str2 += match[0].replace(/<%|%>/g, '');
str2 += ';';
}
} else {
match = reg2.exec(str)[1];
str = str.replace(match[0], '');
str2 += 'str +="';
str2 += match[0];
str2 += '";';
}
}
str2 += 'return str;'
var f = new Function(str2);
return f.call(data);}这是自己写的一个玩具引擎，还有bug，先做一个demo展示吧（毕竟逻辑简单）。在这里我们通过简单的正则，把模板变成了一段纯粹的js代码，当导入数据源后，执行结果就是我们所要的html代码了。我们只要执行：
etj(str, {'list': [1, 2, 3]});就可以了，这样，html的逻辑也不用嵌入js的代码中。
到此，相信大家对“javascript模板引擎实例分析”有了更深的了解，不妨来实际操作一番吧！这里是蜗牛博客网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论