一、模块化的由来
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();
二、模块化规范
1、commonjs
暴露模块:默认exports是{}, 第一种相当于把exports覆盖了,第二种相当于时往exports中添加属性。
- module.exports = value;
- exports.xxx = value;
引入模块:
- 引入第三方模块: require(包的名称)
- 引入自定义模块: require(模块的文件路径)
实现:
- 服务器端:node环境直接使用
- 浏览器端:使用browserify打包工具 否则浏览器不能识别