Atitit 模板引擎总结 目录 1. 模板引擎 1 2. 常见模板步骤 1 2.1. 1）定义模板字符串 1 2.2. 2）预编译模板 2 2.3. 渲染模板 2 3. 流程渲染 if el

Atitit 模板引擎总结

目录

1. 模板引擎 1

2. 常见模板步骤 1

2.1.  1）定义模板字符串  1

2.2. 2）预编译模板  2

2.3. 渲染模板  2

3. 流程渲染 if else  foreach 3

 

1. 模板引擎
2. 常见模板步骤

mustache的使用非常简单，先通过script标签引入它的js文件，然后按下面的步骤操作： 

1. 1. 
      1）定义模板字符串 

定义模板有2种方式，方式一就是在前面部分中看到的，直接用[...].join('')的方式在js代码中定义，方式二直接把模板内容用script定义在html中：

- Hide code

<script id="tpl" type="text/html">

    Hello {{name}}!</script>

然后在编译模板之前，通过获取tpl的innerHTML定义原始模板串：

- Hide code

var tpl = document.getElementById('tpl').innerHTML.trim();

具体要用哪种方式来定义模板，可以参考下面的建议： 
如果这个模板要用于多个页面，推荐把模板定义在js代码中；如果这个模板只用于当前页面，推荐直接定义到script标签中，管理更方便。 

1. 1. 2）预编译模板 

假设原始模板串已经定义好，并用tpl变量来引用，就可以通过下面的代码来预编译模板：

- Hide code

Mustache.parse(tpl);

要注意的是，经过预编译之后的tpl已经不再是原来的模板串了，连数据类型都变成数组类型了，这都是预编译的结果。 

1. 1. 渲染模板 

渲染方式很简单：

- Hide code

var htmlAfterRendered = Mustache.render(tpl1, obj);

obj引用的是一个数据源对象，mustache会把模板中那些属性标签，根据约定的规则，替换成对象的内容。htmlAfterRendered就是替换之后的字符串，你可以用它完成你需要的DOM操作。

1. 流程渲染 if else  foreach

1. if-else渲染2）for-each渲染

3） 动态渲染

当prop属性所引用的是一个函数，并且这个函数的返回值还是一个函数的话，mustache会再次调用这个返回的函数，并给它传递2个参数：text表示原来的模板内容，render表示mustache内部的执行渲染的对象，以便在这个函数内部可以通过这render对象，结合原来的模板内容，自定义渲染的逻辑，并把函数的返回值作为渲染结果（这个返回值渲染的逻辑跟{{prop}}标签完全一样）：

 

Javascript模板引擎mustache.js详解 - 流云诸葛 - 博客园.html