模塊化目的:
隔離、組織復雜的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