使用小型化js时的DOM异常

Question

我的项目中有6个Javascript文件，其功能在保持原样时非常好。如果我使用(jscompress.com)将所有这些js文件缩小为单个文件。当我点击一个特定的按钮时，它会被禁用。

“未能对'webkitMatchesSelector‘执行’元素‘：’test！=‘：test’不是有效的选择器。”名称："SyntaxError“堆栈：”错误:在'webkitMatchesSelector‘上执行’webkitMatchesSelector‘失败：’test‘=’‘：

我们什么时候才能得到这种异常，因为这似乎与我的项目代码没有直接关系。这跟扫雷机有关吗？

Answer 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 事件的处理程序中。