1. 為什么會有這個東西？
方便組織你的代碼，提高項目的可維護性。一個項目的可維護性高不高，也體現一個程序員的水平，在如今越來越復雜的前端項目，這一點尤為重要。
2. 為什么不用requirejs，seajs等
它們功能強大，但是文件體積是個問題，此外還有就是業務有時候可能沒那么復雜，正如開頭所說的：keep it simple
3. 以下的實現從哪里來的？
這些借鑒了requirejs,seajs,commonjs等的實現，用于真實的項目，穩定運行，效果不錯。
4. 適用場景
移動端頁面，將js注入到html頁面，這樣就不用考慮模塊加載的問題，從而節省了很多的代碼，在實現上也更為的簡單。
如果是多文件加載的話，需要手動執行文件加載順序，那么其實最好用庫來進行依賴管理會好一點。
實現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();實現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();});});實現3
另外一種風格的模塊管理
(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();實踐
有了簡易的模塊化管理之后，在項目中，我們就可以采取這樣的結構
-- proj
-- html-- index.html-- css-- js-- common-- module1.js（通用模塊1）-- module2.js（通用模塊2）-- page-- index.js（頁面邏輯）-- lib-- moduler.js 模塊管理庫
配合前端構建工具（wepack，grunt，gulp等等），就可以構建一個移動端的頁面。
總結
如今的框架非常地多，而且越做越龐大。框架通常考慮通用性，對于精益求精的項目來說，可能有時候也要自己動手去實現一些關鍵的點，而學習的來源就是這些牛逼的框架。
新聞熱點
疑難解答
