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ì)量藕筋！
