Web重構工做主要是語義化排版文檔信息，排版文檔信息的最佳實現就是基於OOP分離分割結構、樣式、行爲。html
分離分割皆爲解耦。webpack
分離，使HTML、CSS、JavaScript三基石職責清晰，HTML邏輯化內容，CSS視覺呈現，JavaScript承載控制、驅動、交互；web
分割就是模塊化、組件化，對系統各業務各功能按必定粒度進行分割、解耦、獨立處理，減小冗餘，提高可靠性、統一性、複用性、擴展性、維護性。gulp
各業務各功能涉及到基礎層、中間層、應用層呈現交互等技術環節，同時受制於工程需求、項目週期、角色協做等因素，分割粒度粗細要把控好，找到合適的平衡點。babel
模塊化、組件化都是爲了解耦和封裝，把事務分割成小單元；框架
模塊化側重的是拆分、接口和功能；ide
組件化側重的是重用、呈現和交互。模塊化
Web重構，不能經過文件的組織分佈來談模塊化、組件化，要從OOP的角度去分析和實現，尤爲是SPA開發，結構、樣式、腳本文件組織不一樣於傳統的Web開發方式，其側重JavaScript在控制、驅動、交互方面的承載力，SPA中JavaScript決定一切。工具
分離
分離HTML、CSS、JavaScript，不限於文件方式隔離，以OOP思想做爲指導。組件化
不可在HTML結構標籤上寫行內樣式，
不可在HTML結構標籤上定義DOM0級事件，
不經過JavaScript在標籤上操做 style 屬性控制樣式。
分割
在分離的基礎上再各個進行分割。
HTML結構，分割成站點級和頁面級主幹結構、柵格結構、組件結構，
CSS結合預處理分割成Variables/變量、Mixins/混合、Utilities/輔助類(normalize, reset, visibility, position …)、Layout/佈局(section/grid)、Components/組件(alert, popover, modal, dropdown, tooltip, accordion, tabs, slide, media …)、Pages/頁面、Themes/主題等單元，
JavaScript根據選定的CommonJS、AMD、CMD、ES6等規範，並結合引入的框架和庫定義模塊和組件，分割成Common/通用、Components/組件、View/頁面等單元，
組合構建
最後，使用Gulp、Webpack、Rollup、Babel等工具及相關插件組合模塊和組件，打包構建成目標宿主環境支持的代碼。
Web重構中的模塊化、組件化實現，是對模塊和組件的定義與加載管理。
（本篇結束）
許可協議：自由轉載-保持署名-非商業性使用-禁止演繹 (CC BY-NC-ND 4.0)
By 小可 from https://xinlu.ink/tech/pro-web-reconstruction-7-decoupling.html