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