做貿(mào)易進出口要什么網(wǎng)站平臺網(wǎng)絡(luò)銷售好做嗎
概念
大量的 if 判斷操作，邏輯比較復(fù)雜，并且處理起來相對麻煩。可以采用策略模式來優(yōu)化分支代碼。
策略模式 💤：是一種行為設(shè)計模式，它允許你在運行時根據(jù)不同情況選擇不同的算法或行為。
設(shè)計模式 🤌：就是提前第一次了解全過程，第二次直接規(guī)劃不必要的坑。
我們在寫代碼亦是如此，一定也遇到過許多類似的場景。隨著程序員經(jīng)驗的增加，我們對于這些常見場景的處理越來越得心應(yīng)手，甚至總結(jié)出了針對性的“套路”，下次遇到此類問題直接運用“套路”解決，省心又省力。這些在軟件開發(fā)過程中逐漸積累下來的“套路”就是設(shè)計模式。
設(shè)計模式的目標(biāo)之一就是提高代碼的可復(fù)用性、可擴展性和可維護性。正因如此，雖然有時候我們不知道某個設(shè)計模式，但是看了相關(guān)書籍或文章后會有一種“啊，原來這就是設(shè)計模式”的恍然大明白。
例：
const game = (name) => {if (name === "原s") {console.log("啟動！");} else if (name === "xx精英") {console.log("我先成盒了你們加油！");} else if (name === "云頂yy") {console.log("這就是我們之間的羈絆！");} else if (name === "王者zz") {console.log("我再也不買皮膚了！");} else {console.log("我啥也沒玩");}
};
game("原s"); // 啟動！
簡單優(yōu)化一下寫法：
const game = (name) => {let obj = {原s: "啟動！",xx精英: "我先成盒了你們加油！",云頂yy: "這就是我們之間的羈絆！",王者zz: "我再也不買皮膚了！",};if (obj[name]) {console.log(obj[name]);} else {console.log("我啥也沒玩");}
};
game("原s"); // 啟動！
這種寫法只是參考了策略模式的思路，將邏輯封裝到一個對象中。這種方式使得這個對象能夠獨立出來，只需專注于維護這個對象本身即可。如果要是每個方法都不同，那該如何去寫呢?接著往下看
const game = (name) => {let obj = {原s: () => {console.log("啟動！");},xx精英: () => {console.log("我先成盒了你們加油！");},云頂yy: () => {console.log("這就是我們之間的羈絆！");},王者zz: () => {console.log("我再也不買皮膚了！");},};if (obj[name]) {obj[name]();} else {console.log("我啥也沒玩");}
};game("原s"); // 啟動！
這種寫法就是將對象中的處理邏輯單獨封裝成一個函數(shù)，讓他內(nèi)部自己處理自己所用到的邏輯。
下面這種寫法代碼更加靈活和可擴展，也是我比較推薦的寫法。
const strategies = {原s: () => console.log("啟動！"),xx精英: () => console.log("我先成盒了你們加油！"),云頂yy: () => console.log("這就是我們之間的羈絆！"),王者zz: () => console.log("我再也不買皮膚了！"),
};function executeStrategy(name) {if (strategies[name]) {strategies[name]();} else {console.log("我啥也沒玩");}
}executeStrategy("原s");
在這個例子里面，我們可以將游戲名作為參數(shù)傳遞給函數(shù)，而不是在函數(shù)內(nèi)部定義多個條件。這樣，我們就可以將函數(shù)封裝成一個可復(fù)用的策略，以便在將來添加更多的游戲名稱。
1. 案例
下面看一下使用場景，比如我們需要做一個 from 表單驗證，需要驗證手機號和密碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表單</title><script src="./src/index.js"></script></head><body><form id="login-form" action="" method="post"><label for="account">手機號</label><input type="number" id="account" name="account" /><label for="password">密碼</label><input type="password" id="password" name="password" /><button id="login">登錄</button></form><script>let loginForm = document.getElementById("login-form");loginForm.onsubmit = function (e) {e.preventDefault();let account = document.getElementById("account").value;let pwd = document.getElementById("password").value;if (account === null || account === "") {console.log("手機號不能為空");return false;}if (pwd === null || pwd === "") {console.log("密碼不能為空");return false;}if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(account)) {console.log("手機號格式錯誤");return false;}if (pwd.length < 6) {console.log("密碼不能小于六位");return false;}// 模擬ajax請求setTimeout(() => {console.log("登錄成功！");}, 1000);};</script></body>
</html>
在這里可以發(fā)現(xiàn)問題也是很明顯的，如果你想說他能跑起來嗎？他也能跑起來，但是里面的 if 語句到處都是，每次新增一種校驗，需要整體去調(diào)整這個 loginForm.onsubmit 代碼，復(fù)用性也很差，只能手動矯正
2. 優(yōu)化
先將此方法抽離出來
let obj = {isNonEmpty: function (value, errorMsg) {if (value === "" || value === null) {return errorMsg;}},isMobile: function (value, errorMsg) {// 手機號碼正則if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(value)) {return errorMsg;}},minLength: function (value, errorMsg) {if (value.length < length) {return errorMsg;}},
};
修改 Context 內(nèi)容部分
let loginForm = document.getElementById("loginForm");loginForm.onsubmit = function (e) {e.preventDefault();let phone = strategies.isMobile(account, "手機號格式錯誤");let pwdMinLength = strategies.minLength(pwd, "密碼不能小于六位");let error = accountIsMobile || pwdMinLength;if (error) {console.log(error);return false;}
};
完整代碼如下
<div><form id="loginform" action="" method="post"><label for="account">手機號</label><input type="number" id="account" name="account" /><label for="password">密碼</label><input type="password" id="password" name="password" /><button id="login">登錄</button></form>
</div>
let account = ""; // 這里的變量需要初始化一下，不然無法獲取到value
let pwd = "";let loginForm = document.getElementById("loginform");
let strategies = {isNonEmpty: function (value, errorMsg) {if (value === "" || value === null) {return errorMsg;}},isMobile: function (value, errorMsg) {// 手機號碼格式if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(value)) {return errorMsg;}},minLength: function (value, length, errorMsg) {console.log(value);if (value.length < length) {return errorMsg;}},
};loginForm.addEventListener("submit", (e) => {account = document.getElementById("account").value;pwd = document.getElementById("password").value;e.preventDefault();let phonenull = strategies.isNonEmpty(account, "手機號不能為空");let phone = strategies.isMobile(account, "手機號格式錯誤");let pwdMinLength = strategies.minLength(pwd, 6, "密碼不能小于六位");let error = phonenull || phone || pwdMinLength;if (error) {console.log(error);return false;} else {console.log("提交成功！");}
});