国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

來分享一個我自己寫的HTML模板引擎，Leopard

happyhuangjinjin / 2909人閱讀

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

Leopard 背景 
Leopard, yet another HTML template engine!

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

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

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

下載與使用

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

大家也可以通過npm來下載Leopard：

$ npm install leopard-template
特性

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

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

邏輯判斷：if與else

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

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

舉個栗子 
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了，可以直接通過document的方法渲染到頁面上
性能

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

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

# benchmark
$ npm run benchmark
開源

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

# unit test
$ npm run test

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

emmm...沒什么好說的，提前祝大家新年大吉吧。

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107380.html

相關(guān)文章

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

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

    番茄西紅柿 評論0 收藏2637

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

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

    UCloud 評論0 收藏0

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

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

    Yangder 評論0 收藏0

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

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

    褰辯話 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<