laytpl 精致巧妙的JavaScript模板引擎
laytpl是一款顛覆性的JavaScript模板引擎,它用巧妙的實(shí)現(xiàn)方式,將自身的體積變得小巧玲瓏,不僅性能接近極致,并且還具備傳統(tǒng)前端引擎的幾乎所有功能。所有的變身魔法都由不到1KB的代碼創(chuàng)造,這仿佛是一場(chǎng)革命,又或者不是,但毋庸置疑的是,laytpl的確在用最輕量的方式呈現(xiàn)給世人。如果你從未接觸這方面的應(yīng)用,沒關(guān)系,下面的講述將會(huì)讓你迫不及待地選擇laytpl,從此更好地把握頁面的數(shù)據(jù)渲染,走上人生巔峰!
laytpl優(yōu)勢(shì)
•性能卓絕,執(zhí)行速度比號(hào)稱性能王的artTemplate、doT還要快將近1倍,比baiduTemplate、kissyTemplate等快20-40倍,數(shù)據(jù)規(guī)模和渲染頻率越大越明顯
•體積簡(jiǎn)直小到極致,不足1kb,未來它還會(huì)變得更小。
•具備轉(zhuǎn)義等安全機(jī)制,比較科學(xué)的報(bào)錯(cuò)功能
•模版中可任意書寫Native JavaScript,充分確保模版的靈活度
•支持應(yīng)用在Node.js平臺(tái)
•支持所有古代或現(xiàn)代的主流瀏覽器
使用方式
//第一步:編寫模版。你可以使用一個(gè)script標(biāo)簽存放模板,如:
<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>
//第二步:建立視圖。用于呈現(xiàn)渲染結(jié)果。
<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;
});
文檔說明
一、模版語法
輸出一個(gè)普通字段,不轉(zhuǎn)義html: {{ d.field }}
輸出一個(gè)普通字段,并轉(zhuǎn)義html: {{= d.field }}
JavaScript腳本: {{# JavaScript statement }}
二、內(nèi)置方法
1):laytpl(template); //核心函數(shù),返回一個(gè)對(duì)象
var tpl = laytpl(template);
tpl.render(data, callback); //渲染方法,返回渲染結(jié)果,支持異步和同步兩種模式
a):異步
tpl.render(data, function(result){
console.log(result);
});
b):同步
var result = tpl.render(data);
console.log(result);
2):laytpl.config(options); //初始化配置
options是一個(gè)對(duì)象
{open: '開始標(biāo)簽', close: '閉合標(biāo)簽'}
3):laytpl.v //獲取版本號(hào)
注意事項(xiàng)
1.直接引入laytpl.js即可,另外還可直接使用Seajs等模塊化加載。
2.無論商業(yè)或個(gè)人平臺(tái)都可以任意使用laytpl
3.任何場(chǎng)合下都務(wù)必保留來源,請(qǐng)勿剔除laytpl.js頭部注釋。
官方網(wǎng)站:http://sentsin.com/layui/laytpl/
下載:http://www.dbjr.com.cn/codes/207072.html
- JavaScript模板引擎Template.js使用詳解
- javascript輕量級(jí)模板引擎juicer使用指南
- 教你使用javascript簡(jiǎn)單寫一個(gè)頁面模板引擎
- 詳解Javascript模板引擎mustache.js
- 探究Javascript模板引擎mustache.js使用方法
- 詳解Js模板引擎(TrimPath)
- JavaScript模板引擎用法實(shí)例
- 常用的JavaScript模板引擎介紹
- 高性能JavaScript模板引擎實(shí)現(xiàn)原理詳解
- JavaScript模板引擎原理與用法詳解
- 只有 20 行的 JavaScript 模板引擎實(shí)例詳解
相關(guān)文章
聯(lián)合類型Union?Types與交叉類型Intersection?Types區(qū)別解析
這篇文章主要為大家介紹了聯(lián)合類型Union?Types與交叉類型Intersection?Types區(qū)別詳解2023-06-06數(shù)據(jù)結(jié)構(gòu)TypeScript之棧和隊(duì)列詳解
這篇文章主要介紹了數(shù)據(jù)結(jié)構(gòu)TypeScript之棧和隊(duì)列詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01TypeScript學(xué)習(xí)輕松玩轉(zhuǎn)類型操作
這篇文章主要為大家介紹了TypeScript學(xué)習(xí)輕松玩轉(zhuǎn)類型操作,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07Typescript使用裝飾器實(shí)現(xiàn)接口字段映射與Mock實(shí)例
這篇文章主要為大家介紹了Typescript使用裝飾器實(shí)現(xiàn)接口字段映射與Mock實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04TypeScript 基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)哈希表 HashTable教程
這篇文章主要為大家介紹了TypeScript 基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)哈希表 HashTable教程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02TypeScript類型實(shí)現(xiàn)加減乘除詳解
這篇文章主要為大家介紹了TypeScript類型實(shí)現(xiàn)加減乘除示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04