模塊化與組件化的區(qū)別

1. 模塊化解耦復(fù)雜度，即將功能分成小塊
2. 組件化我理解為可復(fù)用的功能，比如寫一個輪播組件，基于Vue框架的UI組件庫中的一個組件
3. 以下主要討論模塊化的歷史

最初

在一個index.html里的script塊里我們直接寫很多js代碼

隨后

用引入一個js文件替代這種方式。在js文件里的代碼不斷增多時，可以把一個js中不同功能的部分抽離出來，寫成多個js文件。

1. MVC

一個js文件中的代碼又可用MVC來設(shè)計，具有很好的可讀性。

2. 依賴順序

<script src="a.js"></script>
<script src="b.js"></script>

這種方式下，依然需要用script方式引入多個js文件，嚴(yán)重依賴于引入順序，若b模塊依賴a模塊，則順序錯誤時便會出錯。
import export的方式解決了這一問題，明確了每部分模塊的依賴關(guān)系。

Node.js出世

適用于服務(wù)器端的規(guī)范——CommonJs

• 使用require來獲取依賴模塊
• 不能用于瀏覽器端

瀏覽器端的模塊解決方案

1. AMD（Asynchronous Module Definition）規(guī)范

• 非原生
• RequireJs實現(xiàn)

2. CMD（Common Module Definition）規(guī)范

• 玉伯，自立門戶
• 非原生
• SeaJs實現(xiàn)

3. AMD和CMD差異

• 主要在于何時加載和運(yùn)行依賴項？
• AMD 聲明依賴后即將依賴模塊運(yùn)行
• CMD在需要依賴時才會運(yùn)行依賴模塊。

統(tǒng)一規(guī)范

CommnJs，RequireJs，SeaJs，眾多規(guī)范看起來實在頭疼，好在es6要解決模塊問題了

1. ES6Module

在之前眾多非原生解決方案后，ES6提出module模塊，以export，import方式來解決依賴問題。
但是目前瀏覽器還未支持，因此不能直接運(yùn)行。一般使用babel將其轉(zhuǎn)為瀏覽器能運(yùn)行的版本（向過去轉(zhuǎn)換）

2. 特性

• ES6中，import引入的依賴在編譯時加載或稱為靜態(tài)加載

Ref

• js模塊化歷程
• JavaScript模塊化開發(fā)的演進(jìn)歷程