javascript提高前端代码强大的案例分析

　　介绍

这篇文章给大家分享的是有关javascript提高前端代码强大的案例分析的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

在过去的开发经历中处理了各种奇葩错误,认识到代码健壮性(鲁棒性)是提高工作效率,生活质量的一个重要指标,本文主要整理了提高代码健壮性的一些思考。

之前整理过关于代码健壮性相关的文章

    <李>正儿八经地写javascript之单元测试李 <>李如何在代码中打日志李

本文将继续探究除了单元测试,打日志之外其余一些帮助提高javascript代码健壮性的方法。

更安全地访问对象

不要相信接口数据

不要相信前端传的参数,也不要信任后台返回的数据

比如某个<代码> api/xxx/列表> { 　　代码:0, 　　味精:““, 　　数据:[//咛迨? 　　), 　　};复制代码

前端代码可能就会写成

const{代码、味精、数据}=等待fetchList () 　　data.forEach(()=在{})复制代码

因为我们假设了后台返回的数据是一个数组,所以直接使用了<代码> data.forEach>

    <李>预期在没有数据时数据会返回<代码>[]空数组,但后台的实现却是不返回<代码> 字数据段李 <李>后续接口更新,数据从数组变成了一个字典,跟前端同步不及时李

这些时候,使用<代码>数据。forEach>

未捕获TypeError:数据。forEach不是一个函数

所以在这些直接使用后台接口返回值的地方,最好添加类型检测

Array.isArray(数据),,data.forEach(()=在{})复制代码

同理,后台在处理前端请求参数时,也应当进行相关的类型检测。

空值合并运算符

由于JavaScript动态特性,我们在查询对象某个属性时如<代码> x.y。z> 和<代码> y 是否存在

让z=x,,x。y,和x.y。z复制代码

经常这么写就显得十分麻烦,飞镖中安全访问对象属性就简单得多

var z=? .y ?还是z;复制代码

在ES2020中提出了<强>空值合并运算符强劲的草案,包括<代码> ? ? 和<代码> ?。运算符,可以实现与飞镖相同的安全访问对象属性的功能。目前打开最新版Chrome就可以进行测试了

javascript提高前端代码强大的案例分析

在此之前,我们可以封装一个安全获取对象属性的方法

函数getObjectValueByKeyStr (obj,关键,defaultVal=未定义){如果(!键)返回defaultVal;让名称空间=key.toString () .split (“!”);我们的价值, 　　我=0, 　　len=namespace.length;(;我& lt;兰;我+ +){ 　　值=https://www.yisu.com/zixun/obj名称空间[[我]];如果(值===定义| |值===null)返回defaultVal; 　　obj=价值; 　　}返回值; 　　}var x={y: {z: 100}}; var val=getObjectValueByKeyStr (x, y.z ");//var val=getObjectValueByKeyStr (x,“zz”); console.log (val);复制代码

前端不可避免地要跟各种各种浏览器,各种设备打交道,一个非常重要的问题就是<强>兼容性强,尤其是目前我们已经习惯了使用ES2015的特性来开发代码,<代码> polyfill>

记得异常处理

参考:

    <李> JS错误处理MDN李 <李> JS构建ui的统一异常处理方案,这个系列的文章写得非常好李

异常处理是代码健壮性的首要保障,关于异常处理有两个方面

    <李>合适的错误处理可以提要用户体验,在代码出错时优雅地提示用户李 <>李将错误处理进行封装,可以减少开发量,将错误处理与代码解耦李

错误对象

可以通过把语句抛出一个自定义错误对象

//创建一个对象类型UserExceptionfunction UserException(消息){//包含消息和名称两个属性 　　this.message=消息;this.name=癠serException"; 　　}//覆盖默认(对象对象)的toStringUserException.prototype。toString=function(){返回this.name + & # 39;:“& # 39;+。消息+ & # 39;“& # 39; 　　}//抛出自定义错误函数f(){{尝试把新的UserException(“价值也引起); 　　}捕捉(e){如果(e instanceof UserException) {console.log(& # 39;抓住UserException& # 39;) console.log (e) 　　其他}{console.log(& # 39;未知错误# 39;)把e 　　} 　　最后}{//可以做一些退出操作,如关闭文件,关闭加载等状态重置 　　console.log(& # 39;完成# 39;)返回1000//如果终于中了返回值,那么会覆盖前面或查明中的返回值或异常 　　} 　　} 　　f()复制代码

javascript提高前端代码强大的案例分析