JavaScript模塊化開發&&模塊規範

---

在作項目的過程當中一般會有一些可複用的通用性功能，以前的作法是把這個功能抽取出來獨立爲一個函數統一放到commonFunctions.js裏面(捂臉),實現相似於snippets的代碼片斷收集。

　　function sub(){
　　　　//...
　　}
　　function sum(){
　　　　//...
　　}
　　

在理想狀況下，開發者只須要實現核心的業務邏輯，其餘通用功能能夠加載已經實現的模塊。

然而，這樣的作法並非最佳實踐，在實際的運用中。業務代碼時常會與應用的通用代碼中的命名出現衝突。這讓我想起了cSharp，當初學習cSharp的時候，一些有經驗的學長就指點說，作.Net方向的必定要有本身的類庫，這樣在之後的開發中直接應用對應的命名空間，調用相關函數便可。因而乎琢磨起在目前尚沒有命名空間的Javascript中，是否是能夠用對象模擬命名空間做爲替代方案呢？剛好與前輩想法暗合Why SeaJS

var FocusTech = {};
FocusTech.print = function(str){
    // code！
}

然而其中的弊端文中也已給出。即經過命名空間，也只是下降函數命名衝突的機率。

命名衝突和文件依賴，面對前端開發過程當中的這兩個經典問題。或許前端模塊化開發是一個解決方案。

---

模塊規範

異步模塊定義AMD：（Asynchronous Module Definition）是 RequireJS 在推廣過程當中對模塊定義的規範化產出。通用模塊定義CMD：（Common Module Definition）是Sea.js在推廣過程當中對模塊定義的規範化產出的。

• AMD 運行時核心思想是「Early Executing」，也就是提早執行依賴。EX：

define(['a', 'b'], function(A, B) {
    //運行至此，a.js 和 b.js 已下載完成（運行於瀏覽器的 Loader 必須如此）；
    //A、B 兩個模塊已經執行完，直接可用（這是 AMD 的特性）；

    return function () {};
});

• CMD 推崇 as lazy as possible.
  在 CMD 規範中，一個模塊就是一個文件。代碼的書寫格式以下：
  define(factory);

• AMD 是提早執行，CMD 是延遲執行。
  CMD 推崇依賴就近，AMD 推崇依賴前置。看代碼：

// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此處略去 100 行
var b = require('./b') // 依賴能夠就近書寫
b.doSomething()
// ... 
})

// AMD 默認推薦的是
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
a.doSomething()
// 此處略去 100 行
b.doSomething()
...
})

對象模擬命名空間
Javascript模塊化編程（二）：AMD規範
Javascript模塊化編程（一）：模塊的寫法
SeaJS與RequireJS最大的區別
讓咱們再聊聊瀏覽器資源加載優化
SeaJS 和 RequireJS 的異同