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>

顿时妈妈不再用担忧文件更名了。

小结

撇开性能暂且不谈，不管什么样的模板引擎，都应该大大简化咱们的工做。若是使用了模板引擎，对页面管理和代码组织毫无用处，那离死也就不远了！