前端模塊化實踐（約定篇）

作爲新澤西風格的追隨者，咱們追求設計最簡化，最大限度減小任何冗餘的設計負擔。

由於咱們的開發基於 component，因此這裏要談的部份內容多數只適用於使用 Component 的模塊化開發。

項目結構

1. 扁平化，項目直接使用的模塊都在client文件夾下面，遠程模塊都在components文件夾下面。示例以下：

2. 每一個頁面一個文件夾，若是須要多頁面的話。

命名

1. view模塊後面應帶有-view後綴，其它不限制(由於暫時尚未不少)。

2. 每一個模塊下的模板文件統一命名爲template.html，css文件命名爲style.css，主要js文件命名爲index.js，這樣可省去大部分起名的苦惱，使用快捷鍵找到文件也容易的多。

3. css樣式命名。由於組件極可能在一個項目中能夠屢次出現，因此統一採用className作爲一個頂級父類，這個className應當就是組件的名稱，這樣徹底能夠避免衝突 ，例如組件data-view的樣式大體以下：

   .data-view .list {
   } 
   .data-view .list li {
   } 
   .data-view .input {
   }

接口

1. 避免選項式接口，使用鏈式接口，由於選項式接口每每須要猜想參數的默認值，形成沒必要要的理解成本，另外鏈式的接口也更容易掌握必填的參數。

   //很差的方式
   var dialog = new Dialog({
   el: el,
   closable: true,
   modal: true,
   resiable: true
   })
   
   //好的方式
   var dailog = new Dialog(el)
   .closable()
   .modal()
   .resiable()

2. 以DOM爲參數的接口應當統一使用原生的Element對象（或者統一jQuery對象，不過要注意component官方組件都是原生的Element對象作參數）

3. 嚴格限定可變參數接口，最多一個可變參數。可變參數確實能夠加強調用的靈活性，可是過於靈活會破壞自身的簡單性，得不償失。

調用

1. 禁止使用jQuery的Ajax方法，統一使用superagent，由於jQuey的Ajax內部過於複雜化，API設計也不夠簡單。

2. 須要同時發起多個請求時纔可使用Promise模式，可是應當避免多處使用相同promise對象，由於這會很容易帶來沒必要要的耦合，並增大調試的難度，正確的作法應當是傳遞迴調函數。

3. 父view能夠獲取子view的屬性，可是必須避免直接改變子view的屬性，應當由子view暴露方法給父view調用，這樣作的目的是提升模塊的內聚性。

4. 任何view模塊都必須實現remove方法，它的做用是銷燬自身dom，並移除所有事件。

下一篇將介紹一些我最經常使用的輕量級工具，它們不限於模塊化開發使用，可是在模塊化的開發中能夠更大程度發揮它們的效力。