您的位置：首页 > Web前端 > JavaScript

doT.js——前端javascript模板引擎问题备忘录

2015-10-09 14:54 661 查看
　　我手里维护的一个项目，遇到一个问题：原项目的开发人员在Javascript中，大量的拼接HTML，导致代码极丑，极难维护。他们怎么能够忍受的了这么丑陋、拙劣的代码呢，也许是他们的忍受力极强，压根就没想去寻找解决方法。

　　可是，我，是万难不能接受这种丑陋的解决方式的。有没有优雅的解决方法呢，于是在网上搜索到了doT.js。

　　doT.js的主页很简洁，就一个页面，研究了一下，就顺利的上手了，相当的简单易用。主要分两步走。

1、写模板

写模板，就用官方文档里提供给你的三板斧就搞定了，当然总共不止三个：

{{ }} 　　　　for evaluation　模板标记符
{{= }}　　　　for interpolation　变量输出显示，默认变量名叫it
{{! }}　　　　for interpolation with encoding　编码转义后输出显示
{{# }}　　　　for compile-time evaluation/includes and partials　输出显示预定义（还没用过）
{{## #}}　　　for compile-time defines　预定义（还没用过）
{{? }}　　　　for conditionals　条件分支，if条件的简写
{{~ }}　　　　for array iteration　遍历数组


上面按照自己的理解，简单的翻译标记了一下大概意思。主要就用到三个，{{= }}变量输出、{{? }}条件分支、和{{~ }}遍历数组。

2、调用模板，生成最终的HTML，把HTML放到对应的地方去就可以了

调用模板，这没啥好说的，把官方代码拷贝过来就行了。

下面是一个完整的代码：

<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<h1>this is doT.js test.</h1>

<ul id="list">
<!-- 下面是模板，一般推荐写在<head>里，我比较喜欢写在相对应的标签里 -->
<script id="test_tmpl" type="text/x-dot-template">
{{? it && it.length > 0}}
{{~ it :value}}
<li>
name: <a href="javascript:click_me({{!JSON.stringify(value)}})">{{=value.name}}</a>
 
age: {{=value.age}}
</li>
{{~}}
{{??}}
<li>there is no data.</li>
{{!alert('no data')}}
{{?}}
</script>
</ul>

<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/doT.min.js"></script>
</body>

<script type="text/javascript">
$(function(){
var data = [
{name:'bananaplan', age:31},
{name:'wangxiaozhu', age:18}
];

var tempFn = doT.template($('#test_tmpl').html());
var resultText = tempFn(data);

console.log(resultText);

$('#list').html(resultText);
});

function click_me(value) {
console.log(value);
alert(JSON.stringify(value));
}
</script>

</html>


代码没什么难度，先写模板，然后调用模板，生成最终想要的HTML代码段，最后将其放到对应的dom节点下即可。

但在这个看似简单的过程中，我遇到并解决了一个问题。

请注意第15行，原来不是这么写的，而是这样的:

name: <a href="javascript:click_me({{=value}})">{{=value.name}}</a>


我的意思是，想把整个对象传递给click_me函数，但是这么写报错，于是想那能不能先传json字符串过去，然后在函数里自己再parse一下，于是就改成了下面这样：

name: <a href="javascript:click_me({{=JSON.stringify(value)}})">{{=value.name}}</a>


结果，还是报错。注意，上面这段代码里，我用的是{{= }}，而不是{{! }}。因为没有将引号之类的编码，所以会报错，最后，我改成了下面这个最终版的，就ok了：

name: <a href="javascript:click_me({{!JSON.stringify(value)}})">{{=value.name}}</a>


所以，如果想传递对象，需要将json对象转为字符串，并且编码之后才行。

　　如此，解决了我的一大问题，不用费劲的拼接HTML了，并且在使用doT.js的过程中，也没有拦路虎了。

　　补充：请注意一下20~22行，这是一个else分支，用{{??}}表示。另外，我还特意写了这行代码：{{!alert('no data')}}，是为了说明在其中可以支持js代码，非常的灵活。

　　　　　但遗憾的是，刚刚我研究了一下{{## #}}和{{# }}预定义的用法，实在是鲁钝，尚未全完领悟，这块高级用法，请参见官方指南。

　　　　　基本用法－》https://github.com/olado/doT/blob/master/examples/browsersample.html

　　　　　高级用法－》https://github.com/olado/doT/blob/master/examples/advancedsnippet.txt

　　网上关于doT.js的资料倒是不多，如果，有缘人看到这里，希望这篇文字对你有所帮助。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航