From 20928347e749eceec95156f5fe9fa64a32d48c2f Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Tue, 11 Dec 2018 14:57:29 +0800
Subject: [PATCH] [improvement] Button: use wxs to optimize performance (#1049)

---
 example/pages/button/index.wxml    |  1 -
 packages/button/index.ts           | 15 -------------
 packages/button/index.wxml         |  4 +++-
 packages/icon/index.wxml           |  4 ++--
 packages/wxs/array.wxs             |  5 +++++
 packages/wxs/bem.wxs               | 34 ++++++++++++++++++++++++++++++
 packages/wxs/object.wxs            | 13 ++++++++++++
 packages/{common => wxs}/utils.wxs |  3 +++
 8 files changed, 60 insertions(+), 19 deletions(-)
 create mode 100644 packages/wxs/array.wxs
 create mode 100644 packages/wxs/bem.wxs
 create mode 100644 packages/wxs/object.wxs
 rename packages/{common => wxs}/utils.wxs (66%)

diff --git a/example/pages/button/index.wxml b/example/pages/button/index.wxml
index 495cf2e7..c91445c1 100644
--- a/example/pages/button/index.wxml
+++ b/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>
diff --git a/packages/button/index.ts b/packages/button/index.ts
index ccc246e9..94b03143 100644
--- a/packages/button/index.ts
+++ b/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) {
diff --git a/packages/button/index.wxml b/packages/button/index.wxml
index 3480f938..63817067 100644
--- a/packages/button/index.wxml
+++ b/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 }}"
diff --git a/packages/icon/index.wxml b/packages/icon/index.wxml
index aefcdebf..156ab17f 100644
--- a/packages/icon/index.wxml
+++ b/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" />
diff --git a/packages/wxs/array.wxs b/packages/wxs/array.wxs
new file mode 100644
index 00000000..28753fa5
--- /dev/null
+++ b/packages/wxs/array.wxs
@@ -0,0 +1,5 @@
+function isArray(obj) {
+  return obj && obj.constructor === 'Array';
+}
+
+module.exports.isArray = isArray;
diff --git a/packages/wxs/bem.wxs b/packages/wxs/bem.wxs
new file mode 100644
index 00000000..d030ee59
--- /dev/null
+++ b/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;
diff --git a/packages/wxs/object.wxs b/packages/wxs/object.wxs
new file mode 100644
index 00000000..e0771077
--- /dev/null
+++ b/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;
diff --git a/packages/common/utils.wxs b/packages/wxs/utils.wxs
similarity index 66%
rename from packages/common/utils.wxs
rename to packages/wxs/utils.wxs
index 6435ac9e..a1ac7674 100644
--- a/packages/common/utils.wxs
+++ b/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;