Vue Плагин или Компонент для Параллакса - PullRequest
Новая
       19

Vue Плагин или Компонент для Параллакса

1 голос
/ 27 мая 2019

Фон

Рассмотрим следующий компонент; 

<template>

    <div>
        <slot></slot>
    </div>

</template>

<script>

    export default {

        created () {

            // Register the scroll event
            window.addEventListener('scroll', this.handleScroll);

        },

        methods: {

            /**
             * Handle the window scroll event.
             *
             * @return void
             */
            handleScroll () {
                // Do something...
            }
        }
    }

</script>

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

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

Однако у меня есть несколько замечаний по поводу использования плагина, и поэтому я хотел опубликовать их здесь, чтобы кто-то, надеюсь, пролил немного света на меня и помог мне принять решение о том, использовать ли мне компонент или другой. плагин.

Это мои оговорки по поводу использования плагина:

  • Я не знаком с ними, т. Е. Должен был бы узнать, как они работают
  • Являются ли они на самом деле более эффективными, т. Е. Преодолеет ли проблема регистрации нескольких прослушивателей событий
  • Действительно ли преимущества плагина того стоят (в общем) ...

То, как я собираюсь использовать свой плагин, будет таким, как, например, пользовательская директива: 

<div v-parallax="0.2"></div>

Вероятно, это не имеет значения, но с помощью этой директивы элемент будет добавлен в массив items, и каждый элемент будет обновлять свои background-position по мере прокрутки / изменения размера пользователем, если элемент находится в области просмотра.

Мой вопрос

Исходя из всей вышеупомянутой информации, вы бы порекомендовали плагин Vue или компонент Vue для этой конкретной функции?

Примечание - Мне известно, что плагины параллакса уже существуют для Vue, но а) они не работают так, как мне нужно, и б) я хочу написать только код для своего конкретного случая использования т.е. без избыточного кода.

...