[improvement] Button: use wxs to optimize performance (#1049)

example/pages/button/index.wxml

@@ -34,5 +34,4 @@
     <van-button size="small" class="demo-margin-right">小型按钮</van-button>
     <van-button size="mini">迷你按钮</van-button>
   </demo-block>
-
 </demo-section>

packages/button/index.ts

@@ -24,21 +24,6 @@ VantComponent({
     }
   },
 
-  computed: {
-    classes(): string {
-      const { type, size, block, plain, round, square, loading, disabled } = this.data;
-      return this.classNames('van-button', `van-button--${type}`, `van-button--${size}`, {
-        'van-button--block': block,
-        'van-button--round': round,
-        'van-button--plain': plain,
-        'van-button--square': square,
-        'van-button--loading': loading,
-        'van-button--disabled': disabled,
-        'van-button--unclickable': disabled || loading
-      });
-    }
-  },
-
   methods: {
     onClick() {
       if (!this.data.disabled && !this.data.loading) {

packages/button/index.wxml

@@ -1,7 +1,9 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <button
   id="{{ id }}"
   lang="{{ lang }}"
-  class="custom-class {{ classes }}"
+  class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, unclickable: disabled || loading }]) }}"
   open-type="{{ openType }}"
   session-from="{{ sessionFrom }}"
   app-parameter="{{ appParameter }}"

packages/icon/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
   class="custom-class {{ classPrefix }} {{ utils.isSrc(name) ? 'van-icon--image' : classPrefix + '-' + name }}"
   style="{{ color ? 'color: ' + color + ';' : '' }}{{ size ? 'font-size: ' + size + ';' : '' }}{{ customStyle }}"
@@ -14,5 +16,3 @@
     src="{{ name }}"
   />
 </view>
-
-<wxs src="../common/utils.wxs" module="utils" />

packages/wxs/array.wxs

@@ -0,0 +1,5 @@
+function isArray(obj) {
+  return obj && obj.constructor === 'Array';
+}
+
+module.exports.isArray = isArray;

packages/wxs/bem.wxs

@@ -0,0 +1,34 @@
+var array = require('./array.wxs');
+var object = require('./object.wxs');
+var PREFIX = 'van-';
+
+function join(name, mods) {
+  name = PREFIX + name;
+  mods = mods.map(function(mod) {
+    return name + '--' + mod;
+  });
+  mods.unshift(name);
+  return mods.join(' ');
+}
+
+function traversing(mods, conf) {
+  if (typeof conf === 'string') {
+    mods.push(conf);
+  } else if (array.isArray(conf)) {
+    conf.forEach(function(item) {
+      traversing(mods, item);
+    });
+  } else if (typeof conf === 'object') {
+    object.keys(conf).forEach(function(key) {
+      conf[key] && mods.push(key);
+    });
+  }
+}
+
+function bem(name, conf) {
+  var mods = [];
+  traversing(mods, conf);
+  return join(name, mods);
+}
+
+module.exports.bem = bem;

packages/wxs/object.wxs

@@ -0,0 +1,13 @@
+/* eslint-disable */
+var REGEXP = getRegExp('{|}|"', 'g');
+
+function keys(obj) {
+  return JSON.stringify(obj)
+    .replace(REGEXP, '')
+    .split(',')
+    .map(function(item) {
+      return item.split(':')[0];
+    });
+}
+
+module.exports.keys = keys;

packages/wxs/utils.wxs

@@ -1,5 +1,8 @@
+var bem = require('./bem.wxs').bem;
+
 function isSrc(url) {
   return url.indexOf('http') === 0 || url.indexOf('data:image') === 0;
 }
 
+module.exports.bem = bem;
 module.exports.isSrc = isSrc;