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 相关文章推荐
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 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
php自动注册登录验证机制实现代码
2011/12/20 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
javascript实现随机抽奖功能
2020/12/30 Javascript
Python实现计算最小编辑距离
2016/03/17 Python
Python实现抢购IPhone手机
2018/02/07 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
资深地理教师自我评价
2013/09/21 职场文书
物流经理自我评价
2013/09/23 职场文书
档案管理员岗位职责
2013/12/01 职场文书
文员岗位职责范本
2014/03/08 职场文书
2014年教师节寄语
2014/04/03 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
运动会表扬稿范文
2015/05/05 职场文书
运动会新闻稿
2015/07/17 职场文书
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android