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 *.vm
veloctiy -b *.vm

　　原始碼test/web/中目錄的js，一部分就是線下編譯後的得到的，此處可 直接訪問。

　　公共API：

　　node_module

var Velocity = require('../src/velocity');

//1. 直接解析
Velocity.render('string of velocity', context);

//2. 使用Parser和Compile
var 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介紹請 參看這裡。