How to choose template engine

時間 2019-11-21

標籤 choose template engine 简体版

原文原文鏈接

前言

後端渲染頁面的開發方式目前還佔據着主導的地位，雖然像Backbone、Angular、Reactjs等技術很火，可是在國內的普及和應用還遠遠不夠。單頁，前端渲染頁面的方式想要成爲主流還有很長的路要走。在我接觸的語言中，後端開發的模式基本以MVC爲主，V固然所謂的View了，如Java的Jsp、Velocity、Freemark，再如Node的Ejs、Jade、Handlebars等等，能夠說不一樣語言對應不少的模板引擎，那麼咱們該如何選擇模板引擎呢？我從實際開發的維護性來談幾點。css

Layouts

使用layouts能夠抽出咱們頁頭的公共代碼，使咱們只需關注單個頁面的內容。通常的Html頁面都是這樣的html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title</title>       
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="container" id="container"></div>
</body>
</html>

若是不使用layouts，每一個頁面咱們都得複製一遍上面的代碼，而後改變body裏的內容，若是有十個頁面咱們就得複製十遍，更別說複雜的應用了頁面都是幾十往上。想一想這樣的情景：你維護着沒使用layouts的應用，大概一百左右的頁面吧，有一天須要在header里加一個meta標籤...別說作了，想一想我就想吐了。使用了layouts維護起來就像這樣的前端

#default.xx
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title</title>       
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
    {body}
</body>
</html>

#index.xx
<div class="container" id="container"></div>

Partials

partials和layouts的核心都是抽出相同的代碼，便於維護。好比頁面有一個公共的footer結構，98%的頁面須要這個結構，剩下的頁面不須要。不使用partials的話，就看看哪些頁面須要，而後後一個個複製粘貼，好不容易複製完了，設計跑來講：很差意思哈，剛footer裏一個標籤使用錯了，把span改爲div。丫的還得一個個去改，累死累活完成了，設計又跑過來了：那啥，仍是改回span吧。估計那會兒不論是誰，內心都會默唸草泥馬。大把的時間都浪費在複製粘貼反覆修改上面了。使用了partials，須要footer的頁面就引一下，就像這樣bootstrap

#footer.xx
<div>footer</div>

#index.xx
<div>content</div>
{include footer}

這個時候footer裏隨便改啥都輕鬆搞定，由於只須要維護一份代碼後端

Block

Block能夠理解爲佔位符，例如上面的layouts default.xx只有一份代碼，title是固定的，那麼渲染出來每一個頁面的title都是相同的。實際上不一樣的頁面title是不一樣的，那麼怎麼辦？有人會說了，title經過後端傳遞值。我我的以爲頁面級的內容最好不要丟到後端去維護，會形成後端代碼的冗餘，不能爲了渲染而渲染。這個時候咱們就須要Block了。工具

#default.xx
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>{title}</title>     
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
    {body}
</body>
</html>

#page1.xx
{define title 'page1'}
<div>page1 content</div>

#page2.xx
{define title 'page2'}
<div>page2 content</div>

其實就是佔個坑，而後在具體的頁面裏指定內容。性能

Marco

在模板中調用工具方法，舉一個最多見的例子，日期格式化，若是在模板中使用不了工具方法。那麼咱們就得在後端的邏輯代碼中先格式化時間，雖然能抽出一個公共的方法調用，可是我仍是以爲不能爲了渲染而渲染，將這些渲染邏輯丟到業務中。若是模板支持宏，拿上面的例子來講就像這樣spa

#index.xx
{format time 'YYYY-MM-DD'}
<div>page1 content</div>

Set

前面四個內容我以爲是一個模板引擎的標配，隨便少了哪樣，都會使維護性變得更差，除非有其餘相似的替代方案。至於如今的set其實就是能夠在模板中聲明變量，並能夠進行簡單的邏輯判斷，變量聲明這個功能不少模板是不支持的。那麼有什麼具體的做用呢？拿上面的footer的例子來講，雖然只有2%的頁面不須要footer，咱們仍然沒辦法將footer放進layouts中，由於放進layouts中意味着全部的頁面都出現footer，固然了你能夠說服你的產品經理或者交互工程師，要求全部的頁面的都添加footer。惋惜這樣完美的狀況是少數的，咱們還得在98%的頁面中添加下面一段代碼設計

{include footer}

若是哪天footer更名了，你知道怎麼作了吧...若是模板引擎支持變量聲明和邏輯判斷，那麼能夠試着這麼幹code

#default.xx
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>{title}</title>     
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
    {body}
    {if !noFooter}
        {include footer}
    {endif}
</body>
</html>

#sb.xx
{set noFooter=true}
<div>勞資就不要footer</div>

頓時媽媽不再用擔憂文件更名了。

小結

撇開性能暫且不談，不管什麼樣的模板引擎，都應該大大簡化咱們的工做。若是使用了模板引擎，對頁面管理和代碼組織毫無用處，那離死也就不遠了！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。