溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“JS前端中的設計模式和使用場景是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JS前端中的設計模式和使用場景是什么”吧！
策略模式的定義是：定義一系列的算法，把它們一個個封裝起來，并且使它們可以相互替換。從定義不難看出，策略模式是用來解決那些一個功能有多種方案、根據不同條件輸出不同結果且條件很多的場景，而這些場景在我們工作中也經常遇到，接下來我將用幾個例子來展示策略模式在哪里用以及如何用。
假如我們有這么一個需求，需要根據員工的績效考核給員工發放年終獎（分為A/B/C/D四個等級 分別對應基礎獎金的1/2/3/4倍），我們很容易就寫出這樣的代碼
//level 評級 basicBonus 基礎獎金
const computeBonus(level, basicBonus) = () => {
if(level === 'A') {
return basicBonus * 1;
} else if(level === 'B') {
return basicBonus * 2;
} else if(level === 'C') {
return basicBonus * 3;
} else if(level === 'D') {
return basicBonus * 4;
}
}
computeBonus('A', 1000);//1000我們發現，以上的代碼可以輕松實現我們的需求，但是這些代碼存在什么問題呢？
computedBonus方法十分臃腫，包含太多if-else
拓展性差，后續如果想要更改評級或者規則都需要進入該函數內部調整。
復用性差。
那策略模式是怎么解決這些問題的呢？我們都知道，設計模式的核心之一就是將可變的和不可變的部分抽離分裝，那我們根據這個原則來修改我們的代碼，其中可變的就是如何使用這些算法（多少個評級），不變的是算法的內容（評級對應的獎金），下面就是改變后的代碼
//定義策略類
const strategies = {
'A': function(basicBonus) {
return basicBonus * 1;
},
'B': function(basicBonus) {
return basicBonus * 2;
},
'C': function(basicBonus) {
return basicBonus * 3;
},
'D': function(basicBonus) {
return basicBonus * 4;
},
}
//使用策略類
const computeBonus = (level, basicBonus) {
return strategies[level](basicBonus);
}
computeBouns('A', 1000);//1000從上面可以看出，我們將每種情況都單獨弄成一個策略，然后根據傳入評級和獎金計算年終獎，這樣我們的computeBonus方法代碼量大大減少，也不用冗雜的if-else分支，同時，如果我們想要改變規則，只需要在strategies中添加對應的策略，增加了代碼的健壯性
我們日常的工作中，不可避免地需要做表單相關的業務，畢竟這是前端最初始的職能之一。而表單繞不開表單驗證，那接下來我將帶大家看看策略模式在表單中如何使用。
需求: 假設我們有一個登錄業務，提交表單前需要做驗證，驗證規則如下：1.用戶名稱不能為空，2.密碼不能少于6位，3.手機格式要正確。
我們很容易寫出以下代碼
const verifyForm = (formData) => {
if(formData.userName == '') {
console.log('用戶名不能為空');
return false
};
if(formData.password.length < 6) {
console.log('密碼長度不能小于6位');
return false;
}
if(( !/(^1[3|5|8][0-9]{9}$)/.test(formData.phone)) {
console.log('手機格式錯誤');
return false
}
}顯然，這樣也可以完成表單校驗的功能，但是這樣寫同樣存在著上面說的問題，接下來，我們看下用策略模式如何改寫
//編寫策略對象
const strategies = {
isEmpty: function(value, error) {
if(value === '' {
return error;
})
},
minLength: function(value, len, error) {
if(value.length < len {
return error;
})
},
isPhone: function(value, error) {
if ( !/(^1[3|5|8][0-9]{9}$)/.test( value ) ){
return errorMsg;
}
};
}
//接下來我們編寫實現類 用于生成對應的策略實例
class Validator {
controustor(cache) {
this.cache = cache || []; //保存校驗規則
};
add(dom, rule, error) {
const arr = rule.splt(':');//分離參數
this.cache.push(function(){ // 把校驗的步驟用空函數包裝起來，并且放入 cache
const strategy = arr.shift(); // 用戶挑選的 strategy
arr.unshift( dom.value ); // 把 input 的 value 添加進參數列表
arr.push( errorMsg ); // 把 error 添加進參數列表
return strategies[ strategy ].apply( dom, ary );
});
};
start() {
for ( let i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
var msg = validatorFunc(); // 開始校驗，并取得校驗后的返回信息
if ( msg ){ // 如果有確切的返回值，說明校驗沒有通過
return msg;
}
}
}
}
//編寫完策略對象和實例類后我們就可以看看如何使用了
const validataFunc = function(){
let validator = new Validator(); // 創建一個 validator 對象
/***************添加一些校驗規則****************/
validator.add( registerForm.userName, 'isNonEmpty', '用戶名不能為空' );
validator.add( registerForm.password, 'minLength:6', '密碼長度不能少于 6 位' );
validator.add( registerForm.phoneNumber, 'isMobile', '手機號碼格式不正確' );
var errorMsg = validator.start(); // 獲得校驗結果
return errorMsg; // 返回校驗結果
}
var registerForm = document.getElementById( 'registerForm' );
registerForm.onsubmit = function(){
var errorMsg = validataFunc(); // 如果 errorMsg 有確切的返回值，說明未通過校驗
if ( errorMsg ){
alert ( errorMsg );
return false; // 阻止表單提交
}
};這樣，我們就用策略模式將需求改好了，之后如果我們的校驗規則改變了，修改起來也是很方便的，比如：
validator.add( registerForm.userName, 'isNonEmpty', '用戶名不能為空' ); // 改成：
validator.add( registerForm.userName, 'minLength:10', '用戶名長度不能小于 10 位' );
而且，我們也可以給文本框添加多個校驗規則，只需要修改下策略對象以及策略方法即可！大大地增強了代碼地健壯性。
優點：
避免多重條件選擇語句（if-else）
具有可拓展性，可獨立抽離封裝，避免重復復制粘貼
缺點：
增加很多策略類或者策略對象，但是這其實不算什么大缺點
比起直接編寫業務代碼需要思考策略對象以及其他細節
代理模式是為一個對象提供一個代用品或占位符，以便控制對它的訪問。代理模式應該是我們日常用到比較多的設計模式了（我們日常工作中不知不覺就會用到代理模式，可能你沒發現而已）。
代理模式分為保護代理（用于控制不同權限的對象對目標對象的訪問）和虛擬代理（把開銷很大的對象或者操作延遲到真正需要的時候再去創建 類比引入時動態引入）兩種，但是前端基本不用到保護代理，或者說很難實現保護代理，所以大部分情況下我們用的都是虛擬代理，接下來我主要也是講虛擬代理！
舉個例子，加入A想要給C送情書，但是A沒有直接把情書交給C，而是讓B代為傳送情書，那么B就是代理，他的職責就是替A做事，這個就是最簡單的代理模式，接下來我們還是老樣子，邊寫需求邊講解
相信大家對于圖片懶加載都不陌生吧，他可以在我們加載出目標圖片前預加載占位圖片，避免空白區域影響體驗，那我們很容易就能寫出下面的代碼
const lazyImage = (function() {
let imgNode = document.createElement('img');
document.body.appendChild(imgNode);
let image = new Image;
image.onload = function() {
imgNode.src = image.src;//在這里設置圖片的真正路由
}；
return {
setSrc: function(src) {
imgNode.src = '....'//預加載本地圖片;
image.src = src
}
}
})()
lazyImage.setSrc('https://cache.yisu.com/upload/information/20220810/112/11976.jpg');//加載真正的圖片我們看上面的代碼，也可以完成預加載的功能，但是這樣的代碼存在著什么樣的問題呢
違反了單一職責原則，而且耦合度太高，如果后期我們不需要懶加載了，或者需要根據判斷條件判斷是否懶加載，就不得不去動lazyImage的代碼
接下來，我們就用代理模式來改寫一下這個例子
const lazyImage = (function() {
let imageNode = document.createElement('img');
document.body.appendChild(imageNode);
return {
setSrc: function(src) {
imageNode.src = src;//設置目標src
}
}
})()
//代理函數
const proxyImage = (function() {
let image = new Image;
image.onload = function() {
myImage.setSrc(this.src);
}
return {
setSrc: function(src) {
myImage.setSrc('....')//預加載本地圖片
img.src = src
}
}
})()
proxyImage.setSrc('https://cache.yisu.com/upload/information/20220810/112/11976.jpg');//使用代理加載我們觀察用代理模式寫的代碼，發現我們將預加載的邏輯轉移到了代理函數中，這樣有啥好處呢
如果后期不需要預加載了，只需要取消代理，即將proxyImage.setSrc(...)改成lazyImage.setSrc(...)
代理函數的使用方式和原函數一模一樣，使用者不需要知道代理的實現細節也能使用
不知道大家有沒有發現，代理函數和原函數有一部分相似的邏輯和操作，只是代理函數的功能更多，這其實也是代理模式的特征之一，代理函數在保證實現原函數的基本功能的前提下實現更多功能，這樣即使使用者不清楚邏輯也能直接使用，而且后期改動成本很低，只需要改回原函數的使用即可!!
設想一下，如果現在要你寫一個簡單的求積函數，你會怎么寫
const mult = function() {
let result = 1;
for(let i = 0, len = arguments.length; i < len; i++) {
result *= arguments[i];
}
return result
}
mult(1, 2, 3);//6我們來看一下上面的代碼有啥缺點，上面的代碼雖然實現了求積，但是如果我們mult(1,2,3)之后再去mult(1,2,3),那么系統還是會再計算一遍，這樣無疑是性能浪費，那么我們就能用代理模式來改寫：
const proxyMult = (function() {
let cache = {};//緩存計算結果
return function() {
const args = Array.prototype.join.call( arguments, ',');
if(args in cache) {
return cache[args]
}
return cache[args] = mult.apply(this.arguments)
}
})();
proxyMult(1,2,3);//6
proxyMult(1, 2, 3);//輸出6 但是不會重新計算可以看到，我們用代理模式改寫后避免了重復運算的浪費，這只是一種情景，還有其他相似情景，比如我們分頁請求數據，可以使用相似的思路，避免對同頁的數據重復請求，這在工作中非常有用！！
感謝各位的閱讀，以上就是“JS前端中的設計模式和使用場景是什么”的內容了，經過本文的學習后，相信大家對JS前端中的設計模式和使用場景是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
