选择理由

jetpl.js 是一款简单，好用的javascript模板引擎。

随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予了更大的期望，javascript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，jetpl也是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。 QQ群：516754269

github下载：github.com/singod/jetpl

官网下载：jetpl.zip

版本：.. 下载次数：..

注意事项

1、直接引入jetpl.js即可，另外还可直接使用Seajs等模块化加载。
2、无论商业或个人平台都可以任意使用jetpl
3、任何场合下都务必保留来源，请勿剔除jetpl.js头部注释。

4、解压后，将jetpl文件放至您项目的任意目录
5、使用只需在页面引入jetpl.js即可。 如： <script type="text/javascript" src="jetpl.js"></script>

模板引擎特性

1、没有依赖第三方库，原生js实现模版编译，渲染
2、支持所有主流浏览器, 包括 IE6+
3、模版中可任意书写Native JavaScript，充分确保模版的灵活度
4、具备转义等安全机制，较科学的报错功能
5、具备数组迭代，可以简单方便的输出数组内容
6、具备过滤器，轻而易举的处理您输出的数据
7、异常捕获功能
8、功能专一，简单好用

功能演示

使用方法

//假设你得到了这么一段数据

var data = {
    title: "一群码js的骚年，幻想改变世界，却被世界改变。",
    list: [
        {name: "乱码", city: "杭州", post: "前端", time: 1435650377},
        {name: "冰花", city: "北京", post: "水军", time: 1435650377},
        {name: "高琦", city: "福建", post: "水军", time: 1435650377},
        {name: "银狐", city: "汕头", post: "前端", time: 1435650377},
        {name: "辛巴", city: "深圳", post: "前端", time: 1435650377},
        {name: "墨韵", city: "广州", post: "前端", time: 1435650377}
    ]
};

第一步：编写模版。你可以使用一个script标签存放模板，如：
<script id="tpl" type="text/tpl">
//使用一个type="text/html"的script标签存放模板，或者放到字符串中：
<h2 class="f18">标题: {%= title %}</h2>
{% var my='我的'; %}
<ul>
    {% for(var i = 0; i < list.length; i++) { %}
    <li>
        <span>{%= my %}</span>
        <span>姓名：{%= list[i].name %}</span>
        <span>城市：{%= list[i].city %}</span>
        <span>时间：{%= jetpl.date(list[i].time,"YYYY-MM-DD h:m:s") %}</span>
    </li>
    {% } %}
</ul>
</script>

第二步：渲染模版
<script>
//把渲染好的内容插入到指定的ID中
var gethtml = document.getElementById('tpl').innerHTML
jetpl(gethtml).render(data, function(html){
	document.getElementById('view').innerHTML = html
});
</script>

第三步：建立视图。用于呈现渲染结果。
<div id="view"></div>

可配置参数：jetpl.config(options)

options是一个对象，它包含了以下key: '默认值'

//内置方法
var tpl = jetpl(template);   //template可以是ID（"#id"），也可以是HTML字符串（string）

tpl.render(data, callback);   //渲染方法，返回渲染结果，支持异步和同步两种模式
    a)：异步
    tpl.render(data, function(result){
        console.log(result);
    });
    
    b)：同步
    var result = tpl.render(data);
    console.log(result);

模版标签语法与用法

PS: 要注意操作符的符号不能和 {% 直接有空格，
比如 {%  = text %} 这样是错误的，一定要写成 {%= text %} 才对，
操作符后面的空格随意，闭合标签 %} 前面的空格也随意，
所以你可以{%=     text     %} 这样写也是没问题的。

{%= %}             // 输出一个普通字段 (别名 插值表达式)
{% %}              // JavaScript脚本
{{each}}{{/each}}  // 迭代标签

//假设你得到了这么一段数据
var data = {
	title: '为一大批美女准备的。',
    zimu: 'abcdefg',
	list:[ {
            "name": "美妆", "id": "48",
            "childmenu": [
                {
                    "fullName": "面部护理", "id": 52, "name": "面部护理", time: 1435650377
                },
                {
                    "fullName": "身体护理", "id": 54, "name": "身体护理", time: 1435650377
                }
            ]
        },
        {
            "name": "母婴",  "id": "49",
            "childmenu": [
                {
                    "fullName": "奶粉", "id": 71, "name": "奶粉", time: 1435650377
                },
                {
                    "fullName": "辅食", "id": 60, "name": "辅食", time: 1435650377
                }
            ]
        } ]
}

<script id="tpl" type="text/tpl">
例如我只输出大标题 （普通字段）
<h2> {% title %} </h2>

声明一个局部变量
{% var str = "我是变量" %}

例如我要循环出（childmenu）的内容 （脚本方式）
{% for (var i=0; i < list.length;i++) { %}
    {% for (var k=0;k<list[i].childmenu.length;k++) { %}
        <li> {%= i %}. {%= list[i].childmenu[k].name %} ---
        ID：{%= list[i].childmenu[k].id %} ----
        时间：{%= jetpl.date(list[i].childmenu[k].time,"YYYY-MM-DD h:m:s") %}
        </li>	
    {% } %}
{% } %}

例如我要循环出（childmenu）的内容 （迭代方式）
{% var vs='(each循环)'; %}
{{each list val i}}
    {{each val.childmenu vals k}}
        <li>
        <span>{%=i%}. </span>
        <span>标题: {%=vals.name%}----    </span>
        <span>ID： {%= vals.id %} ----    </span>
        <span>time： {%= jetpl.date(vals.time,"YYYY-MM-DD") %}     {%=vs%}</span>
        </li>
    {{/each}}
{{/each}}
<script>

模版 字段过滤转换

PS: 目前jetpl中内置了如下几个字段过滤转换 : str 表示你的字段
PS: 引入同页面的子模板

PS: str 表示你的字段,以下是可用的

jetpl.toNumber(str)    // 字符串转数字 @example ("56.36.56") => 56.36.56
jetpl.decode(str)       //HTML实体转义 @example (" &lt;div&gt; ABC &lt;/div&gt") => ;<div> ABC </div> 
jetpl.escape(str)       //HTML实体转义 @example (" <div> ABC  </div>") => &lt;div&gt; ABC &lt;/div&gt;
jetpl.date(str, "YYYY-MM-DD")     // 时间戳格式化，10位时间戳  fmt 格式化字符串 如 "YYYY-MM-DD hh:mm:ss.ms" 得到 2015-06-30 16:07:14.423  
                                           // @example ( 1435650377 , "YYYY-MM-DD" ) => 2015-06-30