谈谈前端产品质量控制
谈谈前端产品质量控制
近段时间一直在负责前端团队的通用技术产品,比如各类统计平台、通用脚手架、客户端工具等,这类工具的特点是用户数量相对较多,且易引起线上报错。接手这些工作以来一直是胆战心惊,尝试用一些方法让自己每天不用如此胆战心惊。
于是,工作中我有意地将部分注意力集中在 “如何保证前端产品质量?” 这个问题上。
实话实说,目前负责的产品质量方面的进展并没有多大,探索这个过程需要时间,也需要试错。下面是我在实践过程中的一些小技巧,仅供参考。
下文就从下面几个角度谈上面的问题:
- 代码质量
- 测试质量
- 运行质量
- 其他
代码质量
代码质量 ≈ xxlint
除了代码格式外,各类 lint(eslint、lesslint 等)可以帮助开发者发现不易察觉的代码逻辑问题。
测试质量
- 单元测试保证
无论是开源产品,还是内部产品,单元测试是产品可靠性的重要保证。
在一些场景下,比如临时的活动页面,可能来不及做单元测试,投入产出比不高,没有单元测试还可以接受。
但一些通用产品或持续时间比较长的产品,非常建议添加单元测试。
- 持续集成
github 等平台均有免费的持续集成服务,每次修改代码提交后可以自动运行各类检测脚本。
公司内网可根据自身情况处理。
- 测试覆盖率
除了单元测试,测试覆盖率也是个重要的指标。单元测试了多少百分比的代码,有哪些代码还没有测试到,通过各类覆盖率工具可以轻松获取。
这对质量保证而言非常重要。
运行质量
全网通用的埋点脚本报错了,页面基本也就白屏了,这是不可接受的。
“未料胜,先料败”,这句话同样适用于 Coder。
我们需要在通用脚本运行时捕获到各类错误,不至于因为它的报错影响页面的运行。
再具体一些,其实就是 “JavaScript 错误捕获” 的方式问题。
try ... catch ...
是最常用的方案,好处很多,它能反映调用栈(部分浏览器除外)。
但 js 方法的触发是基于循环、事件等方式触发,不是定义即执行的,那么,在每个函数中都加上 try catch
的成本未免太大了。我们把通用逻辑抽离出来,改造原有函数,使之具有 try catch
功能。
代码如下:
try.js
module.exports = function(fn, backupFn) {return function() {try {fn.apply(this, arguments);} catch(err) {console.warn('err: ', err);if (!backupFn || typeof backupFn !== 'function') {return;}var args = Array.prototype.slice.call(arguments, 0);args.unshift(err);backupFn.apply(this, args);}};
};
user.js
var fn = function() {console.log(a); // will throw error
};fn(); // throw Error: a is not definedfn = tryjs(fn);fn(); // catched
其他
这里主要说的是工具支持。
大家都很清楚,测试非常重要,但实际在公司产品运行过程中,除了专业的测试人员外,开发人员自测涉及的:单元测试、测试覆盖率、持续集成、代码质量检查... ... 在很多团队并没有完全普及,主要原因还是因为比较麻烦。
而且很多工作都是重复性的,那么,是否可以通过工具帮助开发者快速的建立比较完整的质量监控手段呢,我认为是可行的,下一步也要做这样的工具。
完。
谈谈前端产品质量控制相关推荐
- 云谦:谈谈前端框架的趋势与实践
云谦:谈谈前端框架的趋势与实践
- MODIS产品质量控制文件使用方法
目录 官方关于产品质量控制的说明(机翻) MCTK处理QA文件 QA文件筛选质量可靠像元 筛选前后对比 官方关于产品质量控制的说明(机翻) 质量指标 在生产过程中生成的CoreMetadata.0全局 ...
- 基于git hooks的前端代码质量控制解决方案
基于git hooks的前端代码质量控制解决方案 原文:https://github.com/kuitos/kuitos.github.io/issues/28 国际惯例先说下故事背景 通常情况下,如 ...
- 前端自学经验总结分享,顺便谈谈前端该如何自学
前端自学经验总结分享,顺便谈谈前端该如何自学 写在前面 作者非科班出身,本科学的是自动化专业,平时也能接触一些计算机编程方面的知识,因而对编程比较感兴趣.工作后正好赶上团队调整,采用主流的前后端分离的 ...
- 1024节谈谈 “前端性能优化” 背刺面试官
一. 前言 性能是前端面试的常考问题,也是系统的一个重要的指标,随着项目日渐庞大,都会涉及到优化的问题这也是为什么我想写这么一篇文章,在工作的过程中,我们也常常遇到这个问题. 假如某天你的老板突然问你 ...
- 谈谈 SAP 产品 UI 开发中的组件概念
这是 Jerry 2021 年的第 54 篇文章,也是汪子熙公众号总共第 331 篇原创文章. 任何企业级软件的前端开发,都离不开组件(Component)这个概念.撇开具体的 UI 开发技术不谈,所 ...
- 信贷系统学习总结(2)——现金贷之借贷模式与前端产品
前言 一切以业务先行,先有业务,再有产品. 一.业务模式 互联网借贷自P2P起衍生了很多模式,现金贷相关的主要有三种: 1. 交易中介模式 (1)模式说明: 即P2P模式,典型代表如陆金所.平台作为中 ...
- 总结 10 年前端经验,谈谈前端人如何更快地成长
常言道:三十年河东.三十年河西.这句话放到前端领域,就要变成 "十年河东.十年河西",甚至每隔三五年,前端行业的技术格局就会大面积翻新.对于资深的前端开发者来说,已经适应了这种更新 ...
- 大前端产品哀悼日变灰的整套方案
目前主流产品的前端展示,不外乎h5 pcweb 移动web,Android原生.iOS原生.flutter 等跨平台技术. 上次默哀日的时候我还是一个app开发者,也写过类似文章,就不多赘述. 整体思 ...
最新文章
- oracle 取前10条记录
- [Leetcode] Binary Tree PosterOrder Travel
- Numpy-浅拷贝和深拷贝
- python0x80070005拒绝访问_PowerShell启用winrm失败:拒绝访问 0x80070005 -2147024891
- 2019有的图纸打印出来看不清楚_CAD制图初学入门:CAD打印实用技巧
- Mysql学习总结(72)——MySQL 开发者开发,设计规范再总结
- (转)Python 面向对象编程(一)
- 05-文件与流-课堂测试(四则运算)
- require(): open_basedir restriction in effect. 解决方法
- python支持esc退出_听说你不会用mac电脑装Python?看了这篇文章,秒懂!
- linux 串口 断帧,STM32f103使用串口中断发送数据时出现断帧是什么原因?
- MRP游戏软件常见问题解答以及破解方法!(新手必看)
- linux 打包qt可执行文件
- 使用 border 属性制作三角形
- 广告商业形态与应用架构
- 史上最经典摇滚柔情曲15首
- yocto_evn compile project whithconfigure
- PHP接口_短信发送接口
- 毕业三年,我从鉴黄师转行到阿里做前端
- 关于某大型企业应用集成现状的思考
热门文章
- Spring-整合多个配置文件
- java8 LocalDate 日期比较大小
- php每天扒取当天新闻_php 抓取新浪新闻的程序代码
- 5m 云服务器2核4g_阿里云服务器2核4gb
- 在云服务器上搭建ftp站点
- java中输出时 什么作用_JAVA中输入和输出处理(Java I/O)重点总结
- mysql的date函数可以干啥,MySql的Date函数
- ext store 数据修改_Go 数据存储篇(一):基于内存存储实现数据增删改查功能...
- java 时间l_java中获取系统时间并格式化输出
- 为什么python不出结果_Python 的 Checksum 为什么结果是一长串数字而不是如下效果...