Почему назначение" window.$ = " является необязательным для Vue.js импорт, но обязательный для jQuery в файле JavaScript?


Почему назначение" window.$ = " является необязательным для Vue.js импорт, но обязательный для jQuery в файле JavaScript?

01.11.2020 01:59:00 Просмотров 43 Источник

Я заметил особое поведение, когда вызываю функцию "require" с помощью Vue и jQuery.

Для Vue я могу использовать любую из следующих структур операторов, и мое приложение работает без проблем:

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

Но для jQuery я могу использовать только:

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

.. потому что если я попробую это сделать так, как window.jQuery = require('jquery');, мои анимации jQuery (настроенные блоки кода для моего приложения) не будут работать. Это код анимации jQuery (он делает так, что значок navbar burger показывает и скрывает параметры меню, расположенные в заголовке моего представления):

$(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?
  • Когда я использую назначение window.$ с Vue, делаю ли я что-то, что влияет на производительность моего приложения?
  • Есть ли универсальный способ сделать эти "требования" (или импорт), кроме использования window.$ всегда?
  • Я также заметил, что части window.Vue и window.jQuery представляют собой экземпляры библиотек, и они являются необязательными, в зависимости от использования экземпляров библиотек в настраиваемых блоках кода, прав ли этот подход или их объявление улучшает производительность приложения или оказывает какое-либо другое влияние?

Мой контекст: я делаю эти" требующие " звонки по адресу resources/assets/js/app.js в то время как я централизую свои файлы JavaScript для использования Laravel Mix.

Спасибо за ваши объяснения. Пожалуйста, я был бы признателен, если бы вы могли прикрепить ссылку на документацию в jQuery или любой другой источник, который мог бы более глубоко объяснить ваши ответы :)!

У вопроса есть решение - Посмотреть?

Ответы - Почему назначение" window.$ = " является необязательным для Vue.js импорт, но обязательный для jQuery в файле JavaScript? / Why "window.$ =" assignation is optional for Vue.js import but mandatory for jQuery in a JavaScript file?

Является ответом!
CertainPerformance

01.11.2020 02:02:59

потому что если я попробую сделать это так, как 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, если

$2

работы и

$3

также работает, то ничто в вашем скрипте Vue не зависит от определения window.$; $ как автономная переменная нигде не упоминается в вашем Vue.

Помочь в развитии проекта:
Закрыть X