前端不可避免地要跟各种各种浏览器、各种设备打交道，一个非常重要的问题就是兼容性，尤其是目前我们已经习惯了使用ES2015的特性来开发代码，polyfill可以帮助解决我们大部分问题。
记得异常处理
参考：
- JS错误处理 MDN
- js构建ui的统一异常处理方案，这个系列的文章写得非常好
异常处理是代码健壮性的首要保障，关于异常处理有两个方面
- 合适的错误处理可以提要用户体验，在代码出错时优雅地提示用户
- 将错误处理进行封装，可以减少开发量，将错误处理与代码解耦
错误对象
可以通过throw语句抛出一个自定义错误对象
// Create an object type UserExceptionfunction UserException (message){ // 包含message和name两个属性
this.message=message; this.name="UserException";
}// 覆盖默认[object Object]的toStringUserException.prototype.toString = function (){ return this.name + &＃39;: "&＃39; + this.message + &＃39;"&＃39;;
}// 抛出自定义错误function f(){ try { throw new UserException("Value too high");
}catch(e){ if(e instanceof UserException){ console.log(&＃39;catch UserException&＃39;) console.log(e)
}else{ console.log(&＃39;unknown error&＃39;) throw e
}
}finally{ // 可以做一些退出操作，如关闭文件、关闭loading等状态重置
console.log(&＃39;done&＃39;) return 1000 // 如果finally中return了值，那么会覆盖前面try或catch中的返回值或异常
}
}
f() 同步代码
对于同步代码，可以使用通过责任链模式封装错误，即当前函数如果可以处理错误，则在catch中进行处理：如果不能处理对应错误，则重新将catch抛到上一层
function a(){ throw &＃39;error b&＃39;}// 当b能够处理异常时，则不再向上抛出function b(){ try{
a()
}catch(e){ if(e === &＃39;error b&＃39;){ console.log(&＃39;由b处理&＃39;)
}else { throw e
}
}
}function main(){ try {
b()
}catch(e){ console.log(&＃39;顶层catch&＃39;)
}
} 异步代码
由于catch无法获取异步代码中抛出的异常，为了实现责任链，需要把异常处理通过回调函数的方式传递给异步任务
function a(errorHandler) { let error = new Error("error a"); if (errorHandler) {
errorHandler(error);
} else { throw error;
}
}function b(errorHandler) { let handler = e => { if (e === "error b") { console.log("由b处理");
} else {
errorHandler(e);
}
}; setTimeout(() => {
a(handler);
});
}let globalHandler = e => { console.log(e);
};
b(globalHandler); Prmise的异常处理
Promise只包含三种状态：pending、rejected和fulfilled
let promise2 = promise1.then(onFulfilled, onRejected)
下面是promise抛出异常的几条规则
function case1(){ // 如果promise1是rejected态的，但是onRejected返回了一个值（包括undifined），那么promise2还是fulfilled态的，这个过程相当于catch到异常，并将它处理掉，所以不需要向上抛出。
var p1 = new Promise((resolve, reject)=>{ throw &＃39;p1 error&＃39;
})
p1.then((res)=>{ return 1
}, (e)=>{ console.log(e) return 2
}).then((a)=>{ // 如果注册了onReject，则不会影响后面Promise执行
console.log(a) // 收到的是2
})
}function case2(){ // 在promise1的onRejected中处理了p1的异常，但是又抛出了一个新异常，，那么promise2的onRejected会抛出这个异常
var p1 = new Promise((resolve, reject)=>{ throw &＃39;p1 error&＃39;
})
p1.then((res)=>{ return 1
}, (e)=>{ console.log(e) throw &＃39;error in p1 onReject&＃39;
}).then((a)=>{}, (e)=>{ // 如果p1的 onReject 抛出了异常
console.log(e)
})
}function case3(){ // 如果promise1是rejected态的，并且没有定义onRejected，则promise2也会是rejected态的。
var p1 = new Promise((resolve, reject)=>{ throw &＃39;p1 error&＃39;
})
p1.then((res)=>{ return 1
}).then((a)=>{ console.log(&＃39;not run:&＃39;, a)
}, (e)=>{ // 如果p1的 onReject 抛出了异常
console.log(&＃39;handle p2:&＃39;, e)
})
}function case4(){ // // 如果promise1是fulfilled态但是onFulfilled和onRejected出现了异常，promise2也会是rejected态的，并且会获得promise1的被拒绝原因或异常。
var p1 = new Promise((resolve, reject)=>{
resolve(1)
})
p1.then((res)=>{ console.log(res) throw &＃39;p1 onFull error&＃39;
}).then(()=>{}, (e)=>{ console.log(&＃39;handle p2:&＃39;, e) return 123
})
} 因此，我们可以在onRejected中处理当前promise的错误，如果不能，，就把他抛给下一个promise
async
async/await本质上是promise的语法糖，因此也可以使用promise.catch类似的捕获机制
function sleep(cb, cb2 =()=>{},ms = 100) {
cb2() return new Promise((resolve, reject) => { setTimeout(() => { try {
cb();
resolve();
}catch(e){
reject(e)
}
}, ms);
});
}// 通过promise.catch来捕获async function case1() { await sleep(() => { throw "sleep reject error";
}).catch(e => { console.log(e);
});
}// 通过try...catch捕获async function case2() { try { await sleep(() => { throw "sleep reject error";
})
} catch (e) { console.log("catch:", e);
}
}// 如果是未被reject抛出的错误，则无法被捕获async function case3() { try { await sleep(()=>{}, () => { // 抛出一个未被promise reject的错误
throw &＃39;no reject error&＃39;
}).catch((e)=>{ console.log(&＃39;cannot catch:&＃39;, e)
})
} catch (e) { console.log("catch:", e);
}
} 更稳定的第三方模块
在实现一些比较小功能的时候，比如日期格式化等，我们可能并不习惯从npm找一个成熟的库，而是自己顺手写一个功能包，由于开发时间或者测试用例不足，当遇见一些未考虑的边界条件，就容易出现BUG。
这也是npm上往往会出现一些很小的模块，比如这个判断是否为奇数的包：isOdd，周下载量居然是60来万。
使用一些比较成熟的库，一个很重要原因是，这些库往往经过了大量的测试用例和社区的考验，肯定比我们顺手些的工具代码更安全。
一个亲身经历的例子是：根据UA判断用户当前访问设备，正常思路是通过正则进行匹配，当时为了省事就自己写了一个
export function getOSType() { const ua = navigator.userAgent const isWindowsPhOne= /(?:Windows Phone)/.test(ua) const isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone const isAndroid = /(?:Android)/.test(ua) // 判断是否是平板
const isTablet = /(?:iPad|PlayBook)/.test(ua) ||
(isAndroid && !/(?:Mobile)/.test(ua)) ||
(/(?:Firefox)/.test(ua) && /(?:Tablet)/.test(ua)) // 是否是iphone
const isIPhOne= /(?:iPhone)/.test(ua) && !isTablet // 是否是pc
const isPc = !isIPhone && !isAndroid && !isSymbian && !isTablet return {
isIPhone,
isAndroid,
isSymbian,
isTablet,
isPc
}
} 上线后发现某些小米平板用户的逻辑判断出现异常，调日志看见UA为
"Mozilla/5.0 (Linux; U; Android 8.1.0; zh-CN; MI PAD 4 Build/OPM1.171019.019) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.108 Quark/3.8.5.129 Mobile Safari/537.36
即使把MI PAD添加到正则判断中临时修复一下，万一后面又出现其他设备的特殊UA呢？所以，凭借自己经验写的很难把所有问题都考虑到，后面替换成mobile-detect这个库。
使用模块的缺点在于
- 可能会增加文件依赖体积，增加打包时间等，这个问题可以通过打包配置解决，将不会经常变更的第三方模块打包到vendor文件中配置缓存
- 在某些项目可能会由于安全考虑需要减少第三方模块的使用，或者要求先进行源码code review
当然在进行模块选择的时候也要进行各种考虑，包括稳定性、旧版本兼容、未解决issue等问题。当选择了一个比较好的工具模块之后，我们就可以将更多的精力放在业务逻辑中。
本地配置文件
在开发环境下，我们可能需要一些本地的开关配置文件，这些配置只在本地开发时存在，不进入代码库，也不会跟其他同事的配置起冲突。
我推崇将mock模板托管到git仓库中，这样可以方便其他同事开发和调试接口，带来的一个问题时本地可能需要一个引入mock文件的开关
下面是一个常见的做法：新建一个本地的配置文件config.local.js，然后导出相关配置信息
// config.local.jsmodule.exports = { needMock: true} 记得在.gitignore中忽略该文件
config.local.js
然后通过try...catch...加载该模块，由于文件未进入代码库，在其他地方拉代码更新时会进入catch流程，本地开发则进入正常模块引入流程
// mock/entry.jstry { const { needMock } = require(&＃39;./config.local&＃39;) if (needMock) { require(&＃39;./index&＃39;) // 对应的mock入口
console.log(&＃39;====start mock api===&＃39;)
}
} catch (e) { console.log(&＃39;未引入mock，如需要，请创建/mock/config.local并导出 {needMock: true}&＃39;)
} 最后在整个应用的入口文件判断开发环境并引入
if (process.env.NODE_ENV === &＃39;development&＃39;) { require(&＃39;../mock/entry&＃39;)
} 通过这种方式，就可以在本地开发时愉快地进行各种配置，而不必担心忘记在提交代码前注释对应的配置修改~
Code Review
参考：
Code Review应该是是上线前一个必经的步骤，我认为CR主要的作用有
对于一个需要长期维护迭代的项目而言，每一次commit和merge都是至关重要的，因此在合并代码之前，最好从头检查一遍改动的代码。即使是在比较小的团队或者找不到审核人员，也要把合并认真对待。
小结
本文主要整理了提高Javascript代码健壮性的一些方法，主要整理了
- 安全地访问对象属性，避免数据异常导致代码报错
- 捕获异常，通过责任链的方式进行异常处理或上报
- 使用更稳定更安全的第三方模块，
- 认真对待每一次合并，上线前先检查代码
此外，还需要要养成良好的编程习惯，尽可能考虑各种边界情况。
以上就是Javascript提高前端代码强大的一些方法，很好！的详细内容，更多请关注 第一PHP社区 其它相关文章！
京公网安备 11010802041100号