JS模塊化

時間 2019-11-09

原文原文鏈接

代碼：https://github.com/zhengyeye/JS-modularity

什麼是模塊、模塊化？

將一個複雜的程序依據必定的規則(規範)封裝成幾個塊(文件), 並進行組合在一塊兒；javascript

塊的內部數據/實現是私有的, 只是向外部暴露一些接口(方法)與外部其它模塊通訊。html

爲何要模塊化？

當項目功能愈來愈多，代碼量便也會愈來愈多，後期的維護難度會增大，此時在JS方面就會考慮使用模塊化規範去管理，想要什麼功能，就加載什麼模塊，但前提是你們在編寫代碼時須要使用同一規範。
如今最流行的模塊化規範有：CommonJs,、AMD、CMD、以及ES6。java

模塊化的好處：

1.避免命名衝突(減小命名空間污染)；node

2.更好的分離, 按需加載；git

3.更高複用性；es6

4.高可維護性。github

CommonJS規範

1.在服務器端: 模塊的加載是運行時同步加載的；api

2.在瀏覽器端: 模塊須要提早編譯打包處理；瀏覽器

CommonJS是Node.js使用的模塊化標準。在CommonJS中，有一個全局性方法require()，用於加載模塊。服務器

基本語法：

暴露模塊：（本質都是暴露exports這個對象，module.exprots={}就是一個空對象）

①module.exports = value；

②exports.xxx = value；

引入模塊：

1 require(xxx);  //第三方模塊:xxx爲模塊名
2                     //自定義模塊: xxx爲模塊文件路徑

1 //文件A
2 module.exports = {...}  
3  ....
4       
5 //文件B
6 var a = require('./foo/bar')

實現方式：

①服務器端：Node.js；

app.js爲主入口文件，使用命令行：node app.js即可啓起服務，看到控制檯打印的數據；

②瀏覽器端：Browserify（也稱爲CommonJS的瀏覽器端的打包工具）；

二者區別：①Node.js運行時動態加載模塊(同步)；②Browserify是在轉譯(編譯)時就會加載打包(合併)require的模塊。

index.html爲主入口文件，在瀏覽器中打開此頁面，正常運行即可看到控制檯打印的數據；可是，這樣去報錯了：

Uncaught ReferenceError: require is not defined
    at app.js:9

瀏覽器並不認識app.js中的方法，所以便須要將app.js編譯打包處理成爲它所能識別的文件，因而在項目根目錄下使用命令行：

browserify js/src/app.js -o js/dist/bundle.js

這句話的意思就是找到js/src/app.js文件，並將它-o：output 輸出爲 js/dist/bundle.js，這樣再在index.html中引入bundle.js文件後，即可（dist文件夾能夠爲空，也可讓其自行建立）。

AMD規範(Asynchronous Module Definition(異步模塊定義))

1.AMD:專門用於瀏覽器端, 模塊的加載是異步的；

基本語法:

①定義暴露模塊

1 //定義沒有依賴的模塊
2 define(function(){
3     return 模塊
4 })

1 //定義有依賴的模塊
2 define(['module1', 'module2'], function(m1, m2){
3     return 模塊
4 })

②引入使用模塊：

1 require(['module1', 'module2'], function(m1, m2){
2     使用m1/m2
3 })

實現方式：

瀏覽器端：Require.js

CMD規範( Common Module Definition(通用模塊定義))

1.CMD:專門用於瀏覽器端, 模塊的加載是異步的;

2.專門用於瀏覽器端, 模塊的加載是異步的 ;

3.模塊使用時纔會加載執行；

4.較其餘使用次數少。

基本語法：

①定義暴露模塊：相似於CommonJS

1 //定義沒有依賴的模塊
2 define(function(require, exports, module){
3     exports.xxx = value
4     module.exports = value
5 })

 1 //定義有依賴的模塊
 2 define(function(require, exports, module){
 3     //引入依賴模塊(同步)
 4     var module2 = require('./module2')
 5     //引入依賴模塊(異步)
 6       require.async('./module3', function (m3) {
 7         
 8       })
 9     //暴露模塊
10     exports.xxx = value
11 })

②引入使用模塊

1 define(function (require) {
2     var m1 = require('./module1')
3     var m4 = require('./module4')
4     m1.show()
5     m4.show()
6 })

實現方式：

瀏覽器端：Sea.js

CMD：不嚴謹的講，其實就是集合commonjs+AMD的特色。

ES6

目前主流規範。AMD與CMD均比較commonjs繁瑣，而es6最簡潔。

1.ES6；

2.依賴模塊須要編譯打包處理(部分瀏覽器不支持)；

語法：

①導出模塊: export

②引入模塊: import

實現方式：

瀏覽器端：

①使用Babel將ES6編譯爲ES5代碼；

②使用Browserify編譯打包js。

在index.html中使用（在html中引入的js文件必須爲編譯事後的文件）：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!-- <script type="text/javascript" src="js/src/app.js"></script> -->
 9     <script type="text/javascript" src="js/lib/bundle.js"></script>
10 </body>
11 </html>