一、模組化概念

將一個複雜的程式依據一定的規則(規範)封裝成幾個塊(檔案),並進行組合在一起；塊的內部資料與實現是私有的,只是向外部暴露一些介面(方法)與外部其它模組通訊。

二、模組化作用

為什麼要用模組化的javascript？

因為在實際的開發過程中，經常會遇到變數、函式、物件等名字的衝突，這樣就容易造成衝突，還會造成全域性變數被汙染；
同時，程式複雜時需要寫很多程式碼，而且還要引入很多類庫，這樣稍微不注意就容易造成檔案依賴混亂；
為了解決上面的的問題，我們才開始使用模組化的js，所以說模組化的作用就是：

• 避免全域性變數被汙染
• 便於程式碼編寫和維護

三、模組化歷程

1、普通寫法（全域性函式及變數）

其實只要是不同的函式或變數放一起就是簡單的模組，這樣弊端很明顯，就是變數容易被汙染；

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

2、物件封裝

將整個模組放在一個物件裡面，外部訪問時直接呼叫物件的屬性或者方法就行

var cat = {
    name:'卡卡',cat1:function(){http://www.cppcns.com
        var name = '年年';
        console.log(name);
    },cat2:function(){
        var name = '有魚';
        console.log(name);
    }
}
cat.name;// 卡卡
cat.cat1();// 年年
cat.cat2();// 有魚

這種方法雖然解決了變數衝突問題，但是容易被外部隨意修改：

cat.name = '樓樓';

3、匿名函式方式

var cat = (function () {
    // 匿名函式的區域性變數name
    var name = '卡卡';
    // 匿名函式的區域性函式cat1
    var cat1 = function () {
        var name = '年年';
        console.log(name);
    };
    // 匿名函式的區域性函式cat2
    var cat2 = function () {
        var name = '有魚';
        console.log(name);
    };
    //通過window暴露一個對外的口，想要被外界訪問，可以放到這裡
    window.myModule = {
        cat1:cat1,cat2:cat2,name:name,};
})();
console.log(myModule.name);// name變數放入暴露口內，可以輸出，結果為：卡卡
myModule.cat1();// cat1函式放入暴露口內，可以輸出，結果為：年年
myModule.cat2();// cat2函式放入暴露口內，可以輸出，結果為：有魚

如果把變數name移除，此時再訪問就訪問不了，結果為undefined，這樣就實現了變數不被隨程式設計客棧意修改的問題，即：

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

匿名函式方式基本上解決了函式汙染及變數隨意被修改問題，這個也是模組化規範的基石！

四、模組化方案

根據匿名函式自呼叫的方式，同時為了增強程式碼依賴性，現在大部分javaScripnxcBdpt執行環境都有自己的模組化規範；

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

1、CommonJS

①在node環境下使用，不支援瀏覽器環境
②NodeJS遵循的規範
③使用require()進行引入依賴
④使用exports進行暴露模組

2、AMD

①瀏覽器環境下的非同步載入模組
②RequireJS遵循的規範
③依賴於require.js模組管理工具庫
④AMD 推崇依賴前置

3、C程式設計客棧MD

①瀏覽器環境下，同時支援非同步和同步載入
②SeaJS遵循的規範
③CMD 推崇依賴就近

4、程式設計客棧ES6 module

ES6模組化語法在編譯時就能確定模組的依賴關係，還能確定好輸入輸出的變數宣告，已經不僅僅是模組規範，現在已經作為JS語言的標準語法使用，有以下特性：

①瀏覽器環境、伺服器環境都支援
②編譯時就能確定模組的依賴關係及變數，其他模組規範都是在執行時確定的
③export命令用於規定模組的對外介面
④import命令用於輸入其他模組提供的功能

這裡補充一點：ES5版本的模組化方案，僅在語言的層面上實現了模組化，缺點在於無法直接執行在大部分 JavaScript 執行環境下，必須通過構建工具轉換成標準的 ES5 後才能正常執行，這裡就需要使用自動化構建工具webpack。

以上就是詳解Js模組化的作用原理和方案的詳細內容，更多關於Js模組化的資料請關注我們其它相關文章！