laytpl 精緻巧妙的JavaScript模板引擎，laytpljavascript

laytpl 精緻巧妙的JavaScript模板引擎，laytpljavascript

laytpl是一款顛覆性的JavaScript模板引擎，它用巧妙的實現方式，將自身的體積變得小巧玲瓏，不僅效能接近極致，並且還具備傳統前端引擎的幾乎所有功能。所有的變身魔法都由不到1KB的代碼創造，這彷彿是一場革命，又或者不是，但毋庸置疑的是，laytpl的確在用最輕量的方式呈現給世人。如果你從未接觸這方面的應用，沒關係，下面的講述將會讓你迫不及待地選擇laytpl，從此更好地把握頁面的資料渲染，走上人生巔峰！

laytpl優勢

•效能卓絕，執行速度比號稱效能王的artTemplate、doT還要快將近1倍，比baiduTemplate、kissyTemplate等快20-40倍，資料規模和渲染頻率越大越明顯
•體積簡直小到極致，不足1kb，未來它還會變得更小。
•具備轉義等安全機制，比較科學的報錯功能
•模版中可任意書寫Native JavaScript，充分確保模版的靈活度
•支援應用在Node.js平台
•支援所有古代或現代的主流瀏覽器

使用方式

複製代碼 代碼如下:
//第一步：編寫模版。你可以使用一個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/

下載：http://www.bkjia.com/codes/207072.html

怎在express使用doT模板引擎

js的模板引擎實在太多了，幸好 JavaScript template language shootoff 這篇不斷被更新的文章，幫我們用真實的測試結果，得到了目前最快的模板引擎doT安裝dot$ sudo npm install dot 讓express使用dot安裝express的模板引擎約定，引擎必須有一個compile方法，接受str和options參數，返回一個function對象即可，介面大致如下：exports.compile = function(str, options) { // compile template str // return function } 顯然，只需要實現compile介面即可// dot.express.js var dot = require('dot'); exports.compile = function(str, options) { return dot.template(str); }; 在express使用dot.express.jsvar dot_express = require('dot.express'); app.set("view engine", "html"); app.register(".html", dot_express); // render app.get('/', function(req, res, next) { res.render('index', {world: 'world'}); }); 更簡約的方式var dot = require('dot'); app.set("view engine", "html"); app.register(".html", { compile: function(str) { return dot.template(str); } }); 讓你的html模板檔案也通過智能提示校正dot預設的定界符是 {{ 和 }}，這樣模板檔案會如下// index.html hello {{! word }}這樣，肯定不能通過HTML智能提示校正參考tenjin的做法，將定界符修改為能通過智能提示校正的即可 // index.js dot.templateSettings.begin='
 
開源javascript 遊戲引擎

遊戲引擎也分了很多種類型呀。
JS上在HTML5 Canvas推出之後，才陸續出現許多遊戲引擎，如國產的QuarkJS。
一些知名的遊戲引擎也陸續推出了JS版，如Box2D Web、Cocos2D、Oak3D等。