javascript代码实例教程-JS组件化验证检测_js

上一篇: javascript代码实例教程-JavaScr... 下一篇:javascript代码实例教程-nodejs+...

javascript代码实例教程-JS组件化验证检测

发布时间：2019-01-20 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS组件化验证检测，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

作者：Jiang, Jilin

在web开发过程中，我们时常会遇到输入检测的情况。如果只是简单的输入验证检测，例如邮箱、电话等。我们可以简单的使用if…else if…来依次判断。但是如果这些判断存在延迟检测（例如ajax验证），再使用if…else if…已经无法满足需求了。

但是好在，利用 jQuery的deffer方法。通过done(func)嵌套，可以实现序列化的检测：

javascript代码实例教程-JS组件化验证检测

$deferred.done(function() {

// CondITion

$deferred.done(function() {

// Condition

$deferred.done(function() {

// Condition

$deferred.done(function() {

// Condition

$deferred.done(function() {

// Condition

// do something

});

通过嵌套依次进行检测

通常而言，通过这种嵌套，可以实现大多数的检测判断。但是如果我们考虑如下的检测顺序：

javascript代码实例教程-JS组件化验证检测

在这种多分支的情况下，使用deffer如下：

VAR _once = true;

function finalCheck() {

if(!_once) return;

_once = false;

$deferred.done(function() {

// Condition

// do something

});

}

$deferred.done(function() {

// Condition

$deferred.done(function() {

// Condition

$deferred.done(function() {

// Condition

finalCheck();

});

$deferred.done(function() {

// Condition

$deferred.done(function() {

// Condition

finalCheck();

});

可以发现随着分支增多，代码结构会变得越来越复杂。随着时间推移，如果需求变更。需要在判断中增加、删除甚至添加一个分支的时候。你会发现，这种结构很难维护。

那么如何通过封装来将此结构保持最好的维护性呢？我们可以通过将一个个检测条件打包，变成一个个组件。通过组合组件顺序，便可组织出我们需要的检测结构。

第一种结构设计：

new Condition(function(result) {

// Condition

result.success();

}).next(function(result) {

// Condition

result.success();

}).next(function(result) {

// Condition

result.success();

}).next(function(result) {

// Condition

result.success();

}).next(function(result) {

// Condition

result.success();

}). success(function() {

// do something

}).start();

第二种结构设计：

var seq1 = new Condition(function(result) {

// Condition

result.success();

}).next(function(result) {

// Condition

result.success();

});

var seq2_1 = new Condition(function(result) {

// Condition

result.success();

});

var seq2_2 = new Condition(function(result) {

// Condition

result.success()

}).next(function(result) {

// Condition

result.success();

});

seq1

.nextOr(seq2_1, seq2_2)

.next(function(result) {

// Condition

result.success();

}). success(function() {

// do something

}).start();

javascript代码实例教程-JS组件化验证检测

接下来，我们开始构建我们的组件容器：

var Condition = function(func) {

this.func = func;

this.root = null;

this.successFunc = null;

return this;

};

其中，通过调用next方法，可以添加一个新的检测条件，并返回一个新的组件：

Condition.PRototyPE.next = function(func) {

var _next = new Condition(func);

_next.root = this.root || this;

this._next = _next;

return _next;

};

添加success方法用于存储检测成功的回调函数：

Condition.prototype.success = function(func) {

this.successFunc = func;

return this;

};

接着，就是添加start事件。当其被调用时，开始整个检测序列：

Condition.prototype._doAction = function() {

var _this = this;

_this.func({

success: function() {

// 如果该组件有success回调，则调用

if(_this.successFunc) {

_this.successFunc();

}

// 如果有后续组件则继续调用

if(_this._next) {

_this._next._doAction();

}

});

};

Condition.prototype.start = function() {

(this.root || this)._doAction();

};

测试如下：

new Condition(function(result) {

console.LOG(Condition 1);

result.success();

}).success(function() {

console.log(Success 1);

}).next(function(result) {

console.log(Condition 2);

result.success();

}).success(function() {

console.log(Success 2);

}).start();

// Condition 1

// Success 1

// Condition 2

// Success 2

有时候，我们会需要支持多个success事件，所以可以对success方法进行扩充：

var Condition = function(func) {

this.func = func;

this.root = null;

this.successFunc = [];

return this;

};

Condition.prototype.success = function(func) {

this.successFunc.push(func);

return this;

};

// 如果该组件有success回调，则调用

for(var i = 0 ; i < _this.successFunc.length ; i += 1) {

_this.successFunc[i]();

}

然后考虑or分支结构，我们使用一个数组保存Condition列表。当执行到包含列表的组件时，遍历执行：

Condition.prototype.nextOr = function() {

var _next = new Condition(function(result) {

result.success();

});

_next.root = this.root || this;

this._next = _next;

this._nextList = arguments;

for(var i = 0 ; i < arguments.length ; i += 1) {

arguments[i].success(function() {

_next._doAction();

});

}

return _next;

};

同时，我们需要改写_doAction方法，使其支持多个Condition运行：

Condition.prototype._doAction = function() {

var _this = this;

_this.func({

success: function() {

// 如果该组件有success回调，则调用

if(_this.successFunc) {

_this.successFunc();

}

// 如果有后续组件则继续调用

if(_this._next) {

if(_this._nextList) {

for(var i = 0 ; i < _this._nextList.length ; i += 1) {

_this._nextList[i].start ();

}

} else {

_this._next._doAction();

}

});

};

测试如下：

var s1 = new Condition(function(result) {

console.log(Condition 1.1);

result.success();

}).next(function(result) {

console.log(Condition 1.2);

result.success();

});

var s2_1 = new Condition(function(result) {

console.log(Condition 2-1);

result.success();

});

var s2_2 = new Condition(function(result) {

console.log(Condition 2-2.1);

result.success();

}).next(function(result) {

console.log(Condition 2-2.2);

result.success();

});

s1.nextOr(s2_1, s2_2).success(function() {

console.log(Condition 3);

}).start();

// Condition 1.1

// Condition 1.2

// Condition 2-1

// Condition 3

// Condition 2-2.1

// Condition 2-2.2

// Condition 3

我们发现通过两个分支走后，都调用了Condition3，这是我们不希望看到的。我们接下去要实现组件的once：

Condition.prototype.nextOr = function() {

var _once = true;

var _next = new Condition(function(result) {

result.success();

});

_next.root = this.root || this;

this._next = _next;

this._nextList = arguments;

for(var i = 0 ; i < arguments.length ; i += 1) {

arguments[i].success(function() {

if(!_once) return;

_once = false;

_next._doAction();

});

}

return _next;

};

测试如下：

// Condition 1.1

// Condition 1.2

// Condition 2-1

// Condition 3

// Condition 2-2.1

// Condition 2-2.2

小贴士：在Condition中使用Once和原来的结构中使用once区别是什么？

将分支管理逻辑从代码中剥离可以减少代码复杂度，从而提升代码的可读性和维护性。

大致功能已经完成，但是仍然不满意。因为第一个分支已经成功的情况下，第二个分支还是走了一边。在不产生效果的情况下，该分支其实可以跳过。对doAction进行扩展：

Condition.prototype._doAction = function() {

var _succeed = false;

var _this = this;

var i;

_this.func({

success: function() {

// 如果该组件有success回调，则调用

for(i = 0 ; i < _this.successFunc.length ; i += 1) {

_this.successFunc[i]();

}

// 如果有后续组件则继续调用

if(_this._next) {

if(_this._nextList) {

for(i = 0 ; i < _this._nextList.length ; i += 1) {

if(_succeed) break;

_this._nextList[i].success(function() {

_succeed = true;

}).start();

}

} else {

_this._next._doAction();

}

});

};

测试如下：

// Condition 1.1

// Condition 1.2

// Condition 2-1

// Condition 3

还没有结束，如果分支中存在延迟操作，例如ajax请求等。仍然会走遍所有分支：

var s1 = new Condition(function(result) {

console.log(Condition 1.1);

result.success();

}).next(function(result) {

console.log(Condition 1.2);

result.success();

});

var s2_1 = new Condition(function(result) {

console.log(Condition 2-1);

setTimeout(function() {

result.success();

}, 100);

});

var s2_2 = new Condition(function(result) {

console.log(Condition 2-2.1);

setTimeout(function() {

result.success();

}, 100);

}).next(function(result) {

console.log(Condition 2-2.2);

setTimeout(function() {

result.success();

}, 100);

});

s1.nextOr(s2_1, s2_2).success(function() {

console.log(Condition 3);

}).start();

// Condition 1.1

// Condition 1.2

// Condition 2-1

// Condition 2-2.1

// Condition 3

// Condition 2-2.2

给每个分支添加一个标示符，当标示符为false时，停止该分支还未运行的所有检测：

var Condition = function(func) {

this.func = func;

this.root = null;

this.successFunc = [];

this._stop = false;

return this;

};

Condition.prototype._doAction = function() {

var _succeed = false;

var _this = this;

var i;

if((this.root || this)._stop) return;

…

};

Condition.prototype.start = function() {

(this.root || this)._stop = false;

(this.root || this)._doAction();

};

Condition.prototype.nextOr = function() {

var _once = true;

var _this = this;

var i;

var _next = new Condition(function(result) {

result.success();

});

_next.root = _this.root || _this;

_this._next = _next;

_this._nextList = arguments;

function DOSuccess() {

for(i = 0 ; i < _this._nextList.length ; i += 1) {

var _root = _this._nextList[i];

_root = _root.root || _root;

_root._stop = true;

}

if(!_once) return;

_once = false;

_next._doAction();

}

for(i = 0 ; i < arguments.length ; i += 1) {

arguments[i].success(function() {

doSuccess();

});

}

return _next;

};

测试如下：

// Condition 1.1

// Condition 1.2

// Condition 2-1

// Condition 2-2.1

// Condition 3

好了，一个简易版的组件就完成了，通过这种组件化方式可以可方便的在中间插入、删除一个新的条件检测，也可以很容易创建一个分支检测。此处仅作抛砖引玉，考虑更复杂的情况，还有fail、always等事件处理。就让各位自己尝试着完成吧。

觉得可用，就经常来吧！脚本宝典欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JS组件化验证检测全部内容，希望文章能够帮你解决javascript代码实例教程-JS组件化验证检测所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：AJAX jQuery jQuery post-format-gallery this 数组数组

上一篇: javascript代码实例教程-JavaScr... 下一篇:javascript代码实例教程-nodejs+...

猜你在找的js相关文章

全站导航更多