refactor v-bind:class

yyx990803 · yyx990803 · commit 67a77d2e35f0 · 2016-04-07T22:26:02.000-04:00
- revert class update mechanism due to perf regression
- normalize array of (string|object) and objects into array of strings. this
  simplifies the scenario for the rest of the code.
diff --git a/src/directives/internal/class.js b/src/directives/internal/class.js
@@ -2,74 +2,75 @@ import {
   addClass,
   removeClass,
   isArray,
-  isPlainObject
+  isObject
 } from '../../util/index'
 
 export default {
 
   deep: true,
 
   update (value) {
-    if (value && typeof value === 'string') {
-      this.handleObject(stringToObject(value))
-    } else if (isPlainObject(value)) {
-      this.handleObject(value)
-    } else if (isArray(value)) {
-      this.handleArray(value)
-    } else {
+    if (!value) {
       this.cleanup()
+    } else if (typeof value === 'string') {
+      this.setClass(value.trim().split(/\s+/))
+    } else {
+      this.setClass(normalize(value))
     }
   },
 
-  handleObject (value) {
-    this.cleanup(value)
-    this.prevKeys = Object.keys(value)
-    setObjectClasses(this.el, value)
-  },
-
-  handleArray (value) {
+  setClass (value) {
     this.cleanup(value)
     for (var i = 0, l = value.length; i < l; i++) {
       var val = value[i]
-      if (val && isPlainObject(val)) {
-        setObjectClasses(this.el, val)
-      } else if (val && typeof val === 'string') {
-        addClass(this.el, val)
+      if (val) {
+        apply(this.el, val, addClass)
       }
     }
-    this.prevKeys = value.slice()
+    this.prevKeys = value
   },
 
   cleanup (value) {
-    if (!this.prevKeys) return
-
-    var i = this.prevKeys.length
+    const prevKeys = this.prevKeys
+    if (!prevKeys) return
+    var i = prevKeys.length
     while (i--) {
-      var key = this.prevKeys[i]
+      var key = prevKeys[i]
       if (!key) continue
-
-      var keys = isPlainObject(key) ? Object.keys(key) : [key]
-      for (var j = 0, l = keys.length; j < l; j++) {
-        toggleClasses(this.el, keys[j], removeClass)
+      if (key && (!value || value.indexOf(key) < 0)) {
+        apply(this.el, key, removeClass)
       }
     }
   }
 }
 
-function setObjectClasses (el, obj) {
-  var keys = Object.keys(obj)
-  for (var i = 0, l = keys.length; i < l; i++) {
-    var key = keys[i]
-    if (!obj[key]) continue
-    toggleClasses(el, key, addClass)
-  }
-}
+/**
+ * Normalize objects and arrays (potentially containing objects)
+ * into array of strings.
+ *
+ * @param {Object|Array<String|Object>} value
+ * @return {Array<String>}
+ */
 
-function stringToObject (value) {
-  var res = {}
-  var keys = value.trim().split(/\s+/)
-  for (var i = 0, l = keys.length; i < l; i++) {
-    res[keys[i]] = true
+function normalize (value) {
+  const res = []
+  if (isArray(value)) {
+    for (var i = 0, l = value.length; i < l; i++) {
+      const key = value[i]
+      if (key) {
+        if (typeof key === 'string') {
+          res.push(key)
+        } else {
+          for (var k in key) {
+            if (key[k]) res.push(k)
+          }
+        }
+      }
+    }
+  } else if (isObject(value)) {
+    for (var key in value) {
+      if (value[key]) res.push(key)
+    }
   }
   return res
 }
@@ -85,14 +86,12 @@ function stringToObject (value) {
  * @param {Function} fn
  */
 
-function toggleClasses (el, key, fn) {
+function apply (el, key, fn) {
   key = key.trim()
-
   if (key.indexOf(' ') === -1) {
     fn(el, key)
     return
   }
-
   // The key contains one or more space characters.
   // Since a class name doesn't accept such characters, we
   // treat it as multiple classes.
diff --git a/test/unit/specs/directives/internal/class_spec.js b/test/unit/specs/directives/internal/class_spec.js
@@ -12,8 +12,8 @@ describe(':class', function () {
     var dir = _.extend({ el: el }, def)
     dir.update('bar')
     expect(el.className).toBe('foo bar')
-    dir.update('baz')
-    expect(el.className).toBe('foo baz')
+    dir.update('baz qux')
+    expect(el.className).toBe('foo baz qux')
     dir.update('qux')
     expect(el.className).toBe('foo qux')
     dir.update()
@@ -52,7 +52,7 @@ describe(':class', function () {
     dir.update(['b', 'c'])
     expect(el.className).toBe('a b c')
     dir.update(['d', 'c'])
-    expect(el.className).toBe('a d c')
+    expect(el.className).toBe('a c d')
     dir.update()
     expect(el.className).toBe('a')
     // test mutating array
@@ -71,7 +71,7 @@ describe(':class', function () {
     dir.update(['f', {z: true}])
     expect(el.className).toBe('a f z')
     dir.update(['l', 'f', {n: true, z: true}])
-    expect(el.className).toBe('a l f n z')
+    expect(el.className).toBe('a f z l n')
     dir.update(['x', {}])
     expect(el.className).toBe('a x')
     dir.update()
