Question

我有一个简单的代码，该代码首先加载jQuery，然后使用$语法编写脚本。但是我总是得到

ReferenceError：未定义$

首先，我认为这是因为script标记上的async属性设置为async，但没有任何区别。

HTML ：

<script async="false" crossorigin="anonymous" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" src="https://code.jquery.com/jquery-3.4.1.js" type="application/JAVASCRIPT"></script>

<script async="async" src="/SCRIPT/Creator/Creator.js" type="application/JAVASCRIPT"></script>

Creator.js ：

$(document).ready(() => {
  function CloseModalBackground() {
    ....
  }
});

//# sourceMappingURL=Creator.js.map

实时片段演示了问题：

<script async="false" crossorigin="anonymous" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" src="https://code.jquery.com/jquery-3.4.1.js" type="application/JAVASCRIPT"></script>

<script>
// jQuery *should* be defined by now, right But no:
console.log(typeof $);
</script>

Answer 1

为弄清为什么为什么删除async属性有效，它是一个 boolean属性，并且根据specification：

许多属性是布尔属性。 元素上的布尔属性表示真实值，而布尔值不存在表示假值。如果该属性存在，则其值必须为空字符串或是属性规范名称的ASCII大小写不敏感匹配，没有前导或尾随空格。

因此async=false（其中async是一个布尔属性）由于该属性存在，因此仍然表示该布尔属性是真实的。属性中包含的任何内容都不是真正的问题，但为避免混淆，如果它具有一个值，则值应该可以是属性的名称，也可以是空字符串。

~~MDN's documentation在此上具有误导性。~~已修复，感谢Andrew-Cotterell。实际使async被认为是假的唯一方法是确保该属性在脚本元素上根本不存在。

Answer 2

删除script标签上的async属性对我有用。

edit：是的，无论分配给async属性的值是多少，一旦将其存在，脚本都将被异步调用。

$(document).ready(function(){
  alert("Hello World!");
});

<script crossorigin="anonymous" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" src="https://code.jquery.com/jquery-3.4.1.js" type="application/JAVASCRIPT"></script>

在jQuery之后加载的脚本中获取“未定义$”

2 个答案: