From daa56aa5c6e7f42fd05ccb76690499a0027f05d3 Mon Sep 17 00:00:00 2001
From: zhongnan <zhongnan@youzan.com>
Date: Thu, 17 Dec 2020 17:24:20 +0800
Subject: [PATCH] perf(wxs): improve performance with wxs

---
 packages/checkbox/index.wxs               | 20 ++++-----
 packages/grid-item/index.ts               | 35 +--------------
 packages/grid-item/index.wxml             |  9 +++-
 packages/grid-item/index.wxs              | 32 ++++++++++++++
 packages/grid/index.ts                    | 14 ------
 packages/grid/index.wxml                  |  7 ++-
 packages/grid/index.wxs                   | 13 ++++++
 packages/icon/index.wxml                  |  5 +--
 packages/icon/{computed.wxs => index.wxs} | 29 ++++---------
 packages/image/index.ts                   | 52 +----------------------
 packages/image/index.wxml                 |  5 ++-
 packages/image/index.wxs                  | 32 ++++++++++++++
 packages/slider/index.wxs                 | 18 +++-----
 13 files changed, 124 insertions(+), 147 deletions(-)
 create mode 100644 packages/grid-item/index.wxs
 create mode 100644 packages/grid/index.wxs
 rename packages/icon/{computed.wxs => index.wxs} (59%)
 create mode 100644 packages/image/index.wxs

diff --git a/packages/checkbox/index.wxs b/packages/checkbox/index.wxs
index 927eb55d..eb9c7726 100644
--- a/packages/checkbox/index.wxs
+++ b/packages/checkbox/index.wxs
@@ -1,20 +1,20 @@
 /* eslint-disable */
-var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
 
 function iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) {
-  var styles = [['font-size', utils.addUnit(iconSize)]];
+  var styles = {
+    'font-size': addUnit(iconSize),
+  };
+
   if (checkedColor && value && !disabled && !parentDisabled) {
-    styles.push(['border-color', checkedColor]);
-    styles.push(['background-color', checkedColor]);
+    styles['border-color'] = checkedColor;
+    styles['background-color'] = checkedColor;
   }
 
-  return styles
-    .map(function(item) {
-      return item.join(':');
-    })
-    .join(';');
+  return style(styles);
 }
 
 module.exports = {
-  iconStyle: iconStyle
+  iconStyle: iconStyle,
 };
diff --git a/packages/grid-item/index.ts b/packages/grid-item/index.ts
index db112b47..4754b18b 100644
--- a/packages/grid-item/index.ts
+++ b/packages/grid-item/index.ts
@@ -1,6 +1,5 @@
 import { link } from '../mixins/link';
 import { VantComponent } from '../common/component';
