perf(validation): improve validation performance

kazupon · Mar 10, 2016 · 3e79962 · 3e79962
1 parent 420deb6
commit 3e79962
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 131 deletions.
diff --git a/src/directives/validate.js b/src/directives/validate.js
@@ -20,12 +20,12 @@ export default function (Vue) {
     paramWatchers: {
       detectBlur (val, old) {
         this.validation.detectBlur = this.isDetectBlur(val) 
-        this.validator.validate()
+        this.validator.validate(this.field)
       },
 
       detectChange (val, old) {
         this.validation.detectChange = this.isDetectChange(val)
-        this.validator.validate()
+        this.validator.validate(this.field)
       }
     },
 
@@ -61,7 +61,7 @@ export default function (Vue) {
         this.handleArray(value)
       }
 
-      this.validator.validate()
+      this.validator.validate(this.field)
     },
 
     unbind () {

diff --git a/src/directives/validator.js b/src/directives/validator.js
@@ -79,8 +79,6 @@ export default function (Vue) {
         _.extend(vm.$options, { _validator: this.validatorName })
         this.factory = new FragmentFactory(vm, this.el.innerHTML)
         vIf.insert.call(this)
-
-        this.validator.validate()
       })
 
       !lazy && vm.$activateValidator()

diff --git a/src/validations/base.js b/src/validations/base.js
@@ -115,7 +115,7 @@ export default class BaseValidation {
     this.willUpdateDirty(el)
     this.willUpdateModified(el)
 
-    this._validator.validate()
+    this._validator.validate(this.field)
   }
 
   validate (cb) {

diff --git a/src/validations/checkbox.js b/src/validations/checkbox.js
@@ -45,7 +45,7 @@ export default class CheckboxValidation extends BaseValidation {
         })
       }
     } else {
-      this._validator.validate()
+      this._validator.validate(this.field)
     }
   }
 
@@ -64,7 +64,7 @@ export default class CheckboxValidation extends BaseValidation {
     if (found === -1) { return }
 
     this._inits.splice(found, 1)
-    this._validator.validate()
+    this._validator.validate(this.field)
   }
 
   willUpdateFlags () {

diff --git a/src/validations/radio.js b/src/validations/radio.js
@@ -30,7 +30,7 @@ export default class RadioValidation extends BaseValidation {
         }
       })
     } else {
-      this._validator.validate()
+      this._validator.validate(this.field)
     }
   }
 
