express－8 Handlebars模板引擎(1)

2023-07-17 20:10:40

简介###

使用JavaScript生成一些HTML

document.write('<h1>Please Don\'t Do This</h1>');

document.write('<p><span class="code">document.write</span> is naughty,\n');

document.write('and should be avoided at all costs.</p>');

document.write('<p>Today\'s date is ' + new Date() + '.</p>');

问题出现在这里：切换上下文环境是困难的。如果你写了大量的JavaSctipt，混合在HTML中会引起麻烦和混乱; 由JavaScript生成的HTML充满了问题：

必须不断地考虑哪些字符需要转义以及如何转义。
使用JavaScript来生成那些自身包含JavaScript代码的HTML会很快让你抓狂。
通常会失去编辑器的语法高亮显示和其他方便的语言特性。
很难发现格式不正确的HTML。
很难直观地分析。
很难让别人读懂你的代码。

模板解决了在目标语言中编写代码的问题，同时也让插入动态数据成为了可能; 只有在某些最简单的情况下才会使用JavaScript生成HTML。

选择模板引擎###

一些可供参考的准则：参考推荐文章

性能: 希望模板引擎尽可能地快
客户端、服务端或兼而有之: 大多数（但不是所有）模板引擎都可用于客户端和服务器端。如果需要在这两端都使用模板，推荐选择那些在两端都表现优秀的模板引擎。
抽象: 让代码更可读（例如，在普通HTML文本中使用大括号）

Template-Engine-Chooser

Jade###

doctype html                              <!DOCTYPE html>

html(lang="en")                         <html lang="en">

  head                                          <head>

    title= pageTitle                       <title>Jade Demo</title>

    script.                                       <script>

       if (foo) {                                    if (foo) {

          bar(1 + 5)                                 bar(1 + 5)

       }                                                 }

  body                                          </script>

                                                    <body>

    h1 Jade                                   <h1>Jade</h1>

    #container                              <div id="container">

      if youAreUsingJade

        p You are amazing             <p>You are amazing</p>

      else

        p Get on it!

      p.                                           <p>

       Jade is a terse and                      Jade is a terse and

       simple templating                       simple templating

       language with a                          language with a

       strong focus on                           strong focus on

       performance and                        performance and

       powerful features.                       powerful features.

                                                    </p>

                                                    </body>

                                                    </html>

Jade无疑是少打了很多字，因为不再有尖括号和结束标记。取而代之，它依赖缩进和一些常识性规则，从而更容易表达出自己想要的。Jade具有一个额外的优势：理论上讲，当HTML自身发生改变时，你可以轻松地将Jade定位于HTML版本的最新版本，从而让你的内容更具“前瞻性”。

Handlebars基础###

理解模板引擎的关键在于context（上下文环境）:当渲染一个模板时，便会传递给模板引擎一个对象，叫作上下文对象，它能让替换标识运行。

例如，如果上下文对象是{ name: 'Buttercup' }，模板是<p>Hello, {{name}}!</p> ，则 {{name}}会被Buttercup替换。如果向模板中传递HTML文本会发生什么呢？例如，上下文换成{ name: '<b>Buttercup</b>' }，使用之前的模板得到的结果将是<p>Hello,&lt;b&gt;Buttercup&lt;b&gt;</p>，这或许并不是你想要的。要想解决这个问题，用三个大括号代替两个就可以了：{{{name}}}。

注释: 区分Handlebars注释和HTML注释很重要。示例如下：

{{! super-secret comment }}

<!-- not-so-secret comment -->

假设这是一个服务器端模板，上面的super-secret comment将不会被传递到浏览器，然而如果用户查看HTML源文件，下面的not-so-secret comment就会被看到。

块级表达式

上下文对象:###

{

      currency: {

             name: 'United States dollars',

             abbrev: 'USD',

      },

      tours: [

              { name: 'Hood River', price: '$99.95' },

              { name: 'Oregon Coast', price: '$159.95' },

      ],

      specialsUrl: '/january-specials',

      currencies: [ 'USD', 'GBP', 'BTC' ],

}

传递到如下模板：

<ul>

       {{#each tours}}

              {{! I'm in a new block...and the context has changed }}

              <li>

                         {{name}} - {{price}}

                         {{#if ../currencies}}

                                ({{../../currency.abbrev}})

                         {{/if}}

              </li>

       {{/each}}

</ul>

{{#unless currencies}}

       <p>All prices in {{currency.name}}.</p>

{{/unless}}

{{#if specialsUrl}}

       {{! I'm in a new block...but the context hasn't changed (sortof) }}

       <p>Check out our <a href="{{specialsUrl}}">specials!</p>

{{else}}

       <p>Please check back often for specials.</p>

{{/if}}

<p>

       {{#each currencies}}

             <a href="#" class="currency">{{.}}</a>

       {{else}}

             Unfortunately, we currently only accept {{currency.name}}.

       {{/each}}

</p>

each辅助方法，这使我们能够遍历一个数组; 在下级块中，如果想访问currency对象，就得使用../来访问上一级上下文。
if辅助方法:

在Handlebars中，所有的块都会改变上下文，所以在if块中，会产生一个新的上下文......而这刚好是上一级上下文的副本。换句话说，在if或else块中，上下文与上一级上下文是相同的。但是当在一个each循环中使用if块时就有必要细究一下了。在{{#each tours}}循环体中，可以使用../.访问上级上下文。不过，在{{#if ../currencies}}块中，又进入了一个新的上下文......所以要获得currency对象，就得使用../../.。第一个../获得产品的上下文，第二个获得最外层的上下文。这就会产生很多混乱，最简单的权宜之计就是在each块中避免使用if块。
在if和each块中都有一个可选的else块（对于each，如果数组中没有任何元素，else块就会执行）。我们也用到了unless辅助方法，它基本上和if辅助方法是相反的：只有在参数为false时，它才会执行。
最后要注意的一点是在{{#each currencies}}块中使用{{.}}。{{.}}指向当前上下文，在这个例子中，当前上下文只是我们想打印出来的数组中的一个字符串。

访问当前上下文还有另外一种独特的用法：它可以从当前上下文的属性中区分出辅助方法。例如，如果有一个辅助方法叫作foo，在当前上下文中有一个属性也叫作foo，则{{foo}}指向辅助方法，{{./foo}}指向属性。

服务器端模板###

服务器端模板与客户端模板不同，客户端模板能够通过查看HTML源文看到，而不会看到服务器端模板，或是用于最终生成HTML的上下文对象。

服务器端模板除了隐藏实现细节，还支持模板缓存，这对性能很重要。模板引擎会缓存已编译的模板（只有在模板发生改变的时候才会重新编译和重新缓存），这会改进模板视图的性能。默认情况下，视图缓存会在开发模式下禁用，在生产模式下启用。如果想显式地启用视图缓存，可以这样做：app.set('view cache', true)

Express支持Jade、EJS和JSHTML。所以需要添加一个node包，让Express提供Handlebars支持。

npm install --save express3-handlebars

然后就可以在Express中引入：

var handlebars = require('express3-handlebars').create({ defaultLayout: 'main' });

app.engine('handlebars', handlebars.engine);

app.set('view engine', 'handlebars');

express3-handlebars让Handlebars模板拥有了.handlebars扩展名。可以在创建express3-handlebats实例将扩展名改成同样常见的.hbs;默认模版还是main.hbs

var exphbs = require('express3-handlebars');

app.engine('hbs', exphbs({extname: '.hbs'}));

app.set('view engine', 'hbs');

码农公寓