JS模闆Handlebars的使用和有效組織

  應用背景

我們在做項目時，為了使頁面子產品高度複用，使用頁面模闆是必須的，我想大家通常可能會建立MVC的項目，然後在頁面中使用Razor引擎，建立Helper模闆類，前背景代碼的混寫，簡潔高效，一切都是那麼的行雲流水，我就是這麼幹的！

直到有一天，當我快做完一個項目時，經理對我說，你不要直接通路資料庫，用接口就行了，是啊，說的多輕松，但對程式員來說這就是晴天霹靂啊，因為這意味着你這個項目的流程徹底改變。

       變成

初看起來好像沒什麼大的問題，砍掉整個背景好像還友善了不少，但還是有些問題，因為接口傳回的是json資料，是以會遇到下面的問題:

即你怎麼把json資料傳給你的Helper模闆？ 看來Razor是不行了，那怎麼辦呢？

在js方法中拼湊html字元串，類似

這當然可以，但如果頁面稍微複雜一些，在各個标簽中都有事件，方法，并且方法還要攜帶相關參數，再加上相應的css樣式，業務邏輯之類的，這一大鍋混在一起，你覺得你還能這麼幹嗎？

即使在頁面很簡單的時候，我也從沒考慮過用這種作死的辦法來解決問題。難道就沒有一種類似Razor的前台的東東，可以使資料、業務邏輯、頁面呈現清晰完美的結合在一起嗎？答案是肯定的,我們的前輩們早就遇到過這類問題，并且他們已經為我們提供了非常好的解決方案：

HandlerBars是一個非常給力的前端語義構模組化闆，能幫助你快速高效的搭建出自己的頁面模型。

簡單使用：

1.建立MVC項目 

 2.下載下傳HandleBars.js.(官網的好像失效了，可以去，或直接NuGet） 

3.引用

4.建立模闆 

注意type的類型

  5.編譯并輸出 我們還可以帶參數

有效組織：

我在學習Handlebars時發現網上的很多教程隻是為了寫教程而寫教程（廢話啊），我的意思是說沒有更多的從實際開發的角度去幫助大家了解和使用。

就像上面的例子（雖然很水，但能說明問題即可），你可以看到，我的模闆、js

、包括之後可能有的css幾乎都是寫一起的，這在實際的項目開發中是很不可取的，怎樣更好的使各個部分互相獨立，互不影響，且又能更好的組織和使用呢？

經過我的大量測試和試驗發現了以下三個結論：

1.handlebars的模闆必須在使用前存在于dom中，即如果你要在一個分部視圖中調用模闆，那麼在你這個分部的視圖或它的父級視圖中必須存在你要調用的模闆。

2.在handlebars模闆中不能像Razor那樣嵌入js。

3.模闆無法像Razor 那樣放在App_Code中直接通路。

好了，這裡的關鍵就是怎樣更好的組織模闆檔案呢！針對這三個特點，我們可以在使用時這樣組織：

1.建立模闆檔案夾，裡面存放handlebars模闆（就是一個cshtml檔案）。

你可以看到，我的一個模闆檔案裡隻存了一個模闆，當然如果你能保證不沖突的話，你也可以在一個檔案中寫多個。

2.将該模闆用到的js,css單獨存放于一個檔案（這個不用說，大家都知道！）。

3.在Bundle中一次将你要用到的js,css打入，并在母版頁中Render。

4.關鍵就是這一步了，在你要用到模闆的頁面或父級頁面導入你在第1步建立的模闆檔案

然後再在js裡引用，編譯，輸出就像上面那個很水的demo一樣。

這樣我們的模闆、js、css就都分開了，層次結構也更清晰，一目了然。

以上就是個人在工作學習中的一點經驗和見解，和大家分享一下，希望能幫到大家，本人菜鳥一名，若有不對之處，歡迎大家批評指正！