模块化目的:
隔离、组织复杂的JavaScript代码
一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。
模块化历程
函数封装
function fn1(){
statement
}
function fn2(){
statement
}
缺点:污染了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间没什么关系。
对象
为了解决上面问题,对象的写法应运而生,可以把所有的模块成员封装在一个对象中
var myModule = {
var1: 1,
var2: 2,
fn1: function(){
},
fn2: function(){
}
}
在希望调用模块的时候引用对应文件,然后
myModule.fn2();
这样避免了变量污染,只要保证模块名唯一即可,同时同一模块内的成员也有了关系
但缺点是外部可以随意修改内部成员
myModel.var1 = 100;
这样就会产生意外的安全问题
立即执行函数
Carousel2 ={
a :1,
init: function(){
console.log(this.a)
}
}
Carousel2 = (function(){
var a = 1 //可以把一些需要隐藏的变量放到这个 ,外界是获取不到的
return {
init: function(){
console.log(a)
}
}
})()
这样在模块外部无法修改我们没有暴露出来的变量、函数
目前,通行的JavaScript模块规范主要有两种:CommonJS和AMD