js前端設(shè)計模式優(yōu)化50%表單校驗代碼示例

更新時間：2022年06月20日 18:37:24 作者：前端唯一深情

這篇文章主要為大家介紹了js前端設(shè)計模式優(yōu)化50%表單校驗代碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

表單校驗

背景

假設(shè)我們正在編寫一個注冊頁面，在點擊注冊按鈕之時，有如下幾條校驗邏輯：

用戶名不能為空
密碼長度不能少于6位
手機(jī)號碼必須符合格式

常規(guī)寫法：

const form = document.getElementById('registerForm');
form.onsubmit = function () {
  if (form.userName.value === '') {
    alert('用戶名不能為空');
    return false;
  }
  if (form.password.value.length < 6) {
    alert('密碼長度不能少于6位');
    return false;
  }
  if (!/^1[3|5|8][0-9]{9}$/.test(form.phoneNumber.value)) {
    alert('手機(jī)號碼格式不正確');
    return false;
  }
  ...
}

這是一種很常見的代碼編寫方式，但它有許多缺點：

onsubmit 函數(shù)比較龐大，包含了很多 if-else 語句，這些語句需要覆蓋所有的校驗規(guī)則。
onsubmit 函數(shù)缺乏彈性，如果增加了一種新的校驗規(guī)則，或者想把密碼的長度從6改成8，我們都必須深入 obsubmit 函數(shù)的內(nèi)部實現(xiàn)，這是違反開放-封閉原則的。
算法的復(fù)用性差，如果在項目中增加了另外一個表單，這個表單也需要進(jìn)行一些類似的校驗，我們很可能將這些校驗邏輯復(fù)制得漫天遍野。

如何避免上述缺陷，更優(yōu)雅地實現(xiàn)表單校驗?zāi)兀?/p>

策略模式介紹

?? 策略模式是一種行為設(shè)計模式，它能讓你定義一系列算法，把它們一個個封裝起來，并使它們可以相互替換。

真實世界類比

此圖源自 http://www.dbjr.com.cn/article/252304.htm

假如你需要前往機(jī)場。你可以選擇騎自行車、乘坐大巴或搭出租車。這三種出行策略就是廣義上的“算法”，它們都能讓你從家里出發(fā)到機(jī)場。你無需深入它們的內(nèi)部實現(xiàn)細(xì)節(jié)，如怎么開大巴、公路系統(tǒng)如何確保你家到機(jī)場有通路等。你只需要了解這些策略的各自特點：所需要花費的時間與金錢，你就可以根據(jù)預(yù)算和時間等因素來選擇其中一種策略。

更廣義的“算法”

在實際開發(fā)中，我們通常會把算法的含義擴(kuò)散開來，使策略模式也可以用來封裝一系列的“業(yè)務(wù)規(guī)則”。只要這些業(yè)務(wù)規(guī)則指向的目標(biāo)一致，并且可以被替換使用，我們就可以用策略模式來封裝它們。

策略模式的組成

一個策略模式至少由兩部分組成。

第一個部分是一組策略類，策略類封裝了具體的算法，并負(fù)責(zé)具體的計算過程。

第二個部分是環(huán)境類 Context，Context 接受客戶的請求，隨后把請求委托給某一個策略類。

利用策略模式改寫

定義規(guī)則（策略），封裝表單校驗邏輯：

const strategies = {
  isNonEmpty: function (value, errMsg) {
    if (value === '') {
      return errMsg;
    }
  },
  minLenth: function (value, length, errMsg) {
    if (value.length < length) {
      return errMsg;
    }
  },
  isMobile: function (value, errMsg) {
    if (!/^1[3|5|8][0-9]{9}$/.test(value)) {
      return errMsg;
    }
  }
}

定義環(huán)境類 Context，進(jìn)行表單校驗，調(diào)用策略：

form.onsubmit = function () {
	const validator = new Validator();
	validator.add(form.userName, 'isNonEmpty', '用戶名不能為空');
	validator.add(form.password, 'minLength:6', '密碼長度不能少于6位');
	validator.add(form.phoneNumber, 'isMobile', '手機(jī)號碼格式不正確');
	const errMsg = validator.start();
	if (errMsg) {
		alert(errMsg);
		return false;
	}
}

Validator 類代碼如下：

class Validator {
	constructor() {
		this.cache = [];
	}
	add(dom, rule, errMsg) {
		const arr = rule.split(':');
		this.cache.push(() => {
			const strategy = arr.shift();
			arr.unshift(dom.value);
			arr.push(errMsg);
			return strategies[strategy].apply(dom, arr);
		})
	}
	start() {
		for (let i = 0; i < this.cache.length; i++) {
			const msg = this.cache[i]();
			if (msg) return msg;
		}
	}
}

使用策略模式重構(gòu)代碼之后，我們消除了原程序中大片的條件分支語句。我們僅僅通過“配置”的方式就可以完成一個表單校驗，這些校驗規(guī)則也能在程序中任何地方復(fù)用，還能作為插件的形式，方便地移植到其他項目中。