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 相关文章推荐
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
js实现文字滚动效果
Mar 03 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 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
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
Laravel5中contracts详解
2015/03/02 PHP
php实现读取内存顺序号
2015/03/29 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
高级电工工作职责
2013/11/21 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
洗发水广告词
2014/03/13 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
被委托人身份证明
2015/08/07 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS