摘要：模塊管理的簡單實(shí)現(xiàn)方式，為什么會(huì)有這個(gè)東西方便組織你的代碼，提高項(xiàng)目的可維護(hù)性。適用場景移動(dòng)端頁面，將注入到頁面，這樣就不用考慮模塊加載的問題，從而節(jié)省了很多的代碼，在實(shí)現(xiàn)上也更為的簡單。

Keep It Simple，Stupid

1. 為什么會(huì)有這個(gè)東西？

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

2. 為什么不用requirejs，seajs等

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

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

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

4. 適用場景

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

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

(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();

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();
    });
});

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

(function(global) {
    var exports = {}; //存儲(chǔ)模塊暴露的接口
    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();

有了簡易的模塊化管理之后，在項(xiàng)目中，我們就可以采取這樣的結(jié)構(gòu)

-- proj

-- html
    -- index.html
-- css
-- js
    -- common
        -- module1.js（通用模塊1）
        -- module2.js（通用模塊2）
    -- page
        -- index.js（頁面邏輯）
    -- lib
        -- moduler.js 模塊管理庫

配合前端構(gòu)建工具（wepack，grunt，gulp等等），就可以構(gòu)建一個(gè)移動(dòng)端的頁面。

如今的框架非常地多，而且越做越龐大?？蚣芡ǔ？紤]通用性，對(duì)于精益求精的項(xiàng)目來說，可能有時(shí)候也要自己動(dòng)手去實(shí)現(xiàn)一些關(guān)鍵的點(diǎn)，而學(xué)習(xí)的來源就是這些牛逼的框架。