验证表单——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().······;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值