前端-策略模式 应用

335 阅读1分钟

1. 定义

使用一组“算法”,把他们封装起来,并能够互相调用。

(注意算法可以是简单的键值关系,一般以方法调用+参数方式优化代码)

2. 解决问题:

2.1 常见的条件判断

//优化前
let operateName = ''
if(operateKey === "add"){
    operateName = '新增'
}else if(operateKey === "edit"){
    operateName = '修改'
}else if(operateKey === "view"){
    operateName = '查看'
}

//优化后
function getOperateName(key){
   const array = [['add','新增'],['edit','修改'],['view','查看']]
   const strategyMap = new Map(array)
   return strategyMap.get(key) //通过键值关系获取对应 value
}

let operateName = getOperateName("add") ////输出  新增


//优化前 
let operateName = ''
if(operateKey === "add" || operateKey === "update" ){
    operateName = '编辑'
}else if(operateKey === "view" || operateKey === "info"){
    operateName = '查看'
} 
//优化后
const array = [['add','编辑'],['update','编辑'],['view','查看'],['info','查看']]
let map = new Map(array)
let operateName =  map.get("add")  //输出  编辑

2.2 表单校验

let loginFrom = document.getElementId("loginFrom")
loginFrom.onsubmit = function (e) {
    const username =  document.getElementId("username")
    const pwd =  document.getElementId("pwd")
    const mobile =  document.getElementId("mobile")
    if (username === null || username === '') {
        alert("用户信息为空哦")
        return false
    }
     if (pwd === null || pwd === '') {
        alert("密码不能为空")
        return false
    }
    if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(mobile)) {
        alert("电话信息不对")
        return false
    }
}

//代码优化
let strategy = {
    isEmpty: function(value,msg){
        if (value === null || value === '') {
            return errorMsg
        }
    },
    isMobile: function (value, errorMsg) { // 手机号码格式
        if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(value)) {
            return errorMsg
        }
    }
}

let usernameMsg = strategy.isEmpty(username,"用户信息为空哦")
let pwdMsg = strategy.isEmpty(pwd,"用户信息为空")
let pwdMsg = strategy.isEmpty(pwd,"用户信息为空")
let mobileMsg = strategy.isEmpty(pwd,"手机号格式有误")
const errorMsg = usernameMsg || pwdMsg || mobileMsg
if(errorMsg) {
    alert(errorMsg)
    return false
}