Velocity.js —— 來自淘寶的 JS 模板引擎
注意
velocityjs在npm中包名從原來的velocity.js改為velocityjs，感覺require("velocity.js") 比較不好看，所以改名，從0.3.0之后的版本都在velocityjs下更新。
查看最新版本
- $ npm info velocityjs version
Velocity.js 是velocity模板語法的javascript實現。Velocity 是基于Java的模板引擎，廣泛應用在阿里集 體各個子公司。Velocity模板適用于大量模板使用的場景，支持復雜的邏輯運算，包含 基本數據類型、變量賦值和函數等功能。Velocity.js 支持 Node.js 和瀏覽器環境。
最新版下載地址：https://github.com/shepherdwind/velocity.js/zipball/master
Features
-
支持客戶端和服務器端使用
-
語法是富邏輯的，構成門微型的語言
-
語法分析和模板渲染分離
-
基本完全支持velocity語法
-
瀏覽器使用支持模板之間相互引用，依據kissy模塊加載機制
-
三個Helper，友好的數據模擬解決方案
Install
via npm:
- $ npm install velocityjs
Broswer Support
兼容ie6+，chrome等其他瀏覽器，test case
點擊此處可以體驗web 端velocity語法解析過程，注：使用ACE作為代碼編輯器，僅支持高級瀏覽器訪問。
執行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，一部分就是線下編譯后的得到的，此處可直接訪問。
Public 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，第二種，需要首先執行語法分析過 程。
Syntax
具體語法請訪問官網文檔：velocity user guide。
Directives
Directives支持set, foreach, if|else|elseif, macro, parse, break。不 支持有，stop, evaluate, define，感覺這些語法比較偏，用處不大，暫時沒有實現。 其中parse，在web端，使用kissy的模塊加載器加載，需要首先線下編譯打包，例子。
macro
宏分為系統的宏，比如parse, include，和用戶自定義宏，通過#macro在vm中定義，此 外可以使用自定義的js函數替代在vm中定義。對于系統宏和自定義宏，不做區分，對于 #parse和#include的調用，可以使用自定義函數來執行。具體見issue #3。
foreach
foreach在velocity中對對象的遍歷，和js有區別，java中對象是一個map，需要通過方法 keyset來獲取map中的key，foreach循環寫法等同于js的for in循環，感覺有點怪異。在 一個foreach，有一個$foreach的對象可以使用，此變量作用域為當前循環范圍。
- #foreach($num in [1..5])
- index => $foreach.index
- count => $foreach.count
- #if (!$foreach.hasNext) end #end
- #end
- 結果：
- index => 0
- count => 1
- index => 1
- count => 2
- ...
- index => 4
- count => 5
- end
string
velocity中字符串求值和php類似，雙引號字符串里面的變量會被替換變量對應的值，單引 號原樣返回，推薦盡量使用單引號，那樣性能好一些。此外，雙引號中變量替換，沒有再次 調用語法分析器，而是使用正則，只支持簡單的引用替換，比如"$varname1 $foo.bar"， "$foo.bar[1] $foo.bar()"都不支持。如果需要完整支持字符串雙引號，需要反復調用語 法分析器，考慮到性能，基本引用基本夠用了，vm本身支持強大的變量賦值，可以先賦值， 在放入字符串，或者使用加法進行字符串拼接。
在java中可能大量使用雙引號方式，因為java對象無法自動轉換類型，雙引號做類型轉換用， 而在web端，js無此需要。
velocity
- Usage: velocity [options] [file ...]
- Options:
- -h, --help output usage information
- -V, --version output the version number
- -b, --build build .vm file to js ast module of kissy
- Example:
- # parse vm file
- $ velocity a.vm
- # parse vm file with json data
- $ velocity a.vm a.json
- # build asts module of kissy
- $ velocity *.vm
Helper
Helper提供一些額外的功能，主要用于解決vm數據模擬問題。
structure獲取vm中所有變量的結構:$foo.bar=>foo: {bar: 'string'}backstepvm逆推，根據velocity文件和解析后的結果，計算數據結構和內容jsonify把vm轉換為json結構，去除其中的html標簽，比如：
jsonify文檔issue #11
- hello world $foo.name.
- =>
- {foo: { name: $foo.name }}
License
(The MIT License)
Copyright (c) 2012-2013 Eward Songeward.song@gmail.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
來自：https://github.com/shepherdwind/velocity.js
