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

可是,我,是万难不能接受这种丑陋的解决方式的。有没有优雅的解决方法呢,于是在网上搜索到了 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 遍历数组

上面按照自己的理解,简单的翻译标记了一下大概意思,也不知对不对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 &nbsp;
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 = doT.template($('#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的资料倒是不多,如果,有缘人看到这里,希望这篇文字对你有所帮助。

doT.js——前端javascript模板引擎问题备忘录的更多相关文章

  1. 【Juicer】 一个高效、轻量的前端 (Javascript) 模板引擎

    引用地址:http://juicer.name/docs/docs_zh_cn.html * 一个完整的例子 HTML 代码: <script id="tpl" type=& ...

  2. 前端javascript模板

    doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的 ...

  3. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  4. JavaScript模板引擎

    JavaScript模板引擎实例应用   在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...

  5. JavaScript模板引擎实例应用(转)

    本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...

  6. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  7. JavaScript模板引擎artTemplate.js——为什么使用模板引擎?

    作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...

  8. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  9. JavaScript模板引擎Template.js使用详解

    这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   template.js 一款 JavaScript 模板引 ...

随机推荐

  1. Maven中的pom.xml详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  2. AJAX跨域完全讲解

    AJAX跨域完全讲解 今天在慕课网上学习了AJAX跨域完全讲解:https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域的问题的了,当时候 ...

  3. Spring boot 整合redis单机版

       一.安装redis 这个不多说,网上有各种系统安装redis的操作, redis安装 二.创建sprigboot项目 这个也不多说,不会的前面有相关教程. 三.添加maven坐标 四.编写spr ...

  4. 用yii2给app写接口(下)

    上一节里我们讲了如何用Yii2搭建一个能够给App提供数据的API后台应用程序.那么今天我们就来探讨下授权认证和通过API接口向服务器提交数据以及如何控制API接口返回那些数据,不能返回那些数据. 授 ...

  5. PHP网站的安全要点

    1. 删除不必要的模块 PHP随带内置的PHP模块.它们对许多任务来说很有用,但是不是每个项目都需要它们.只要输入下面这个命令,就可以查看可用的PHP模块: # php - m 一旦你查看了列表,现在 ...

  6. 聚类-K均值

    数据来源:http://archive.ics.uci.edu/ml/datasets/seeds 15.26 14.84 0.871 5.763 3.312 2.221 5.22 Kama 14.8 ...

  7. 动态规划算法的java实现

    一:动态规划 1)动态规划的向前处理法 java中没有指针,所以邻接表的存储需要转化一中形式,用数组存储邻接表 用三个数组u,v,w存储边,u数组代表起点,v数组代表终点,w代表权值;例如:1--&g ...

  8. java socket 模拟im 即时通讯

    自己想了一下怎么实现,就写了,没有深究是否合理.更多处理没有写下去,例如收件人不在线,应该保存在数据库,等下一次连接的时候刷新map,再把数据发送过去,图片发送也没有做,也没有用json格式 sock ...

  9. JDBC底层原理

    Class.forName(“com.mysql.jdbc.Driver”)是 强制JVM将com.mysql.jdbc.Driver这个类加载入内存,并将其注册到DriverManager类,然后根 ...

  10. Oracle安装、Navicat for Oracle、JDBCl连接、获取表结构

    Oracle安装 Navicat for Oracle配置 Oracle JDBC连接(增删改查) Oracle安装 环境windows 7 64位 安装版本:oracle 11g(64位) 下载地址 ...