前端模塊化的發展

近年來Web應用變得更加複雜與龐大，Web前端技術的應用範圍也更加普遍。經過直接編寫JavaScript、CSS、HTML開發 Web 應用的方式已經沒法應對當前 Web 應用的發展

模塊化

模塊化是指將一個複雜的系統分解爲多個模塊以方便編碼。好久之前開發網頁要經過命名空間的方式來組織代碼。這樣作有不少問題，其中包括：

• 命名空間衝突
• 沒法合理地管理項目的依賴和版本
• 沒法方便地控制依賴的加載順序

當項目變大時，這種方式將變得難以維護，須要用模塊化的思想來組織代碼。

CommonJS

一種被普遍使用的JavaScript模塊化規範，其核心思想是經過require方法來同步加載依賴的其餘模塊，經過module.export導出須要暴露的接口。它的流行得益於Node.js採用了這種方法，它的有點是：

• 代碼可複用於node.js環境下
• 有不少遵循此規範的Npm包

AMD

也是一種JavaScript模塊化規範，與CommonJS最大的不一樣在於，它採用了異步的方式去加載依賴的模塊。表明實現是requirejs.

ES6模塊化

ECMA提出的JavaScript模塊化規範。

樣式文件中的模塊化

除了JavaScript開始進行模塊化改造，前端開發裏的樣式文件也支持模塊化，好比SCSS

新框架

在Web應用變得龐大、複雜時，採用直接操做DOM的方式去開發會使代碼變得複雜和難以維護。

1. React框架引入了jsx語法到JavaScript語言層面中，能夠更靈活地控制視圖的渲染邏輯。
2. Vue框架將與一個組件相關的HTML模板、JavaScript邏輯代碼、CSS樣式代碼都寫在一個文件裏面，這很是直觀。
3. Angular推崇採用TypeScript語言開發應用，而且能夠經過註解的語法描述組件的各類屬性。