Mustache学习笔记
Mustache 是一款基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用，在前后端分离的技术架构下面，前端模板引擎是一种可以被考虑的技术选型，随着重型框架（AngularJS、ReactJS、Vue）的流行，前端的模板技术已经成为了某种形式上的标配，Mustache 的价值在于其稳定和经典：
主页：https://github.com/janl/mustache.js/
文档：https://mustache.github.io/mustache.5.html
1.出现的问题
在使用中会有可能在页面渲染时会出现{{xxx}}这种标签，虽然会被页面立即替换掉，但是对于用户呈现来讲，依然不太友好
2.具体使用方式
从git hub上获取相关的mustache.js文件，在页面的head标签内引用Jquery.js 和Mustache.js两个脚本文件
3.渲染
渲染形式单一：var view = Mustache.render(template,obj);
参数：一个是模板html，一个是数据源对象。
view：一个返回值（渲染后的html ）
例：
var obj={name:'<b>那年那夏</b>',age:'23'}
var template='我是{{name}}，年龄{{age}}'
var view = Mustache.render(template,obj);
$('body').html(view);
结果：我是那年那夏，年龄23
4.mustache的思想
mustache的核心是标签和logic-less。从上面的代码中可以看到定义模板时，使用了{{name}}这样的标记，这就是mustache的标签，只不过它用{{}}替代了<>，以免跟html标签的<>混淆。logic-less，可以翻译为轻逻辑，因为在定义模板的时候不会用到if-else，不会有循环式的编码，一切都用标签来解决，它的标签非常简单，但是能应付所有场景，只要用以下几个标签几乎就能解决所有的问题：
{{prop}}
{{{prop}}}
{{#prop}}{{/prop}}
{{^prop}}{{/prop}}
{{!prop}}
{{> prop}}
5.mustache标签介绍
1）{{person}}变量
如上面例子中可以直接使用
嵌套使用
var obj={ "name": { "first": "xx,", "last": "yy," }, "age": "23" }
var view={{name.first}} {{name.last}} {{age}}
输出：xx,yy,23
2）{{{prop}}} 带有HTML的变量
在{{prop}}中的html会直接转义，如果不想转义则使用{{{name}}}或{{&name}}
如：var obj={name:'<b>那年那夏</b>',age:'23'}
var template='我是{{{name}}}，年龄{{age}}'
var view = Mustache.render(template,obj);
$('body').html(view);
结果：我是<b>那年那夏</b>，年龄23
3){{#prop}}{{/prop}} 循环
1.遍历数组
数组循环的时候可以用.作为下标
var obj={ "arr": ["1", "2", "3", "4"] };
var template='{{#arr}} {{.}} {{/arr}}'
输出：1234
2.遍历对象
var obj={ "str": [ { "name": "xx，" }, { "name": "yy，" }, { "name": "zz" } ] };
var template='{{#str}} {{name}} {{/str}}'
输出xx,yy,zz
3,False和空的list
在以上代码块中，如果str这个key存在，并且有一个值是false或者一个空的列表，包含在块之间的元素不会做任何显示的.同样如果str是一个列表，如果它为空，标签内部的内容也是不会被显示出来的.
如：var obj={ “str”: false } ;
var view='xxx{{#str}yyy{{/str}}}'
输出xxx
4){{^prop}} {{/prop}}当 prop值为 null, undefined, false 时才渲染输出该区块内容。
如：var obj={ “str”: false } ;
var view='xxx{{^str}yyy{{/str}}}'
输出xxxyyy
5)判断使用{{#prop}}{{/prop}}{{^prop}} {{/prop}}
if else
{{#prop}} ... {{/prop}}
{{^prop}} ... {{/prop}}
布尔判断
当对象没有值时你可能不希望展示{{#prop}} ... {{/prop}}
数组的布尔判断
当一个数组没有任何值的时候，可能会希望不做任何的显示，所以需要这个判断{{#prop}} ... {{/prop}}
Lambdas
当Key的值是一个可以被调用的对象，譬如是一个函数或者一个lambda，该对象将会被调用并且传递标签包含的文本进去
var obj={ "name": "Willy",
"prop": function(){
return function(text){ return "<b>" + text + "</b>" }
}
}
var view={{#prop}} {{name}} is xxx. {{/prop}}
输出
我们看到prop是一个可以被调用的函数他当标签使用的时候会被再次调用，并且包在其中的其他标签也会被转义执行，这个特性，可以用来做很多很多的事情.
6.{> prop}}Partials的使用
Partials 标签开始是以一个大于号开始,像这样{{> box}}.
Partials在运行期被渲染 (相对于编译期渲染而言),因此可以使用它来做一些递归，可以避免无限的循环.
例：
var tpl = "<h1>{{namme}}</h1> <ul>{{>msg}}</ul>"
var partials = {msg: "{{#msg}}<li>{{sex}}</li><li>{{age}}</li><li>{{hobit}}</li>{{/msg}
var html = Mustache.render(tpl, data, partials);
//输出：
<h1>xiaohua</h1>
<ul>
<li>female</li>
<li>22</li>
<li>reading</li>
</ul>
7) {{!prop}} 注释（没啥用
<h1>Today {{! ignore me }}</h1>
输出<h1>Today</h1>
8)核心方法
Mustache.parse(template);//预解析（可选步骤）
Mustache.render(template, obj);
模板既然有好处，也有坏处。就是编译模板需要时间，所以在我们已知会使用某个模板的前提下，我们可以预先编译好这个模板，以便后面的使用。
