js——策略模式

最新推荐文章于 2024-04-09 04:59:27 发布

静尾

最新推荐文章于 2024-04-09 04:59:27 发布

阅读量201

点赞数

分类专栏：设计模式文章标签：设计模式 js javascript

本文链接：https://blog.csdn.net/qq_41176306/article/details/113993259

版权

设计模式专栏收录该内容

12 篇文章 0 订阅

订阅专栏

js——策略模式

定义一系列功能类似的算法并封装起来。

将算法的实现和使用分离出来。

比如：计算年终奖，基本奖金是5000元，评级分为S A B C D，S+5000， A+4000， B+3000， C+2000， D+1000，计算输入某评级的员工的年终奖金额。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
            display: inline-block;
        }
        #div1 {
            display: inline-block;
        }
    </style>
</head>
<body>
    <form action="#">
        <p  class="p1">请选择评级：</p>
        <select name="" id="select1" onchange="select1Change()">
            <option value="S">S</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
        </select>
        <p  class="p1">，您的年终奖为：</p>
        <div id="div1"></div>
    </form>

    <script>
        const select1 = document.getElementById('select1');
        const div1 = document.getElementById('div1');
        const rate = {
            S: 5000,
            A: 4000,
            B: 3000,
            C: 2000,
            D: 1000
        }
        const computed = {
            basic : 5000,
            S: function () {
                return this.basic + rate['S']
            },
            A: function () {
                return this.basic + rate['A']
            },
            B: function () {
                return this.basic + rate['B']
            },
            C: function () {
                return this.basic + rate['C']
            },
            D: function () {
                return this.basic + rate['D']
            },
        }
        window.onload = () => {
            select1Change();
        }
        let getVal = () => {
            let select1Index = select1.selectedIndex;
            let selectVal = select1.options[select1Index].value;
            return selectVal;
        }
        
        const select1Change = () => {
            const val = getVal();
            div1.innerText = computed[val]();
        }
    </script>
</body>
</html>

虽然上例可以更简单的实现，但是这里只是展示一下策略模式的思路。

静尾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js——策略模式

js实现策略模式定义一系列功能类似的算法并封装起来。将算法的实现和使用分离出来。比如：计算年终奖，基本奖金是5000元，评级分为S A B C D，S+5000， A+4000， B+3000， C+2000， D+1000，计算输入某评级的员工的年终奖金额。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co
复制链接

扫一扫