[improvement] add bind event mixin

packages/index-bar/index.js

@@ -1,14 +1,24 @@
 import { use } from '../utils';
 import { TouchMixin } from '../mixins/touch';
 import { ParentMixin } from '../mixins/relation';
+import { BindEventMixin } from '../mixins/bind-event';
 import { GREEN } from '../utils/color';
-import { on, off } from '../utils/event';
 import { getScrollTop, getElementTop, getScrollEventTarget } from '../utils/scroll';
 
 const [sfc, bem] = use('index-bar');
 
 export default sfc({
-  mixins: [TouchMixin, ParentMixin('vanIndexBar')],
+  mixins: [
+    TouchMixin,
+    ParentMixin('vanIndexBar'),
+    BindEventMixin(function (bind) {
+      if (!this.scroller) {
+        this.scroller = getScrollEventTarget(this.$el);
+      }
+
+      bind(this.scroller, 'scroll', this.onScroll);
+    })
+  ],
 
   props: {
     sticky: {
@@ -56,32 +66,7 @@ export default sfc({
     }
   },
 
-  mounted() {
-    this.scroller = getScrollEventTarget(this.$el);
-    this.handler(true);
-  },
-
-  destroyed() {
-    this.handler(false);
-  },
-
-  activated() {
-    this.handler(true);
-  },
-
-  deactivated() {
-    this.handler(false);
-  },
-
   methods: {
-    handler(bind) {
-      /* istanbul ignore else */
-      if (this.binded !== bind) {
-        this.binded = bind;
-        (bind ? on : off)(this.scroller, 'scroll', this.onScroll);
-      }
-    },
-
     onScroll() {
       if (!this.sticky) {
         return;

packages/list/index.js

@@ -1,6 +1,6 @@
 import { use } from '../utils';
 import Loading from '../loading';
-import { on, off } from '../utils/event';
+import { BindEventMixin } from '../mixins/bind-event';
 import {
   getScrollTop,
   getElementTop,
@@ -11,6 +11,16 @@ import {
 const [sfc, bem, t] = use('list');
 
 export default sfc({
+  mixins: [
+    BindEventMixin(function (bind) {
+      if (!this.scroller) {
+        this.scroller = getScrollEventTarget(this.$el);
+      }
+
+      bind(this.scroller, 'scroll', this.check);
+    })
+  ],
+
   model: {
     prop: 'loading'
   },
@@ -37,26 +47,11 @@ export default sfc({
   },
 
   mounted() {
-    this.scroller = getScrollEventTarget(this.$el);
-    this.handler(true);
-
     if (this.immediateCheck) {
       this.$nextTick(this.check);
     }
   },
 
-  destroyed() {
-    this.handler(false);
-  },
-
-  activated() {
-    this.handler(true);
-  },
-
-  deactivated() {
-    this.handler(false);
-  },
-
   watch: {
     loading() {
       this.$nextTick(this.check);
@@ -117,14 +112,6 @@ export default sfc({
     clickErrorText() {
       this.$emit('update:error', false);
       this.$nextTick(this.check);
-    },
-
-    handler(bind) {
-      /* istanbul ignore else */
-      if (this.binded !== bind) {
-        this.binded = bind;
-        (bind ? on : off)(this.scroller, 'scroll', this.check);
-      }
     }
   },
 

packages/mixins/bind-event.js

@@ -0,0 +1,24 @@
+import { on, off } from '../utils/event';
+
+export function BindEventMixin(handler) {
+  function bind() {
+    if (!this.binded) {
+      handler.call(this, on);
+      this.binded = true;
+    }
+  }
+
+  function unbind() {
+    if (this.binded) {
+      handler.call(this, off);
+      this.binded = false;
+    }
+  }
+
+  return {
+    mounted: bind,
+    activated: bind,
+    destroyed: unbind,
+    deactivated: unbind
+  };
+}

packages/number-keyboard/index.js

@@ -1,5 +1,6 @@
 import { use } from '../utils';
 import { stopPropagation } from '../utils/event';
+import { BindEventMixin } from '../mixins/bind-event';
 import Key from './Key';
 
 const [sfc, bem, t] = use('number-keyboard');
@@ -7,6 +8,14 @@ const CLOSE_KEY_TYPE = ['blue', 'big'];
 const DELETE_KEY_TYPE = ['delete', 'big', 'gray'];
 
 export default sfc({
+  mixins: [
+    BindEventMixin(function (bind) {
+      if (this.hideOnClickOutside) {
+        bind(document.body, 'touchstart', this.onBlur);
+      }
+    })
+  ],
+
   props: {
     show: Boolean,
     title: String,
@@ -39,22 +48,6 @@ export default sfc({
     }
   },
 
-  mounted() {
-    this.handler(true);
-  },
-
-  destroyed() {
-    this.handler(false);
-  },
-
-  activated() {
-    this.handler(true);
-  },
-
-  deactivated() {
-    this.handler(false);
-  },
-
   watch: {
     show() {
       if (!this.transition) {
@@ -92,21 +85,6 @@ export default sfc({
   },
 
   methods: {
-    handler(action) {
-      /* istanbul ignore if */
-      if (this.$isServer) {
-        return;
-      }
-
-      if (action !== this.handlerStatus && this.hideOnClickOutside) {
-        this.handlerStatus = action;
-        document.body[(action ? 'add' : 'remove') + 'EventListener'](
-          'touchstart',
-          this.onBlur
-        );
-      }
-    },
-
     onBlur() {
       this.$emit('blur');
     },