javascript - 使用缩小的 js 时出现 DOM 异常

Question

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

"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

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

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() 的文档供您引用:

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.