面试话题之——策略模式

最新推荐文章于 2024-07-23 12:36:06 发布

这货不是狮子

最新推荐文章于 2024-07-23 12:36:06 发布

阅读量81

点赞数

分类专栏：学习笔记文章标签：前端面试 vue.js javascript

本文链接：https://blog.csdn.net/weixin_43832950/article/details/130894030

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

面试除了八股文，最怕的就是被问到：项目中做过什么优化、项目中做过什么让自己自豪的、项目中解决过哪些问题...因为被问到好几次而且回答的不是很满意，所以决定开始整理一些这方面的案例，于是就在项目里搜寻——

在小小的项目里面，找呀找呀找

找小小的案例，做小小的总结

在大大的项目里面，找呀找呀找

找大大的案例，做大大的总结

在特别大的项目里面，找呀找呀找

找特别多的案例，做特别多的总结

尬吗？尬就对了，我也被自己尬死了

if (!this.submitFormData.businessTripType) {
    uni.$u.toast('请选择外出类型')
	return
}
if (!this.submitFormData.beginDate) {
	uni.$u.toast('请选择开始时间')
	return
}
if (!this.submitFormData.endDate) {
	uni.$u.toast('请选择结束时间')
	return
}	
if (!this.submitFormData.approver) {
	uni.$u.toast('请选择审批人员')
	return
}
if (!this.submitFormData.description) {
	uni.$u.toast('请填写详细事由')
	return
}

相信这段代码在实际项目中也经常遇到类似的，甚至比这多更多的if语句

那么这次整理的就是用策略模式优化表单提交中的if/else语句

表单规则类（策略类）

创建一个validate.js文件来专门处理表单提交的验证，首先定义一个策略类，它是用来定义表单校验规则的，可以根据业务需求来进行增加调整。

// utils/validate.js

// 策略类，用来定义表单校验规则，可以根据业务需求调整
const ruleStrategys = {
	// 是否为空
	isNotEmpty: (value, errorMsg) => {
		if (!value) {
			return errorMsg
		}
	},
	// 手机号码格式
	isMobile: (value, errorMsg) => {
		if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
			return errorMsg
		}
	}
    // 更多定义...
}

表单校验保存类（环境类）

策略类定义好后，再定义一个环境类(表单校验保存类)，在它的原型上定义两个方法addRule、startExec，分别是添加规则方法和执行规则方法。

// utils/validate.js

// 环境类
export function Validator() {
	this.saveRules = [] // 保存校验规则
}
Validator.prototype.addRule = function(rule, dom, errorMsg) {
	this.saveRules.push(() => {
		return ruleStrategys[rule](dom, errorMsg)
	})
}
Validator.prototype.startExec = function() {
	for (var i = 0; i < this.saveRules.length; i++) {
		var validatorFunc = this.saveRules[i]
		var msg = validatorFunc() // 开始效验 并取得效验后的返回信息
		if (msg) {
			return msg
		}
	}
}

使用

import { Validator } from '@/utils/validate.js';

var validateFunc = () => {
    var validator = new Validator(); // 创建一个Validator对象
    validator.addRule('isNotEmpty', this.submitFormData.businessTripType, '请选择外出类型');
    validator.addRule('isNotEmpty', this.submitFormData.beginDate, '请选择开始时间');
    validator.addRule('isNotEmpty', this.submitFormData.endDate, '请选择结束时间');
    validator.addRule('isNotEmpty', this.submitFormData.approver, '请选择审批人员');
    validator.addRule('isNotEmpty', this.submitFormData.description, '请填写详细事由');
    var errorMsg = validator.startExec(); // 获得效验结果
    return errorMsg; // 返回效验结果
};
var errorMsg = validateFunc();
if (!errorMsg) {
    // 校验成功的操作
} else {
    uni.$u.toast(errorMsg);
}