验证表单——JavaScript方法设计的工程化

背景：
验证表单功能，内容为：验证用户名/邮箱/密码等

小白（我会想到的）写法：

function checkName(){
    //验证姓名
}
function checkEmail(){
	//验证邮箱
}
function checkPassword(){
	//验证密码
}
......
使用方式：
单个调用函数（变量）
checkName();

问题——即：这样设计跟添加了全局变量差不多，如果项目中其他人也写了一样的方法，那么就会出现覆盖的情况。而这种情况一旦发生，就很不容易能被发现，所以应该尽量避免！

var checkName=function (){
    //验证姓名
}
var checkEmail=function (){
	//验证邮箱
}
var checkPassword = function (){
	//验证密码
}
......
使用方式：
同上
checkName();

初步解决问题（将所有的函数作为CheckObject对象的方法）

var CheckObject={
	checkName : function (){
    	//验证姓名
	},
	checkEmail : function (){
		//验证邮箱
	},
	checkPassword : function (){
		//验证密码
	},
	......
}
（下面的方法亦可：
var CheckObject=function(){};
CheckObject.checkName = function (){
    //验证姓名
}
CheckObject.checkEmail = function (){
	//验证邮箱
}
CheckObject.checkPassword = function (){
	//验证密码
}
......
）
使用方式：
CheckObject.checkName()

进一步思考（对象的可复制性）

var CheckObject=function(){
	return {
		checkName : function (){
	    	//验证姓名
		},
		checkEmail : function (){
			//验证邮箱
		},
		checkPassword : function (){
			//验证密码
		},
		......
	}
}
......
使用方式：
var a=CheckObject();
a.checkName();

思考：这样做确实可以实现方法的分发，但是这些方法与对象没有任何关系，亦即：这不是一个真正意义上的类

再进行思考（变成一个类）

var CheckObject=function(){
	this.checkName = function (){
	    //验证姓名
	}
	this.checkEmail = function (){
		//验证邮箱
	}
	this.checkPassword = function (){
		//验证密码
	}
	......
}
使用方式：
var a=new CheckObject();
a.checkName();

关于资源浪费的思考：由于每个类都会自己的方法，势必会造成大量的资源浪费，于是有了如下优化

var CheckObject=function(){};
CheckObject.prototype.checkName = function (){
	//验证姓名
}
CheckObject.prototype.checkEmail = function (){
	//验证邮箱
}
CheckObject.prototype.checkPassword = function (){
	//验证密码
}
......
代码简化:
var CheckObject=function(){};
CheckObject.prototype={
	checkName : function (){
		//验证姓名
	},
	checkEmail : function (){
		//验证邮箱
	},
	checkPassword : function (){
		//验证密码
	},
	......
}
注意事项：
两种方法不能混用！
使用方式：
var a=new CheckObject();
a.checkName();
a.checkEmail();
a.checkPassword();

“多余的思考”（简化方法调用代码）

以下方法可行
var CheckObject={
	checkName : function (){
		//验证姓名
		return this;
	},
	checkEmail : function (){
		//验证邮箱
		return this;
	},
	checkPassword : function (){
		//验证密码
		return this;
	},
	......
}
使用方式：
CheckObject.checkName().checkEmail().checkPassword().······;
那么很显然，如果将上面的这种方法加入到我们的代码中势必可以简化方法调用的代码
具体操作如下：
var CheckObject=function(){};
CheckObject.prototype={
	checkName : function (){
		//验证姓名
		return this;
	},
	checkEmail : function (){
		//验证邮箱
		return this;
	},
	checkPassword : function (){
		//验证密码
		return this;
	},
	......
}
使用方式：
var a=new CheckObject();
a.checkName().checkEmail().checkPassword().······;

验证表单——JavaScript方法设计的工程化

猜你喜欢