前端模塊化的那些事兒

一、什麼是模塊？

定義：具有相同屬性和行為的事物的集合

在前端中：將一些屬性比較類似和行為比較類似的內容放在同一個js文件裡面，把這個js文件稱為模塊

目的：為了每個js文件只關注與自身有關的事情，讓每個js文件各行其職

二、什麼是模塊化？CommonJS是什麼？AMD和CMD又是什麼？

①模塊化：指的就是遵守commonjs規範，解決不同js模塊之間相互調用問題

②CommonJS：

1. A.js文件中調用另一個B.js文件，一定要在A.js中引入B.js

require("B.js");n

2. 另一個被調用的js，也就是B.js一定要對外提供介面。

module.exports=B;n

過程如下：

B.js

javascriptnvar b = "Hello,Im module B.";nmodule.exports = b;//暴露一個介面，與b對接。這個介面既可以是函數，也可以是對象，甚至是數組。n

A.js

javascriptnvar _b = require("./B.js");//實際過程中應當是B.js相對於A.js的路徑，這比使用絕對路徑去獲取要規範得多n//此時_b獲得了B.js的介面，這個介面指向B.js中的變數bnconsole.log( _b );//"Hello,Im module B.";n

這就實現了一個簡單的模塊化工作方式，即：

模塊間相互調用，協同工作，實現某特定功能。

④AMD規範：Async Module Define 非同步模塊聲明

⑤CMD規範：Common Module Define 公共模塊聲明

⑥模塊化的核心價值：模塊化最核心的價值在於解決不同文件之間的分工和調用問題，即依賴關係。

三、模塊化的一些工具

• gulp + browerify

• 構建步驟：

1. 安裝gulp

npm install gulp --save-dev //要安裝全局還是本地依賴根據實際情況來n

2. 安裝browserify --save--dev

npm install browserify --save--devn

3. 安裝文件輸出流工具

npm install vinyl-source-stream --save-devn

4. 在gulpfile里編寫任務實現模塊化

gulpfile.js

//基本模塊引入nvar gulp = require(gulp);nvar brow = require(browerify);nvar source = require(vinyl-source-stream);n//任務編寫ngulp.task(bundle, function() {n//將任務交付給browserifyn//brow讀取入口文件後，能自動查找相互之間有依賴的關係的模塊n return brow(./entry.js)n .bundle()//輸出一個文件流變數（gulp的工作機制）n .pipe(source(bundle.js))//將文件流變數輸出為文件n .pipe(gulp.dest(js));//將文件最終輸出n}n n

• webpack

參考[webpack的配置及使用][1]

• requireJS

• 模塊聲明規範：AMD

• 聲明模塊

• 參數1：id 是這個模塊的名稱，它是一個可選參數，默認為require載入此模塊時指定的名稱，若定義這個參數，那麼這個模塊名應當為「頂級」的，不允許相對名稱。

• 參數2：數組，為這個模塊所依賴的其他模塊

• 匿名函數參數：為依賴模塊在這個模塊中的介面，它們是一一對應的，因此即便不需要某個模塊的介面，但若是需要它後面模塊的介面，那也必須給它增加一個用於佔位的參數。

define( id, [ module1, module2 ], function( m1, m2 ) {n return {n arg1: m1,n arg2: m2n }n //返回值即是module3的介面n});n

• 使用步驟

1. 下載requireJS

bower install requirejs//根據個人習慣選擇下載方式，只要保證後續引入的路徑正確n

2. 配置config文件和main.js

config.js

require.config( {n base: ,//引入模塊的起始路徑n //paths對象為要引入的模塊的名稱及路徑，且不需.js後綴，require默認會為文件添加.js後綴n paths: {n jquery: ./jquery-1.11.0//這就引入了juery作為一個模塊。 PS：jquery自己已經實現了AMD，並且jquery是一個頂級模塊名。n }n} );n

main.js

require([jquery], function( $ ) {n $(document).css("background", "#000");//這就實現了引入使用jquery模塊，並用它進行dom操作n});n

3. 在頁面中引入

<script data-main="./main.js" src="./bower-components/requirejs/dist/require.js></script>n//main即是主邏輯入口文件n

• SeaJS

• 模塊聲明規範：CMD

• 聲明模塊

define( function( require, exports, module ) {n var c = require(./Controller.js);n c();n})n

• 使用步驟

1. 下載seajs

bower install seajs//這裡根據個人習慣下載seajs的包，只要引入時路徑正確就行n

2. 配置seajs.config

seajs.config({n base: ./, //模塊起始路徑n})nseajs.use(./main);//使用主邏輯入口文件，相當於requirejs中的data-main文件n

requireJS和SeaJS都是在前端實現模塊化，相當於一個前端的js模塊化載入器，和webpack不一樣，webpack是通過nodejs將文件打包的。

四、模塊化案例

前端mvc架構

• Vue 組件化&模塊化

• React 組件化&模塊化

• node.js 每個文件都是模塊

什麼是MVC

• 後端開發的一種概念

• 前端演變了一套MVC體系：

• veiw( html + css + js )

• controller( 專註於實現服務和邏輯控制的層面叫做控制器 )

• model ( 數據變數 || ajax從服務端取回的數據 )

對外提供一些數據

體現了一種分層的概念，讓每個層面只做自己該做的行為，減少代碼耦合和冗餘

為什麼使用MVC？

低耦合：

MVC將業務分為三層，減少了數據與業務的耦合性，增強了各層次功能的獨立性，使得在需求改變時可能只需要改變其中一層就能完成服務；

復用性高：

三層業務功能分明，耦合度低，使各模塊可以獨立完成自身功能，降低了依賴性，具有很高的復用性。

利於批量生產和擴展：

復用性高使得在批量生產的時候可以根據需求進行模塊的重用，加快了生產效率。並且模塊化使得擴展也非常方便，模塊只需根據規範進行編寫，經審核後引入便可以實現擴展。

利於協作開發：

擴展性強使協作開發也變得非常方便，每個人根據自己的分工設計自己的模塊，不與他人衝突，引入時也各行其職。

推廣普及度高：

由於對協作開發的友好，使得MVC模式大受開發者的歡迎，使用這個模式的產品的推廣和普及變得容易得多。

[1]:webpack的配置及使用>_<!!

[2]:JavaScript 模塊化入門Ⅱ：模塊打包構建

推薦閱讀：