Redux源码中的编程技巧(一)之手动抛出异常帮助定位代码

Redux是一款优秀的状态管理库, 它的设计巧妙, 可扩展性强, API简单易懂. 或许会有很多人以为实现Redux的代码量会很多, 然而事实恰恰相反. Reudx的核心代码只包含了不到10个js文件, 其中还有3个文件是辅助函数. 在阅读Redux源码时, 本人发现其中有一些很有意思的编程技巧, 遂整理并发出来与大家分享.

在 src/utils.warning.js中, 有这样一段代码:

export default function warning(message) {
  /* eslint-disable no-console */
  if (typeof console !== 'undefined' && typeof console.error === 'function') {
    console.error(message)
  }
  /* eslint-enable no-console */
  try {
    // This error was thrown as a convenience so that if you enable
    // "break on all exceptions" in your console,
    // it would pause the execution at this line.
    throw new Error(message)
  } catch (e) {} // eslint-disable-line no-empty
}

其中的这段代码:

try {
  throw new Error(message)
} catch (e) {}

在 try 代码块中手动抛出一个异常, 并在捕获异常后不作任何处理. 如果源码中没有注释的话, 就会令人疑惑: 为什么要手动抛出一个异常呢? 而良心的注释告诉了读者, 这样处理时为了方便开发者定位出错的代码.

在使用Chrome的Debugger时, 开启 Pause on exceptions 选项, 并勾选其下方的 Pause On Caught Exceptions选项, 这样当代码中有任何异常(包括在 try 代码块中被捕获到的异常)抛出时, Debugger都会将代码暂停在抛出异常的那一行. 这样的话再结合查看调用栈, 就可以很快地定位到是哪里的代码出现了问题.