Ionic v1 anchorScroll函数do-while循环空指针错误修复方案咨询

问题背景 #

使用已停止支持的Ionic v1，发现一处未被记录的anchorScroll函数BUG：生产环境数千次会话中仅出现约十几次，无法复现，推测触发场景为模态框内包含160条数据的ng-repeat列表滚动时（此前该列表最多20条数据）。相关BUG提及仅有两处：一是与collection-repeat特性相关（未使用该特性），二是本人此前提交的问题。

错误代码与报错信息 #

出错代码位于ionic.bundle.js第60723行：

self.anchorScroll = function(shouldAnimate) {
  self.resize().then(function() {
    if (!scrollView) {
      return;
    }
    var hash = $location.hash();
    var elm = hash && $document[0].getElementById(hash);
    if (!(hash && elm)) {
      scrollView.scrollTo(0, 0, !!shouldAnimate);
      return;
    }
    var curElm = elm;
    var scrollLeft = 0, scrollTop = 0;
    do {
      if (curElm !== null) scrollLeft += curElm.offsetLeft;
      if (curElm !== null) scrollTop += curElm.offsetTop;
      curElm = curElm.offsetParent;
    } while (curElm.attributes != self.element.attributes && curElm.offsetParent);  // ERROR HERE
    scrollView.scrollTo(scrollLeft, scrollTop, !!shouldAnimate);
  });
};

触发的错误信息：

Exception = null is not an object (evaluating 'curElm.attributes')
Stack = @ionic://attendago/lib/ionic/js/ionic.bundle.js:60723:22
processQueue@ionic://attendago/lib/ionic/js/ionic.bundle.js:29132:30
@ionic://attendago/lib/ionic/js/ionic.bundle.js:29148:39
completeOutstandingRequest@ionic://attendago/lib/ionic/js/ionic.bundle.js:19199:15
@ionic://attendago/lib/ionic/js/ionic.bundle.js:19475:33

补丁方案分析 #

方案一：修改while循环条件 #

} while (curElm && curElm.attributes != self.element.attributes && curElm.offsetParent);

该方案直接在循环条件最前端增加curElm &&判断，确保只有当curElm不为null时，才会继续判断后续条件，从根源避免了访问null对象的attributes属性导致的报错。同时保留了原逻辑的终止条件，不会破坏正常的滚动计算逻辑。

方案二：在curElm赋值时增加空值检查 #

if (curElm !== null) curElm = curElm.offsetParent;

该方案仅在curElm不为null时才执行offsetParent赋值，但无法阻止curElm.offsetParent本身为null的情况——当元素的offsetParent为null时，curElm仍会被赋值为null，进入下一次循环判断时依然会触发curElm.attributes的访问错误，无法彻底解决问题。

更优方案建议 #

在方案一的基础上，建议将条件中的!=改为!==以保持严格相等判断，避免潜在的类型转换问题：

} while (curElm && curElm.attributes !== self.element.attributes && curElm.offsetParent);

同时，考虑到原循环中已经对curElm做了非空判断来累加滚动值，该补丁不会影响正常逻辑，且能完全覆盖curElm为null的边界场景，适合无法复现BUG的生产环境补丁需求。

内容的提问来源于stack exchange，提问作者rolinger