javascript模块化详解

一、模块化的由来

1、最早我们这么写代码

全部方法写在一起，容易命名冲突，并且污染global全局

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

2、简单封装（Namespace模式）

减少了全局的变量，但是仍然可以通过myFunc.foo去操作数据，不安全

var myFunc = {
    _private:'no safe',
    foo: function(){
        console.log(this._private)
    }
}
myFunc._private = 5;
myFunc.foo();

3、匿名闭包（IIFE模式）

函数时javascript中唯一的localScope, 无法操作里面的数据

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

或者

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

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

4、增强，引入依赖

有时候，我们的功能需要依赖模块才能完成，此时需要蒋模块注入进来

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

或者

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

module.foo();