doT来了

涉及:
js，html，ajax交互，dom操作，属于前端开发
问题：
js拿到ajax数据后操纵dom对象表现出来，特别麻烦而且容易重复加载，并且需要考虑加载顺序，可移植性差
解决方案：

引入doT，下载地址:(https://github.com/olado/doT)

返回数据

array(
		[0]=>array(
				'url'=>'http://www.baidu.com',
				'item'=>'百度'
			),
		[1]=>array(
				'url'=>'http://china.alibaba.com/',
				'item'=>'阿里巴巴'
			),
		[2]=>array(
				'url'=>'http://www.kingsoft.com/',
				'item'=>'金山'
			),
	);

html里准备

<div id='menu'>
		<script id='son_menu' type='text/doT'>
			<dl>
				{{~it:val}}
					<dd><a href='{{=val.url}}'>{{=val.item}}</a></dd>
				{{~}}
			</dl>
		</script>
	</div>

js里准备

var son_menu=$('#son_menu');
	var son_menufn=doT.template(son_menu.html());

当需要的时候触发doT

$('#menu').html(son_menufn(data));

搞定！


免费派送：
定界符 {{}},习惯用这个
循环开始       {{~it :val}}，it为总数据，如果遍历多维数组，可以这样{{~val.name :v}},其中val为上一层循环的子项
循环结束 {{~}}
变量占位       {{=xxx.xx}} 注意是“=”不是“~”，注意哦
if等语句

常规
if(a>3){                             =>             {{if(a>3){}}
                               
}else{                               =>              {{}else{}}

}                                    =>              {{}}}

就是这样用定界符包起来

使用感受：
比起以前操纵dom对象来省了很多时间，杜绝了重复加载问题，不过注意一点，doT需要一点时间来拿到数据并不具，如果你的项目用的是模板成套UI，替换doT后可能会导致原UIjs特效消失，这个函数$.getScript('')可能会对你有帮助，不过我没试，以为我重写的特效




个人记录，仅供参考，没有最好，只有更好，欢迎拍砖，砸鸡蛋，多交流