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 相关文章推荐
jQuery DIV弹出效果实现代码
Jul 03 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
js选项卡的实现方法
Feb 09 Javascript
js获取form的方法
May 06 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 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浮点数精确运算
2016/03/10 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
python实现扫描日志关键字的示例
2018/04/28 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
用python进行视频剪辑
2020/11/02 Python
selenium如何定位span元素的实现
2021/01/13 Python
详解rem 适配布局
2018/10/31 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
2014年护士工作总结范文
2014/11/11 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
罚站检讨书
2015/01/29 职场文书
努力工作保证书
2015/02/28 职场文书
关于远足的感想
2015/08/10 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python