成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

來(lái)分享一個(gè)我自己寫(xiě)的HTML模板引擎，Leopard

happyhuangjinjin / 2917人閱讀

摘要：背景本著造輪子的初衷，我花了兩天時(shí)間寫(xiě)了一個(gè)基于字符串的模板引擎，取名叫豹，，希望它能像豹子一樣靈活敏捷。之前使用過(guò)的模板有與后來(lái)改名叫。引擎內(nèi)置了兩個(gè)過(guò)濾器，與。同時(shí)支持自定義過(guò)濾器，可以使用來(lái)全局注冊(cè)一個(gè)過(guò)濾器。

Leopard 背景 
Leopard, yet another HTML template engine!

本著造輪子的初衷，我花了兩天時(shí)間寫(xiě)了一個(gè)基于字符串的HTML模板引擎，取名叫“豹”，Leopard，希望它能像豹子一樣靈活敏捷。

之前使用過(guò)的模板有ejs與jade（后來(lái)改名叫pug）。前者設(shè)計(jì)得很容易上手，而且語(yǔ)法跟HTML比較接近。后者讓人望而生畏，而且我沒(méi)記錯(cuò)的話，jade對(duì)縮進(jìn)有嚴(yán)格的要求，因?yàn)樗腔诳s進(jìn)來(lái)判斷標(biāo)簽層級(jí)關(guān)系的，這樣的設(shè)計(jì)讓人編寫(xiě)的時(shí)候幾乎是如履薄冰如寫(xiě)Python（我的游標(biāo)卡尺呢？？？），所以我當(dāng)時(shí)還是一直用ejs來(lái)開(kāi)發(fā)的。

所以，這次我還是大致按照ejs的語(yǔ)法規(guī)范來(lái)實(shí)現(xiàn)Leopard。

下載與使用

這里是github地址，歡迎大家看完之后在issue里提建議與bug，同時(shí)也歡迎提PR。

大家也可以通過(guò)npm來(lái)下載Leopard：

$ npm install leopard-template
特性

目前而言，Leopard實(shí)現(xiàn)了以下功能點(diǎn)：

插值：包括文本插值與HTML插值

邏輯判斷：if與else

循環(huán)：for循環(huán)，可以用來(lái)循環(huán)輸出模板

過(guò)濾器：支持在插值里加入過(guò)濾器，同時(shí)過(guò)濾器可以串聯(lián)使用。引擎內(nèi)置了兩個(gè)過(guò)濾器，capitalize與reverse。Leopard同時(shí)支持自定義過(guò)濾器，可以使用Leopard.filter(filter, handler)來(lái)全局注冊(cè)一個(gè)過(guò)濾器。在過(guò)濾器上，Leopard可能跟ejs的不太同，跟Vue的比較相似。

舉個(gè)栗子 
var Leopard = require("leopard-template")
var leo = new Leopard()

var template = "<% if (isOk) { %>" +
  "<%= nickname | capitalize %>" +
  "<% } else { %>" +
  "<%= realname | capitalize %>" +
  "<% } %>"

var html = leo.compile(conditions, {
  isOk: false,
  nickname: "leo",
  realname: "leopard"
})

// html就是最終編譯成功的的html了，可以直接通過(guò)document的方法渲染到頁(yè)面上
性能

其實(shí)字符串模板引擎的性能大家都知道的，在現(xiàn)在的硬件條件下，幾乎可以說(shuō)是非常快的。（飽受虛擬DOM服務(wù)端渲染性能上不去的孩子哭暈在廁所，鄙人的公司項(xiàng)目就是卡在了這里上不了線）

我做了一個(gè)簡(jiǎn)單的benchmark，循環(huán)輸出50,000個(gè)li耗時(shí)大概是在60ms左右。當(dāng)然，Leopard現(xiàn)在還只支持將模板字符串解析編譯成HTML字符串，所以這里的循環(huán)輸出指的是字符串編譯這一環(huán)。

# benchmark
$ npm run benchmark
開(kāi)源

雖然說(shuō)是個(gè)造輪子的項(xiàng)目，而且長(zhǎng)得跟ejs幾乎一毛一樣，所以也不太可能投入到生產(chǎn)環(huán)境中使用（再者說(shuō)現(xiàn)在都用MVVM框架來(lái)開(kāi)發(fā)項(xiàng)目），但是我還是希望能按照開(kāi)源項(xiàng)目的規(guī)范來(lái)開(kāi)發(fā)Leopard。我給Leopard寫(xiě)了100%覆蓋率的測(cè)試用例，每次提交commit也是跑完測(cè)試之后通過(guò)了才提交，也是希望這個(gè)項(xiàng)目不會(huì)太水。

# unit test
$ npm run test

# coverage
$ npm run coverage
結(jié)語(yǔ)

emmm...沒(méi)什么好說(shuō)的，提前祝大家新年大吉吧。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107380.html

相關(guān)文章

  • #yyds干貨盤(pán)點(diǎn)#數(shù)據(jù)可視化界的小公主：cutecharts，入門(mén) + 實(shí)戰(zhàn)應(yīng)用

    這是我參與11月更文挑戰(zhàn)的第13天。今天給大家分享的這篇文章是19年寫(xiě)的，當(dāng)時(shí)pyecharts作者陳老師和我分享了他們最新開(kāi)發(fā)的動(dòng)漫風(fēng)格可視化庫(kù)：cutecharts，我當(dāng)即體驗(yàn)了下，效果確實(shí)杠杠的，可愛(ài) 好看 精煉，今天回顧了下，所有代碼依舊能跑通（在Python 3.10上，19年寫(xiě)的時(shí)候環(huán)境應(yīng)該是在Python3.7）。如果本文，或者歷史發(fā)布文章對(duì)你學(xué)習(xí)有所幫助，請(qǐng)給我一個(gè)免費(fèi)的點(diǎn)贊；如果...

    番茄西紅柿 評(píng)論0 收藏2637

  • [聊一聊系列]聊一聊前端模板與渲染那些事兒

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼作為現(xiàn)代應(yīng)用，的大量使用，使得前端工程師們?nèi)粘５拈_(kāi)發(fā)少不了拼裝模板，渲染模板。我們今天就來(lái)聊聊，拼裝與渲染模板的那些事兒。一改俱改，一板兩用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog...

    UCloud 評(píng)論0 收藏0

  • [聊一聊系列]聊一聊前端模板與渲染那些事兒

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼作為現(xiàn)代應(yīng)用，的大量使用，使得前端工程師們?nèi)粘５拈_(kāi)發(fā)少不了拼裝模板，渲染模板。我們今天就來(lái)聊聊，拼裝與渲染模板的那些事兒。一改俱改，一板兩用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog...

    Yangder 評(píng)論0 收藏0

  • [聊一聊系列]聊一聊前端模板與渲染那些事兒

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼作為現(xiàn)代應(yīng)用，的大量使用，使得前端工程師們?nèi)粘５拈_(kāi)發(fā)少不了拼裝模板，渲染模板。我們今天就來(lái)聊聊，拼裝與渲染模板的那些事兒。一改俱改，一板兩用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog...

    褰辯話 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<