-import { addUnit } from '../common/utils';
 
 VantComponent({
   relation: {
@@ -48,40 +47,8 @@ VantComponent({
         direction,
         iconSize,
       } = data;
-      const width = `${100 / columnNum}%`;
-
-      const styleWrapper: string[] = [];
-      styleWrapper.push(`width: ${width}`);
-
-      if (square) {
-        styleWrapper.push(`padding-top: ${width}`);
-      }
-
-      if (gutter) {
-        const gutterValue = addUnit(gutter);
-        styleWrapper.push(`padding-right: ${gutterValue}`);
-
-        const index = children.indexOf(this);
-        if (index >= columnNum && !square) {
-          styleWrapper.push(`margin-top: ${gutterValue}`);
-        }
-      }
-
-      let contentStyle = '';
-
-      if (square && gutter) {
-        const gutterValue = addUnit(gutter);
-
-        contentStyle = `
-          right: ${gutterValue};
-          bottom: ${gutterValue};
-          height: auto;
-        `;
-      }
 
       this.setData({
-        viewStyle: styleWrapper.join('; '),
-        contentStyle,
         center,
         border,
         square,
@@ -89,6 +56,8 @@ VantComponent({
         clickable,
         direction,
         iconSize,
+        index: children.indexOf(this),
+        columnNum,
       });
     },
 
diff --git a/packages/grid-item/index.wxml b/packages/grid-item/index.wxml
index ede970ca..0070a2bb 100644
--- a/packages/grid-item/index.wxml
+++ b/packages/grid-item/index.wxml
@@ -1,9 +1,14 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
-<view class="custom-class {{ utils.bem('grid-item', { square }) }}" style="{{ viewStyle }}" bindtap="onClick">
+<view
+  class="custom-class {{ utils.bem('grid-item', { square }) }}"
+  style="{{ computed.wrapperStyle({ square, gutter, columnNum, index }) }}"
+  bindtap="onClick"
+>
   <view
     class="content-class {{ utils.bem('grid-item__content', [direction, { center, square, clickable, surround: border && gutter }]) }} {{ border ? 'van-hairline--surround' : '' }}"
-    style="{{ contentStyle }}"
+    style="{{ computed.contentStyle({ square, gutter }) }}"
   >
     <block wx:if="{{ useSlot }}">
       <slot />
diff --git a/packages/grid-item/index.wxs b/packages/grid-item/index.wxs
new file mode 100644
index 00000000..2cfe37d0
--- /dev/null
+++ b/packages/grid-item/index.wxs
@@ -0,0 +1,32 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function wrapperStyle(data) {
+  var width = 100 / data.columnNum + '%';
+
+  return style({
+    width: width,
+    'padding-top': data.square ? width : null,
+    'padding-right': addUnit(data.gutter),
+    'margin-top':
+      data.index >= data.columnNum && !data.square
+        ? addUnit(data.gutter)
+        : null,
+  });
+}
+
+function contentStyle(data) {
+  return data.square
+    ? style({
+        right: addUnit(data.gutter),
+        bottom: addUnit(data.gutter),
+        height: 'auto',
+      })
+    : '';
+}
+
+module.exports = {
+  wrapperStyle: wrapperStyle,
+  contentStyle: contentStyle,
+};
diff --git a/packages/grid/index.ts b/packages/grid/index.ts
index d81436c4..4c898f02 100644
--- a/packages/grid/index.ts
+++ b/packages/grid/index.ts
@@ -1,5 +1,4 @@
 import { VantComponent } from '../common/component';
-import { addUnit } from '../common/utils';
 
 VantComponent({
   relation: {
@@ -47,19 +46,6 @@ VantComponent({
     },
   },
 
-  data: {
-    viewStyle: '',
-  },
-
-  created() {
-    const { gutter } = this.data;
-    if (gutter) {
-      this.setData({
-        viewStyle: `padding-left: ${addUnit(gutter)}`,
-      });
-    }
-  },
-
   methods: {
     updateChildren() {
       this.children.forEach(
diff --git a/packages/grid/index.wxml b/packages/grid/index.wxml
index c5a545f5..2e4118f3 100644
--- a/packages/grid/index.wxml
+++ b/packages/grid/index.wxml
@@ -1,3 +1,8 @@
-<view class="van-grid custom-class {{ border && !gutter ? 'van-hairline--top' : '' }}" style="{{ viewStyle }}">
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="van-grid custom-class {{ border && !gutter ? 'van-hairline--top' : '' }}"
+  style="{{ computed.rootStyle({ gutter }) }}"
+>
   <slot />
 </view>
diff --git a/packages/grid/index.wxs b/packages/grid/index.wxs
new file mode 100644
index 00000000..cd3b1bd5
--- /dev/null
+++ b/packages/grid/index.wxs
@@ -0,0 +1,13 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style({
+    'padding-left': addUnit(data.gutter),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};
diff --git a/packages/icon/index.wxml b/packages/icon/index.wxml
index 62eff360..3c701745 100644
--- a/packages/icon/index.wxml
+++ b/packages/icon/index.wxml
@@ -1,10 +1,9 @@
-<wxs src="../wxs/utils.wxs" module="utils" />
-<wxs src="./computed.wxs" module="computed" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="{{ computed.rootClass({ classPrefix, name }) }}"
   style="{{ computed.rootStyle({ customStyle, color, size }) }}"
-  bind:tap="onClick"
+  bindtap="onClick"
 >
   <van-info
     wx:if="{{ info !== null || dot }}"
diff --git a/packages/icon/computed.wxs b/packages/icon/index.wxs
similarity index 59%
rename from packages/icon/computed.wxs
rename to packages/icon/index.wxs
index 4fde5f08..45e3aa0a 100644
--- a/packages/icon/computed.wxs
+++ b/packages/icon/index.wxs
@@ -1,5 +1,6 @@
 /* eslint-disable */
-var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
 
 function isImage(name) {
   return name.indexOf('/') !== -1;
@@ -22,25 +23,13 @@ function rootClass(data) {
 }
 
 function rootStyle(data) {
-  var styles = [];
-
-  if (data.color) {
-    styles.push(['color', data.color]);
-  }
-
-  if (data.size) {
-    styles.push(['font-size', utils.addUnit(data.size)]);
-  }
-
-  if (data.customStyle) {
-    styles.push([data.customStyle]);
-  }
-
-  return styles
-    .map(function (pair) {
-      return pair.join(':');
-    })
-    .join(';');
+  return style([
+    {
+      color: data.color,
+      'font-size': addUnit(data.size),
+    },
+    data.customStyle,
+  ]);
 }
 
 module.exports = {
diff --git a/packages/image/index.ts b/packages/image/index.ts
index a0bf8065..476902a6 100644
--- a/packages/image/index.ts
+++ b/packages/image/index.ts
@@ -1,17 +1,7 @@
-import { addUnit, isDef } from '../common/utils';
 import { VantComponent } from '../common/component';
 import { button } from '../mixins/button';
 import { openType } from '../mixins/open-type';
 
-const FIT_MODE_MAP = {
-  none: 'center',
-  fill: 'scaleToFill',
-  cover: 'aspectFill',
-  contain: 'aspectFit',
-  widthFix: 'widthFix',
-  heightFix: 'heightFix',
-};
-
 VantComponent({
   mixins: [button, openType],
 
@@ -28,14 +18,8 @@ VantComponent({
       },
     },
     round: Boolean,
-    width: {
-      type: null,
-      observer: 'setStyle',
-    },
-    height: {
-      type: null,
-      observer: 'setStyle',
-    },
+    width: null,
+    height: null,
     radius: null,
     lazyLoad: Boolean,
     useErrorSlot: Boolean,
@@ -44,7 +28,6 @@ VantComponent({
     fit: {
       type: String,
       value: 'fill',
-      observer: 'setMode',
     },
     showError: {
       type: Boolean,
@@ -62,38 +45,7 @@ VantComponent({
     viewStyle: '',
   },
 
-  mounted() {
-    this.setMode();
-    this.setStyle();
-  },
-
   methods: {
-    setMode() {
-      this.setData({
-        mode: FIT_MODE_MAP[this.data.fit],
-      });
-    },
-
-    setStyle() {
-      const { width, height, radius } = this.data;
-      let style = '';
-
-      if (isDef(width)) {
-        style += `width: ${addUnit(width)};`;
-      }
-
-      if (isDef(height)) {
-        style += `height: ${addUnit(height)};`;
-      }
-
-      if (isDef(radius)) {
-        style += 'overflow: hidden;';
-        style += `border-radius: ${addUnit(radius)};`;
-      }
-
-      this.setData({ viewStyle: style });
-    },
-
     onLoad(event) {
       this.setData({
         loading: false,
diff --git a/packages/image/index.wxml b/packages/image/index.wxml
index 2cccaff0..d3092bd9 100644
--- a/packages/image/index.wxml
+++ b/packages/image/index.wxml
@@ -1,14 +1,15 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
-  style="{{ viewStyle }}"
+  style="{{ computed.rootStyle({ width, height, radius }) }}"
   class="custom-class {{ utils.bem('image', { round })}}"
   bind:tap="onClick"
 >
   <image
     wx:if="{{ !error }}"
     src="{{ src }}"
-    mode="{{ mode }}"
+    mode="{{ computed.mode(fit) }}"
     lazy-load="{{ lazyLoad }}"
     class="image-class van-image__img"
     show-menu-by-longpress="{{ showMenuByLongpress }}"
diff --git a/packages/image/index.wxs b/packages/image/index.wxs
new file mode 100644
index 00000000..cec14b8b
--- /dev/null
+++ b/packages/image/index.wxs
@@ -0,0 +1,32 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style([
+    {
+      width: addUnit(data.width),
+      height: addUnit(data.height),
+      'border-radius': addUnit(data.radius),
+    },
+    data.radius ? 'overflow: hidden' : null,
+  ]);
+}
+
+var FIT_MODE_MAP = {
+  none: 'center',
+  fill: 'scaleToFill',
+  cover: 'aspectFill',
+  contain: 'aspectFit',
+  widthFix: 'widthFix',
+  heightFix: 'heightFix',
+};
+
+function mode(fit) {
+  return FIT_MODE_MAP[fit];
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  mode: mode,
+};
diff --git a/packages/slider/index.wxs b/packages/slider/index.wxs
index d6404d62..7c43e6e5 100644
--- a/packages/slider/index.wxs
+++ b/packages/slider/index.wxs
@@ -1,18 +1,12 @@
 /* eslint-disable */
-var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
 
 function barStyle(barHeight, activeColor) {
-  var styles = [['height', utils.addUnit(barHeight)]];
-
-  if (activeColor) {
-    styles.push(['background', activeColor]);
-  }
-
-  return styles
-    .map(function (item) {
-      return item.join(':');
-    })
-    .join(';');
+  return style({
+    height: addUnit(barHeight),
+    background: activeColor,
+  });
 }
 
 module.exports = {