laytpl 精致巧妙的JavaScript模板引擎


Posted in Javascript onAugust 29, 2014

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

laytpl 精致巧妙的JavaScript模板引擎

laytpl优势

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

laytpl 精致巧妙的JavaScript模板引擎

使用方式

//第一步:编写模版。你可以使用一个script标签存放模板,如:

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

<h1>{{ d.title }}</h1>

<ul>

{{# for(var i = 0, len = d.list.length; i < len; i++){ }}

    <li>

        <span>姓名:{{ d.list[i].name }}</span>

        <span>城市:{{ d.list[i].city }}</span>

    </li>

{{# } }}

</ul>

</script>

//第二步:建立视图。用于呈现渲染结果。

<div id="view"></div>

//第三步:渲染模版

var data = {

    title: '前端攻城师',

    list: [{name: '贤心', city: '杭州'}, {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]

};

var gettpl = document.getElementById('demo').innerHTML;

laytpl(gettpl).render(data, function(html){

    document.getElementById('view').innerHTML = html;

});

文档说明

一、模版语法

输出一个普通字段,不转义html:   {{ d.field }}
输出一个普通字段,并转义html:   {{= d.field }}
JavaScript脚本: {{# JavaScript statement }}

二、内置方法

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

   
2):laytpl.config(options); //初始化配置
    options是一个对象
    {open: '开始标签', close: '闭合标签'}
   
3):laytpl.v    //获取版本号

注意事项

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

官方网站:http://sentsin.com/layui/laytpl/

下载:https://3water.com/codes/207072.html

Javascript 相关文章推荐
JavaScript中为元素加上name属性的方法
May 09 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
jQuery动画与特效详解
Feb 01 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
JS图片预加载插件详解
Jun 21 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
基于js实现数组相邻元素上移下移
May 19 Javascript
jQuery动画特效实例教程
Aug 29 #Javascript
jQuery实用函数用法总结
Aug 29 #Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 #Javascript
原生javascript实现的分页插件pagenav
Aug 28 #Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 #Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 #Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 #Javascript
You might like
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
PHP对象实例化单例方法
2017/01/19 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Django日志模块logging的配置详解
2017/02/14 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
大学军训感言800字
2014/02/27 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
2014年卫生工作总结
2014/11/27 职场文书
音乐教师求职信范文
2015/03/20 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
SQL Server实现分页方法介绍
2022/03/16 SQL Server