样式、结构、行为分离

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/页面等单元,

组合构建

最后,使用 Gulpopen in new windowWebpackopen in new windowRollupopen in new windowBabelopen in new window 等工具及相关插件组合模块和组件,打包构建成目标宿主环境支持的代码。

Web 重构中的模块化、组件化实现,是对模块和组件的定义与加载管理。


更新日志:

  • 2015-07-17

(本篇结束)

CC BY-NC-ND 4.0

Last Updated: 2021/7/10下午8:54:57
Contributors: xianghongai