面向对象开发模态组件时，jQuery转原生JS遇document.querySelector不可达错误咨询

不可达代码报错的直接诱因 #

定位到你代码中add_button_ctrl方法的写法：

add_button_ctrl: function() {
    return modal
        .body_el()
        document.querySelector('[data-ctrl="add-button"]');
},

JS语法解析器在处理这段代码时，会将换行后的document.querySelector语句识别为完全独立的执行行。而在函数逻辑里，只要遇到return语句就会立刻退出当前函数、返回对应值，后面写的所有代码都没有执行机会，因此直接抛出unreachable code的语法错误。

jQuery .find() 与原生DOM查找的核心区别 #

两者的查找行为在很多场景下看起来相似，但底层设计存在本质差异：

• 查找范围差异：jQuery的.find()是以调用该方法的DOM节点为局部根，仅在节点的子树范围内匹配选择器，属于组件内的查找，不会干扰页面其他区域的同名元素；而全局调用的document.querySelector()是以整个文档为根的全局查找，就算前面衔接了其他DOM操作，也不会自动收缩查找范围，很容易出现元素选中错误。
• 链式调用规则差异：jQuery的实例方法默认会返回新的jQuery封装对象，支持连续无断点的链式调用；原生DOM没有内置实例封装，相邻的DOM逻辑如果没有通过点号衔接成方法调用链，就会被解析为独立语句，极易出现前面提到的不可达代码问题。
• 容错逻辑差异：jQuery的.find()在无匹配元素时会返回空的jQuery集合，不会中断后续链式流程；原生查询方法直接返回匹配节点或null，如果没有做空值判断，后续操作很容易触发运行时类型错误。

原生转换的参考实现 #

要实现和jQuery.find()完全等价的局部查找逻辑，必须先获取作为查找根的DOM节点，再在该节点上调用querySelector方法，对标的修正写法如下：

1. 原有jQuery实现的save按钮查找：

   // 原jQuery逻辑
   save_button_ctrl: function() {
       return modal.footer_el().find('[data-ctrl="save-button"]');
   }
   

   等价原生实现：

   // 原生修正逻辑
   save_button_ctrl: function() {
       const footerDom = modal.footer_el();
       // 空值保护，避免节点不存在时报错
       return footerDom ? footerDom.querySelector('[data-ctrl="save-button"]') : null;
   }
   

2. 触发报错的add按钮查找修正后：

   add_button_ctrl: function() {
       const bodyDom = modal.body_el();
       return bodyDom?.querySelector('[data-ctrl="add-button"]');
   }
   

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