Javascript 模塊化開發上線解決方案

最近又換部門了，好頻繁地說。。。因而把這段時間搞的小工具們簡單整理了一下，做了一個小的總結。此次用一個簡單業務demo來向你們介紹一下Javascript模塊化開發的方式和自動化合並壓縮的一些本身的處理。

模塊化開發已經有一些標準(AMD/CMD)並且如今也算比較普及了，其爲開發人員提供了很大的方便。模塊化開發能夠按結構整理代碼，將一些功能分小顆粒來實現，這樣的代碼維護起來會方便不少，也更靈活，更容易在必定程度上去知足各類需求的變動。 

好比這是demo中的代碼結構：

　　

　　先說page目錄，這裏的每個js文件對應於一個頁面，這就是頁面js的入口文件，全部的功能模塊經過對應的js去加載。

　　general目錄就是通常的針對業務的一些功能，好比這裏的picView就是一個圖片查看功能，該目錄的定位是與業務緊密相關。

　　common目錄就是相對業務要底層一些，屬於基礎組件，它能夠在各業務模塊中使用，組成業務相關的功能。

 

　　utils目錄其實就是一個函數庫，也跟業務不要緊，只是實現通常經常使用小顆粒功能的封裝。

　　lib目錄就是放的第三方的一些庫，好比jquery,requirejs

　　conf就是進行一些項目的配置

 

這樣咱們就能夠把各功能按其職責分別扔到相應的目錄下以實現各模塊的分類。

咱們在開發中的時候就能夠像這樣：

<script type="text/javascript" src="../js/lib/require.js"></script>
<script type="text/javascript" src="../js/conf/requireConf.js"></script>
<script type="text/javascript" src="../js/page/index.js"></script>

引入頁面代碼後，在頁面入口文件進行開發了。

開發確實方便，不過上線的話，確定不能直接這麼上線，由於從前端優化的角度上講，通常狀況下咱們是須要儘可能減小請求的。如今的狀況是模塊越多，咱們的請求確定也會不少，性能就會受到影響。雖然模塊化加載工具已經提供了處理方法（像requireJS有r.js來進行編譯），但始終仍是要依賴於require.js引導文件，這樣會有點多餘。因而個人處理方式就是將這些模塊文件按頁面合併後，再進行代碼原生化處理，這要就去除了define/require的依賴，也就再也不須要引入像require.js這樣的引導文件（雖然在代碼編寫中須要有一些約束，不過仍是能知足大部分狀況吧。），使用方法就是在項目的build目錄裏進行grunt build就好了，具體能夠在demo中嘗試。

demo地址：

　　https://github.com/randomyang/javascript-module

並且你們能夠根據代碼裏的註釋本身切換不一樣狀況看效果。

 

最後說明一下，此次討論的應用場景只適合單文件一次引入的時候，若是是多文件或有業務交互中異步引入的方式，暫不在此次討論之列，這裏只是給你們提供一種開發方式的選擇，謝謝。