样式、结构、行为分离

Web 重构工作主要是语义化排版文档信息，排版文档信息的最佳实现就是基于 OOP、DDD 分离分割结构、样式、行为。

分离分割皆为解耦。

分离，使 HTML、CSS、JavaScript 三基石职责清晰，HTML 逻辑化内容，CSS 视觉呈现，JavaScript 承载控制、驱动、交互；

分割就是模块化、组件化，对系统各业务各功能按一定粒度进行分割、解耦、独立处理，减少冗余，提升可靠性、统一性、复用性、扩展性、维护性。

各业务各功能涉及到基础层、中间层、应用层呈现交互等技术环节，同时受制于工程需求、项目周期、角色协作等因素，分割粒度粗细要把控好，找到合适的平衡点。

模块化、组件化都是为了解耦和封装，把事务分割成小单元；

模块化侧重的是拆分、接口和功能；

组件化侧重的是重用、呈现和交互。

Web 重构，不能通过文件的组织分布来谈模块化、组件化，要从 OOP、DDD 的角度去分析和实现，尤其是 SPA 开发，结构、样式、脚本文件组织不同于传统的 Web 开发方式，其侧重 JavaScript 在控制、驱动、交互方面的承载力，SPA 中 JavaScript 决定一切。

分离

分离 HTML、CSS、JavaScript，不限于文件方式隔离，以 OOP、DDD 思想作为指导。

不可在 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 重构中的模块化、组件化实现，是对模块和组件的定义与加载管理。

---

更新日志：

• 2015-07-17