选择理由

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



Powered by jayui.com ©2014-2015

网站内容版权均归 jayui网版权所有