Требование встречалось в бизнесе раньше.Если это требование полностью жестко запрограммировано в программе, требование может быть реализовано, но возможность повторного использования в основном равна нулю, и оно смешивается с бизнес-кодом.Если требование становится лучше в дальнейшем его очень сложно модифицировать.
Тщательно подумав о развязке и элегантности, я обнаружил, что могу учиться у тех, что использовал раньше.vue-lazyloadВ этой статье анализируются краткие идеи дизайна vue-lazyload.
Какую проблему решает vue-lazyload?
Вполне возможно, что на веб-странице нужно загрузить сотни или тысячи изображений, и страница сильно застрянет.В это время, если загружаются только изображения в видимой области, другие изображения могут временно иметь замещающее загрузочное изображение, и дождитесь их прокрутки.Когда вы достигнете видимой области, вы можете запросить реальное изображение и заменить его. Очень хорошо, плагин vue-lazyload предназначен для решения таких проблем.Если вы не знакомы с методом написания плагина vue, вы можете сначала взглянуть.
vue-плагин
Анализ дизайна vue-lazyload
Перед парсингом можно подумать, как это реализовать, если писать инструмент для ленивой загрузки изображений. Прежде всего, наиболее очевидным является то, что вам нужен метод checkInView, чтобы проверить, находится ли элемент изображения dom в видимой области браузера, а затем вам нужно привязать метод прослушивателя событий прокрутки scrollHandler к прокручиваемым родительским элементам все изображения, поэтому общая идея такова:
По сути, на картинке выше уже реализована самая основная идея ленивой загрузки картинок.С небольшой модификацией можно написать исполняемый код.
Затем используйте эту основную идею, чтобы посмотреть на реализацию vue-layload.
src/index.js
Видно, что есть два способа использования инструкций и два способа использования компонентов.Я в основном анализирую реализацию v-lazy инструкций в версии vue2.Другие можно анализировать сами по себе, и принципы те же.
Видно, что ленивый объект получается через Lazy и LazyClass, несколько callback-функций, соответствующих инструкции v-lazy: bind, update, componentUpdated и unbind привязаны к методам add, update, lazyLoadHandler и remove ленивого объекта соответственно .
Далее давайте посмотрим, как генерируется ленивый объект:
src/lazy.js
Вы можете видеть, что файл lazy.js экспортирует метод, который возвращает класс Lazy.Причина этого заключается в том, чтобы сформировать замыкание, чтобы продолжать ссылаться на Vue в классе Lazy. Давайте посмотрим на конструктор класса Lazy:
Вы можете видеть, что многие конфигурации и переменные инициализируются в конструкторе, функции lazyLoadHandler и setMode, чтобы определить, следует ли использовать наблюдатель для обнаружения видимости dom (
IntersectionObserver)
просто следуйтеsrc/index.jsИдея продолжает видеть, что происходит с функцией обратного вызова привязки инструкции:
Видно, что для каждого элемента dom, к которому добавлена инструкция v-lazy, сначала будет найден его элемент scrollParent (фактически он проходит до своего предка overflow=auto или scroll); затем будет найден объект newListener. быть сгенерирован, и новый прослушиватель добавляется в массив ListenerQueue; наконец, вызывается метод _addListenerTarget.
Затем посмотрите, что произошло с методом _addListenerTarget:
src/lazy.js
Мы видим элемент scrollParent в TargetQueue и вызываем метод _initListen.
Продолжайте смотреть на метод _initListen:
src/lazy.js
Вы можете видеть, что все события в this.options.ListenEvents отслеживаются для scrollParent, а функция обратного вызова события — lazyLoadHandler.
Инициализация lazyLoadHandler уже упоминалась ранее:
src/lazy.js
Метод lazyLoadHandler — это функция, возвращаемая _lazyLoadHandler после добавления регулирующей оболочки.
Продолжайте смотреть на реализацию _lazyLoadHandler:
src/lazy.js
Видно, что метод _lazyLoadHandler просматривает массив ListenerQueue и вызывает checkInView каждого слушателя. прослушиватель доступен.В области просмотра метод listener.load запрашивает реальное изображение.
Итак, чтобы разобраться, краткую идею дизайна vue-lazyload можно показать на рисунке
постскриптум
После прояснения общей идеи и анализа исходного кода все становится очень ясным, и не нужно вдаваться в бесконечные детали.
-------------------------------------
Добро пожаловать, чтобы обратить внимание на мою официальную учетную запись, интерфейсный зверь Ягу, чтобы быть интерфейсом, а не только быть интерфейсом.
