无废话网页重构系列——(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/页面等单元,

组合构建

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

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

(本篇结束)

许可协议:*转载-保持署名-非商业性使用-禁止演绎 (CC BY-NC-ND 4.0)

By 小可 from https://xinlu.ink/tech/pro-web-reconstruction-7-decoupling.html

上一篇:《Spark大数据分析:核心概念、技术及实践》一3.9 共享变量


下一篇:CSS 的优先级机制[总结]