Handlebars的layout和partials
Handlebars的layout文件和partials文件，可以是我們很輕松的組織一些公共的頁面或代碼片段，使得前端視圖可維護性非常高。
Handlebars的layout文件
Express+express-handlebars項目中，我們定義好頁面的layout文件后，然后在內(nèi)容變化的位置加入{{{body}}}，這樣我們每次渲染頁面都會替換到{{{body}}}中，這種“布局文件”的概念大大的降低了我們的維護成本。
Handlebars的partials文件
partials文件，也就是片段文件，可以放置公共的引用。
在配置Handlebars的時候，我們可以指定partials文件目錄：
var hbs = exphbs.create({
partialsDir: 'views/partials',
layoutsDir: "views/layouts/",
defaultLayout: 'main',
extname: '.hbs',
helpers: hbsHelper
});
這樣在partials目錄下定義的handlebars文件都會是partials文件，使用方法：{{> head}}。
下面是一個布局文件（layout.hbs），同時使用了partials文件，可供參考：
<!doctype html>
<html>
<head>
{{> head}}
</head>
<body class="hold-transition skin-blue layout-top-nav">
<div class="wrapper">
{{>header}}
<!-- Full Width Column -->
<div class="content-wrapper">
<div class="container">
{{{body}}}
</div>
</div>
</div>
{{>footer}}
<script src="/js/app.js"></script>
</body>
</html>
使用Helper實現(xiàn)段落功能
所謂段落功能，就是我們在頁面預置一個位置，動態(tài)來渲染這個位置的代碼（代碼可以是html、js、或者css）。
概念聽起來可以有些模糊，我們舉個例子：
我們已經(jīng)知道，上面的layout.hbs文件是一個布局文件，所有的跳轉(zhuǎn)頁面都會通過這個布局文件來渲染內(nèi)容，那么現(xiàn)在假如有一個個例頁面(/hello請求渲染的頁面)，需要用js來處理一段代碼呢？
<script>
alert('hello world');
</script>
如果我們在layout中加入這段js代碼，那么所有的頁面都會打印hello world，顯然不是我們想要的，我們僅僅是想在請求/hello的時候打印。
用partials？可以嗎？答案是不可以。
partials僅能來組織公共的代碼片段，不是用來個性化的。
那么又有童靴提出解決方案：在/hello渲染的頁面底下加上不就行了嗎？
如：hello.hbs
這也是一種解決方案，但是出來的代碼不倫不類，查看/hello渲染的頁面源碼：
```javascript
<!doctype html>
<html>
<head>
{{> head}}
</head>
<body class="hold-transition skin-blue layout-top-nav">
<div class="wrapper">
{{>header}}
<!-- Full Width Column -->
<div class="content-wrapper">
<div class="container">
<script>
alert('hello world');
</script>
</div>
</div>
</div>
{{>footer}}
<script src="/js/app.js"></script>
</body>
</html>
我們的script代碼片段跑到container里了！這個簡單的例子能滿足需求，但是加入javascript片段依賴jquery，而jquery是在{{>footer}}里引用呢？這里肯定就會報錯了。
使用Helper優(yōu)雅的解決段落問題
Handlebars提供了強大的Helper支持，使我們解決這個問題變得簡單明了。
首先我們定義一個helper，來組織這些個性片段（這些片段可能包含js、css、特殊的html等等）。
section: function(name, block){
if(!this._sections) this._sections = {};
this._sections[name] = block.fn(this);
return null;
},
在這個helper 中，我們定義了_sections變量(需要理解handlebars中的this關(guān)鍵字)，當指定了_sections的name時，就會動態(tài)渲染session中的內(nèi)容。
如何使用？
首先我們可以在layout中預置一個section。如果我們渲染動態(tài)的js段落，需要放到{{> footer}}下面。以下是改造后的layout文件部分代碼：
{{>footer}}
<script src="/js/app.js"></script>
{{{_sections.js}}}
</body>
</html>
說明：
{{{_sections.js}}}這段是預置的代碼，意思是從this._sections變量中取name為js的段落，渲染在這里。如果當前頁面沒有js則不渲染。
位置預置好了，我們就可以寫具體的段落了。接上個例子，只想在請求/hello頁面中打印hello world，就可以在hello.hbs中任意位置加入下面段落（最好是在頁面最底下，方便維護）。
{{#section 'js'}}
<script>
alert('hello world')
</script>
{{/section}}
這樣當我們請求/hello時，就會打印hello world，請求其他頁面則不會有這段js代碼。
養(yǎng)成良好的代碼組織能力，有助于提高我們的編碼質(zhì)量！
