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