Есть ли хороший способ обернуть виджет на основе JQuery в модуль, который можно легко использовать в Vue.js?


Есть ли хороший способ обернуть виджет на основе JQuery в модуль, который можно легко использовать в Vue.js?

24.11.2020 05:05:36 Просмотров 6 Источник

Некоторые мои коллеги начали довольно сложное веб-приложение, используя Vue.js. Они хотели бы иметь возможность использовать некоторые виджеты, которые я сделал с нуля в прошлом с помощью JQuery, так как их повторная реализация потребует большого количества усилий и времени.

Я знаю, что можно безопасно использовать JQuery с Vue.js если вы будете осторожны, но информация, которую мне удалось найти, кажется, отнесена к довольно расплывчатым постам в блоге, и мои коллеги уведомили меня, что они изо всех сил пытаются понять, как это сделать. Поэтому я рассматриваю возможность того, что смогу найти способ красиво обернуть свои виджеты в портативную кросс-фреймворковую библиотеку (для начала, которую можно использовать в Vue.js). Например, подобно тому, как люди создают привязки, которые предоставляют различные языковые API. В идеале, это должно сделать его очень легким для кого-то, чтобы использовать его с Vue.js, и должны убрать опасность потенциальных ловушек. Есть ли какие-то проблемы с этим, и есть ли какая-то существующая работа, которую можно использовать, или идиоматический способ, которым люди делают это?

Для дополнительного контекста в настоящее время виджет имеет интерфейс, который включает в себя конструктор (в котором вы передаете идентификатор родительского элемента DOM, к которому он будет добавлен), функцию configure, а также выдает несколько сигналов/событий при изменении (хотя они могут быть заменены функцией, которая периодически проверяет его состояние).

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

Ответы - Есть ли хороший способ обернуть виджет на основе JQuery в модуль, который можно легко использовать в Vue.js? / Is there a nice way to wrap a JQuery based widget into a module that can be easily used in Vue.js?

Является ответом!
Yom S.

24.11.2020 03:00:52

Что касается создания переносимой и кросс-фреймворковой библиотеки, то я бы рассматривал jQuery просто как зависимость, которая позволяет создавать определенные элементы и выполнять определенные задачи, которые вы перехватываете и/или изменяете в соответствии с требованиями целевого фреймворка. Таким образом, вы, по сути, создаете компонент-оболочку вокруг него, поскольку 3 лучших фреймворка JavaScript (React, Vue, Angular) сегодня основаны на компонентах.

Одним из ключевых отличий (проще говоря) является: реактивность системы против Дом манипулирует.

Теперь, говоря о портировании плагина jQuery в Vue — я не специалист в обеих библиотеках, но сам исходил из jQuery, я бы сказал, что это может быть так же просто, как сохранить ссылку на экземпляр виджета/плагина в компоненте Vue internal data и/или props и при необходимости предоставить соответствующие методы. Причина, по которой часть экспозиции методов является необязательной, является той же самой причиной, которая характеризует одну библиотеку от другой—Vue более универсален, поскольку он масштабируется как между библиотекой, так и между фреймворком.

В jQuery вы создаете экземпляр объекта и передаете его для использования его общедоступными методами; в то время как в Vue вы явно не создаете экземпляры, кроме корневого (вы моглибы , но обычно вам это не нужно), потому что сам компонент является (внутренне сконструированным) экземпляром. И именно компонент несет ответственность за поддержание своих состояний и данных; родственные и / или родительские компоненты обычно не имеют прямого доступа к ним.

Vue и jQuery похожи тем, что оба поддерживают синхронизацию состояния и данных. С jQuery это очевидно, так как все ссылки находятся в глобальной области видимости; с Vue можно было бы использовать либо v-model, либо модификатор .sync (замененный аргументами на v-model в Vue 3). Кроме того, у них также есть подписка на события с немного другими подходами.

Давайте возьмем виджет автозаполнения jQuery и добавим к нему некоторую поддержку Vue. Мы сосредоточимся на 3 вещах (опциях, событиях и методах) и возьмем 3 из их соответствующих элементов в качестве примера и сравнения. Я не могу охватить здесь все, но это должно дать вам некоторые основные идеи.

Настройка: jQuery

Ради соблюдения вашей спецификации, о которой идет речь, давайте предположим, что этот виджет/плагин является классом new-able в области window.

В jQuery вы бы написали следующее (на document готовом или завернутом в IIFE перед закрывающим тегом <body>):

var autocomplete = new Autocomplete({
  source: [
    'vue',
    'react',
    'angular',
    'jquery'
  ],
  appendTo: '#autocomplete-container', 
  disabled: false,

  change: function(event, ui) { },
  focus: function(event, ui) { },
  select: function(event, ui) { }
});

// And then some other place needing manual triggers on this instance
autocomplete.close();

var isDisabled = autocomplete.option('disabled');

autocomplete.search('ue'); // Matches 'vue' and 'jquery' ;)

С целевым элементом, предварительно определенным или динамически созданным где-то в родительской области:

props0

Портирование на Vue

Поскольку вы не упомянули какую-либо конкретную версию Vue в использовании, я собираюсь предположить, что Macross (последняя стабильная версия: 2.6.12, ATTOW) с модулем ES; в противном случае попробуйте совместимую сборку модулей ES.

И для этого конкретного случая использования в Vue мы хотим создать экземпляр этого плагина в крючке props1, потому что именно здесь будет создан наш целевой элемент и доступен для буквального использования. Подробнее о крючках жизненного цикла можно узнать на диаграмме здесь.

Создание компонента: props2

props3

Использование компонента: props4 (или что-то еще)

props5

А мы еще не дошли! Я намеренно опустил часть "двусторонней привязки" в приведенном выше примере, чтобы мы могли более подробно рассмотреть ее сейчас. Однако этот шаг является необязательным и должен выполняться только в том случае, если вам нужно синхронизировать данные/состояние между компонентами (родитель-потомок), например: у вас есть некоторая логика в компоненте, которая устанавливает цвет границы ввода на красный при вводе определенных значений. Теперь, поскольку вы изменяете родительское состояние (скажем, props6 или props7), привязанное к этому компоненту в качестве опоры, вам нужно сообщить им о его изменениях, указав новое значение props8.

Итак, давайте внесем следующие изменения (на том же компоненте props2, все остальное опущено для краткости):

v-model0

Мы в основном v-model1-ing "нетерпеливо" для изменений данных. При желании вы можете сделать это лениво с помощью метода экземпляра v-model2.

Необходимые изменения на родительской стороне:

v-model3

Это позволит использовать вышеупомянутую двустороннюю привязку. Вы можете сделать то же самое с остальными реквизитами, которые вам нужны, чтобы быть "реактивными", как v-model4 prop в этом примере—только на этот раз вы будете использовать модификатор .sync; потому что в Vue 2 множественный v-model не поддерживается. (Если вы еще не зашли слишком далеко, я бы предложил перейти на Vue 3 полностью

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