js设计模式一之策略模式（通俗易懂实战）

1.简介：

        策略模式是行为模式的一种，在例如java语言的表现是通过处理对象和行为的关系，通过多态性来消除if-else分支，而每一个分支都算是一个策略，以此来达到统一的变化。

        而在js中，多态性是自然而然就存在了，下面将以js的方式演示如何使用策略模式。

2.代码：

        在js中，函数的表达更具个性，相当于一个个对象，再不使用类的情况下，下面是对于处理键盘快捷键在一个页面上使用通过策略模式达到更好维护性的应用。

2.1  定义键盘事件的每一个策略

   const singleSave = () => {
      if (!checkTabIsSave()) return;
      scriptSave();
    };
    //F5 run test
    const F5Trigger = () => {
      runTestBeforeCheckToSave();
    };
    //ctrl+shift+~
    const openConsole = () => {
      if (showConsole.value) return;
      showConsole.value = true;
    };

    //ctrl+b隐藏侧边树状资源
    const toggleSourceTree = () => {
      showTree.value = !showTree.value;
    };

2.2 设置策略映射字典

  const keyBoardMapper = {
      "ctrlkey+83": singleSave,
      "ctrlkey+shiftkey+192": openConsole,
      "ctrlkey+66": toggleSourceTree,
      "116": F5Trigger,
    };

2.3 定义统一触发器

        这里通过键盘key对应字典中的映射从而去消去if-else分支达到统一处理的方式，符合开放封闭原则

 //键盘统一触发器
    const keyBoardTrigger = (e) => {
      const curKey = e.keyCode || e.which || e.charCode;
      if (e.key === "F5") {
        e.preventDefault();
      }
      if (e.ctrlKey && curKey === 83) {
        e.preventDefault();
      }
      const ctrlKey = e.ctrlKey;
      const shiftKey = e.shiftKey;
      const key = `${ctrlKey ? "ctrlkey+" : ""}${
        shiftKey ? "shiftkey+" : ""
      }${curKey}`;
      if (keyBoardMapper[key]) {
        keyBoardMapper[key]();
      }
    };

2.4 最后调用统一触发器

        这里使用的是vue3，在挂载钩子和卸载钩子中进行处理

  onMounted(() => {
      document.addEventListener("keydown", keyBoardTrigger);
  });

  onUnmounted(() => {
    document.removeEventListener("keydown", keyBoardTrigger);
  });

2.5 完整代码

 /* 事件监听区域 */
    //ctrl+s
    const singleSave = () => {
      if (!checkTabIsSave()) return;
      scriptSave();
    };
    //F5 run test
    const F5Trigger = () => {
      runTestBeforeCheckToSave();
    };
    //ctrl+shift+~
    const openConsole = () => {
      if (showConsole.value) return;
      showConsole.value = true;
    };

    //ctrl+b隐藏侧边树状资源
    const toggleSourceTree = () => {
      showTree.value = !showTree.value;
    };

    const keyBoardMapper = {
      "ctrlkey+83": singleSave,
      "ctrlkey+shiftkey+192": openConsole,
      "ctrlkey+66": toggleSourceTree,
      "116": F5Trigger,
    };

    //键盘统一触发器
    const keyBoardTrigger = (e) => {
      const curKey = e.keyCode || e.which || e.charCode;
      if (e.key === "F5") {
        e.preventDefault();
      }
      if (e.ctrlKey && curKey === 83) {
        e.preventDefault();
      }
      const ctrlKey = e.ctrlKey;
      const shiftKey = e.shiftKey;
      const key = `${ctrlKey ? "ctrlkey+" : ""}${
        shiftKey ? "shiftkey+" : ""
      }${curKey}`;
      if (keyBoardMapper[key]) {
        keyBoardMapper[key]();
      }
    };

  onMounted(() => {
      document.addEventListener("keydown", keyBoardTrigger);
    });

    onUnmounted(() => {
      document.removeEventListener("keydown", keyBoardTrigger);
    });

3. 总结

        在js中策略模式主要通过一个字典映射来构建对分支策略的处理，再通过一个通用的函数来调用获取反馈，相当于是通过对象的多态性来消除了if-else，只是js中通过函数的方式来处理，这个模式在平时的编码也非常实用。