前端面試題庫 （面試必備）?? ? ? ? ? ?推薦：★★★★★

地址：前端面試題庫

【國慶頭像】- 國慶愛國 程序員頭像！總有一款適合你！文章來源地址http://www.zghlxwxcb.cn/news/detail-732939.html

什么是策略模式

策略（Strategy）模式的定義：該模式定義了一系列算法，并將每個算法封裝起來，使他們可以相互替換，且算法的變化不會影響使用算法的客戶。

要解決的問題

假設(shè)我們需要寫一個計算年終獎的函數(shù)，我們的代碼可能長這樣

const bonus = function (level, salary) {
  if (level === "S") {
    return salary * 1.1;
  }
  if (level === "A") {
    return salary * 1;
  }
  if (level === "B") {
    return salary * 0.9;
  }
};

這樣寫代碼會有一些問題：

• 如果情況較多，判斷邏輯也會很多，代碼會比較亂
• 違反了設(shè)計原則的開發(fā)封閉原則（對拓展開放，對修改封閉），增加邏輯必須修改原函數(shù)

我們可以借助策略模式進(jìn)行優(yōu)化。

單一職責(zé)改造

上述代碼每一個條件中的?return 語句?是一個算法，我們可以將每個算法封裝成一個函數(shù)

      const levelS = (salary) => {
        return salary * 1.1;
      };
      const levelA = (salary) => {
        return salary * 1;
      };
      const levelB = (salary) => {
        return salary * 0.9;
      };
      const bonus = function (level, salary) {
        if (level === "S") {
          return levelS(salary);
        }
        if (level === "A") {
          return levelA(salary);
        }
        if (level === "B") {
          return levelB(salary);
        }
      };

這樣封裝完后，每中計算獎金的算法都被單獨(dú)抽離，便于維護(hù)。但如果有其他情況時，我們依然要向bonus函數(shù)里寫if語句，我們需要繼續(xù)優(yōu)化

開發(fā)封閉改造

  const levelObj = {
    S: (salary) => {
      return salary * 1.1;
    },
    A: (salary) => {
      return salary * 1;
    },
    B: (salary) => {
      return salary * 0.9;
    },
  };
  const bonus = function (level, salary) {
    return levelObj[level](salary);
  };

這樣修改后，如果還有D情況，我們就可以這樣修改

levelObj.D = (salary)=> {
  return salary * 0.8;
},

可見，策略模式能更好的解決if語句的循環(huán)嵌套。

上面每一個算法S，A，B，D內(nèi)的邏輯不管如何變化，都不會影響bonus的核心邏輯，因此，我們說：策略模式定義了一系列算法，并將每個算法封裝起來，使他們可以相互替換，且算法的變化不會影響使用算法的客戶。

在vite配置中的使用

假設(shè)我們的vite有三個配置文件，一個公用的viteBaseConfig配置，dev模式的viteDevConfig配置，生產(chǎn)模式的viteProdConfig配置。

import { defineConfig } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import viteProdConfig from "./vite.prod.config";
export default defineConfig(({ command, mode, ssrBuild }) => {
  if (command === "serve") {
    return {
      // dev 獨(dú)有配置
      ...viteBaseConfig,
      ...viteProdConfig
    };
  } else {
    // command === 'build'
    return {
      // build 獨(dú)有配置
      ...viteBaseConfig,
      ...viteDevConfig
    };
  }
});

上述代碼使用if語句來根據(jù)不同模式返回不同的配置項，我們根據(jù)剛才所學(xué)知識進(jìn)行優(yōu)化下。

單一職責(zé)改造

//....
export default defineConfig(({ command, mode, ssrBuild }) => {
  const build = () => {
    // Object.assign中的{}是為了防止viteBaseConfig被修改。
    Object.assign({}, viteBaseConfig, viteProdConfig)
  },
  const serve = () => {
    // Object.assign中的{}是為了防止viteBaseConfig被修改。
    Object.assign({}, viteBaseConfig, viteDevConfig)
  },

  if (command === "serve") {
    return build()
  } else {
    // command === 'build'
    return serve();
  }
});

Object.assign()?Object.assign() 方法將所有可枚舉屬性從一個或多個源對象復(fù)制到目標(biāo)對象，返回修改后的對象。?注意：該方法會修改源對象！

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// expected output: true

開發(fā)封閉改造

const envResolver = {
  build: () => Object.assign({}, viteBaseConfig, viteProdConfig),
  serve: () => Object.assign({}, viteBaseConfig, viteDevConfig),
};
export default defineConfig(({ command, mode, ssrBuild }) => {
  return envResolver[command]();
});

?

?前端面試題庫 （面試必備）?? ? ? ? ? ?推薦：★★★★★

地址：前端面試題庫

【國慶頭像】- 國慶愛國 程序員頭像！總有一款適合你！

到了這里，關(guān)于【面試題】如何理解 前端設(shè)計模式-測策略模式？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！