无废话网页重构系列——（7）布局(区块、栅格)、模块组件(module)

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

分离分割皆为解耦。

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

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

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

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

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

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

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