[improvement] optimize boundingClientRect (#528)

build/dev.js

@@ -1,5 +1,9 @@
 require('./compiler');
+const fs = require('fs-extra');
+const path = require('path');
 const serve = require('webpack-serve');
 const config = require('./webpack.doc.dev');
 
+fs.removeSync(path.join(__dirname, '../example/dist'));
+
 serve({}, { config });

dist/common/create.js

@@ -1,6 +1,4 @@
-function $emit() {
+import { basic } from '../mixins/basic';
-  this.triggerEvent.apply(this, arguments);
-}
 
 export function create(sfc) {
   // map props to properties
@@ -15,25 +13,26 @@ export function create(sfc) {
     delete sfc.mixins;
   }
 
-  // map field to form-field behavior
+  // map classes to externalClasses
-  if (sfc.field) {
+  sfc.externalClasses = sfc.classes || [];
-    sfc.behaviors = sfc.behaviors || [];
+  delete sfc.classes;
-    sfc.behaviors.push('wx://form-field');
+
-  }
+  // add default externalClasses
+  sfc.externalClasses.push('custom-class');
+
+  // add default behaviors
+  sfc.behaviors = sfc.behaviors || [];
+  sfc.behaviors.push(basic);
 
   // add default options
   sfc.options = sfc.options || {};
   sfc.options.multipleSlots = true;
   sfc.options.addGlobalClass = true;
 
-  // add default externalClasses
+  // map field to form-field behavior
-  sfc.externalClasses = sfc.classes || [];
+  if (sfc.field) {
-  sfc.externalClasses.push('custom-class');
+    sfc.behaviors.push('wx://form-field');
-
+  }
-  // add default methods
-  sfc.methods = sfc.methods || {};
-  sfc.methods.$emit = $emit;
 
   Component(sfc);
 };
-

dist/mixins/basic.js

@@ -0,0 +1,23 @@
+export const basic = Behavior({
+  options: {
+    multipleSlots: true,
+    addGlobalClass: true
+  },
+
+  methods: {
+    $emit() {
+      this.triggerEvent.apply(this, arguments);
+    },
+
+    getRect(selector, all) {
+      return new Promise((resolve, reject) => {
+        wx.createSelectorQuery()
+          .in(this)[all ? 'selectAll' : 'select'](selector)
+          .boundingClientRect(rect => {
+            rect && resolve(rect);
+          })
+          .exec();
+      });
+    }
+  }
+});

dist/notice-bar/index.js

@@ -76,55 +76,47 @@ create({
 
   methods: {
     init() {
-      wx.createSelectorQuery()
+      this.getRect('.van-notice-bar__content').then(rect => {
-        .in(this)
+        if (!rect || !rect.width) {
-        .select('.van-notice-bar__content')
+          return;
-        .boundingClientRect((rect) => {
+        }
+        this.setData({
+          width: rect.width
+        });
+
+        this.getRect('.van-notice-bar__content-wrap').then(rect => {
           if (!rect || !rect.width) {
             return;
           }
-          this.setData({
-            width: rect.width
-          });
 
-          wx.createSelectorQuery()
+          const wrapWidth = rect.width;
-            .in(this)
+          const {
-            .select('.van-notice-bar__content-wrap')
+            width, speed, scrollable, delay
-            .boundingClientRect((rect) => {
+          } = this.data;
-              if (!rect || !rect.width) {
-                return;
-              }
 
-              const wrapWidth = rect.width;
+          if (scrollable && wrapWidth < width) {
-              const {
+            const elapse = width / speed * 1000;
-                width, speed, scrollable, delay
+            const animation = wx.createAnimation({
-              } = this.data;
+              duration: elapse,
+              timeingFunction: 'linear',
+              delay
+            });
+            const resetAnimation = wx.createAnimation({
+              duration: 0,
+              timeingFunction: 'linear'
+            });
 
-              if (scrollable && wrapWidth < width) {
+            this.setData({
-                const elapse = width / speed * 1000;
+              elapse,
-                const animation = wx.createAnimation({
+              wrapWidth,
-                  duration: elapse,
+              animation,
-                  timeingFunction: 'linear',
+              resetAnimation
-                  delay
+            }, () => {
-                });
+              this.scroll();
-                const resetAnimation = wx.createAnimation({
+            });
-                  duration: 0,
+          }
-                  timeingFunction: 'linear'
+        });
-                });
+      });
-
-                this.setData({
-                  elapse,
-                  wrapWidth,
-                  animation,
-                  resetAnimation
-                }, () => {
-                  this.scroll();
-                });
-              }
-            })
-            .exec();
-        })
-        .exec();
     },
 
     scroll() {

dist/progress/index.js

@@ -85,25 +85,15 @@ create({
       });
     },
 
-    getRect(selector, callback) {
-      wx.createSelectorQuery()
-        .in(this)
-        .select(selector)
-        .boundingClientRect(rect => {
-          rect && callback(rect);
-        })
-        .exec();
-    },
-
     getWidth() {
-      this.getRect('.van-progress', rect => {
+      this.getRect('.van-progress').then(rect => {
         this.setData({
           progressWidth: rect.width
         });
         this.setPortionStyle();
       });
 
-      this.getRect('.van-progress__pivot', rect => {
+      this.getRect('.van-progress__pivot').then(rect => {
         this.setData({
           pivotWidth: rect.width || 0
         });

dist/slider/index.js

@@ -33,14 +33,6 @@ create({
   },
 
   methods: {
-    getRect(callback) {
-      wx.createSelectorQuery()
-        .in(this)
-        .select('.van-slider')
-        .boundingClientRect(callback)
-        .exec();
-    },
-
     onTouchStart(event) {
       if (this.data.disabled) return;
 
@@ -52,7 +44,7 @@ create({
       if (this.data.disabled) return;
 
       this.touchMove(event);
-      this.getRect(rect => {
+      this.getRect('.van-slider').then(rect => {
         const diff = this.deltaX / rect.width * 100;
         this.updateValue(this.startValue + diff);
       });

dist/tabs/index.js

@@ -100,21 +100,12 @@ create({
       }
     },
 
-    getRect(selector, callback, all) {
-      wx.createSelectorQuery()
-        .in(this)[all ? 'selectAll' : 'select'](selector)
-        .boundingClientRect(rect => {
-          rect && callback(rect);
-        })
-        .exec();
-    },
-
     setLine() {
       if (this.data.type !== 'line') {
         return;
       }
 
-      this.getRect('.van-tab', rects => {
+      this.getRect('.van-tab', true).then(rects => {
         const rect = rects[this.data.active];
         const width = this.data.lineWidth || rect.width;
         let left = rects
@@ -130,7 +121,7 @@ create({
             transition-duration: ${this.data.duration}s;
           `
         });
-      }, true);
+      });
     },
 
     setActiveTab() {
@@ -155,20 +146,20 @@ create({
         return;
       }
 
-      this.getRect('.van-tab', tabRects => {
+      this.getRect('.van-tab', true).then(tabRects => {
         const tabRect = tabRects[this.data.active];
         const offsetLeft = tabRects
           .slice(0, this.data.active)
           .reduce((prev, curr) => prev + curr.width, 0);
         const tabWidth = tabRect.width;
 
-        this.getRect('.van-tabs__nav', navRect => {
+        this.getRect('.van-tabs__nav').then(navRect => {
           const navWidth = navRect.width;
           this.setData({
             scrollLeft: offsetLeft - (navWidth - tabWidth) / 2
           });
         });
-      }, true);
+      });
     }
   }
 });

packages/common/create.js

@@ -1,6 +1,4 @@
-function $emit() {
+import { basic } from '../mixins/basic';
-  this.triggerEvent.apply(this, arguments);
-}
 
 export function create(sfc) {
   // map props to properties
@@ -15,25 +13,26 @@ export function create(sfc) {
     delete sfc.mixins;
   }
 
-  // map field to form-field behavior
+  // map classes to externalClasses
-  if (sfc.field) {
+  sfc.externalClasses = sfc.classes || [];
-    sfc.behaviors = sfc.behaviors || [];
+  delete sfc.classes;
-    sfc.behaviors.push('wx://form-field');
+
-  }
+  // add default externalClasses
+  sfc.externalClasses.push('custom-class');
+
+  // add default behaviors
+  sfc.behaviors = sfc.behaviors || [];
+  sfc.behaviors.push(basic);
 
   // add default options
   sfc.options = sfc.options || {};
   sfc.options.multipleSlots = true;
   sfc.options.addGlobalClass = true;
 
-  // add default externalClasses
+  // map field to form-field behavior
-  sfc.externalClasses = sfc.classes || [];
+  if (sfc.field) {
-  sfc.externalClasses.push('custom-class');
+    sfc.behaviors.push('wx://form-field');
-
+  }
-  // add default methods
-  sfc.methods = sfc.methods || {};
-  sfc.methods.$emit = $emit;
 
   Component(sfc);
 };
-

packages/mixins/basic.js

@@ -0,0 +1,23 @@
+export const basic = Behavior({
+  options: {
+    multipleSlots: true,
+    addGlobalClass: true
+  },
+
+  methods: {
+    $emit() {
+      this.triggerEvent.apply(this, arguments);
+    },
+
+    getRect(selector, all) {
+      return new Promise((resolve, reject) => {
+        wx.createSelectorQuery()
+          .in(this)[all ? 'selectAll' : 'select'](selector)
+          .boundingClientRect(rect => {
+            rect && resolve(rect);
+          })
+          .exec();
+      });
+    }
+  }
+});

packages/notice-bar/index.js

@@ -76,55 +76,47 @@ create({
 
   methods: {
     init() {
-      wx.createSelectorQuery()
+      this.getRect('.van-notice-bar__content').then(rect => {
-        .in(this)
+        if (!rect || !rect.width) {
-        .select('.van-notice-bar__content')
+          return;
-        .boundingClientRect((rect) => {
+        }
+        this.setData({
+          width: rect.width
+        });
+
+        this.getRect('.van-notice-bar__content-wrap').then(rect => {
           if (!rect || !rect.width) {
             return;
           }
-          this.setData({
-            width: rect.width
-          });
 
-          wx.createSelectorQuery()
+          const wrapWidth = rect.width;
-            .in(this)
+          const {
-            .select('.van-notice-bar__content-wrap')
+            width, speed, scrollable, delay
-            .boundingClientRect((rect) => {
+          } = this.data;
-              if (!rect || !rect.width) {
-                return;
-              }
 
-              const wrapWidth = rect.width;
+          if (scrollable && wrapWidth < width) {
-              const {
+            const elapse = width / speed * 1000;
-                width, speed, scrollable, delay
+            const animation = wx.createAnimation({
-              } = this.data;
+              duration: elapse,
+              timeingFunction: 'linear',
+              delay
+            });
+            const resetAnimation = wx.createAnimation({
+              duration: 0,
+              timeingFunction: 'linear'
+            });
 
-              if (scrollable && wrapWidth < width) {
+            this.setData({
-                const elapse = width / speed * 1000;
+              elapse,
-                const animation = wx.createAnimation({
+              wrapWidth,
-                  duration: elapse,
+              animation,
-                  timeingFunction: 'linear',
+              resetAnimation
-                  delay
+            }, () => {
-                });
+              this.scroll();
-                const resetAnimation = wx.createAnimation({
+            });
-                  duration: 0,
+          }
-                  timeingFunction: 'linear'
+        });
-                });
+      });
-
-                this.setData({
-                  elapse,
-                  wrapWidth,
-                  animation,
-                  resetAnimation
-                }, () => {
-                  this.scroll();
-                });
-              }
-            })
-            .exec();
-        })
-        .exec();
     },
 
     scroll() {

packages/progress/index.js

@@ -85,25 +85,15 @@ create({
       });
     },
 
-    getRect(selector, callback) {
-      wx.createSelectorQuery()
-        .in(this)
-        .select(selector)
-        .boundingClientRect(rect => {
-          rect && callback(rect);
-        })
-        .exec();
-    },
-
     getWidth() {
-      this.getRect('.van-progress', rect => {
+      this.getRect('.van-progress').then(rect => {
         this.setData({
           progressWidth: rect.width
         });
         this.setPortionStyle();
       });
 
-      this.getRect('.van-progress__pivot', rect => {
+      this.getRect('.van-progress__pivot').then(rect => {
         this.setData({
           pivotWidth: rect.width || 0
         });

packages/slider/index.js

@@ -33,14 +33,6 @@ create({
   },
 
   methods: {
-    getRect(callback) {
-      wx.createSelectorQuery()
-        .in(this)
-        .select('.van-slider')
-        .boundingClientRect(callback)
-        .exec();
-    },
-
     onTouchStart(event) {
       if (this.data.disabled) return;
 
@@ -52,7 +44,7 @@ create({
       if (this.data.disabled) return;
 
       this.touchMove(event);
-      this.getRect(rect => {
+      this.getRect('.van-slider').then(rect => {
         const diff = this.deltaX / rect.width * 100;
         this.updateValue(this.startValue + diff);
       });

packages/tabs/index.js

@@ -100,21 +100,12 @@ create({
       }
     },
 
-    getRect(selector, callback, all) {
-      wx.createSelectorQuery()
-        .in(this)[all ? 'selectAll' : 'select'](selector)
-        .boundingClientRect(rect => {
-          rect && callback(rect);
-        })
-        .exec();
-    },
-
     setLine() {
       if (this.data.type !== 'line') {
         return;
       }
 
-      this.getRect('.van-tab', rects => {
+      this.getRect('.van-tab', true).then(rects => {
         const rect = rects[this.data.active];
         const width = this.data.lineWidth || rect.width;
         let left = rects
@@ -130,7 +121,7 @@ create({
             transition-duration: ${this.data.duration}s;
           `
         });
-      }, true);
+      });
     },
 
     setActiveTab() {
@@ -155,20 +146,20 @@ create({
         return;
       }
 
-      this.getRect('.van-tab', tabRects => {
+      this.getRect('.van-tab', true).then(tabRects => {
         const tabRect = tabRects[this.data.active];
         const offsetLeft = tabRects
           .slice(0, this.data.active)
           .reduce((prev, curr) => prev + curr.width, 0);
         const tabWidth = tabRect.width;
 
-        this.getRect('.van-tabs__nav', navRect => {
+        this.getRect('.van-tabs__nav').then(navRect => {
           const navWidth = navRect.width;
           this.setData({
             scrollLeft: offsetLeft - (navWidth - tabWidth) / 2
           });
         });
-      }, true);
+      });
     }
   }
 });