javascript模塊化詳解

一、模塊化的由來

1、最早我們這麼寫代碼

全部方法寫在一起，容易命名衝突，並且污染global全局

function foo(){}
function bar(){}

2、簡單封裝（Namespace模式）

減少了全局的變量，但是仍然可以通過myFunc.foo去操作數據，不安全

var myFunc = {
    foo: function(){},
    bar: function(){}
}
myFunc.foo()

3、匿名閉包（IIFE模式）

函數時javascript中唯一的localScope, 無法操作裏面的數據

var module = (function(){
    var _private = 'safe now';
    var foo = function(){
        console.log(_private);
    }
    return {
        foo:foo
    }
})();

module.foo();
module._private; // undefined 

4、增強，引入依賴

有時候，我們的功能需要依賴模塊才能完成，此時需要蔣模塊注入進來

// 這就是模塊模式的基礎
var module = (function($){
    var _private = $('body');
    var foo = function(){
        console.log(_private);
    }
    return {
        foo:foo
    }
})(JQuery);

module.foo();