一、模塊化概念

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

二、模塊化作用

為什么要用模塊化的JavaScript？

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

避免全局變量被污染 便于代碼編寫和維護三、模塊化歷程1、普通寫法（全局函數(shù)及變量）

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

var name = ’卡卡’;function cat1(){ name = ’年年’;}function cat2(){ name = ’有魚’;}2、對象封裝

將整個模塊放在一個對象里面，外部訪問時直接調用對象的屬性或者方法就行

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

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

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 = ’有魚’;console.log(name); }; //通過window暴露一個對外的口，想要被外界訪問，可以放到這里 window.myModule = {cat1:cat1,cat2:cat2,name:name, };})();console.log(myModule.name);// name變量放入暴露口內，可以輸出，結果為：卡卡myModule.cat1();// cat1函數(shù)放入暴露口內，可以輸出，結果為：年年myModule.cat2();// cat2函數(shù)放入暴露口內，可以輸出，結果為：有魚

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

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

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

四、模塊化方案

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

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

1、CommonJS

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

2、AMD

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

3、CMD

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

4、ES6 module

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

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

這里補充一點：ES5版本的模塊化方案，僅在語言的層面上實現(xiàn)了模塊化，缺點在于無法直接運行在大部分 JavaScript 運行環(huán)境下，必須通過構建工具轉換成標準的 ES5 后才能正常運行，這里就需要使用自動化構建工具webpack。

以上就是詳解Js模塊化的作用原理和方案的詳細內容，更多關于Js模塊化的資料請關注好吧啦網(wǎng)其它相關文章！