作者：zccst
模板已是第二次接触，第一次使用模板记得是在十分系统里渲染页面时使用，当时已做到熟练使用，但实际上仍不知道原因。
再次学习模板已不是从0开始，所以还算顺手，但毕竟还只限于使用，今天继续学习，希望这次能够更深入一些。
这次学习的是mustache.js，他的理念是让模板尽量保持简单，甚至连基本的逻辑判断都不需要用。
本文基本要点：
1，基本用法
2，使用模板（写在页面或异步获取）
3，集中变量定义
官方地址：https://github.com/janl/mustache.js
以下是公共文件
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="mustache.js"></script>
<script type="text/javascript">
$(function(){
...
});
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script>
1，最基础的用法
var template = '{{title}} spends {{calc}}';
var obj = {
title: "Joe",
calc: function () {
return 2 + 4;
}
}
var rendered = Mustache.render(template,obj);
$('#target').html(rendered);
2，还可以使用模板
总结：两个基本素材：template, obj。前者和后者都可以简单，也可以复杂
Mustache替换：var result = Mustache.render(template, obj);
渲染到页面：$("xxID").html(result);
var template = $('#template').html();
Mustache.parse(template); // optional, speeds up future uses
var rendered = Mustache.render(template, {name: "Luke"});
$('#target').html(rendered);
3，template除了直接赋值和来自页面外，还可以异步获取。
var obj = {};
$.get('template.mst', function(template){
var result = Mustache.render(template, obj);
$("xxID").html(result);
});
总结：template有三种来源：
（1）直接字符串
（2）本页面中带ID的script
（3）异步获取
4，几种变量
最基本变量 ：{{ company }}
原样输出变量：{{{ company }}}或{{ &company }}
嵌套用点变量：{{name.first}} {{name.last}}