html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

laytpl 精致巧妙的JavaScript模板引擎_其它_

[ ] 已经帮助:人解决问题

laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统前端引擎的几乎所有功能。所有的变身魔法都由不到1KB的代码创造,这仿佛是一场革命,又或者不是,但毋庸置疑的是,laytpl的确在用最轻量的方式呈现给世人。如果你从未接触这方面的应用,没关系,下面的讲述将会让你迫不及待地选择laytpl,从此更好地把握页面的数据渲染,走上人生巅峰!X4BHTML5中文学习网 - HTML5先行者学习网
X4BHTML5中文学习网 - HTML5先行者学习网

X4BHTML5中文学习网 - HTML5先行者学习网

laytpl优势X4BHTML5中文学习网 - HTML5先行者学习网

•性能卓绝,执行速度比号称性能王的artTemplate、doT还要快将近1倍,比baiduTemplate、kissyTemplate等快20-40倍,数据规模和渲染频率越大越明显X4BHTML5中文学习网 - HTML5先行者学习网
•体积简直小到极致,不足1kb,未来它还会变得更小。X4BHTML5中文学习网 - HTML5先行者学习网
•具备转义等安全机制,比较科学的报错功能X4BHTML5中文学习网 - HTML5先行者学习网
•模版中可任意书写Native JavaScript,充分确保模版的灵活度X4BHTML5中文学习网 - HTML5先行者学习网
•支持应用在Node.js平台X4BHTML5中文学习网 - HTML5先行者学习网
•支持所有古代或现代的主流浏览器X4BHTML5中文学习网 - HTML5先行者学习网
X4BHTML5中文学习网 - HTML5先行者学习网

X4BHTML5中文学习网 - HTML5先行者学习网

使用方式X4BHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
X4BHTML5中文学习网 - HTML5先行者学习网
//第一步:编写模版。你可以使用一个script标签存放模板,如:X4BHTML5中文学习网 - HTML5先行者学习网
<script id="demo" type="text/html">X4BHTML5中文学习网 - HTML5先行者学习网
<h1>{{ d.title }}</h1>X4BHTML5中文学习网 - HTML5先行者学习网
<ul>X4BHTML5中文学习网 - HTML5先行者学习网
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}X4BHTML5中文学习网 - HTML5先行者学习网
    <li>X4BHTML5中文学习网 - HTML5先行者学习网
        <span>姓名:{{ d.list[i].name }}</span>X4BHTML5中文学习网 - HTML5先行者学习网
        <span>城市:{{ d.list[i].city }}</span>X4BHTML5中文学习网 - HTML5先行者学习网
    </li>X4BHTML5中文学习网 - HTML5先行者学习网
{{# } }}X4BHTML5中文学习网 - HTML5先行者学习网
</ul>X4BHTML5中文学习网 - HTML5先行者学习网
</script>X4BHTML5中文学习网 - HTML5先行者学习网
//第二步:建立视图。用于呈现渲染结果。X4BHTML5中文学习网 - HTML5先行者学习网
<div id="view"></div>X4BHTML5中文学习网 - HTML5先行者学习网
//第三步:渲染模版X4BHTML5中文学习网 - HTML5先行者学习网
var data = {X4BHTML5中文学习网 - HTML5先行者学习网
    title: '前端攻城师',X4BHTML5中文学习网 - HTML5先行者学习网
    list: [{name: '贤心', city: '杭州'}, {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]X4BHTML5中文学习网 - HTML5先行者学习网
};X4BHTML5中文学习网 - HTML5先行者学习网
var gettpl = document.getElementById('demo').innerHTML;X4BHTML5中文学习网 - HTML5先行者学习网
laytpl(gettpl).render(data, function(html){X4BHTML5中文学习网 - HTML5先行者学习网
    document.getElementById('view').innerHTML = html;X4BHTML5中文学习网 - HTML5先行者学习网
});X4BHTML5中文学习网 - HTML5先行者学习网
X4BHTML5中文学习网 - HTML5先行者学习网

文档说明X4BHTML5中文学习网 - HTML5先行者学习网

一、模版语法X4BHTML5中文学习网 - HTML5先行者学习网

输出一个普通字段,不转义html:   {{ d.field }}X4BHTML5中文学习网 - HTML5先行者学习网
输出一个普通字段,并转义html:   {{= d.field }}X4BHTML5中文学习网 - HTML5先行者学习网
JavaScript脚本: {{# JavaScript statement }}X4BHTML5中文学习网 - HTML5先行者学习网

二、内置方法X4BHTML5中文学习网 - HTML5先行者学习网

1):laytpl(template);   //核心函数,返回一个对象X4BHTML5中文学习网 - HTML5先行者学习网
    X4BHTML5中文学习网 - HTML5先行者学习网
    var tpl = laytpl(template);X4BHTML5中文学习网 - HTML5先行者学习网
    tpl.render(data, callback);   //渲染方法,返回渲染结果,支持异步和同步两种模式X4BHTML5中文学习网 - HTML5先行者学习网
        a):异步X4BHTML5中文学习网 - HTML5先行者学习网
        tpl.render(data, function(result){X4BHTML5中文学习网 - HTML5先行者学习网
            console.log(result);X4BHTML5中文学习网 - HTML5先行者学习网
        });X4BHTML5中文学习网 - HTML5先行者学习网
        X4BHTML5中文学习网 - HTML5先行者学习网
        b):同步X4BHTML5中文学习网 - HTML5先行者学习网
        var result = tpl.render(data);X4BHTML5中文学习网 - HTML5先行者学习网
        console.log(result);X4BHTML5中文学习网 - HTML5先行者学习网

    X4BHTML5中文学习网 - HTML5先行者学习网
2):laytpl.config(options); //初始化配置X4BHTML5中文学习网 - HTML5先行者学习网
    options是一个对象X4BHTML5中文学习网 - HTML5先行者学习网
    {open: '开始标签', close: '闭合标签'}X4BHTML5中文学习网 - HTML5先行者学习网
    X4BHTML5中文学习网 - HTML5先行者学习网
3):laytpl.v    //获取版本号X4BHTML5中文学习网 - HTML5先行者学习网

注意事项X4BHTML5中文学习网 - HTML5先行者学习网

1.直接引入laytpl.js即可,另外还可直接使用Seajs等模块化加载。X4BHTML5中文学习网 - HTML5先行者学习网
2.无论商业或个人平台都可以任意使用laytplX4BHTML5中文学习网 - HTML5先行者学习网
3.任何场合下都务必保留来源,请勿剔除laytpl.js头部注释。X4BHTML5中文学习网 - HTML5先行者学习网

官方网站:http://sentsin.com/layui/laytpl/X4BHTML5中文学习网 - HTML5先行者学习网

下载:http://www.jb51.net/codes/207072.htmlX4BHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助