前端工程化、模塊化、組件化

工程化

    前端工程化是一種高層次思想而不是某種技術，所謂前端工程化就是將前端項目當成一項系統工程進行分析、組織和構建從而達到項目結構清晰、分工明確、團隊配合默契、開發效率提高的目的。而模塊化和組件化是爲工程化思想下相對較具體的開發方式，因此可以簡單的認爲模塊化和組件化是工程化的表現形式。

前端工程化分爲三個大階段

• 技術選型
• 構建優化
• 模塊化開發，組件化開發

模塊化

    模塊化主要體現的是一種分而治之的思想。分而治之是軟件工程的重要思想，是複雜系統開發和維護的基石。

模塊化的優勢

• 提高維護性
• 提高代碼複用率
• 方便依賴關係的管理
• 可以避免變量污染，命名衝突

三種模塊化規範

    1. CommonJS

    根據 CommonJS 規範，一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域，也就是說，在該模塊內部定義的變量，無法被其他模塊讀取，除非定義爲global對象的屬性。

    2. AMD

    AMD 即 Asynchronous Module Definition，中文名是異步模塊定義的意思。AMD規範通過 define 方法去定義模塊，通過require方法去加載模塊。RequireJS 實現了這種規範。

    3. CMD

    CMD 即 Common Module Definition 通用模塊定義，是 SeaJS 在推廣過程中對模塊定義的規範化產出。

模塊化規範： https://blog.csdn.net/fu983531588/article/details/89309242

組件化

• 頁面上的每個獨立的、可視/可交互區域視爲一個組件
• 每個組件對應一個工程目錄,組件所需的各種資源都在這個目錄下就近維護
• 由於組件具有獨立性，因此組件與組件之間可以 自由組合
• 頁面只不過是組件的容器，負責組合組件形成功能完整的界面
• 當不需要某個組件，或者想要替換組件時，可以整個目錄刪除/替換

    組件化將頁面視爲一個容器，頁面上各個獨立部分例如：頭部、導航、焦點圖、側邊欄、底部等視爲獨立組件，不同的頁面根據內容的需要,去盛放相關組件即可組成完整的頁面。

PS： 模塊化和組件化一個最直接的好處就是複用,同時我們也應該有一個理念,模塊化和組件化除了複用之外還有就是分治,我們能夠在不影響其他代碼的情況下按需修改某一獨立的模塊或是組件,因此很多地方我們及時沒有很強烈的複用需要也可以根據分治需求進行模塊化或組件化開發。