1. 為什么會有這個東西？

方便組織你的代碼，提高項目的可維護性。一個項目的可維護性高不高，也體現(xiàn)一個程序員的水平，在如今越來越復(fù)雜的前端項目，這一點尤為重要。

2. 為什么不用requirejs，seajs等

它們功能強大，但是文件體積是個問題，此外還有就是業(yè)務(wù)有時候可能沒那么復(fù)雜，正如開頭所說的：keep it simple

3. 以下的實現(xiàn)從哪里來的？

這些借鑒了requirejs,seajs,commonjs等的實現(xiàn)，用于真實的項目，穩(wěn)定運行，效果不錯。

4. 適用場景

移動端頁面，將js注入到html頁面，這樣就不用考慮模塊加載的問題，從而節(jié)省了很多的代碼，在實現(xiàn)上也更為的簡單。

如果是多文件加載的話，需要手動執(zhí)行文件加載順序，那么其實最好用庫來進行依賴管理會好一點。

實現(xiàn)1

(function(global){var modules = {};var define = function (id,factory) {if(!modules[id]){modules[id] = {id : id,factory : factory};}};var require = function (id) {var module = modules[id];if(!module){return;}if(!module.exports){module.exports = {};module.factory.call(module.exports,require,module.exports,module);}return module.exports;}global.define = define;global.require = require;})(this);

使用示例

define('Hello',function(require,exports,module){function sayHello() {console.log('hello modules');}module.exports = {sayHello : sayHello}});var Hello = require('Hello');Hello.sayHello();

實現(xiàn)2

function Module(main,factory){var modules = {};factory(function(id,factory){modules[id] = {id : id,factory : factory,}});var require = function (id) {var module = modules[id];if(!module){return;}if(!module.exports){module.exports = {};module.factory.call(module.exports,require,module.exports,module);}return module.exports;}window.require = require;return require(main);}

使用示例

Module('main',function(define){define('Hello',function(require,exports,module){function sayHello () {console.log('hello');}//有效的寫法module.exports = {sayHello : syaHello;}//或者exports.sayHello = sayHello;});//mian，程序入口define('main',function(require,exports,module){var Hello = require('Hello');Hello.sayHello();});});

實現(xiàn)3

另外一種風(fēng)格的模塊管理

(function(global) {var exports = {}; //存儲模塊暴露的接口var modules = {}; // global.define = function (id,factory) {modules[id] = factory;}global.require = function (id) {if(exports[id])return exports[id];else return (exports = modules[id]());}})(this);

使用示例

define('Hello',function(require,exports,module){function sayHello() {console.log('hello modules');}//暴露的接口return {sayHello : sayHello};});var Hello = require('Hello');Hello.sayHello();