JavaScript 模板引擎 Velocity.js

Velocity.js是Velocity模板語法的Javascript實現。Velocity模板適用於大量模板使用的場景，支持複雜的邏輯運算，包含基本數據類型、變量賦值和函數等功能。Velocity語法具有很高的容錯能力，類似於html結構的解析，同時語法規則複雜。velocity.js兼容ie6+，chrome等其他瀏覽器。

開源協議：The MIT License

代碼託管地址：https://github.com/shepherdwind/velocity.js

功能特性

• 支持客戶端和伺服器端使用
• 語法是富邏輯的，構成門微型的語言
• 語法分析和模板渲染分離
• 基本完全支持velocity語法
• 瀏覽器使用支持模板之間相互引用，依據js模塊加載機制，比如kissy
• 三個Helper，友好的數據模擬解決方案
• Vim Syntax 

Velocity.js使用介紹

安裝

via npm:

$ npm install velocity.js
查看最新版本
$ npm info velocityjs version
瀏覽器支持
兼容ie6+，chrome等其他瀏覽器
執行cake命令進行打包velocity.js瀏覽器端腳本:
$ make parse
需要cli下安裝coffeejs，暫時打包是為kissy所使用的，velocity.js需要的一些常用的 ecma5功能，比如foreach,    some, isArray等，在node環境下是自帶的功能，而web端的兼 容是交給已有的類庫解決。需要自行提供一組跨瀏覽器的api，比如kissy打包：
//api map var utils = { forEach : S.each, some : S.some, mixin : S.mix,    guid : S.guid, isArray : S.isArray, indexOf : S.indexOf, keys : S.keys,    now : S.now };
    
Velocity語法具有很高的容錯能力，類似於html結構的解析，同時語法規則複雜，所以語法 解釋器執行性能可能比較慢，Velocity.js把語法結構分析運算和語法執行兩個過程獨立出來，        第一步，語法結構分析返回一個數組(語法樹)，描述velocity語法，語法執行使用數據和語 法樹，計算模板最終結果。
    
執行build後，得到兩個文件，分別是build/velocity/下的index.js和parse.js，兩者 相互獨立，parse.js語法分析過程可以放在本地完成，執行命令：
    
把語法分析和模板拼接分開，為了方便在本地編譯語法樹，減少在web端js運算。本地編譯 模板的思路，源自KISSY的                xtemplate。
    
雖然語法解釋器可以在瀏覽器端執行，但是，不推薦那麼使用。
#使用velocity命令行工具打包veloctiy --build *.vmveloctiy -b *.vm
源碼test/web/中目錄的js，一部分就是線下編譯後的得到的，此處可    
    直接訪問
。        
    
公共API：    
    
node_module        
    
    
var Velocity = require('../src/velocity');//1. 直接解析Velocity.render('string of velocity', context);//2. 使用Parser和Compilevar Parser = Velocity.Parser;var Compile = Velocity.Compile;var asts = Parser.parse('string of velocity');(new Compile(asts)).render(context);
context     
    
context是一個對象，可以為空，執行中$foo.bar，訪問路徑是context.foo.bar， context的屬性可以是函數，和vm中定義保持一致。
    
    
On Broswer        
    
1 . 使用線下打包方案：        
    
KISSY.use('velocity/index, web/directives', function(S, Velocity, asts){  var compile = new Velocity(asts);  S.all('body').html(compile.render());});
2 . 使用線上編譯：        
    
KISSY.use('velocity/index, velocity/parse', function(S, Velocity, Parser){  var html = (S.all('#tpl').html());  var asts = Parser.parse(html);  var compile = new Velocity(asts);  console.log(compile.render());});
兩者的區別在於asts的獲取，第一種方式，直接取asts，第二種，需要首先執行語法分析過程。        
    
更多velocity.js介紹請        參看這裡。
    
								
本文為CSDN原創文章，未經允許不得轉載，如需轉載請聯繫market#csdn.net(#換成@)