[Improvement] optimize passive events (#478)

This commit is contained in:
neverland 2017-12-25 15:58:44 +08:00 committed by GitHub
parent 2d2a368e2c
commit 30f22b28ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 51 additions and 14 deletions

View File

@ -1,6 +1,7 @@
import manager from './manager';
import context from './context';
import scrollUtils from '../../utils/scroll';
import { on, off } from '../../utils/event';
export default {
props: {
@ -70,7 +71,11 @@ export default {
status = '10';
}
if (status !== '11' && isVertical && !(parseInt(status, 2) & parseInt(direction, 2))) {
if (
status !== '11' &&
isVertical &&
!(parseInt(status, 2) & parseInt(direction, 2))
) {
e.preventDefault();
e.stopPropagation();
}
@ -106,8 +111,8 @@ export default {
this.opened = true;
if (this.preventScroll) {
document.addEventListener('touchstart', this.recordPosition);
document.addEventListener('touchmove', this.watchTouchMove);
on(document, 'touchstart', this.recordPosition);
on(document, 'touchmove', this.watchTouchMove);
}
},
@ -129,8 +134,8 @@ export default {
}
if (this.preventScroll) {
document.removeEventListener('touchstart', this.recordPosition);
document.removeEventListener('touchmove', this.watchTouchMove);
off(document, 'touchstart', this.recordPosition);
off(document, 'touchmove', this.watchTouchMove);
}
}
},

View File

@ -30,6 +30,7 @@
<script>
import { create } from '../utils';
import { raf } from '../utils/raf';
import { on, off } from '../utils/event';
import scrollUtils from '../utils/scroll';
export default create({
@ -119,7 +120,7 @@ export default create({
// whether to bind sticky listener
scrollHandler(init) {
this.scrollEl = this.scrollEl || scrollUtils.getScrollEventTarget(this.$el);
this.scrollEl[init ? 'addEventListener' : 'removeEventListener']('scroll', this.onScroll);
(init ? on : off)(this.scrollEl, 'scroll', this.onScroll, true);
if (init) {
this.onScroll();
}

View File

@ -6,7 +6,7 @@
* ```
*/
import { isServer } from './index';
import { on, off } from './event';
const context = '@@clickoutsideContext';
@ -24,7 +24,7 @@ export default {
arg: binding.arg || 'click'
};
!isServer && document.addEventListener(el[context].arg, handler);
on(document, el[context].arg, handler);
},
update(el, binding) {
@ -32,7 +32,7 @@ export default {
},
unbind(el) {
!isServer && document.removeEventListener(el[context].arg, el[context].handler);
off(document, el[context].arg, el[context].handler);
},
install(Vue) {

28
packages/utils/event.js Normal file
View File

@ -0,0 +1,28 @@
import { isServer } from './';
export let supportsPassive = false;
if (!isServer) {
try {
const opts = {};
Object.defineProperty(opts, 'passive', {
get() {
/* istanbul ignore next */
supportsPassive = true;
}
});
window.addEventListener('test-passive', null, opts);
} catch (e) {}
}
export function on(target, event, handler, passive = false) {
!isServer &&
target.addEventListener(
event,
handler,
supportsPassive ? { capture: false, passive } : false
);
}
export function off(target, event, handler) {
!isServer && target.removeEventListener(event, handler);
}

View File

@ -1,4 +1,5 @@
import Utils from '../utils/scroll';
import { on, off } from '../utils/event';
const CONTEXT = '@@Waterfall';
const OFFSET = 300;
@ -14,8 +15,8 @@ function doBindEvent() {
this.scrollEventListener = Utils.debounce(handleScrollEvent.bind(this), 200);
this.scrollEventTarget = Utils.getScrollEventTarget(this.el);
var disabledExpr = this.el.getAttribute('waterfall-disabled');
var disabled = false;
const disabledExpr = this.el.getAttribute('waterfall-disabled');
let disabled = false;
if (disabledExpr) {
this.vm.$watch(disabledExpr, (value) => {
this.disabled = value;
@ -25,10 +26,10 @@ function doBindEvent() {
}
this.disabled = disabled;
var offset = this.el.getAttribute('waterfall-offset');
const offset = this.el.getAttribute('waterfall-offset');
this.offset = Number(offset) || OFFSET;
this.scrollEventTarget.addEventListener('scroll', this.scrollEventListener);
on(this.scrollEventTarget, 'scroll', this.scrollEventListener, true);
this.scrollEventListener();
}
@ -119,7 +120,9 @@ export default function(type) {
unbind(el) {
const context = el[CONTEXT];
context.scrollEventTarget && context.scrollEventTarget.removeEventListener('scroll', context.scrollEventListener);
if (context.scrollEventTarget) {
off(context.scrollEventTarget, 'scroll', context.scrollEventListener);
}
}
};
};