Skip to content

Commit

Permalink
分组校验组建销毁时释放内存
Browse files Browse the repository at this point in the history
  • Loading branch information
awei.yu committed Jul 24, 2017
1 parent e6bfb05 commit 56170ef
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 56 deletions.
90 changes: 53 additions & 37 deletions dev/vue-verify-pop.js
View file
Expand Up @@ -2,21 +2,26 @@
* Created by awei on 2016/6/17.
*/
// self:当前verifyDirective实例
var verifyErrMsg = require('./verify-err-msg')
import verifyBase from 'verify-base'
import pop from 'vue-pop'
verifyBase.errMsg = verifyErrMsg;
var vue
var groups = {
// 读写
let verifyErrMsg = require('./verify-err-msg')

verifyBase.errMsg = verifyErrMsg
let vue
const groups = {
add (uid, name, group) {
if (!this.hasOwnProperty(uid)) this[uid] = {}
this[uid][name] = group
},
get (uid, name) {
if (this[uid]) return this[uid][name]
},
remove (uid, name) {
if (this[uid]) delete this[uid][name]
}
}
var verifyResult = {
const verifyResult = {
result: {
valid: true,
results: []
Expand All @@ -30,10 +35,11 @@ var verifyResult = {
this.result.results.push(vRs)
}
}
var specialInputs = ['checkbox', 'file']
const specialInputs = ['checkbox', 'file']

function specialInput (el, rules) {
var type = el.type
var rs = true
let rs = true
const type = el.type
switch (type) {
case 'checkbox':
if (!el.checked) rs = verifyErrMsg.specialInput.checkbox
Expand All @@ -44,20 +50,23 @@ function specialInput (el, rules) {
}
return rs
}

function verifyFromRules (val, rules) {
let justVerifyRule
if (!rules['space']) val = val.trim()
if (val === '') {
if (rules.minLength === '0' || rules.canBeNull !== undefined) {
if (rules.verify) var justVerifyRule = {verify: rules.verify}
if (rules.verify) justVerifyRule = {verify: rules.verify}
else return undefined
} else {
return verifyErrMsg.common.empty
}
}
for (let rule in justVerifyRule || rules) {
let verifyFun
if (rule === 'pop' || rule === 'errMsg' || rule === 'noCache' || rule === 'canBeNull' || rule === 'watch') continue
if (rule === 'verify') {
var verifyFun = rules[rule]
verifyFun = rules[rule]
if (typeof verifyFun === 'function') {
let vRs = verifyFun(val)
// 自定义校验函数返回的错误信息优先级最高
Expand All @@ -67,18 +76,19 @@ function verifyFromRules (val, rules) {
}
verifyFun = verifyBase(rule)
if (verifyFun) {
var verifyResult = verifyFun(val, rules[rule])
const verifyResult = verifyFun(val, rules[rule])
if (!verifyResult.valid) return verifyResult.err_msg
}
}
}

function verify (self = this, el = self.el) {
if (!el) return
if (self.params.noCache === undefined && self.verifyResult.valid !== 'unknown') return self.verifyResult
// 如果是specialInput则会跳过后面普通input的校验
var rs = specialInput(el, self.params) || verifyFromRules(el.value, self.params)
const rs = specialInput(el, self.params) || verifyFromRules(el.value, self.params)
// rs===true:当为specialInput的时候会出现这种情况
var valid = (rs === true || rs === undefined)
const valid = (rs === true || rs === undefined)
if (valid) self._pop.methods.hide()
return (self.verifyResult = {
el: el,
Expand All @@ -89,8 +99,8 @@ function verify (self = this, el = self.el) {

function getPopTip (self = this, el = self.el) {
if (self._pop) return self._pop
var component = (function () {
var pop = document.getElementById(self.params.pop)
const component = (function () {
let pop = document.getElementById(self.params.pop)
if (pop && pop.tagName === 'POP-EL-WRAP') return pop.__vue__
pop = self._host
if (pop && pop.$options.name === 'pop') return pop
Expand All @@ -106,7 +116,8 @@ function getPopTip (self = this, el = self.el) {
methods: component.new()
})
}
var exp = {

const exp = {
install (Vue) {
vue = Vue
Vue.directive('verify', {
Expand All @@ -132,13 +143,14 @@ var exp = {
],
paramWatchers: {
watch () {
if (!this._pop) return
this.verifyResult.valid = 'unknown'
this._pop.component.$emit('verify')
}
},
bind () {
this.vm.$nextTick(() => {
var pop = getPopTip.call(this)
const pop = getPopTip.call(this)
if (!pop) {
return console.warn({
el: this.el,
Expand All @@ -147,7 +159,7 @@ var exp = {
}
this.verifyResult = {valid: 'unknown'}
pop.component.$on('verify', () => {
var vRs = verify.call(this)
const vRs = verify.call(this)
verifyResult.add(vRs)
pop.methods.show(vRs.msg)
})
Expand All @@ -159,17 +171,17 @@ var exp = {
})
// 监听输入框value变化
// 输入框变化清除错误提示
var clearError = () => {
const clearError = () => {
if (this.verifyResult.valid === 'unknown') return
if (this.verifyResult.valid === false) this._pop.methods.hide()
this.verifyResult.valid = 'unknown'
}
this.on(specialInputs.indexOf(this.el.type) === -1 ? 'input' : 'change', clearError)
var model = this.el.__v_model
const model = this.el.__v_model
if (model) model.vm.$watch(model.expression, clearError)
var directives = this.vm._directives
for (var i = 0, l = directives.length; i < l; i++) {
var directive = directives[i]
const directives = this.vm._directives
for (let i = 0, l = directives.length; i < l; i++) {
const directive = directives[i]
if (directive.el === this.el && directive.name === 'bind' && directive.arg === 'value') {
this.vm.$watch(directive.expression, clearError)
break
Expand All @@ -183,25 +195,29 @@ var exp = {
template: '<slot></slot>',
created () {
if (!this.name) return console.warn('invalid group name')
var uid = this.$parent._uid
if (groups.get(uid, this.name)) return console.warn(`the name '${this.name}' has be used`)
groups.add(uid, this.name, this)
this.__uid = this.$parent._uid
if (groups.get(this.__uid, this.name)) return console.warn(`the name '${this.name}' has be used`)
groups.add(this.__uid, this.name, this)
},
destroyed () {
groups.remove(this.__uid, this.name)
},
props: ['name']
})
Vue.component('pop', pop)
Vue.prototype.$verify = function (target, showError = true) {
let pop
const eType = showError ? 'verify' : 'verifyWithoutErrorTip'
verifyResult.clear()
var eType = showError ? 'verify' : 'verifyWithoutErrorTip'
if (typeof target === 'string') {
if (target.substr(0, 1) === '#') {
target = document.getElementById(target.substr(1))
if (target) {
var pop = target._verify._pop.component
if (pop)pop.$emit(eType)
pop = target._verify._pop.component
if (pop) pop.$emit(eType)
}
} else {
var group = groups.get(this._uid, target)
const group = groups.get(this._uid, target)
if (group) {
group.$broadcast(eType)
}
Expand All @@ -210,26 +226,26 @@ var exp = {
this.$broadcast(eType)
} else {
pop = target._verify._pop.component
if (pop)pop.$emit(eType)
if (pop) pop.$emit(eType)
}
return verifyResult.result
}
},
addRule (name, fun) {
if (!vue) return console.warn('please install me first')
if (typeof fun !== 'function') return console.warn('the type of fun must be function')
var self = vue.directive('verify')
const self = vue.directive('verify')
self.params.push(name)
verifyBase(name, fun)
},
errMsg: verifyErrMsg,
verifyBase: verifyBase
}
Object.defineProperty(exp, "errMsg", {
set(v) {
verifyErrMsg = v;
verifyBase.errMsg = v;
Object.defineProperty(exp, 'errMsg', {
set (v) {
verifyErrMsg = v
verifyBase.errMsg = v
},
get: () => verifyErrMsg
});
})
export default exp
2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,6 +1,6 @@
{
"name": "vue-verify-pop",
"version": "0.1.4",
"version": "0.1.5",
"description": "自带气泡提示的vue校验插件",
"keywords": [
"verify",
Expand Down
44 changes: 26 additions & 18 deletions vue-verify-pop.js
View file
@@ -1,25 +1,22 @@
/**
* Created by awei on 2016/6/17.
*/

'use strict';

var verifyBase = require('verify-base');

var pop = require('vue-pop');

// self:当前verifyDirective实例
var verifyErrMsg = require('./verify-err-msg');

verifyBase.errMsg = verifyErrMsg;
var vue;
var vue = void 0;
var groups = {
add: function add(uid, name, group) {
if (!this.hasOwnProperty(uid)) this[uid] = {};
this[uid][name] = group;
},
get: function get(uid, name) {
if (this[uid]) return this[uid][name];
},
remove: function remove(uid, name) {
if (this[uid]) delete this[uid][name];
}
};
var verifyResult = {
Expand All @@ -37,9 +34,10 @@ var verifyResult = {
}
};
var specialInputs = ['checkbox', 'file'];

function specialInput(el, rules) {
var type = el.type;
var rs = true;
var type = el.type;
switch (type) {
case 'checkbox':
if (!el.checked) rs = verifyErrMsg.specialInput.checkbox;
Expand All @@ -50,19 +48,22 @@ function specialInput(el, rules) {
}
return rs;
}

function verifyFromRules(val, rules) {
var justVerifyRule = void 0;
if (!rules['space']) val = val.trim();
if (val === '') {
if (rules.minLength === '0' || rules.canBeNull !== undefined) {
if (rules.verify) var justVerifyRule = { verify: rules.verify };else return undefined;
if (rules.verify) justVerifyRule = { verify: rules.verify };else return undefined;
} else {
return verifyErrMsg.common.empty;
}
}
for (var rule in justVerifyRule || rules) {
var verifyFun = void 0;
if (rule === 'pop' || rule === 'errMsg' || rule === 'noCache' || rule === 'canBeNull' || rule === 'watch') continue;
if (rule === 'verify') {
var verifyFun = rules[rule];
verifyFun = rules[rule];
if (typeof verifyFun === 'function') {
var vRs = verifyFun(val);
// 自定义校验函数返回的错误信息优先级最高
Expand All @@ -72,11 +73,12 @@ function verifyFromRules(val, rules) {
}
verifyFun = verifyBase(rule);
if (verifyFun) {
var verifyResult = verifyFun(val, rules[rule]);
if (!verifyResult.valid) return verifyResult.err_msg;
var _verifyResult = verifyFun(val, rules[rule]);
if (!_verifyResult.valid) return _verifyResult.err_msg;
}
}
}

function verify() {
var self = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this;
var el = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : self.el;
Expand Down Expand Up @@ -117,13 +119,15 @@ function getPopTip() {
methods: component.new()
};
}

var exp = {
install: function install(Vue) {
vue = Vue;
Vue.directive('verify', {
params: ['pop', 'errMsg', 'noCache', 'canBeNull', 'watch', 'verify', 'length', 'minLength', 'maxNumber', 'minNumber', 'decimalLength', 'int', 'phone', 'idCard', 'bankCard', 'space', 'verifyCode', 'email'],
paramWatchers: {
watch: function watch() {
if (!this._pop) return;
this.verifyResult.valid = 'unknown';
this._pop.component.$emit('verify');
}
Expand Down Expand Up @@ -177,9 +181,12 @@ var exp = {
template: '<slot></slot>',
created: function created() {
if (!this.name) return console.warn('invalid group name');
var uid = this.$parent._uid;
if (groups.get(uid, this.name)) return console.warn('the name \'' + this.name + '\' has be used');
groups.add(uid, this.name, this);
this.__uid = this.$parent._uid;
if (groups.get(this.__uid, this.name)) return console.warn('the name \'' + this.name + '\' has be used');
groups.add(this.__uid, this.name, this);
},
destroyed: function destroyed() {
groups.remove(this.__uid, this.name);
},

props: ['name']
Expand All @@ -188,13 +195,14 @@ var exp = {
Vue.prototype.$verify = function (target) {
var showError = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

verifyResult.clear();
var pop = void 0;
var eType = showError ? 'verify' : 'verifyWithoutErrorTip';
verifyResult.clear();
if (typeof target === 'string') {
if (target.substr(0, 1) === '#') {
target = document.getElementById(target.substr(1));
if (target) {
var pop = target._verify._pop.component;
pop = target._verify._pop.component;
if (pop) pop.$emit(eType);
}
} else {
Expand Down Expand Up @@ -223,7 +231,7 @@ var exp = {
errMsg: verifyErrMsg,
verifyBase: verifyBase
};
Object.defineProperty(exp, "errMsg", {
Object.defineProperty(exp, 'errMsg', {
set: function set(v) {
verifyErrMsg = v;
verifyBase.errMsg = v;
Expand Down

0 comments on commit 56170ef

Please sign in to comment.