如何給JavaScript模塊提供有條件的AMD支持？

Question

我正在構建一個模塊，我希望爲使用AMD的人員和不使用AMD的人員提供這兩個模塊。例如，我希望把它與RequireJS工作：

require(['Module'], function (Module) { 
    // do stuff with module 
}); 

但我也希望通過手動將所有的依賴關係的工作（考慮到他們也沒有AMD工作）。

如何測試此行爲是否正確？

Answer 1

我發現的一個工作方法是在我的腳本文件中使用模塊模式，這樣就沒有泄漏的依賴關係。之後，我構建了一個內部函數，它接收我的依賴項作爲參數，並返回表示要導出的模塊的對象。

然後，我檢查是否有define函數可用，並且它是否設置了amd屬性。如果是，那麼我用define來註冊該模塊，否則我將它作爲全局導出。

下面是此代碼的框架。我們假設該模塊被命名爲Module，它由兩所部分組成，dep1和dep2：

(function (exports) { 
    "use strict"; 
    var createModule = function (dep1, dep2) { 
    var Module; 
    // initialize the module 
    return Module; 
    } 
    if (typeof define === 'function' && define.amd) { 
    define(['dep1', 'dep2'], function (dep1, dep2) { 
     return createModule(dep1, dep2); 
    }); 
    } else { 
    exports.Module = createModule(dep1, dep2); 
    } 
})(this); 

---

關於測試，我目前使用的自耕農它，與mocha和PhantomJS。以下是如何根據需求進行測試的方法。我用來測試這兩種情況（有和沒有AMD）的方法是有兩個單獨的html測試。首先，你需要在Gruntfile添加第二頁：

// headless testing through PhantomJS 
mocha: { 
    all: ['http://localhost:3501/index.html', 'http://localhost:3501/no-amd.html'] 
}, 

在第一種情況下，有正常需要基於模板：

<script src="lib/mocha/mocha.js"></script> 
<!-- assertion framework --> 
<script src="lib/chai.js"></script> 

<!-- here, main includes all required source dependencies, 
    including our module under test --> 
<script data-main="scripts/main" src="scripts/vendor/require.js"></script> 

<script> 
    mocha.setup({ui: 'bdd', ignoreLeaks: true}); 
    expect = chai.expect; 
    should = chai.should(); 
    require(['../spec/module.spec'], function() { 
    setTimeout(function() { 
     require(['../runner/mocha']); 
    }, 100); 
    }); 
</script> 

對於測試非AMD，我們需要明確包含模塊和所有依賴關係。畢竟在頁面中，我們包括跑步者。

<script src="lib/mocha/mocha.js"></script> 
<!-- assertion framework --> 
<script src="lib/chai.js"></script> 

<!-- include source files here... --> 
<script src="scripts/vendor/dep1.js"></script> 
<script src="scripts/vendor/dep2.js"></script> 
<script src="scripts/Module.js"></script> 

<script> 
    mocha.setup({ui: 'bdd', ignoreLeaks: true}); 
    expect = chai.expect; 
    should = chai.should(); 
</script> 
<script src="spec/romania.spec.js"></script> 
<script src="runner/mocha.js"></script> 

有兩個不同的規格沒有任何意義，但規範也應該與AMD一起工作，沒有它。該解決方案與我們用於該模塊的解決方案類似。

(function() { 
    "use strict"; 
    var testSuite = function (Module) { 
    // break the module into pieces :) 
    }; 
    if (typeof require === 'function') { 
    require(['Module'], function (Module) { 
     testSuite(Module); 
    }); 
    } else { 
    // if AMD is not available, assume globals 
    testSuite(Module); 
    } 
})(); 

如果您有不同或更優雅的方式來做到這一點，請張貼在這裏作爲答案。我很樂意接受更好的答案。 :)