当前位置: 首页 > Web前端 > HTML

前端策略模式

时间:2023-04-02 22:53:30 HTML

策略模式策略模式就是封装了一系列的算法,让它们可以相互替换。封装的算法是独立的,其特性不能被外部改变。简单理解就是将if分支封装成带有函数的代码块,将方法抽象出来,方便后续代码维护,提高代码重用率,减少代码冗余。缺点是其他不参与封装的开发者说不知道有哪些方法。如果不看这些算法,很容易走回头路或者重复打包。缺点是不够直观,不易理解。对于前端来说,策略模式实现的两步是抽象方法,将ifelse处理的事情抽象出来,没有分支成不同的、独立的方法来实现对外的接口,为外部调用提供接口。根据外界给定的不同条件,进行不同的逻辑处理,找到对应的抽象方法。表单验证示例开发一个用户注册页面,表单中包含用户名、密码、确认密码和手机号,要求所有数据为空,密码至少6个字符,确认密码必须相等到密码。准备工作,首先编写html和css名称:

密码:
确认密码:
手机号码:
直接制作表单验证:varformData=document.getElementById('form')formData.onsubmit=function(){varname=this.username.valuevarpwd1=this.password1.valuevarpwd2=this.password2.valuevartel=this.phone.valueif(name.replace(/(^\s*)|(\s*$)/g,'')===''){alert('用户名不能为空')returnfalse}if(pwd1.replace(/(^\s*)|(\s*$)/g,'')===''){alert('密码不能为空')returnfalse}if(pwd2.replace(/(^\s*)|(\s*$)/g,'')===''){alert('确认密码不能为空')returnfalse}if(pwd2!==pwd1){alert('确认密码与原密码不同password!')returnfalse}if(tel.replace(/(^\s*)|(\s*$)/g,'')===''){alert('电话号码不能为空')returnfalse}if(!/^1[3,4,5,7,8,9][0-9]\d{8}$/.test(tel)){alert('电话号码格式为incorrect')returnfalse}alert('注册成功')}新手直接做表单验证很直观。没有那么多波折,但缺点也很明显。对于4个表单数据,用6个if判断。如果这个页面不是用户注册,而是某个管理页面中的一个表单,里面有十多个表单数据,那么只会更多需要验证的越多,代码就会越臃肿。当需要做大量验证时,可以考虑策略模式的第一步,将ifelse不需要的东西抽象成不同的、独立的方法functionValidate(){}//定义在原型链中,方便调用Validate.prototype.rules={//手机号是否为Mobile:function(str){varrule=/^1[3,4,5,7,8,9][0-9]\d{8}$/returnrule.test(str)},//是否必填?isRequired:function(str){//删除前导和尾随空格varvalue=str.replace(/(^\s*)|(\s*$)/g,'')returnvalue!==''},//最小长度minLength:function(str,length){varstrLength=str.lengthreturnstrLength>=length},//等于isEqual:function(){//可以接收多个参数进行比较varargs=Array.prototype.slice.call(arguments)//获取第一项并将其与所有后续项进行比较,如果所有项都相等则返回truevarequal=args.every(function(value){returnvalue===args[0]})returnequal}}第二步是实现一个对外暴露的接口,或者方法,用于外部调用Validate.prototype。test=function(rules){varv=thisvarvalid//保存验证结果为(varkeyinrules){//遍历验证规则对象for(vari=0;i