久久男人AV资源网站无码_乱人伦人妻精品一区二区_亚洲国产精久久久久久久_狠狠躁夜夜躁人人爽天天BL

Velocity.js——來自淘寶的 JS 模板引擎

2014-05-04 宇易網絡 4187

velocityjs在npm中(zhong)包名從(cong)原來的velocity.js改為velocityjs,感覺require("velocity.js") 比較(jiao)不好看,所以改名,從(cong)0.3.0之后的版本都在velocityjs下更新。

查看最新版本



$ npm info velocityjs version 
Velocity.js 是velocity模板語法的javascript實現。是基于Java的模板引擎,廣泛應用在阿里集 體各個子公司。Velocity模板適用于大量模板使用的場景,支持復雜的邏輯運算,包含 基本數據類型、變量賦值和函數等功能。Velocity.js 支持 Node.js 和瀏覽器環境。



最新(xin)版下載地址(zhi):

Features

支持客戶端和(he)服務器端使用

語(yu)法是(shi)富邏輯的(de)(de),構成門(men)微型的(de)(de)語(yu)言

語法分(fen)析和(he)模(mo)板渲染分(fen)離(li)

基本完全支持velocity語(yu)法

瀏覽器使用支(zhi)持模(mo)板之間(jian)相互引用,依據(ju)kissy模(mo)塊加載(zai)機制

三個Helper,友好的數據模擬解決(jue)方案

Install

via npm:



$ npm install velocityjs 


Broswer Support

兼容ie6+,chrome等其(qi)他瀏(liu)覽(lan)器(qi),

點(dian)擊(ji)可以體驗web 端velocity語法解析(xi)過程,注:使用ACE作為代碼編輯器,僅支(zhi)持高級瀏(liu)覽器訪問。

執行cake命(ming)令進行打包velocity.js瀏覽器端腳本(ben):


$ 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語法,語法執行使用數據和語 法樹,計算模板最終結果。



執(zhi)(zhi)行(xing)build后,得到兩個(ge)文件,分別是build/velocity/下的index.js和parse.js,兩者(zhe) 相(xiang)互獨立,parse.js語法分析過程可以放(fang)在本地(di)完成,執(zhi)(zhi)行(xing)命令:

把語法分析和(he)模板拼接分開,為了方(fang)便在本(ben)地(di)編(bian)譯語法樹,減少在web端js運算。本(ben)地(di)編(bian)譯 模板的思(si)路,源(yuan)自KISSY的。

雖(sui)然語法解釋器(qi)可以在瀏覽器(qi)端(duan)執(zhi)行,但是,不推薦那么使用。


#使用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

具體語法請訪問官網文檔:。

Directives

Directives支持set, foreach, if|else|elseif, macro, parse, break。不(bu) 支持有,stop, evaluate, define,感覺(jue)這些語法比較偏,用處不(bu)大,暫時沒有實現(xian)。 其(qi)中(zhong)parse,在web端(duan),使(shi)用kissy的模(mo)塊加載器加載,需(xu)要(yao)首先線下(xia)編譯打(da)包,。

macro

宏(hong)分(fen)為系統的(de)宏(hong),比如(ru)parse, include,和(he)用(yong)(yong)戶自定義(yi)(yi)宏(hong),通過#macro在vm中定義(yi)(yi),此 外可以(yi)使(shi)用(yong)(yong)自定義(yi)(yi)的(de)js函(han)數替代在vm中定義(yi)(yi)。對(dui)于(yu)(yu)系統宏(hong)和(he)自定義(yi)(yi)宏(hong),不做區分(fen),對(dui)于(yu)(yu) #parse和(he)#include的(de)調用(yong)(yong),可以(yi)使(shi)用(yong)(yong)自定義(yi)(yi)函(han)數來執行(xing)。具體見。

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  


Helper


Helper提(ti)供一些額(e)外的功能,主要用于解(jie)決vm數據模擬問題。

structure 獲取vm中所有變量的結(jie)構: $foo.bar => foo: {bar: 'string'}

backstep vm逆推(tui),根據velocity文件和解析后的結果,計算數據結構和內容

jsonify 把vm轉換為(wei)json結構,去除其中的html標(biao)簽,比如:

jsonify文檔issue #11


hello world $foo.name.  
=>  
{foo: { name: $foo.name }}  


License


(The MIT License)


Copyright (c) 2012-2013 Eward Songeward.


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.

相關文章

展開
聯系電話: 客服QQ: