對於JS模組化的解析

這篇文章主要介紹了關於JS模組化的解析，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

一、理解

# 1、什麼是模組、模組化？

將一個複雜的程式依據一定的規格封裝成幾個文件，並進行組合在一起

2、為什麼要模組化？

降低複雜度，提高解耦性，部署方便

3、模組化的好處

• 避免命名衝突（減少命名空間污染）

• 更好的分離，按需載入

• #更高復用性

• 高可維護性

4、頁面引入加載script

二、模組化規格

1、CommonJS（node根據該規範編寫）

說明：

每個檔案都可以當做一個模組

在伺服器端：模組的載入是運行時同步載入的

在瀏覽器端：模組需要提前編譯打包處理

基本語法：

模組引入：require（xxx）

　　第三方模組：xxx為模組名稱

　　自訂模組：xxx為模組檔案路徑

暴露模組：exports.xxx = value 和module.exports = value

#　　暴露的模組本質是exports 物件  

　　exports本身是一個空物件 exports.xxx = value是為exports物件新增屬性或方法

　　module.exports = value 是直接用value新物件來覆寫原來的空白物件

##實作：

#伺服器端實作：Node .js

瀏覽器端實作：Browserify （CommonJS的瀏覽器端的打包工具）

##下載安裝browserify

　　全域：npm install browserify -g

　　局部：npm install browserify --save-dev

定義模組程式碼（ js檔案程式碼並揭露對應內容）

引入模組  在app.js 中用require引入模組但是瀏覽器不認識require方法，需要打包處理js

　　在根目錄下終端輸入browserify js/src/app.js -o js/dist/bundle.js  （js/src/app.js來源檔案js/dist/bundle.js 是打包輸出的檔案)

頁面使用引入：

141d4ec63c56a0a7523a7f892721960e2cacc6d41bbb37262a98f745aa00fbf0（瀏覽器真正跑的是打包生成的檔案）

#2、AMD

說明：

專用於瀏覽器端的模組化規範，模組的載入是異步的

基本語法：

定義暴露模組：

　//定义没有依赖的模块：
　　define(function(){
　　　　return 模块
　　})
　　//定义有依赖的模块：
　　define(['module1','module2'],function(m1,m2){
　　　　return 模块
　　})

介紹使用模組：

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

實作（瀏覽器端）：

Require.js

3、CMD（了解）

說明：專門用於瀏覽器端，模組的載入是異步的，模組使用時才會載入執行

基本語法：

定義暴露模組：

　//定义没有依赖的模块：
　　define(function(require,exports,module){
　　　　exports.xxx = value
　　　　module.exports = value
　　})
　　//定义有依赖的模块：
　　define(function(require,exports,module){
　　　　//引入依赖模块(同步)
　　　　var module2 = require("./module2")
　　　　//引入依赖模块（异步）
　　　　require.async("./module3",function(m3){
　　　　})
　　　　//暴露模块
　　　　exports.xxx = value
　　})

引入使用模組：

require(function(require){
　　　　var m1 = require('./module1')
　　　　var m4 = require('./module4')
　　　　m1.show()
　　　　m4.show()
　　})

實作（瀏覽器端）：Sea.js

4、ES6

說明：依賴模組需要編譯打包處理

語法：

　　導出模組：export xxx

　　引入模組：import  xxx from "url"

#頁面引入

實作（瀏覽器端）：

　　使用Babel將ES6編譯為ES5程式碼

　　使用Browserify編譯打包js

#以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

對於Javascript載入的解析

#關於javascrip的立即執行函數的解析

以上是對於JS模組化的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！