使用缩小的 js 时出现 DOM 异常答案

【问题标题】：DOM exception while using minified js使用缩小的 js 时出现 DOM 异常
【发布时间】：2018-07-29 21:29:45
【问题描述】：

我的项目中有 6 个 Javascript 文件，它们的功能在保持原样时工作得非常好。如果我使用（jscompress.com）将所有这些js文件缩小到单个文件中。当我单击特定按钮时 - 它会被禁用。

“无法在 'Element' 上执行 'webkitMatchesSelector'：'[test!='']:sizzle' 不是有效的选择器。” 名称：“语法错误” 堆栈：“错误：无法在'元素'上执行'webkitMatchesSelector'：'[test！='']：sizzle'不是

我们什么时候会遇到这种异常，因为这似乎与我的项目代码没有直接关系。这和缩小器有关吗？

【问题讨论】：

缩小过程可能正在剥离您的选择器之一所必需的东西，表面上看起来只是空白。
检查缺少的“不是真正需要”的分号
link 解释选择器错误

标签： javascript html

【解决方案1】：

发生此异常的原因有很多。异常可以模拟如下

示例脚本：

<script type="text/javascript" src="resources/jquery.min.js" ></script> 
<script type='text/javascript'>
   $(document).ready(function() {
        $('.form').submit(function(event) {
           console.log("Form submitted");
        });
    });
</script>

在上面的例子中，如果我们删除 $(document).ready(function()，那么jquery会抛出下面的异常

Failed to execute 'webkitMatchesSelector' on 'Element': '[test!='']:sizzle' 
is not a valid selector." name: "SyntaxError" 
stack: "Error: Failed to execute 'webkitMatchesSelector' on 
'Element': '[test!='']:sizzle' is not valid selector.

如果您看到此异常，请验证文档加载是否失败。

jQuery.ready()的文档供您参考：

虽然 JavaScript 提供了 load 事件以在页面呈现时执行代码，但在完全接收到图像等所有资产之前，不会触发此事件。在大多数情况下，只要完全构建了 DOM 层次结构，就可以运行脚本。传递给.ready() 的处理程序保证在DOM 准备好后执行，因此这通常是附加所有其他事件处理程序和运行其他jQuery 代码的最佳位置。使用依赖 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

如果代码依赖于加载的资源（例如，如果需要图像的尺寸），则应将代码放在 load 事件的处理程序中。

【讨论】：