From 95ffe9bc19e8f294e04100de8c80b800d2c5810c Mon Sep 17 00:00:00 2001 From: neverland Date: Wed, 29 Sep 2021 18:11:04 +0800 Subject: [PATCH] perf(@vant/lazyload): reuse some utils (#9591) --- packages/vant-lazyload/package.json | 3 + packages/vant-lazyload/src/lazy-component.js | 2 +- packages/vant-lazyload/src/lazy-container.js | 7 +- packages/vant-lazyload/src/lazy-image.js | 3 +- packages/vant-lazyload/src/lazy.js | 17 ++- packages/vant-lazyload/src/listener.js | 1 - packages/vant-lazyload/src/util.js | 110 ++++--------------- packages/vant-lazyload/yarn.lock | 5 + 8 files changed, 45 insertions(+), 103 deletions(-) diff --git a/packages/vant-lazyload/package.json b/packages/vant-lazyload/package.json index 98868bfed..c95bd20f6 100644 --- a/packages/vant-lazyload/package.json +++ b/packages/vant-lazyload/package.json @@ -25,6 +25,9 @@ "@babel/core": "^7.12.9", "release-it": "^14.2.2" }, + "dependencies": { + "@vant/use": "^1.3.1" + }, "release-it": { "git": { "tag": false, diff --git a/packages/vant-lazyload/src/lazy-component.js b/packages/vant-lazyload/src/lazy-component.js index 5f3aa83a9..236e57d0a 100644 --- a/packages/vant-lazyload/src/lazy-component.js +++ b/packages/vant-lazyload/src/lazy-component.js @@ -1,5 +1,5 @@ import { h } from 'vue'; -import { inBrowser } from './util'; +import { inBrowser } from '@vant/use'; export default (lazy) => ({ props: { diff --git a/packages/vant-lazyload/src/lazy-container.js b/packages/vant-lazyload/src/lazy-container.js index f795e0af7..04dcae4ae 100644 --- a/packages/vant-lazyload/src/lazy-container.js +++ b/packages/vant-lazyload/src/lazy-container.js @@ -1,5 +1,6 @@ /* eslint-disable max-classes-per-file */ -import { find, remove } from './util'; +/* eslint-disable prefer-object-spread */ +import { remove } from './util'; const defaultOptions = { selector: 'img', @@ -74,13 +75,13 @@ export default class LazyContainerManager { } update(el, binding, vnode) { - const container = find(this._queue, (item) => item.el === el); + const container = this._queue.find((item) => item.el === el); if (!container) return; container.update({ el, binding, vnode }); } unbind(el) { - const container = find(this._queue, (item) => item.el === el); + const container = this._queue.find((item) => item.el === el); if (!container) return; container.clear(); remove(this._queue, container); diff --git a/packages/vant-lazyload/src/lazy-image.js b/packages/vant-lazyload/src/lazy-image.js index af7990f9e..b5010b5c5 100644 --- a/packages/vant-lazyload/src/lazy-image.js +++ b/packages/vant-lazyload/src/lazy-image.js @@ -1,4 +1,5 @@ -import { inBrowser, loadImageAsync, noop } from './util'; +import { inBrowser } from '@vant/use'; +import { loadImageAsync, noop } from './util'; export default (lazyManager) => ({ props: { diff --git a/packages/vant-lazyload/src/lazy.js b/packages/vant-lazyload/src/lazy.js index 78eb79ed1..a622c3eba 100644 --- a/packages/vant-lazyload/src/lazy.js +++ b/packages/vant-lazyload/src/lazy.js @@ -1,13 +1,12 @@ import { nextTick } from 'vue'; +import { inBrowser, getScrollParent } from '@vant/use'; import { - inBrowser, remove, - find, - _, + on, + off, throttle, supportWebp, getDPR, - scrollParent, getBestSelectionFromSrcset, isObject, hasIntersectionObserver, @@ -147,7 +146,7 @@ export default function () { } if (!$parent) { - $parent = scrollParent(el); + $parent = getScrollParent(el); } const newListener = new ReactiveListener({ @@ -186,7 +185,7 @@ export default function () { let { src } = value; src = getBestSelectionFromSrcset(el, this.options.scale) || src; - const exist = find(this.ListenerQueue, (item) => item.el === el); + const exist = this.ListenerQueue.find((item) => item.el === el); if (!exist) { this.add(el, binding, vnode); } else { @@ -212,7 +211,7 @@ export default function () { remove(el) { if (!el) return; this._observer && this._observer.unobserve(el); - const existItem = find(this.ListenerQueue, (item) => item.el === el); + const existItem = this.ListenerQueue.find((item) => item.el === el); if (existItem) { this._removeListenerTarget(existItem.$parent); this._removeListenerTarget(window); @@ -273,7 +272,7 @@ export default function () { */ _addListenerTarget(el) { if (!el) return; - let target = find(this.TargetQueue, (target) => target.el === el); + let target = this.TargetQueue.find((target) => target.el === el); if (!target) { target = { el, @@ -315,7 +314,7 @@ export default function () { */ _initListen(el, start) { this.options.ListenEvents.forEach((evt) => - _[start ? 'on' : 'off'](el, evt, this.lazyLoadHandler) + (start ? on : off)(el, evt, this.lazyLoadHandler) ); } diff --git a/packages/vant-lazyload/src/listener.js b/packages/vant-lazyload/src/listener.js index 89149fe10..b749188ab 100644 --- a/packages/vant-lazyload/src/listener.js +++ b/packages/vant-lazyload/src/listener.js @@ -32,7 +32,6 @@ export default class ReactiveListener { this.elRenderer = elRenderer; this._imageCache = imageCache; this.performanceData = { - init: Date.now(), loadStart: 0, loadEnd: 0, }; diff --git a/packages/vant-lazyload/src/util.js b/packages/vant-lazyload/src/util.js index 46fb4ca49..98b652b0d 100644 --- a/packages/vant-lazyload/src/util.js +++ b/packages/vant-lazyload/src/util.js @@ -1,4 +1,4 @@ -const inBrowser = typeof window !== 'undefined'; +import { inBrowser } from '@vant/use'; export const hasIntersectionObserver = inBrowser && @@ -11,13 +11,13 @@ export const modeType = { observer: 'observer', }; -function remove(arr, item) { +export function remove(arr, item) { if (!arr.length) return; const index = arr.indexOf(item); if (index > -1) return arr.splice(index, 1); } -function getBestSelectionFromSrcset(el, scale) { +export function getBestSelectionFromSrcset(el, scale) { if (el.tagName !== 'IMG' || !el.getAttribute('data-srcset')) return; let options = el.getAttribute('data-srcset'); @@ -82,21 +82,10 @@ function getBestSelectionFromSrcset(el, scale) { return bestSelectedSrc; } -function find(arr, fn) { - let item; - for (let i = 0, len = arr.length; i < len; i++) { - if (fn(arr[i])) { - item = arr[i]; - break; - } - } - return item; -} - -const getDPR = (scale = 1) => +export const getDPR = (scale = 1) => inBrowser ? window.devicePixelRatio || scale : scale; -function supportWebp() { +export function supportWebp() { if (!inBrowser) return false; let support = true; @@ -114,7 +103,7 @@ function supportWebp() { return support; } -function throttle(action, delay) { +export function throttle(action, delay) { let timeout = null; let lastRun = 0; return function (...args) { @@ -135,19 +124,18 @@ function throttle(action, delay) { }; } -const _ = { - on(el, type, func, capture = false) { - el.addEventListener(type, func, { - capture, - passive: true, - }); - }, - off(el, type, func, capture = false) { - el.removeEventListener(type, func, capture); - }, -}; +export function on(el, type, func) { + el.addEventListener(type, func, { + capture: false, + passive: true, + }); +} -const loadImageAsync = (item, resolve, reject) => { +export function off(el, type, func) { + el.removeEventListener(type, func, false); +} + +export const loadImageAsync = (item, resolve, reject) => { const image = new Image(); if (!item || !item.src) { @@ -160,61 +148,23 @@ const loadImageAsync = (item, resolve, reject) => { image.crossOrigin = item.cors; } - image.onload = function () { + image.onload = () => resolve({ naturalHeight: image.naturalHeight, naturalWidth: image.naturalWidth, src: image.src, }); - }; - image.onerror = function (e) { - reject(e); - }; + image.onerror = (e) => reject(e); }; -const style = (el, prop) => - typeof getComputedStyle !== 'undefined' - ? getComputedStyle(el, null).getPropertyValue(prop) - : el.style[prop]; - -const overflow = (el) => - style(el, 'overflow') + style(el, 'overflow-y') + style(el, 'overflow-x'); - -const scrollParent = (el) => { - if (!inBrowser) return; - if (!(el instanceof HTMLElement)) { - return window; - } - - let parent = el; - - while (parent) { - if (parent === document.body || parent === document.documentElement) { - break; - } - - if (!parent.parentNode) { - break; - } - - if (/(scroll|auto)/.test(overflow(parent))) { - return parent; - } - - parent = parent.parentNode; - } - - return window; -}; - -function isObject(obj) { +export function isObject(obj) { return obj !== null && typeof obj === 'object'; } -function noop() {} +export function noop() {} -class ImageCache { +export class ImageCache { constructor({ max }) { this.options = { max: max || 100, @@ -238,19 +188,3 @@ class ImageCache { this._caches.shift(); } } - -export { - ImageCache, - inBrowser, - remove, - find, - noop, - _, - isObject, - throttle, - supportWebp, - getDPR, - scrollParent, - loadImageAsync, - getBestSelectionFromSrcset, -}; diff --git a/packages/vant-lazyload/yarn.lock b/packages/vant-lazyload/yarn.lock index fc2966715..b773ffe84 100644 --- a/packages/vant-lazyload/yarn.lock +++ b/packages/vant-lazyload/yarn.lock @@ -397,6 +397,11 @@ dependencies: "@types/node" "*" +"@vant/use@^1.3.1": + version "1.3.1" + resolved "https://registry.nlark.com/@vant/use/download/@vant/use-1.3.1.tgz?cache=0&sync_timestamp=1632302722581&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vant%2Fuse%2Fdownload%2F%40vant%2Fuse-1.3.1.tgz#8609fc7f86713df0c4ace7109eee6df2f3bd9a0f" + integrity sha1-hgn8f4ZxPfDErOcQnu5t8vO9mg8= + ansi-align@^3.0.0: version "3.0.0" resolved "https://registry.npm.taobao.org/ansi-align/download/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"