mustache.js是一个模板引擎，为开发节省了大量的“人力”，对于初学者，我是从这篇 和这篇 博客接触的，算是对mustache有了初步认识，不得不承认自己还是菜鸟阶段还有太多东西要学，慢慢熟悉。
在初步了解mustache后，我仿照公司使用的技巧写了一个demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="C:\Users\Administrator\Desktop\mustache.js"> </script><script id="emacleTempl" class="mustache-template" type="text/template">
<h1>标题：[[title]]</h1>
<p>下面是我的个人信息:</p>
<h2>姓名：[[name]]</h2>
<h2>年龄：[[age]]</h2>
<h2>身高：[[height]]</h2>
<h2>学校：[[school]]</h2>
<h3>工作：[[#job]] [[.]] [[/job]]</h3>
<h3>地址：[[#addres]]<p>城市：[[city]]<p>科室：[[zip]]<p>[[/addres]]</h3>
[[#edu]]
教育信息：我的学校是：[[school]] !!
[[/edu]]
</script>
</head>
<body>
<div id="d2"></div>
</body><script type="text/javascript">
var tem=document.getElementById("emacleTempl").innerHTML;
var d2=document.getElementById("d2");var data={
title:"个人资料",
name:"jim",
age:20,
height:180,
school:"辽宁工程技术大学大学",
addres:{
city:"北京",
atate:"朝阳",
zip:512
},
job:["java","js","css","html","ps"],
edu:true //true时加载，flase时不加载};var html = Mustache.render(tem,data); //渲染数据
d2.innerHTML=html; //把渲染结果插入空div中，显示</script>
</html>
在demo里有几个关键点这里需要声明一下，第一就是代码中的第二个<script>标签，重点是它的type=”text/template” 而不是“text/javascript”,没错就是让他不能正常识别为js代码，因为它内部本身就不是js，识别了反而会报错。它存放的是渲染模板，本打算单独成一个html文件的，但不利于查看，就写在一起了，我司的模板都是一个个html文件，文件里就一个<script type=”text/template”>标签。也就是说，网页是从模板中选择性加载的，怎样选择呢？那就是底部的js代码控制的，先看模板吧：
<script id="emacleTempl" class="mustache-template" type="text/template">
<h1>标题：[[title]]</h1>
<p>下面是我的个人信息:</p>
<h2>姓名：[[name]]</h2>
<h2>年龄：[[age]]</h2>
<h2>身高：[[height]]</h2>
<h2>学校：[[school]]</h2>
<h3>工作：[[#job]] [[.]] [[/job]]</h3>
<h3>地址：[[#addres]]<p>城市：[[city]]<p>科室：[[zip]]<p>[[/addres]]</h3>
[[#edu]]
教育信息：我的学校是：[[school]] !!
[[/edu]]
</script>
最后一个[[#edu]]为true时加载，flase时不加载，这就是所谓的选择性加载，下面看看控制加载的js代码吧：
<script type="text/javascript">
var tem=document.getElementById("emacleTempl").innerHTML;
var d2=document.getElementById("d2");var data={
title:"个人资料",
name:"jim",
age:20,
height:180,
school:"辽宁工程技术大学大学",
addres:{
city:"北京",
atate:"朝阳",
zip:512
},
job:["java","js","css","html","ps"],
edu:true //true时加载，flase时不加载
};var html = Mustache.render(tem,data); //渲染数据
d2.innerHTML=html; //把渲染结果插入空div中，显示</script>
js代码定义了data，里面存着渲染信息，最后通过Mustache.render(tem,data)渲染，并把渲染的结果作为innerHTML插入到指定标签中，这样就实现了选择性加载，如果要更改数据只需更改data就行，基本原理就是这样，当然实际情况要比这复杂。一个模板成千上万行代码也是很常见的。同志仍需努力！