@@ -44,7 +44,7 @@ export default class RadioValidation extends BaseValidation {
     if (found === -1) { return }
 
     this._inits.splice(found, 1)
-    this._validator.validate()
+    this._validator.validate(this.field)
   }
 
   willUpdateFlags () {

diff --git a/src/validator.js b/src/validator.js
@@ -46,21 +46,7 @@ export default class Validator {
 
     // define the validate manually meta method to vue instance
     vm.$validate = (...args) => {
-      let field = null
-      let touched = false
-      let cb = null
-
-      each(args, (arg, index) => {
-        if (typeof arg === 'string') {
-          field = arg
-        } else if (typeof arg === 'boolean') {
-          touched = arg
-        } else if (typeof arg === 'function') {
-          cb = arg
-        }
-      })
-
-      this._validate(field, touched, cb)
+      this.validate(...args)
     }
 
     // define manually the validation errors
@@ -169,34 +155,33 @@ export default class Validator {
     validations && pull(validations, validation)
   }
 
-  validate (cb) {
-    const scope = this._scope
-
-    this._runValidates((validation, key, done) => {
-      validation.validate((results) => {
-        util.Vue.set(scope, key, results)
-        done()
-      })
-    }, () => { // finished
-      scope.touched && this._fireEvent('touched')
-      scope.dirty && this._fireEvent('dirty')
+  validate (...args) {
+    let field = null
+    let touched = false
+    let cb = null
 
-      if (this._modified !== scope.modified) {
-        this._fireEvent('modified', scope.modified)
-        this._modified = scope.modified
+    each(args, (arg, index) => {
+      if (typeof arg === 'string') {
+        field = arg
+      } else if (typeof arg === 'boolean') {
+        touched = arg
+      } else if (typeof arg === 'function') {
+        cb = arg
       }
-
-      let valid = scope.valid
-      this._fireEvent((valid ? 'valid' : 'invalid'))
-
-      cb && cb()
     })
+
+    if (!field) { // all
+      each(this.validations, (validation, key) => {
+        validation.willUpdateFlags(touched)
+      })
+      this._validates(cb)
+    } else { // each field
+      this._validate(field, touched, cb)
+    }
   }
 
   setupScope () {
-    let validationsGetter = () => { return this.validations }
-    let scopeGetter = () => { return this._scope }
-    this._defineProperties(validationsGetter, scopeGetter)
+    this._defineProperties(() => { return this.validations }, () => { return this._scope })
 
     each(this._groups, (name) => {
       let validations = this._groupValidations[name]
@@ -216,38 +201,35 @@ export default class Validator {
     }
   }
 
-
-  _validate (field, touched, cb) {
+  _validate (field, touched = false, cb = null) {
     const scope = this._scope
 
-    if (!field) { // all
-      each(this.validations, (validation, key) => {
-        validation.willUpdateFlags(touched)
+    let validation = this._getValidationFrom(field)
+    if (validation) {
+      validation.willUpdateFlags(touched)
+      validation.validate((results) => {
+        util.Vue.set(scope, field, results)
+        this._fireEvents()
+        cb && cb()
       })
-      this.validate(cb)
-    } else { // each field
-      let validation = this._getValidationFrom(field)
-      if (validation) {
-        validation.willUpdateFlags(touched)
-        validation.validate((results) => {
-          util.Vue.set(scope, field, results)
-
-          scope.dirty && this._fireEvent('dirty')
-
-          if (this._modified !== scope.modified) {
-            this._fireEvent('modified', scope.modified)
-            this._modified = scope.modified
-          }
+    }
+  }
 
-          let valid = scope.valid
-          this._fireEvent((valid ? 'valid' : 'invalid'))
+  _validates (cb) {
+    const scope = this._scope
 
-          cb && cb()
-        })
-      }
-    }
+    this._runValidates((validation, key, done) => {
+      validation.validate((results) => {
+        util.Vue.set(scope, key, results)
+        done()
+      })
+    }, () => { // finished
+      this._fireEvents()
+      cb && cb()
+    })
   }
 
+
   _getValidationFrom (field) {
     let validation = this._validations[field]
     if (!validation && this._checkboxValidations[field]) {
@@ -262,7 +244,7 @@ export default class Validator {
     each(this.validations, (validation, key) => {
       validation.reset()
     })
-    this.validate(cb)
+    this._validates(cb)
   }
 
   _setValidationErrors (errors) {
@@ -388,6 +370,21 @@ export default class Validator {
     handler && handler.apply(null, args)
   }
 
+  _fireEvents () {
+    const scope = this._scope
+
+    scope.touched && this._fireEvent('touched')
+    scope.dirty && this._fireEvent('dirty')
+
+    if (this._modified !== scope.modified) {
+      this._fireEvent('modified', scope.modified)
+      this._modified = scope.modified
+    }
+
+    let valid = scope.valid
+    this._fireEvent(valid ? 'valid' : 'invalid')
+  }
+
   _getEventName (type) {
     return this.name + ':' + type
   }

diff --git a/test/specs/event.js b/test/specs/event.js
@@ -165,6 +165,7 @@ describe('event', () => {
           input1.value = 'foo'
           input2.value = 'bar'
           trigger(input1, 'input')
+          trigger(input2, 'input')
         })
       })
     })

diff --git a/test/specs/validate.js b/test/specs/validate.js
@@ -45,27 +45,28 @@ describe('$validate', () => {
       field1.value = '11'
       field2.value = 'hi'
       vm.$nextTick(() => {
-        vm.$validate('field1')
-        vm.$validate('field2')
-
-        assert(vm.$validator1.field1.required === false)
-        assert(vm.$validator1.field1.min === false)
-        assert(vm.$validator1.field1.max === true)
-        assert(vm.$validator1.field1.valid === false)
-        assert(vm.$validator1.field1.dirty === true)
-        assert(vm.$validator1.field1.modified === true)
-        assert(vm.$validator1.field1.touched === false)
-        assert(vm.$validator1.field2.minlength === true)
-        assert(vm.$validator1.field2.valid === false)
-        assert(vm.$validator1.field2.dirty === true)
-        assert(vm.$validator1.field2.modified === true)
-        assert(vm.$validator1.field2.touched === false)
-        assert(vm.$validator1.valid === false)
-        assert(vm.$validator1.dirty === true)
-        assert(vm.$validator1.modified === true)
-        assert(vm.$validator1.touched === false)
-
-        done()
+        vm.$validate('field1', () => {
+          vm.$validate('field2', () => {
+            assert(vm.$validator1.field1.required === false)
+            assert(vm.$validator1.field1.min === false)
+            assert(vm.$validator1.field1.max === true)
+            assert(vm.$validator1.field1.valid === false)
+            assert(vm.$validator1.field1.dirty === true)
+            assert(vm.$validator1.field1.modified === true)
+            assert(vm.$validator1.field1.touched === false)
+            assert(vm.$validator1.field2.minlength === true)
+            assert(vm.$validator1.field2.valid === false)
+            assert(vm.$validator1.field2.dirty === true)
+            assert(vm.$validator1.field2.modified === true)
+            assert(vm.$validator1.field2.touched === false)
+            assert(vm.$validator1.valid === false)
+            assert(vm.$validator1.dirty === true)
+            assert(vm.$validator1.modified === true)
+            assert(vm.$validator1.touched === false)
+
+            done()
+          })
+        })
       })
     })
   })
@@ -166,23 +167,24 @@ describe('$validate', () => {
       radio3.checked = true
       vm.$nextTick(() => {
         vm.$validate('field1', () => {
-          vm.$validate('field2')
-          assert(vm.$validator1.field1.required === false)
-          assert(vm.$validator1.field1.valid === true)
-          assert(vm.$validator1.field1.touched === false)
-          assert(vm.$validator1.field1.dirty === true)
-          assert(vm.$validator1.field1.modified === true)
-          assert(vm.$validator1.field2.required === false)
-          assert(vm.$validator1.field2.valid === true)
-          assert(vm.$validator1.field2.touched === false)
-          assert(vm.$validator1.field2.dirty === true)
-          assert(vm.$validator1.field2.modified === true)
-          assert(vm.$validator1.valid === true)
-          assert(vm.$validator1.touched === false)
-          assert(vm.$validator1.dirty === true)
-          assert(vm.$validator1.modified === true)
-
-          done()
+          vm.$validate('field2', () => {
+            assert(vm.$validator1.field1.required === false)
+            assert(vm.$validator1.field1.valid === true)
+            assert(vm.$validator1.field1.touched === false)
+            assert(vm.$validator1.field1.dirty === true)
+            assert(vm.$validator1.field1.modified === true)
+            assert(vm.$validator1.field2.required === false)
+            assert(vm.$validator1.field2.valid === true)
+            assert(vm.$validator1.field2.touched === false)
+            assert(vm.$validator1.field2.dirty === true)
+            assert(vm.$validator1.field2.modified === true)
+            assert(vm.$validator1.valid === true)
+            assert(vm.$validator1.touched === false)
+            assert(vm.$validator1.dirty === true)
+            assert(vm.$validator1.modified === true)
+
+            done()
+          })
         })
       })
     })
@@ -282,26 +284,26 @@ describe('$validate', () => {
         field1.value = '11'
         field2.value = 'hi'
         vm.$nextTick(() => {
-          vm.$validate()
-
-          assert(vm.$validator1.field1.required === false)
-          assert(vm.$validator1.field1.min === false)
-          assert(vm.$validator1.field1.max === true)
-          assert(vm.$validator1.field1.valid === false)
-          assert(vm.$validator1.field1.dirty === true)
-          assert(vm.$validator1.field1.modified === true)
-          assert(vm.$validator1.field1.touched === false)
-          assert(vm.$validator1.field2.minlength === true)
-          assert(vm.$validator1.field2.valid === false)
-          assert(vm.$validator1.field2.dirty === true)
-          assert(vm.$validator1.field2.modified === true)
-          assert(vm.$validator1.field2.touched === false)
-          assert(vm.$validator1.valid === false)
-          assert(vm.$validator1.dirty === true)
-          assert(vm.$validator1.modified === true)
-          assert(vm.$validator1.touched === false)
-
-          done()
+          vm.$validate(() => {
+            assert(vm.$validator1.field1.required === false)
+            assert(vm.$validator1.field1.min === false)
+            assert(vm.$validator1.field1.max === true)
+            assert(vm.$validator1.field1.valid === false)
+            assert(vm.$validator1.field1.dirty === true)
+            assert(vm.$validator1.field1.modified === true)
+            assert(vm.$validator1.field1.touched === false)
+            assert(vm.$validator1.field2.minlength === true)
+            assert(vm.$validator1.field2.valid === false)
+            assert(vm.$validator1.field2.dirty === true)
+            assert(vm.$validator1.field2.modified === true)
+            assert(vm.$validator1.field2.touched === false)
+            assert(vm.$validator1.valid === false)
+            assert(vm.$validator1.dirty === true)
+            assert(vm.$validator1.modified === true)
+            assert(vm.$validator1.touched === false)
+
+            done()
+          })
         })
       })
     })