• 如何构建高复用、低耦合、可扩展的全自动前端工作流


    // 今年剩下的时间,就用来专门研究这个课题,完成这篇文章了。

    前端工作流,顾名思义就是指前端开发的工作流程了。

    我目前大致就是以下流程:

    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连上服务器后替换文件了事,小作坊这样没啥问题,大公司肯定会骂出翔。

    这是在知乎上看到大公司大神的玩法:大公司里怎样开发和部署前端代码?

  • 相关阅读:
    CopyOnWriteArrayList 写时复制思想
    CAS中ABA问题的解决
    彻底解决Chrome“请停用以开发者模式运行的扩展程序”提示(亲测整合)
    解决软件安装无法自定义文件夹,自动安装在C盘 (Windows系统)
    IDEA降低注解检测级别
    大白话带你认识JVM(转)
    Windows 与 Linux (CentOS7) 之间的文件共享
    Dubbo、Zookeeper 以及 Tomcat 启动的相关问题
    创建 maven 项目的时候遇到的问题
    MyBatis 项目的 jar 包导入与源码导入
  • 原文地址:https://www.cnblogs.com/macliu/p/11482509.html
Copyright © 2020-2023  润新知