在读了这本书后对前端架构也有了进一步思考。

书中提到

前端架构围绕四个核心:代码、流程、测试、文档

围绕这四个核心及项目经验,我做了如下总结,并结合书中的内容给出相应的解决方案

1. 编码规范

css类名命名无规律

问题暴露

就所在部门来讲,由于前端开发能力欠缺,工程师在对css的编写上天马行空,一时爽就行了。

css类名的命名无规律将会导致可能出现的命名冲突,然后不同的工程师由于不清楚状况就会通过提高自己样式标签的优先级来相互覆盖。最后导致的是经常会有某个功能合并代码之后直接不能用,于是还得花额外的时间来查找问题。

由于命名的不规范,很多标签会有重名的情况,如果只想改一个标签的样式,可能还会涉及到其他多处标签。

关于css代码还有一个问题,就是通用属性值没有相应的变量,想改网站的字体颜色要逐个标签地审查元素来找。

解决方案

  • css命名需要遵循某种规定,如书中提到的OOCSS、SMACSS、BEM方法

  • css命名尽量符合单一职责原则

  • 减少css选择器的层级,因为这不仅影响性能,还会导致样式的节点依赖

  • 使用css预编译工具,如sass、less等,充分利用变量功能

2. 开发流程

代码改动引发灾难

问题暴露

实际项目中,js代码和css代码随着项目的复杂度提高,其耦合性也相应提高。

对于js来说,比较好的设计应该是模块化,所以项目中引入requirejs来进行模块化加载。

然而工程师由于对模块化观念的淡薄以及不熟悉requirejs,他们会自己定义

网友评论