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

Question

当我使用 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 动画代码（它使导航栏汉堡图标显示和隐藏位于我视图的 header 中的菜单选项）：

$(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 部分代表库的实例，它们是可选的，具体取决于自定义代码块中库实例的使用，这种方法或它们是正确的声明提高应用程序性能或有任何其他影响？

My context: I am making these "require" calls at resources/assets/js/app.js while I am centralizing my JavaScript files for using Laravel Mix.

感谢您的解释。拜托，如果您能在 jQuery 或任何其他可以更深入地解释您的答案的文档中附加 link，我将不胜感激:)！

Answer 1

because if I try it in the way window.jQuery = require('jquery');, my jQuery animations (customized code blocks for my application) do not work.

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

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

而不是更冗长

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

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

window.jQuery = require('jquery');

并且您的代码可以工作（假设没有 add-ons/libraries 也依赖于 $ 变量）。

（但是将 jQuery 分配给 window.jQuery 和 window.$ 并继续使用 $ 作为变量名是 就好了 甚至可能更可取，因为代码的 reader 可能期望在两个地方找到 jQuery)

使用 Vue，如果

window.Vue = require('vue');

有效，并且

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

也有效，那么你的 Vue 脚本中没有任何内容依赖于 window.$ 的定义； $ 作为一个独立的变量在你的 Vue 中没有被引用。

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

Why "window.$ =" assignation is optional for Vue.js import but mandatory for jQuery in a JavaScript file?

javascript

jquery

require

vue.js

laravel-mix