JavaScript模塊化的作用是什么

JavaScript模塊化的作用是什么？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

JavaScript可以做什么

1.可以使網(wǎng)頁(yè)具有交互性，例如響應(yīng)用戶點(diǎn)擊，給用戶提供更好的體驗(yàn)。 2.可以處理表單，檢驗(yàn)用戶的輸入，并提供及時(shí)反饋節(jié)省用戶時(shí)間。 3.可以根據(jù)用戶的操作，動(dòng)態(tài)的創(chuàng)建頁(yè)面。 4使用JavaScript可以通過(guò)設(shè)置cookie存儲(chǔ)在瀏覽器上的一些臨時(shí)信息。

一、模塊化概念

將一個(gè)復(fù)雜的程序依據(jù)一定的規(guī)則(規(guī)范)封裝成幾個(gè)塊(文件), 并進(jìn)行組合在一起；塊的內(nèi)部數(shù)據(jù)與實(shí)現(xiàn)是私有的, 只是向外部暴露一些接口(方法)與外部其它模塊通信。

二、模塊化作用

為什么要用模塊化的JavaScript？

因?yàn)樵趯?shí)際的開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)遇到變量、函數(shù)、對(duì)象等名字的沖突，這樣就容易造成沖突，還會(huì)造成全局變量被污染；
同時(shí)，程序復(fù)雜時(shí)需要寫(xiě)很多代碼，而且還要引入很多類庫(kù)，這樣稍微不注意就容易造成文件依賴混亂；
為了解決上面的的問(wèn)題，我們才開(kāi)始使用模塊化的js，所以說(shuō)模塊化的作用就是：

• 避免全局變量被污染

• 便于代碼編寫(xiě)和維護(hù)

三、模塊化歷程

1、普通寫(xiě)法（全局函數(shù)及變量）

其實(shí)只要是不同的函數(shù)或變量放一起就是簡(jiǎn)單的模塊，這樣弊端很明顯，就是變量容易被污染；

var name = '卡卡';
function cat1(){
    name = '年年';
}
function cat2(){
    name = '有魚(yú)';
}

2、對(duì)象封裝

將整個(gè)模塊放在一個(gè)對(duì)象里面，外部訪問(wèn)時(shí)直接調(diào)用對(duì)象的屬性或者方法就行

var cat = {
    name:'卡卡',
    cat1:function(){
        var name = '年年';
        console.log(name);
    },
    cat2:function(){
        var name = '有魚(yú)';
        console.log(name);
    }
}
cat.name;// 卡卡
cat.cat1();// 年年
cat.cat2();// 有魚(yú)

這種方法雖然解決了變量沖突問(wèn)題，但是容易被外部隨意修改：

cat.name = '樓樓';

3、匿名函數(shù)方式

var cat = (function () {
    // 匿名函數(shù)的局部變量name
    var name = '卡卡';
    // 匿名函數(shù)的局部函數(shù)cat1
    var cat1 = function () {
        var name = '年年';
        console.log(name);
    };
    // 匿名函數(shù)的局部函數(shù)cat2
    var cat2 = function () {
        var name = '有魚(yú)';
        console.log(name);
    };
    //通過(guò)window暴露一個(gè)對(duì)外的口，想要被外界訪問(wèn)，可以放到這里
    window.myModule = {
        cat1:cat1,
        cat2:cat2,
        name:name,
    };
})();
console.log(myModule.name);// name變量放入暴露口內(nèi)，可以輸出，結(jié)果為：卡卡
myModule.cat1();// cat1函數(shù)放入暴露口內(nèi)，可以輸出，結(jié)果為：年年
myModule.cat2();// cat2函數(shù)放入暴露口內(nèi)，可以輸出，結(jié)果為：有魚(yú)

如果把變量name移除，此時(shí)再訪問(wèn)就訪問(wèn)不了，結(jié)果為undefined，這樣就實(shí)現(xiàn)了變量不被隨意修改的問(wèn)題，即：

window.myModule = {
    cat1:cat1,
    cat2:cat2,
};
console.log(myModule.name);// undefined

匿名函數(shù)方式基本上解決了函數(shù)污染及變量隨意被修改問(wèn)題，這個(gè)也是模塊化規(guī)范的基石！

四、模塊化方案

根據(jù)匿名函數(shù)自調(diào)用的方式，同時(shí)為了增強(qiáng)代碼依賴性，現(xiàn)在大部分JavaScript運(yùn)行環(huán)境都有自己的模塊化規(guī)范；

可以分為：Commonjs、AMD、CMD、ES6 module四大類

1、CommonJS

①在node環(huán)境下使用，不支持瀏覽器環(huán)境
②NodeJS遵循的規(guī)范
③使用require()進(jìn)行引入依賴
④使用exports進(jìn)行暴露模塊

2、AMD

①瀏覽器環(huán)境下的異步加載模塊
②RequireJS遵循的規(guī)范
③依賴于require.js模塊管理工具庫(kù)
④AMD 推崇依賴前置

3、CMD

①瀏覽器環(huán)境下，同時(shí)支持異步和同步加載
②SeaJS遵循的規(guī)范
③CMD 推崇依賴就近

4、ES6 module

ES6模塊化語(yǔ)法在編譯時(shí)就能確定模塊的依賴關(guān)系，還能確定好輸入輸出的變量聲明，已經(jīng)不僅僅是模塊規(guī)范，現(xiàn)在已經(jīng)作為JS語(yǔ)言的標(biāo)準(zhǔn)語(yǔ)法使用，有以下特性：

①瀏覽器環(huán)境、服務(wù)器環(huán)境都支持
②編譯時(shí)就能確定模塊的依賴關(guān)系及變量，其他模塊規(guī)范都是在運(yùn)行時(shí)確定的
③export命令用于規(guī)定模塊的對(duì)外接口
④import命令用于輸入其他模塊提供的功能

關(guān)于JavaScript模塊化的作用是什么問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。