詳解Js模塊化的作用原理和方案
一、模塊化概念
將一個復雜的程序依據一定的規則(規范)封裝成幾個塊(文件), 並進行組合在一起;塊的內部數據與實現是私有的, 隻是向外部暴露一些接口(方法)與外部其它模塊通信。
二、模塊化作用
為什麼要用模塊化的JavaScript?
因為在實際的開發過程中,經常會遇到變量、函數、對象等名字的沖突,這樣就容易造成沖突,還會造成全局變量被污染;
同時,程序復雜時需要寫很多代碼,而且還要引入很多類庫,這樣稍微不註意就容易造成文件依賴混亂;
為瞭解決上面的的問題,我們才開始使用模塊化的js,所以說模塊化的作用就是:
- 避免全局變量被污染
- 便於代碼編寫和維護
三、模塊化歷程
1、普通寫法(全局函數及變量)
其實隻要是不同的函數或變量放一起就是簡單的模塊,這樣弊端很明顯,就是變量容易被污染;
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、匿名函數方式
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, cat2:cat2, }; console.log(myModule.name);// undefined
匿名函數方式基本上解決瞭函數污染及變量隨意被修改問題,這個也是模塊化規范的基石!
四、模塊化方案
根據匿名函數自調用的方式,同時為瞭增強代碼依賴性,現在大部分JavaScript運行環境都有自己的模塊化規范;
可以分為:Commonjs、AMD、CMD、ES6 module四大類
1、CommonJS
①在node環境下使用,不支持瀏覽器環境
②NodeJS遵循的規范
③使用require()進行引入依賴
④使用exports進行暴露模塊
2、AMD
①瀏覽器環境下的異步加載模塊
②RequireJS遵循的規范
③依賴於require.js模塊管理工具庫
④AMD 推崇依賴前置
3、CMD
①瀏覽器環境下,同時支持異步和同步加載
②SeaJS遵循的規范
③CMD 推崇依賴就近
4、ES6 module
ES6模塊化語法在編譯時就能確定模塊的依賴關系,還能確定好輸入輸出的變量聲明,已經不僅僅是模塊規范,現在已經作為JS語言的標準語法使用,有以下特性:
①瀏覽器環境、服務器環境都支持
②編譯時就能確定模塊的依賴關系及變量,其他模塊規范都是在運行時確定的
③export命令用於規定模塊的對外接口
④import命令用於輸入其他模塊提供的功能
這裡補充一點:ES5版本的模塊化方案,僅在語言的層面上實現瞭模塊化,缺點在於無法直接運行在大部分 JavaScript 運行環境下,必須通過構建工具轉換成標準的 ES5 後才能正常運行,這裡就需要使用自動化構建工具webpack。
以上就是詳解Js模塊化的作用原理和方案的詳細內容,更多關於Js模塊化的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 淺談JS前端模塊化的幾種規范
- JavaScript中require和import的區別詳解
- Js模塊打包exports require import的用法和區別
- JavaScript 模塊化詳解
- js 模塊化CommonJS AMD UMD CMD ES6規范詳解