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

資訊專欄INFORMATION COLUMN

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

happyhuangjinjin / 2919人閱讀

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

Leopard 背景 
Leopard, yet another HTML template engine!

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

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

所以，這次我還是大致按照ejs的語法規范來實現Leopard。

下載與使用

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

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

$ npm install leopard-template
特性

目前而言，Leopard實現了以下功能點：

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

邏輯判斷：if與else

循環：for循環，可以用來循環輸出模板

過濾器：支持在插值里加入過濾器，同時過濾器可以串聯使用。引擎內置了兩個過濾器，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的方法渲染到頁面上
性能

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

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

# benchmark
$ npm run benchmark
開源

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

# unit test
$ npm run test

# coverage
$ npm run coverage
結語

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107380.html

相關文章

  • #yyds干貨盤點#數據可視化界的小公主：cutecharts，入門 + 實戰應用

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

    番茄西紅柿 評論0 收藏2637

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

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼作為現代應用，的大量使用，使得前端工程師們日常的開發少不了拼裝模板，渲染模板。我們今天就來聊聊，拼裝與渲染模板的那些事兒。一改俱改，一板兩用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog...

    UCloud 評論0 收藏0

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

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼作為現代應用，的大量使用，使得前端工程師們日常的開發少不了拼裝模板，渲染模板。我們今天就來聊聊，拼裝與渲染模板的那些事兒。一改俱改，一板兩用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog...

    Yangder 評論0 收藏0

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

    摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼作為現代應用，的大量使用，使得前端工程師們日常的開發少不了拼裝模板，渲染模板。我們今天就來聊聊，拼裝與渲染模板的那些事兒。一改俱改，一板兩用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog...

    褰辯話 評論0 收藏0

發表評論

0條評論

happyhuangjinjin

男|高級講師

TA的文章

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