设计模式 策略模式 场景Vue (技术提升)

策略模式 (建议复制编辑器查看更佳)

在给定的 Vue.js 组件代码中,根据optionKey的不同值,展示了不同的表单内容并定义了不同的表单验证规则。在这里,optionMap对象内部定义了不同的策略(addAccount、editAccount、editPassword),每个策略包含了不同的表单类型列表和表单验证规则。根据当前的optionKey值,页面会展示相应的表单内容,并应用相应的验证规则。这样的设计允许在不同的场景下使用不同的策略,而无需修改主要的逻辑。这种方式带来了可扩展性和易维护性,当您需要添加新的表单类型或不同的验证规则时,只需简单地往optionMap对象内添加新的策略即可。

应用场景: 我们可以先写好多个不同的表单类型和验证规则,然后根据不同的场景我们可以直接通过策略分配,通过组合不同的表单项目从而搭建不一样的表单集合,以及可以根据场景的不同调用不同的校验规则。

优点:这样的设计允许在不同的场景下使用不同的策略,而无需修改主要的逻辑。这种方式带来了可扩展性和易维护性,使得代码更具有扩展性和灵活性,当您需要添加新的表单类型或不同的验证规则时,只需简单地往optionMap对象内添加新的策略即可。

栗子

VueDOM结构

javascript 复制代码
    <!-- optionMap[optionKey].title:是标题 -->
    <!-- optionMap[optionKey].formRules:校验规则 -->
    <!-- optionMap[optionKey].formRules:校验规则 -->
    <!-- optionMap[optionKey].typeList: 是否显示对应的权限组 可以进行自由搭配-->

    <!-- 思路就是: 根据点击事件动态设置optionKey的状态 然后去取对应策略 -->
<el-dialog destroy-on-close v-model="dialogVisible" :title="optionMap[optionKey].title" width="500"
        @close="resetForm(formRef)">
        <el-form ref="formRef" style="max-width: 600px" :rules="optionMap[optionKey].formRules" :model="userForm"
            label-width="auto" class="demo-ruleForm">
            <el-form-item v-if="optionMap[optionKey].typeList.includes('姓名')" label="姓名" prop="nickName">
                <el-input v-model.trim="userForm.nickName" type="text" placeholder="请输入姓名" show-word-limit
                    maxlength="20" />
            </el-form-item>
            <el-form-item v-if="optionMap[optionKey].typeList.includes('账户')" label="账户" prop="userName">
                <el-input v-model.trim="userForm.userName" type="text" placeholder="请输入账户" show-word-limit
                    maxlength="20">
                    <template #prepend>
                    </template></el-input>
            </el-form-item>
            <el-form-item v-if="optionMap[optionKey].typeList.includes('新密码')" label="新密码" prop="password">
                <el-input v-model.trim="userForm.password" type="text" placeholder="请输入新密码" />
            </el-form-item>
            <el-form-item v-if="optionMap[optionKey].typeList.includes('确认密码')" label="确认密码" prop="conPassword">
                <el-input v-model.trim="userForm.conPassword" type="password" placeholder="请确认密码" />
            </el-form-item>
            <el-form-item v-if="optionMap[optionKey].typeList.includes('手机号')" label="手机号" prop="phonenumber">
                <el-input v-model.trim="userForm.phonenumber" type="iPhone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item v-if="optionMap[optionKey].typeList.includes('备注')" label="备注" prop="remark">
                <el-input v-model.trim="userForm.remark" show-word-limit rows="4" resize="none" type="textarea"
                    maxlength="200" placeholder="请输入备注" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button class="butClass" @click="submitForm(formRef, optionMap[optionKey].title)">确定</el-button>
                <el-button @click="resetForm(formRef)">取消</el-button>
            </div>
        </template>
    </el-dialog>

JS策略

javascript 复制代码
  const optionKey = ref('addAccount');
    const optionMap: any = {
        addAccount: {
            title: '添加账户',
            typeList: ['姓名', '账户', '新密码', '手机号', '备注'],
            formRules: {
                userName: [{ required: true, message: '账户必填', trigger: 'blur' },
                { required: true, validator: validateAccount, trigger: 'blur' }
                ],
                nickName: [{ required: true, message: '姓名必填', trigger: 'blur' }],
                password: [{ required: true, message: '密码必填', trigger: 'blur' },
                { required: true, validator: validateInput, trigger: 'blur' }
                ],
                phonenumber: [{ required: true, message: '手机号必填', trigger: 'blur' },
                { required: true, validator: validatePhoneNumber, trigger: 'blur' }
                ],
            },
        },
        editAccount: {
            title: '修改账户',
            typeList: ['姓名', '账户', '手机号', '备注'],
            formRules: {
                userName: [{ required: true, message: '账户必填', trigger: 'blur' },
                { required: true, validator: validateAccount, trigger: 'blur' }
                ],
                nickName: [{ required: true, message: '姓名必填', trigger: 'blur' }],
                phonenumber: [{ required: true, message: '手机号必填', trigger: 'blur' },
                { required: true, validator: validatePhoneNumber, trigger: 'blur' }
                ],
            },
        },
        editPassword: {
            title: '修改密码',
            typeList: ['新密码', '确认密码'],
            formRules: {
                password: [{ required: true, message: '密码必填', trigger: 'blur' },
                { required: true, validator: validateInput, trigger: 'blur' }
                ],
                conPassword: [{ required: true, validator: validatePass, message: '两次密码不一样' }],
            },
        },
    };
相关推荐
Gracemark8 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼9 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_10 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing10 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
幂简集成explinks13 小时前
e签宝签署API更新实战:新增 signType 与 FDA 合规参数配置
后端·设计模式·开源
最后一个农民工13 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
艾小码16 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp199416 小时前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
大飞pkz16 小时前
【设计模式】C#反射实现抽象工厂模式
设计模式·c#·抽象工厂模式·c#反射·c#反射实现抽象工厂模式
努力也学不会java16 小时前
【设计模式】抽象工厂模式
java·设计模式·oracle·抽象工厂模式