Fasty極快 JavaScript 模板引擎
Fasty 是一個極快的 JavaScript 模板引擎。
Fasty 是一個簡約、超快的 JavaScript 模板引擎， 它使用了非常獨特的緩存技術，從而獲得接近 JavaScript 極限的運行性能，并且同時支持 NodeJS 和瀏覽器。
Fasty 的渲染速度，超過很多市面上的 JavaScript 引擎 100 倍以上。
Fasty 特點
- 1、極高性能：Fasty 會直接把模板內容編譯成 JavaScript 源碼執(zhí)行，而不是使用正則替換，因此，F(xiàn)asty 的渲染性能超過很多其他模板引擎 100 倍或以上。
- 2、極度簡單：Fasty 只內置了輸出指令
{{ }}和 邏輯指令{{~ }} - 3、非常靈活：Fasty 直接與 JavaScript 打通，比如當我們引用 JQuery 之后，可以直接這樣使用
{{ $("#id").text() }}
使用方法
示例 1
var template = '<div> hello {{ name }} </div>' var data = {name: "fasty"} var fasty = new Fasty(); var result = fasty.render(template,data); // result: <div> hello fasty </div>
示例 2
var template = ' {{attr}} hello {{ func1(name) }} ---' var data = {name: "fasty"} var fasty = new Fasty({ //共享的模板數(shù)據(jù) 或者 方法 share : { attr:'text...', func1:function (v){ return v + " kiss~~" }, } }); var result = fasty.render(template,data); // result: text... hello fasty kiss~~
Fasty 語法
輸出
// #1 變量 {{~ var x = 100}} {{x}} //輸出: 100 // #2 字符串 {{"hello world"}} //輸出：hello world // #3 安全輸出，對 html 進行 escape {{# "<div> hello world </div>"}} //輸出：<div> hello world </div> // #4 強制轉換 html 輸出 {{! "<div> hello world </div>"}} //輸出：<div> hello world </div>
變量定義
#1 {{~ var a =100}} #2 {{~ var a =100,b = 200,c=300}} #3 #{{~ let a =100}} #4 #{{~ let a =100,b=200,c=300}} #4 #{{~ const a =100}} #5 #{{~ const a =100,b=200,c=300}}
if-else
{{~ if (x == 100) }} {{~ elseif(x == 200) }} {{~ else if(x == 300) }} {{~ else }} {{~ end }}
同時支持 'elseif' or 'else if'
for 循環(huán)
// #1 {{~ for (item of array) }} {{~end}} // #2 {{~ for (item in array) }} {{~end}} // #3 {{~ for (let item of array) }} {{~end}} // #4 {{~ for (const item in array) }} {{~end}} // #5 {{~ for (key of Object.keys(item) )}} {{~end}} // #6 {{~ for (var x = i;x < 100;x++) }} {{~ end }} // #7 {{~ for (item of someMethodInvoke().other()) }} {{~end}} // #8 {{~ for (var x = i;x < someMethodInvoke().other();x++) }} {{~ end }}
安全訪問
#1 {{a?.b?.c}} #2 {{a.bbbb?().ccc?.ddd}}
初始化配置
var options = { //共享模板方法和數(shù)據(jù) share : { attr:'text...', func1:function (v){ return v + " kiss~~" }, }, // 是否是共享數(shù)據(jù)優(yōu)先 // 默認 false，即： render 方法傳入的 data 數(shù)據(jù)優(yōu)先 shareDataFirst: false, //default is false //是否開啟安全訪問，這個功能不支持 IE 瀏覽器 //IE 下需要設置為 false，同時配置 false 后會得到更高的運行性能 safelyAccess: true, //自定義 html 安全輸出方法 //當使用 {{# ... }} 的時候使用該方法轉換 $escape:function (html){return html}, //自定義 unescape 方法 //當使用 {{! ... }} 的時候使用該方法轉換 $unescape:function (value){return value} } var fasty = new Fasty(options); fast.render(template,data)
作者
- Micahel ([email protected]) - 小碼科技
- Wechat: wx198819880
License
Fasty is licensed under the MIT License.
開源地址
評論
圖片
表情