前端实习分享第一弹（策略模式）

策略模式

  策略模式的核心理念是将算法或行为封装在一个抽象的策略接口中，并写出多个具体的策略类来实现不同的算法或行为。使用策略模式时，客户端只需要指定要使用的策略类，即可获得相应的算法或行为。

  比如，导航系统，假如用户需要前往图书馆，他可以选择公交，自行车，驾车等等任何一种策略，那么你就需要独立编写其对应的策略类。

  下面是一个简单的策略模式的例子：

  1.首先写出了一个策略接口，其次在后面写了三种策略

interface ArithmeticStrategy {
    arithmetic:(num1 : number, num2 : number)=>number;
}
// 加法策略
class add implements ArithmeticStrategy {
    arithmetic=(num1 : number, num2 : number) => {
        return num1+num2
    }
}

// 减法策略
class minus implements ArithmeticStrategy {
    arithmetic=(num1 : number, num2 : number) => {
        return num1-num2
    }
}

// 乘法策略
class multiplication implements ArithmeticStrategy {
    arithmetic=(num1 : number, num2 : number) => {
        return num1*num2
    }
}

2.当客户端（页面），用户点击不同的按钮时，执行不同的策略

<div class="container">
     <div class="left">
         <input type="number">
         <input type="number">
     </div>
     <div class="middle">
         <button id="btn1">点我加法</button>
         <button id="btn2">点我减法</button>
         <button id="btn3">点我乘法</button>
     </div>
     <div class="right">
         <input type="number">
     </div>
 </div>
 <script src="./js/index.js"></script>

客户端页面，点击乘法执行乘法策略

3.添加点击事件，完成交互

const inputs = document.getElementsByTagName('input');
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');

const inputValue = {
    num1:0,
    num2:0
}

for(let i = 0; i<=inputs.length-1;i++){
    inputs[i].addEventListener("input", function() {
        if(i === 0){
            inputValue.num1 = Number(this.value)
        }else{
            inputValue.num2 = Number(this.value)
        }
    });
}

btn1?.addEventListener('click',()=>{
    let myAdd : ArithmeticStrategy = new add()
    inputs[2].value = String(myAdd.arithmetic(inputValue.num1,inputValue.num2))
})

btn2?.addEventListener('click',()=>{
    let myMinus : ArithmeticStrategy = new minus()
    inputs[2].value = String(myMinus.arithmetic(inputValue.num1,inputValue.num2))
})

btn3?.addEventListener('click',()=>{
    let myMultiplication : ArithmeticStrategy = new multiplication()
    inputs[2].value = String(myMultiplication.arithmetic(inputValue.num1,inputValue.num2))
})

扩展：因为js没有interface和implements，所以上述代码是ts实现，但是ts不能直接以<script src='xxx.ts'></script>的形式嵌入到HTML中，所以可以将ts先转化为js代码，再将js代码嵌入到HTML中。操作如下：

1.先使用npm安装typescript，我这里全局安装了

npm install -g typescript

2.cd到ts文件所在的目录

3.执行tsc index(你的ts文件名).ts

tsc index.ts

4.将生成的js文件嵌入到js中