JavaScript 简化空值链式访问的篱式技巧与框架实践

JavaScript 空值链式访问的常见陷阱

首先观察以下代码片段：

if (node.nextSibling.className == ...) {

当 node 或 node.nextSibling 为 null 时，上述代码会抛出错误。因此，常规的解决方案是编写如下代码：

if ((node) && (next = node.nextSibling) && ... ) {

然而，随着判断条件的增加，代码结构会变得如下所示：

if (

(node) &&

(node.nextSibling) &&

(node.nextSibling.className == ...)

随着判断条件的不断增加，代码的可读性会显著下降，显得杂乱无章。

使用默认值简化条件判断

这里有一个小技巧可以简化条件判断表达式。我们可以引入一个空对象 {} 或数字 0 作为默认值来替代：

if ( next = (node || 0).nextSibling) ) {

基于此思路，上述代码可以改写为：

if (((node || 0).nextSibling || 0).className == ...) {

--Split--

框架实践与代码可读性权衡

从某种角度来看，这种写法确实使代码更加精简。但在实际开发中，尤其是在多人协作的场景下，这种写法可能会给其他开发人员带来理解上的困扰。

正如小马所指出的，如果项目中已经使用了特定的框架，则需要具体问题具体分析。例如，对于上述的条件判断，如果使用 YUI 框架，可以采用以下方式：

YAHOO.util.Dom.hasClass(el, className)

这种方式不仅代码更加精简，而且相比前面的链式访问技巧，更易于理解和维护。