From fd9993cfa331c9dbaa122da24cfa134ea84431fc Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Mon, 23 Mar 2020 10:29:18 +0800
Subject: [PATCH] perf: faster bem

---
 src/utils/create/bem.ts    | 32 +++++++++++++------------------
 src/utils/test/bem.spec.js | 39 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 19 deletions(-)
 create mode 100644 src/utils/test/bem.spec.js

diff --git a/src/utils/create/bem.ts b/src/utils/create/bem.ts
index 70ff7e5f6..f6efff4c4 100644
--- a/src/utils/create/bem.ts
+++ b/src/utils/create/bem.ts
@@ -10,30 +10,23 @@
 export type Mod = string | { [key: string]: any };
 export type Mods = Mod | Mod[];
 
-const ELEMENT = '__';
-const MODS = '--';
+function gen(name: string, mods?: Mods): string {
+  if (!mods) {
+    return '';
+  }
 
-function join(name: string, el?: string, symbol?: string): string {
-  return el ? name + symbol + el : name;
-}
-
-function prefix(name: string, mods: Mods): Mods {
   if (typeof mods === 'string') {
-    return join(name, mods, MODS);
+    return ` ${name}--${mods}`;
   }
 
   if (Array.isArray(mods)) {
-    return mods.map(item => <Mod>prefix(name, item));
+    return mods.reduce<string>((ret, item) => ret + gen(name, item), '');
   }
 
-  const ret: Mods = {};
-  if (mods) {
-    Object.keys(mods).forEach(key => {
-      ret[name + MODS + key] = mods[key];
-    });
-  }
-
-  return ret;
+  return Object.keys(mods).reduce(
+    (ret, key) => ret + (mods[key] ? gen(name, key) : ''),
+    ''
+  );
 }
 
 export function createBEM(name: string) {
@@ -42,9 +35,10 @@ export function createBEM(name: string) {
       mods = el;
       el = '';
     }
-    el = join(name, el, ELEMENT);
 
-    return mods ? [el, prefix(el, mods)] : el;
+    el = el ? `${name}__${el}` : name;
+
+    return `${el}${gen(el, mods)}`;
   };
 }
 
diff --git a/src/utils/test/bem.spec.js b/src/utils/test/bem.spec.js
new file mode 100644
index 000000000..d0e86466f
--- /dev/null
+++ b/src/utils/test/bem.spec.js
@@ -0,0 +1,39 @@
+import { createBEM } from '../create/bem';
+
+test('bem', () => {
+  const bem = createBEM('button');
+
+  expect(bem()).toEqual('button');
+
+  expect(bem('text')).toEqual('button__text');
+
+  expect(bem({ disabled: false })).toEqual('button');
+
+  expect(bem({ disabled: true })).toEqual('button button--disabled');
+
+  expect(bem('text', { disabled: true })).toEqual(
+    'button__text button__text--disabled'
+  );
+
+  expect(bem(['disabled', 'primary'])).toEqual(
+    'button button--disabled button--primary'
+  );
+
+  expect(bem([])).toEqual('button');
+
+  expect(bem(null)).toEqual('button');
+
+  expect(bem([null])).toEqual('button');
+
+  expect(bem(['disabled', ''])).toEqual('button button--disabled');
+
+  expect(bem(['disabled', undefined])).toEqual('button button--disabled');
+
+  expect(bem('text', ['disabled', 'primary'])).toEqual(
+    'button__text button__text--disabled button__text--primary'
+  );
+
+  expect(bem('text', [{ disabled: true }, 'primary'])).toEqual(
+    'button__text button__text--disabled button__text--primary'
+  );
+});