laytpl是一款顛覆性的JavaScript模板引擎，巧妙的實現方式，自身的體積變得小巧玲瓏，不僅性能接近極致，并且還具備傳統js引擎的幾乎所有功能。而值得一提的是他的大小不到2KB，輕巧好用：

當然據官方說，laytpl已經并入layui前端框架，后期是否繼續單獨的維護還未可知，不過個人覺得這個不影響具體的使用，現在仍然可以下載下來使用(文字結束的地方有附件可以下載)。

對于使用方法，就很簡單了，下面做一個簡單的介紹：

1，引入資源

2，創建渲染模板

{{ d.title }}

{{ d.intro }}

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

{{ d.list[i].name }}

所在城市：{{ d.list[i].city }}

{{# } }}

{{# if(d.list.length === 0) }}

暫無數據

{{# } }}

3，獲取數據并渲染

//假設你得到了這么一段數據

var data = {

title: '前端圈',

intro: '一群碼js的騷年，幻想改變世界，卻被世界改變。',

list: [{name: '賢心', city: '杭州'}, {name: '謝亮', city: '北京'}, {name: '淺淺', city: '杭州'}, {name: 'Dem', city: '北京'}]

};

var tpl = document.getElementById('tpl').innerHTML; //讀取模版

//方式一：異步渲染(推薦)

laytpl(tpl).render(data, function(render){

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

});

//方式二：同步渲染：

var render = laytpl(tpl).render(data);

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

完成上面的處理就可以完成了，是不是很簡單？需要一說的是，因為筆者測試使用的時候是在tp里面用的，使用3.2的ajaxreturn返回數據，model獲取數據庫的數據，如果沒有數據的時候，需要做一下判斷是否為null因為當沒有數據的時候model會返回null這樣laytpl處理的時候會出現錯誤，所以這里可以在返回null的時候加一個判斷如果返回的是null那么ajaxReturn的時候返回一個空的數組，例如：

if($rs){

$this->ajaxReturn($rs);

}else{

$this->ajaxReturn([]);

}

對于性能方面官方做了一些對比測試，下面是一部分的截圖，大家可以做一下參考：

總體看來性能確實很不錯的奧，哈哈 下載來用一下看看吧

轉載請注明出處：

本文鏈接：https://www.wlyc.cn/post-52.html

總結

以上是生活随笔為你收集整理的js渲染模板html,一个javascript模板渲染组件，laytpl的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。