發現一枚前端數據綁定導彈：laytpl,官網：http://www.layui.com/laytpl/
為了不用angularJS等較為重量級的，和繁瑣的配置，所以就用了laytpl,可以配合JQ使用
laytpl.js源碼如下：
/** @Name：laytpl-v1.1 精妙的js模板引擎 @Author：賢心 - 2014-08-16 @Site：http://sentsin.com/layui/laytpl @License：MIT license */ ;!function(){"use strict";var f,b={open:"{{",close:"}}"},c={exp:function(a){return new RegExp(a,"g")},query:function(a,c,e){var f=["#([\\s\\S])+?","([^{#}])*?"][a||0];return d((c||"")+b.open+f+b.close+(e||""))},escape:function(a){return String(a||"").replace(/&(?!#?[a-zA-Z0-9]+;)/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/'/g,"'").replace(/"/g,""")},error:function(a,b){var c="Laytpl Error：";return"object"==typeof console&&console.error(c+a+"\n"+(b||"")),c+a}},d=c.exp,e=function(a){this.tpl=a};e.pt=e.prototype,e.pt.parse=function(a,e){var f=this,g=a,h=d("^"+b.open+"#",""),i=d(b.close+"$","");a=a.replace(/[\r\t\n]/g," ").replace(d(b.open+"#"),b.open+"# ").replace(d(b.close+"}"),"} "+b.close).replace(/\\/g,"\\\\").replace(/(?="|')/g,"\\").replace(c.query(),function(a){return a=a.replace(h,"").replace(i,""),'";'+a.replace(/\\/g,"")+'; view+="'}).replace(c.query(1),function(a){var c='"+(';return a.replace(/\s/g,"")===b.open+b.close?"":(a=a.replace(d(b.open+"|"+b.close),""),/^=/.test(a)&&(a=a.replace(/^=/,""),c='"+_escape_('),c+a.replace(/\\/g,"")+')+"')}),a='"use strict";var view = "'+a+'";return view;';try{return f.cache=a=new Function("d, _escape_",a),a(e,c.escape)}catch(j){return delete f.cache,c.error(j,g)}},e.pt.render=function(a,b){var e,d=this;return a?(e=d.cache?d.cache(a,c.escape):d.parse(d.tpl,a),b?(b(e),void 0):e):c.error("no data")},f=function(a){return"string"!=typeof a?c.error("Template not found"):new e(a)},f.config=function(a){a=a||{};for(var c in a)b[c]=a[c]},f.v="1.1","function"==typeof define?define(function(){return f}):"undefined"!=typeof exports?module.exports=f:window.laytpl=f}();
或者下載地址：laytpl.js
1.引用該js
2.建立<script type="text/html"></script>的模板
3.用laytpl.js吧得到的數據加入到<script type="text/html"></script>模板
4.把模板渲染到你要的html的demo
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <meta charset="utf-8" /> 7 <script src="/laytpl/laytpl.js"></script> 8 <script> 9 //假設你得到了這么一段數據 10 var data = { 11 title: '前端圈', 12 intro: '一群碼js的騷年，幻想改變世界，卻被世界改變。', 13 list: [{ name: '賢心', city: '杭州' }, { name: '謝亮', city: '北京' }, { name: '淺淺', city: '杭州' }, { name: 'Dem', city: '北京' }] 14 }; 15 16 window.onload = function () { 17 //建立視圖。用於呈現渲染結果。 18 var gettpl = document.getElementById('testTpl').innerHTML; 19 laytpl(gettpl).render(data, function (html) { 20 //得到的模板渲染到html 21 document.getElementById('testDiv').innerHTML = html; 22 }); 23 } 24 </script> 25 </head> 26 <body> 27 <script id="testTpl" type="text/html"> 28 <h1>{{ d.title }}</h1> 29 <p>{{d.intro}}</p> 30 <ul> 31 {{# for(var i = 0; i < d.list.length; i++){ }} 32 <li> 33 <span>姓名：{{ d.list[i].name }}</span> 34 <span>城市：{{ d.list[i].city }}</span> 35 </li> 36 {{# } }} 37 </ul> 38 </script> 39 <div id="testDiv"></div> 40 </body> 41 </html>
顯示結果：
用laytpl獲取模板的另一種寫法：
var tpl = laytpl(gettpl);
tpl.render(data, function(result){
console.log(result);
document.getElementById("testDiv2").innerHTML = result;
});
以下是官方文檔：
//第一步：編寫模版。你可以使用一個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 //獲取版本號
希望可以幫助到大家。