仅Firefox出现jQuery.Deferred异常：first未定义问题求助

嘿，我帮你梳理下这个Firefox独有的问题，其他浏览器正常说明大概率是DOM元素访问的兼容性或变量作用域导致的：

问题根源分析 #

1. 变量重复声明的作用域坑：你在if块里又用了var first，这会触发JavaScript的变量提升——相当于在函数顶部重新声明了一次first。如果if条件不满足或者DOM元素获取失败，这个内部的first就可能变成undefined，后续调用trim()自然报错。
2. 未检查DOM元素是否存在：当document.querySelectorAll('.breadcrumbs .breadcrumb')返回的元素数组长度小于2时，访问索引[1]会得到undefined，再获取outerText直接导致first变成undefined。Firefox对这类未定义值的处理比Chrome/IE更严格，所以只有它抛出了异常。
3. outerText的兼容性小问题：虽然现在主流浏览器都支持outerText，但它属于非标准属性，Firefox早期版本对它的处理和其他浏览器有差异，换成标准的textContent会更稳妥。

修复后的代码 #

每处修改都加了注释说明：

$( document ).ready(function() {
 var customer = {{{json customer}}};
 var first = '';
 var second = '';
 var third = '';
 console.log(customer);
 var customer_id = '{{customer.customer_group_id}}';
 customer_id = customer_id * 1;
 console.log(customer_id);
 
 if(customer_id == 2 || customer_id == null || customer_id == 0){
 console.log('I am running');
 // 先把匹配到的元素存起来，方便检查长度
 var breadcrumbs = document.querySelectorAll('.breadcrumbs .breadcrumb');
 // 先判断元素数量足够，再访问索引[1]
 if(breadcrumbs.length > 1){
   // 用标准的textContent替代outerText，去掉重复的var声明
   first = breadcrumbs[1].textContent;
   first = first.trim();
   console.log("First ::" + first);
 } else {
   console.log('找不到第二个面包屑元素');
 }
 }
});

额外优化建议 #

既然你已经在用jQuery，完全可以用它的方法简化代码，兼容性更有保障：

$( document ).ready(function() {
 // ... 其他代码不变
 if(customer_id == 2 || customer_id == null || customer_id == 0){
 console.log('I am running');
 // jQuery会自动处理元素不存在的情况，代码更简洁
 first = $('.breadcrumbs .breadcrumb').eq(1).text().trim();
 console.log("First ::" + first);
 }
});

jQuery遇到不存在的元素时，text()会返回空字符串，trim()也不会报错，省去了手动判断元素是否存在的步骤。

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