javascript之模塊開發

   js代碼越來越多，越來越臃腫，合作開發的時候經常出現全局變量衝突等等，遇到這些問題的時候應該考慮js的模塊開發了，下面簡單介紹一下所謂模塊開發的基礎。

   1、說到模塊開發就不得不提立即執行函數，什麼是立即執行函數呢，請看下面的示例：

/**
 * 立即執行函數常用有兩種方式調用
 * (function(){}());
 * (function(){})();
 */
(function() {
    alert(1);
})();

2、這有什麼好處呢，當然就是防止全局污染了，也就是函數裏面聲明的變量不會被外部訪問，例如：

var module = (function() {
    var module = {};
    //私有屬性
    var user = '村長';
    function _private() {
        alert('私有方法');
        //私有方法
    }
    module.name = user+'123';
    module.pubFn = function() {
        _private();
        return '公共方法';
    };
    return module;
}());
alert(module.user); //undefined
alert(module.name); //村長123
alert(module.pubFn()); //私有方法、公共方法

3、如何導入全局變量呢，這個有辦法，請看：

var module = (function($) {
    $.id = 1;
}(window));
alert(id); //1

4、擴展模塊

var module = (function($) {
    $.extend = function() {
        alert('extend');
    }
                         
    return $;
}(module || {})); //鬆散擴展，及時之前沒有聲明module，也會把'{}'當作對象傳進去
module.extend(); //extend

5、防止模塊覆蓋

(function($) {
    $.extend = function() {
        alert('extend');
    }
}(window.module = window.module || {}));

6、子模塊

var module = (function($) {
    $.extend = function() {
        alert('extend');
    }
                    
    return $;
}(module || {}));
//子模塊
module.child = (function() {
    var c = {};
    c.name = '村長';
    c.fn = function() {
        console.log(this.name);
    }
    return c;
})();
module.child.fn();