为什么“window.$ =”分配对于 Vue.js 导入是可选的，但对于 JavaScript 文件中的 jQuery 是强制性的？答案

【问题标题】：Why "window.$ =" assignation is optional for Vue.js import but mandatory for jQuery in a JavaScript file?为什么“window.$ =”分配对于 Vue.js 导入是可选的，但对于 JavaScript 文件中的 jQuery 是强制性的？
【发布时间】：2021-02-14 00:36:35
【问题描述】：

当我使用 Vue 和 jQuery 调用“require”函数时，我注意到了一个特殊的行为。

对于 Vue，我可以使用以下任何一种语句结构，并且我的应用程序可以正常运行：

window.Vue = require('vue');
window.$ = window.Vue = require('vue');

但是，对于 jQuery，我只能使用：

window.$ = window.jQuery = require('jquery');

...因为如果我以window.jQuery = require('jquery'); 的方式尝试它，我的 jQuery 动画（为我的应用程序定制的代码块）不起作用。这是 jQuery 动画代码（它使导航栏汉堡图标显示和隐藏位于我的视图标题中的菜单选项）：

$(document).ready(function() {
    // Check for click events on the navbar burger icon
    $(".navbar-burger").click(function() {
        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
        $(".navbar-burger").toggleClass("is-active");
        $(".navbar-menu").toggleClass("is-active");
    });
});

为什么window.$ 是 jQuery 的强制赋值而不是 Vue.js 的强制赋值？由于 jQuery 的性质，这是一个强制性的分配吗？
当我在 Vue 中使用 window.$ 分配时，我是否在做一些影响我的应用程序性能的事情？
除了始终使用window.$ 之外，是否有通用的方法来执行这些“要求”（或导入）？
我还注意到 window.Vue 和 window.jQuery 表示库的实例，它们是可选的，取决于自定义代码块中库实例的使用，是正确的方法还是它们的声明提高了应用程序性能或还有其他影响吗？

我的背景：我正在拨打这些“要求”电话 resources/assets/js/app.js，而我正在集中我的 JavaScript 文件以使用 Laravel Mix。

感谢您的解释。请，如果您能附上 jQuery 文档的链接或任何其他可以更深入地解释您的答案的来源，我将不胜感激:)！

【问题讨论】：

标签： javascript jquery vue.js require laravel-mix

【解决方案1】：

因为如果我以 window.jQuery = require('jquery'); 的方式尝试它，我的 jQuery 动画（为我的应用程序定制的代码块）不起作用。

听起来你的 jQuery 动画依赖于 $ 被定义为 jQuery。这很常见：在许多（大多数）地方使用 jQuery，约定是将其分配给window.$。这将允许您编写如下内容：

$('someDiv').hover(inHandler, outHandler);

而不是更冗长的

jQuery('someDiv').hover(inHandler, outHandler);

如果您将代码更改为始终引用 jQuery 而不是 $，您将能够仅

window.jQuery = require('jquery');

并且您的代码可以工作（假设没有附加组件/库也依赖于 $ 变量）。

（但是将 jQuery 分配给 window.jQuery 和 window.$ 并继续使用 $ 作为变量名是很好，甚至可能更可取，因为代码的读者可能希望在这两个地方都能找到 jQuery）

使用 Vue，如果

window.Vue = require('vue');

有效，并且

window.$ = window.Vue = require('vue');

也可以，那么您的 Vue 脚本中的任何内容都取决于 window.$ 的定义； $ 作为独立变量不会在您的 Vue 中的任何地方引用。

【讨论】：