From 39fdbafab86950408158dd5dd0715184d279b8e4 Mon Sep 17 00:00:00 2001 From: toesbieya <1647775459@qq.com> Date: Wed, 26 Aug 2020 13:52:18 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8ResizeObserver=E4=BB=A3?= =?UTF-8?q?=E6=9B=BFwindow.resize=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue/src/component/SearchForm/index.vue | 9 ++++++--- vue/src/mixin/chart/resize.js | 19 ++++++++----------- .../plugin/canvasAnimation/firework/index.js | 9 ++++++--- .../plugin/canvasAnimation/godrays/index.js | 9 ++++++--- .../canvasAnimation/moveFollowMouse/index.js | 9 ++++++--- .../canvasAnimation/particleBall/index.js | 9 ++++++--- .../canvasAnimation/particleNetwork/index.js | 9 ++++++--- .../canvasAnimation/particleWave/index.js | 9 ++++++--- .../canvasAnimation/reflectRain/index.js | 9 ++++++--- .../plugin/canvasAnimation/sparkRain/index.js | 9 ++++++--- .../plugin/canvasAnimation/sunlight/index.js | 9 ++++++--- vue/src/view/example/cool/fluidPage.vue | 12 +++++++----- 12 files changed, 75 insertions(+), 46 deletions(-) diff --git a/vue/src/component/SearchForm/index.vue b/vue/src/component/SearchForm/index.vue index 094e1c1..0c308f8 100644 --- a/vue/src/component/SearchForm/index.vue +++ b/vue/src/component/SearchForm/index.vue @@ -51,11 +51,14 @@ export default { mounted() { this.resize() - - window.addEventListener('resize', this.resize) + this.resizeObserver = new ResizeObserver(() => this.resize()) + this.resizeObserver.observe(this.$el.parentNode) this.$once('hook:beforeDestroy', () => { - window.removeEventListener('resize', this.resize) + if (this.resizeObserver) { + this.resizeObserver.disconnect() + this.resizeObserver = null + } }) }, diff --git a/vue/src/mixin/chart/resize.js b/vue/src/mixin/chart/resize.js index 7b473be..59cde3e 100644 --- a/vue/src/mixin/chart/resize.js +++ b/vue/src/mixin/chart/resize.js @@ -1,32 +1,29 @@ import {debounce} from '@/util' export default { - data() { - return { - $_sidebarElm: null, - $_resizeHandler: null - } - }, - methods: { $_initResizeEvent() { - window.addEventListener('resize', this.$_resizeHandler) + this.resizeObserver = new ResizeObserver(() => this.$_resizeHandler()) + this.resizeObserver.observe(this.$el) }, $_destroyResizeEvent() { - window.removeEventListener('resize', this.$_resizeHandler) + if (this.resizeObserver) { + this.resizeObserver.disconnect() + this.resizeObserver = null + } } }, mounted() { this.$_resizeHandler = debounce(() => this.chart && this.chart.resize()) this.$_initResizeEvent() - this.$nextTick(this.$_resizeHandler) + this.$nextTick(() => this.$_resizeHandler()) this.$once('hook:deactivated', this.$_destroyResizeEvent) this.$once('hook:beforeDestroy', this.$_destroyResizeEvent) }, activated() { this.$_initResizeEvent() - this.$nextTick(this.$_resizeHandler) + this.$nextTick(() => this.$_resizeHandler()) } } diff --git a/vue/src/plugin/canvasAnimation/firework/index.js b/vue/src/plugin/canvasAnimation/firework/index.js index 21c9cd0..f224e9d 100644 --- a/vue/src/plugin/canvasAnimation/firework/index.js +++ b/vue/src/plugin/canvasAnimation/firework/index.js @@ -73,14 +73,14 @@ export default class Firework { this.rAF = null this.timer = null this.stopSign = false - this.resize = this.resize.bind(this) this.loop = this.loop.bind(this) this.addRocket = this.addRocket.bind(this) this.start() } start() { - window.addEventListener('resize', this.resize) + this.resizeObserver = new ResizeObserver(() => this.resize()) + this.resizeObserver.observe(this.canvas) document.addEventListener('click', this.addRocket) this.timer = window.setInterval(this.addRocket, 1000) this.resize() @@ -88,7 +88,10 @@ export default class Firework { } stop() { - window.removeEventListener('resize', this.resize) + if (this.resizeObserver) { + this.resizeObserver.disconnect() + this.resizeObserver = null + } window.removeEventListener('click', this.addRocket) this.stopSign = true this.rockets = [] diff --git a/vue/src/plugin/canvasAnimation/godrays/index.js b/vue/src/plugin/canvasAnimation/godrays/index.js index 009a9b9..c956f2b 100644 --- a/vue/src/plugin/canvasAnimation/godrays/index.js +++ b/vue/src/plugin/canvasAnimation/godrays/index.js @@ -12,19 +12,22 @@ export default class Godrays { this.godraysCtx = this.godraysCanvas.getContext('2d') this.rAF = null this.stopSign = false - this.resize = this.resize.bind(this) this.loop = this.loop.bind(this) this.start() } start() { - window.addEventListener('resize', this.resize) + this.resizeObserver = new ResizeObserver(() => this.resize()) + this.resizeObserver.observe(this.canvas) this.resize() this.loop() } stop() { - window.removeEventListener('resize', this.resize) + if (this.resizeObserver) { + this.resizeObserver.disconnect() + this.resizeObserver = null + } this.stopSign = true this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) this.godraysCtx.clearRect(0, 0, this.godraysCanvas.width, this.godraysCanvas.height) diff --git a/vue/src/plugin/canvasAnimation/moveFollowMouse/index.js b/vue/src/plugin/canvasAnimation/moveFollowMouse/index.js index 21a6c7d..657dc5d 100644 --- a/vue/src/plugin/canvasAnimation/moveFollowMouse/index.js +++ b/vue/src/plugin/canvasAnimation/moveFollowMouse/index.js @@ -10,7 +10,6 @@ export default class MoveFollowMouse { this.num = num this.gravityDistance = gravityDistance this.mousePos = {x: 0, y: 0} - this.resize = this.resize.bind(this) this.loop = this.loop.bind(this) this.getMousePos = this.getMousePos.bind(this) this.start() @@ -20,14 +19,18 @@ export default class MoveFollowMouse { for (let i = 0; i < this.num; i += 1) { this.particles.push(new Particle()) } - window.addEventListener('resize', this.resize) + this.resizeObserver = new ResizeObserver(() => this.resize()) + this.resizeObserver.observe(this.canvas) window.addEventListener('mousemove', this.getMousePos) this.resize() this.loop() } stop() { - window.removeEventListener('resize', this.resize) + if (this.resizeObserver) { + this.resizeObserver.disconnect() + this.resizeObserver = null + } window.removeEventListener('mousemove', this.getMousePos) this.stopSign = true this.particles = [] diff --git a/vue/src/plugin/canvasAnimation/particleBall/index.js b/vue/src/plugin/canvasAnimation/particleBall/index.js index e2852a4..858d1a3 100644 --- a/vue/src/plugin/canvasAnimation/particleBall/index.js +++ b/vue/src/plugin/canvasAnimation/particleBall/index.js @@ -11,20 +11,23 @@ export default class ParticleBall { this.maxParticle = maxParticle this.turnSpeed = turnSpeed this.particles = [] - this.resize = this.resize.bind(this) this.loop = this.loop.bind(this) this.start() } start() { - window.addEventListener('resize', this.resize) + this.resizeObserver = new ResizeObserver(() => this.resize()) + this.resizeObserver.observe(this.canvas) this.resize() this.initDot() this.loop() } stop() { - window.removeEventListener('resize', this.resize) + if (this.resizeObserver) { + this.resizeObserver.disconnect() + this.resizeObserver = null + } this.stopSign = true this.particles = [] this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) diff --git a/vue/src/plugin/canvasAnimation/particleNetwork/index.js b/vue/src/plugin/canvasAnimation/particleNetwork/index.js index d5971e7..a590df9 100644 --- a/vue/src/plugin/canvasAnimation/particleNetwork/index.js +++ b/vue/src/plugin/canvasAnimation/particleNetwork/index.js @@ -14,7 +14,6 @@ export default class ParticleNetwork { this.rAF = null this.timer = null this.stopSign = false - this.resize = this.resize.bind(this) this.loop = this.loop.bind(this) this.start() } @@ -174,7 +173,8 @@ export default class ParticleNetwork { this.removeInteractionParticle() }.bind(this) - window.addEventListener('resize', this.resize) + this.resizeObserver = new ResizeObserver(() => this.resize()) + this.resizeObserver.observe(this.canvas) window.addEventListener('mousemove', this.onMouseMove) window.addEventListener('touchmove', this.onTouchMove) window.addEventListener('mousedown', this.onMouseDown) @@ -185,7 +185,10 @@ export default class ParticleNetwork { } unbindUiActions() { - window.removeEventListener('resize', this.resize) + if (this.resizeObserver) { + this.resizeObserver.disconnect() + this.resizeObserver = null + } window.removeEventListener('mousemove', this.onMouseMove) window.removeEventListener('touchmove', this.onTouchMove) window.removeEventListener('mousedown', this.onMouseDown) diff --git a/vue/src/plugin/canvasAnimation/particleWave/index.js b/vue/src/plugin/canvasAnimation/particleWave/index.js index af83186..072932c 100644 --- a/vue/src/plugin/canvasAnimation/particleWave/index.js +++ b/vue/src/plugin/canvasAnimation/particleWave/index.js @@ -20,7 +20,6 @@ export default class ParticleWave { this.particleWaveWalker = 0 this.rAF = null this.stopSign = false - this.resize = this.resize.bind(this) this.loop = this.loop.bind(this) this.start() } @@ -67,7 +66,8 @@ export default class ParticleWave { } start() { - window.addEventListener('resize', this.resize) + this.resizeObserver = new ResizeObserver(() => this.resize()) + this.resizeObserver.observe(this.canvas) this.resize() this.initParticle() this.initParticleColor() @@ -77,7 +77,10 @@ export default class ParticleWave { } stop() { - window.removeEventListener('resize', this.resize) + if (this.resizeObserver) { + this.resizeObserver.disconnect() + this.resizeObserver = null + } this.stopSign = true this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) } diff --git a/vue/src/plugin/canvasAnimation/reflectRain/index.js b/vue/src/plugin/canvasAnimation/reflectRain/index.js index 688bb8d..260cda8 100644 --- a/vue/src/plugin/canvasAnimation/reflectRain/index.js +++ b/vue/src/plugin/canvasAnimation/reflectRain/index.js @@ -9,19 +9,22 @@ export default class ReflectRain { this.stopSign = false this.canvas = canvas this.ctx = canvas.getContext('2d') - this.resize = this.resize.bind(this) this.loop = this.loop.bind(this) this.start() } start() { - window.addEventListener('resize', this.resize) + this.resizeObserver = new ResizeObserver(() => this.resize()) + this.resizeObserver.observe(this.canvas) this.resize() this.loop() } stop() { - window.removeEventListener('resize', this.resize) + if (this.resizeObserver) { + this.resizeObserver.disconnect() + this.resizeObserver = null + } this.stopSign = true this.rainDrops = [] this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) diff --git a/vue/src/plugin/canvasAnimation/sparkRain/index.js b/vue/src/plugin/canvasAnimation/sparkRain/index.js index 749f298..526c8e7 100644 --- a/vue/src/plugin/canvasAnimation/sparkRain/index.js +++ b/vue/src/plugin/canvasAnimation/sparkRain/index.js @@ -24,14 +24,14 @@ export default class SparkRain { this.rAF = null this.timer = null this.stopSign = false - this.resize = this.resize.bind(this) this.loop = this.loop.bind(this) this.addSpark = this.addSpark.bind(this) this.start() } start() { - window.addEventListener('resize', this.resize) + this.resizeObserver = new ResizeObserver(() => this.resize()) + this.resizeObserver.observe(this.canvas) this.resize() this.timer = window.setInterval( () => this.sparks.length < this.options.amount && this.addSpark(), @@ -40,7 +40,10 @@ export default class SparkRain { } stop() { - window.removeEventListener('resize', this.resize) + if (this.resizeObserver) { + this.resizeObserver.disconnect() + this.resizeObserver = null + } this.stopSign = true this.sparks = [] this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) diff --git a/vue/src/plugin/canvasAnimation/sunlight/index.js b/vue/src/plugin/canvasAnimation/sunlight/index.js index 2e44ec8..27b7a43 100644 --- a/vue/src/plugin/canvasAnimation/sunlight/index.js +++ b/vue/src/plugin/canvasAnimation/sunlight/index.js @@ -8,7 +8,6 @@ export default class Sunlight { this.mouse = {down: 0} this.rAF = null this.stopSign = false - this.resize = this.resize.bind(this) this.loop = this.loop.bind(this) this.mousedown = this.mousedown.bind(this) this.mouseup = this.mouseup.bind(this) @@ -16,7 +15,8 @@ export default class Sunlight { } start() { - window.addEventListener('resize', this.resize) + this.resizeObserver = new ResizeObserver(() => this.resize()) + this.resizeObserver.observe(this.canvas) window.addEventListener('mouseup', this.mouseup) window.addEventListener('mousedown', this.mousedown) this.resize() @@ -24,7 +24,10 @@ export default class Sunlight { } stop() { - window.removeEventListener('resize', this.resize) + if (this.resizeObserver) { + this.resizeObserver.disconnect() + this.resizeObserver = null + } window.removeEventListener('mouseup', this.mouseup) window.removeEventListener('mousedown', this.mousedown) this.stopSign = true diff --git a/vue/src/view/example/cool/fluidPage.vue b/vue/src/view/example/cool/fluidPage.vue index e9676f9..7ff46ef 100644 --- a/vue/src/view/example/cool/fluidPage.vue +++ b/vue/src/view/example/cool/fluidPage.vue @@ -14,18 +14,20 @@ export default { return { sign: true, width: 1200, - height: 800, - $_resizeHandler: null, - parentDom: null + height: 800 } }, methods: { $_initResizeEvent() { - window.addEventListener('resize', this.$_resizeHandler) + this.resizeObserver = new ResizeObserver(() => this.$_resizeHandler()) + this.resizeObserver.observe(this.parentDom) }, $_destroyResizeEvent() { - window.removeEventListener('resize', this.$_resizeHandler) + if (this.resizeObserver) { + this.resizeObserver.disconnect() + this.resizeObserver = null + } }, start() { import('@/plugin/webgl/fluid').then(_ => _.default(this.$el.querySelector('#canvas-fluid')))