try{ //正常执行 }catch(e/*你感觉会出错的 错误类型*/){ // 可能出现的意外 eg:用户自己操作失误 或者 函数少条件 不影响下面的函数执行 // 有时也会用在 比如 focus() 但可恶的ie有可能会第一次没有focus事件 再让他执行一次 // 有时一些不是bug的bug 在ie上 他要求必须加上 catch 哪怕就一个空catch 以前在ie8上遇到过这个操蛋的js问题 }

    try catch的使用,永远应该放在你的控制范围之内,而不应该防范未知的错误。也就是说你很清楚知道这里是有可能”出错“的,而且你很清楚知道什么前提下会出错,你就是要故意利用报错信息来区分错误,后续的程序会解决所有的出错,让程序继续执行。
如果让用户先发现你根本没预料到的错误,而不是你先发现错误,你是失职的。

    大多数情况下,try catch适用于以下几种场合:

    浏览器原罪的场合

    也就是兼容性场合,因为浏览器兼容性不是程序员能改正的,所以只能try catch:由于不同浏览器的报错提示是不一样的,根据捕获的浏览器的报错提示判断用户的浏览器,然后做出对应的措施,这时候使用try catch是巧妙的办法,如果用if就比较笨拙,因为if通常只能反馈真或假,不能直接反馈浏览器的报错内容。

    判断代码非法性

    window.a.b是非法的,再跟2对比就没有意义,这样非法的条件,在try catch中仍可以继续运行下去。但在if中window.a.b已经报错,整个页面都会坏掉。如果希望用if写,那么必须先判断window.a是否是合法的,window.a是合法的前提下再判断window.a.b是不是合法的,如果也是合法的,再判断window.a.b是否不等于2,这样是不是很蠢?这时就体现出try catch的妙处了,程序不但知道window.a.b !== 2是假的,而且直接可以知道究竟哪一步就已经是假的。
再想象一下,有一个变量是json.a.b.c,其中的a/b/c都可能是存在的也可能是不存在的,全看具体情况,这时候你简单的写if (json.a.b.c === 2) {...}是不行的,因为json.a.b就可能已经是非法的,所以你如果用if,就要考虑a是不是非法的、a是合法前提下b是不是非法的,b是合法前提下c是不是非法的。但是json.a.b.c === 2在try中就可以直接写,也就是说,我不关心究竟a/b/c谁是非法的,我只关心json.a.b.c到底是不是等于2,不等于2或者任何一步出错,对我来讲没有区别,反正都是不等于2,我不关心哪步出错,而且程序不会坏掉。这是一种比较省心的写法。

    PS:try catch不能做真假判断,只能做非法判断。也就是说:try {1 === 2},虽然1===2是假,但是是合法的,catch不会捕捉到错误,也不会告诉你1 === 2到底是真是假。所以,写在try里的应该是json.a.b.c而不是json.a.b.c === 2。究竟是不是等于2,是后面的事,是if干的事。简单说,try catch用于捕捉报错,当你不关心哪一步错误,只关心有没有错,就用try catch。

try {
window.a.b !== 2
}
catch(err){
alert(err) // 可执行
alert(123) // 可执行
} if (window.a.b !== 2) {
alert("error") // 不执行
}
alert(123); // 不执行

    事情还有得挽回,换条路走  

    

try {
// 执行某个逻辑
} catch (e) {
// 出问题鸟,换个逻辑执行
}

    体面的退出  

try {
// 正常流程
} catch (e) {
// 弹个框告诉用户不好意思出了点问题
// 如果是用户的错就告诉用户什么地方错了
// 如果是程序的错,就告诉用户不好意思没法执行
}

写在结尾:

  

    异常处理和错误处理是两个不同的概念。例如NodeJS里大多数error都是用来处理异常的,因为异常是不可避免的,例如数据库挂了,网络错误,你虽然知道有可能,但是不知道何时发生,这些异常你需要捕捉或者传给上层。而错误处理,则是一些基本的判定,可以从代码级别避免其发生,可预知可推测,如果发生了,不是系统问题,而是你的程序有bug了。

    对于NodeJS来说,两种错误都时刻需要注意,特别是系统错误,因为不可预知,需要大量代码来catch错误,传递错误,最后统一处理。

    而对于前端,系统错误出现的场景相对来说低得多,主要是一些io场景,大部分前端可能不太关心。而普通的错误处理,则比较常见,因为前端耦合的特定系统比较多,和这些系统操作的时候,数据和dom啊什么的大多是可预知的,跟系统错误还是要区分开的,一些错误,需要你自己去吞并和处理,如果出现错误,显然是bug,而不是不可预知。

JS的 try catch 前端使用场景(尽管不多还是会用到)的更多相关文章

  1. 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题(二)-callback,promise,generator,async-await JS的进阶技巧 前端面试送命题(一)-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制

    [原创]分布式之数据库和缓存双写一致性方案解析(三)   正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...

  2. JS 使用try catch捕获异常

    JS 使用try catch捕获异常 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 简介 前端是攻克客户的先锋,需要特别注意到 ...

  3. Angular JS - 8 - SeaJS与前端模块化

    一.前端模块化 关于前端模块化,参考以下链接 : https://github.com/seajs/seajs/issues/547 http://www.cnblogs.com/huiguo/cat ...

  4. 整理部分JS 控件 WEB前端常用的做成Jsp项目,方便今后直接用

    整理部分JS 控件  WEB前端常用的做成Jsp项目,方便今后直接用 最近又没时间了,等用时间了,再加入更多的, 源码下载: http://download.csdn.net/detail/liang ...

  5. JS中 try...catch...finally (转)

    JS的try..catch..finally var array = null; try { document.write(array[0]); } catch(err) { document.wri ...

  6. 前端常用场景总结CSS/JS/插件(实用篇更新中...)

    <div class="box box1"> <span>垂直居中</span> </div> .box1{ display: ta ...

  7. JS的 try catch使用心得

    try{ //正常执行 }catch(e/*你感觉会出错的 错误类型*/){ // 可能出现的意外 eg:用户自己操作失误 或者 函数少条件 不影响下面的函数执行 // 有时也会用在 比如 focus ...

  8. js的try catch使用心得

      1 try catch的使用,永远应该放在你的控制范围之内,而不应该防范未知的错误.也就是说你很清楚知道这里是有可能”出错“的,而且你很清楚知道什么前提下会出错,你就是要故意利用报错信息来区分错误 ...

  9. PDF.JS 读取文件流前端展示 C#

    最近再搞PDF得展示问题,因为aspose.pdf成本太高,只能使用pdf.js这个开源强大的前端东东了. 在百度了很久后 网上大都是node,java,php的事例,有位大哥的是C#的后台代码按他写 ...

随机推荐

  1. code rain???

    Everybody loves the visual effect of the falling binary code known as ” Rain ” in The Matrix. In thi ...

  2. 极限学习机(Extreme Learning Machine)学习笔记

    最近研究上了这个一个东西--极限学习机. 在很多问题中,我大多会碰到两个问题,一个是分类,另一个就是回归.简单来说,分类是给一串数打个标签,回归是把一串数变为一个数. 在这里我们需要处理的数据一般维度 ...

  3. 火狐不支持webp格式的图片

    <!DOCTYPE html> <html lang="en"> <style> ul{list-style: none;} li{float: ...

  4. 4.1_springboot2.2任务之异步、定时、邮件任务

    1.异步任务 ​ 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实,在Spri ...

  5. JS对象 JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性和方法。

    什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法: ...

  6. K8S之部署Dashboard

    转载声明 本文转载自:ASP.NET Core on K8S深入学习(2)部署过程解析与部署Dashboard 1.Yaml安装 下载yaml文件 wget https://raw.githubuse ...

  7. Django项目基础配置和基本使用

    博文配置内容包括: django项目的创建 django项目下应用的创建及配置 数据库的配置 templates模板的配置 命令行创建项目: 在需要的目录下创建Django项目输入命令:django- ...

  8. 天才ACM

    天才ACM 给定一个整数m,定义一个集合的权值为从这个集合中任意选出m对数(不够没关系,选到尽可能选,凑不成对的舍去),每对数两个数的差的平方的和的最大值. 现在给出一个数列\(\{a_i\}\),询 ...

  9. 关于OpenLiveWriter出错的修补方法

    OpenLiveWriter使用一段时间后可能会打不开,提示错误如下: 这是只需要把电脑的.net更新到4.6以上版本就可以了.

  10. react 实现类似vue中的<keep-alive>的功能,并解决antd-mobile切换回来时的空白

    在移动端的spa页面中,只要使用到了路由就很有必要使用到状态保存的功能,这样才能保证在页面进行切换的时候,让用户可以看到刚才滑动的地方,让用户的体验更加友好.这儿我找到了react-router-ca ...