如何构建高复用、低耦合、可扩展的全自动前端工作流
2019-09-07 19:31 盛世游侠 阅读(1266) 评论(0) 编辑 收藏 举报// 今年剩下的时间,就用来专门研究这个课题,完成这篇文章了。
前端工作流,顾名思义就是指前端开发的工作流程了。
我目前大致就是以下流程:
1、模块划分:
分析整个项目的UI界面设计图和交互流程设计,提炼UI界面特征和交互流程特征的共性,来划分为可复用和不可复用的模块,提炼出可以复用的公共模块,做成可以复用和配置的公共模块组件。
提炼不同层级的公用模块,很多人都能想到,但是体现模块划分水平高低的点在于“模块划分的粒度”,太细则会过于繁琐,太粗则灵活性差,不方便拆分。
2、代码划分:
有人可能觉得这步多余,认为划分了模块,直接每个模块独立分下去编码就是了。但这样必然会造成很多冗余代码。
最直接的冗余例子就是:css全局样式各个模块自己来一套,最后不但会冗余还会相互干扰。
所以,这步必然要划分出的全局共用的JS、CSS代码,典型的就是一些常用的JS库和CSS库。
此外,一些项目模块共用的交互或业务逻辑也可以提炼出来作为共用代码,为了保证低耦合性而设计的一些框架性的代码和模块,也可以划分出来作为共用代码。
这里需要注意的还是提炼共用代码时的粒度,不要为提炼而提炼,为复用而复用,复用的目的是为了减少工作量,提高可扩展性,减少bug。需要自己去衡量保证合用就好。
3、代码编写:
这步属于纯体力活,且能自动化的部分好像不多,但也不是没有。
典型的:处理css前缀的autoprefixer、把ES6转为ES5的babel、把less转为css等。
另外,还有各种牛逼IED的语法提示和自动补全,用CSS选择器语法快速编写HTML的EMMET等,熟练使用这些以后,代码编写这步还是很省力的了。
4、资源的处理和引用:
这里主要是想解决图片、字体、声音、视频、动画等资源怎样才能最方便、快捷、高效、低成本的处理成自己想要的样子,并十分方便的引用(对于我这种懒人来说,最好一键全自动[笑哭])。
图片处理无非是精灵图合并、或者大图分割或等分、或者图片自动抠背景。
字体无非是希望能有查找方便的字库,像iconfont一样,点了就可以直接下载到本地指定的项目文件夹里,并且把里面的css自动添加到需要引用的css文件的对应位置里去,然后打开demo页,我直接复制过来用就是了。
声音、视频、动画,一般用得不多,用也无非就是配置好引用地址和参数即可,这个参数如果有规律的话,可以考虑自动化,没规律的haul,还是要自己配置。
还有公用的JS、CSS库等,我不希望要用的时候,到处去搜索引擎搜,去官网找。
我希望有个这样的页面:
我用过的CSS库、JS库都在上面,像google历史记录一样,能记录我什么时候使用了哪些库。但我不希望像历史记录一样只按时间排序,应该还要能按使用频率排序。这样我就能很快找到我常用的。
当然我也希望能搜索,以免使用某个不常用的库时找很久。
当我找到我要用的库并点击时,页面能给我这个库的官网和文档链接,我点击“确定使用”时,能记录一次使用次数。
5、测试:
这步又分为单元测试和集成测试。
单元测试我就理解为“模块测试”了,集成测试我就理解为模块组装为项目UI界面以后的总体测试了。
由于经历的公司大多没有专门的测试部门,通常都是前端组相互交叉人工测试各自的代码,对于测试了解不多,并不清楚这部分使用工作流能自动化到什么程度。
我猜,要是有专门的测试部门,最多也就是按项目模块的测试设计来专门编写单元测试代码,然后使用类似gulp或grunt等任务管理工具,建立一个任务,自动运行所有模块的测试代码,并生成测试报告日志文件,然后自动下发给各模块对应的前端开发同事?
6、打包、压缩、部署:
打包、压缩,目前都是用的webpack4,开发模式的热更新,改动一下就自己刷新浏览器实时看效果,还不错。
部署还是用的土办法,ftp连上服务器后替换文件了事,小作坊这样没啥问题,大公司肯定会骂出翔。
这是在知乎上看到大公司大神的玩法:大公司里怎样开发和部署前端代码?