未捕获的ReferenceError:$未定义，但在脚本之前调用了jQuery

Question

我被难住了。我正在构建一个Adobe Illustrator面板(基于Adobe CEP(，我不明白为什么我会收到一个未捕获的引用错误：$没有定义。我在.js文件之前链接了jQuery脚本。据我所知，我需要使用jQuery的本地副本，这样它就可以与其他文件捆绑在一起，作为扩展进行部署。

以下是我的index.html和panel.js文件的摘录：

我在html的页脚处有脚本链接(html中没有调用脚本(。

</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/CSInterface.js"></script>
<script src="assets/js/panel.js"></script>
</body>
</html>

// panel.js
var csi = new CSInterface();  // Adobe CEP
$(btnAddRegistration).on("click", function (e) { // Errors here
// more code here
}

Console:Uncaught ReferenceError:$未定义(panel.js:10((它显示第10行，因为文档顶部还有额外的注释行(。

我很感激任何建议或帮助我解决这个问题。感谢您抽出时间！

我曾尝试将jQuery代码移动到一个文档就绪和窗口加载块中，但没有成功。

"window.onload = function() {
//code here
};

$(document).ready(function () {
//your code here
});

我重新下载了jquery.min.js文件，以确保它没有损坏。我还尝试将脚本src移到HTML的头部分，但没有任何更改。

Answer 1

我搜索了Adobe CEP文档，并在脚本上方添加了下面的一行，解决了这个问题。

<script>if (typeof module === 'object') { window.module = module; module = undefined; }</script>
<script>if (typeof exports === 'object') { window.exports = exports; exports = undefined; }</script>

---

文件摘录：

JQuery启动代码

if ( typeof module === "object" && typeof module.exports === "object" ) {
// set jQuery in `module`
} else {
// set jQuery in `window`
}

当在启用nodejs的CEP浏览器中执行此代码时，它将使JQuery在模块上下文中加载，而不是在浏览器上下文中加载。这将导致扩展的启动出现问题。请使用以下代码来处理此类场景：

处理的全局符号

<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script>if (typeof exports === 'object') {window.exports = exports; exports = undefined;}</script>
<!-- extension's imports -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/csinterface.js"></script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
<script>if (window.exports) exports = window.exports;</script>

如果您不使用"；模块"；以及"；出口；在扩展中，您可以跳过上面代码的最后2行。这个逻辑类似于用户在导入时如何处理nodejs的需求。若你们已经在处理需求，你们应该继续以同样的方式处理。

Answer 2

您必须实际将$分配给变量jQuery。尝试将您的整个代码包装在以下IIFE:中

( function( $ ) {
// all your code here:
// panel.js 
var csi = new CSInterface();   // Adobe CEP
$(btnAddRegistration).on("click", function (e) { }
// end of your code
} )( jQuery );

此匿名关闭的目的：

1. 将$映射到jQuery
2. 在此函数内部声明的变量和方法在函数外部将不可见

什么是IIFE：https://developer.mozilla.org/en-US/docs/Glossary/IIFE