前端javascript模板
我⼿⾥维护的⼀个项⽬，遇到⼀个问题：原项⽬的开发⼈员在Javascript中，⼤量的拼接HTML，导致代码极丑，极难维护。他们怎么能够忍受的了这么丑陋、拙劣的代码呢，也许是他们的忍受⼒极强，压根就没想去寻解决⽅法。
  可是，我，是万难不能接受这种丑陋的解决⽅式的。有没有优雅的解决⽅法呢，于是在⽹上搜索到了。
  主页很简洁，就⼀个页⾯，研究了⼀下，就顺利的上⼿了，相当的简单易⽤。主要分两步⾛。
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　遍历数组
上⾯按照⾃⼰的理解，简单的翻译标记了⼀下⼤概意思，也不知对不对O(∩_∩)O~
主要就⽤到三个，{{= }}变量输出、{{? }}条件分⽀、和{{~ }}遍历数组。
2、调⽤模板，⽣成最终的HTML，把HTML放到对应的地⽅去就可以了
调⽤模板，这没啥好说的，把官⽅代码拷贝过来就⾏了，下⾯是⼀个完整的代码。
1 <!DOCTYPE html>
2 <html>
3 <head>
4    <title>test</title>
5 </head>
6 <body>
7    <h1>this is doT.js test.</h1>
8
9    <ul id="list">
10        <!-- 下⾯是模板，⼀般推荐写在<head>⾥，我⽐较喜欢写在相对应的标签⾥ -->
11        <script id="test_tmpl" type="text/x-dot-template">
12            {{? it && it.length > 0}}
13                {{~ it :value}}
14                    <li>
15                        name: <a href="javascript:click_me({{!JSON.stringify(value)}})">{{=value.name}}</a>
16                         
17                        age: {{=value.age}}
18                    </li>
19                {{~}}
20            {{?}}
21        </script>
22    </ul>
23
24    <script src="js/jquery-1.11.2.min.js"></script>
25    <script src="js/doT.min.js"></script>
26 </body>
27
28 <script type="text/javascript">
29    $(function(){
30        var data = [
31            {name:'bananaplan', age:31},
32            {name:'wangxiaozhu', age:18}
33        ];
34
35        var tempFn = plate($('#test_tmpl').html());
36        var resultText = tempFn(data);
37
38        console.log(resultText);
论坛前端模板39
40        $('#list').html(resultText);
41    });
42
43    function click_me(value) {
44        console.log(value);
45        alert(JSON.stringify(value));
46    }
47 </script>
48
49 </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的过程中，也没有拦路虎了。  ⽹上关于doT.js的资料倒是不多，如果，有缘⼈看到这⾥，希望这篇⽂字对你有所帮助。
标签:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。