master

分支 (1)

管理

管理

master

javascript_design_patterns
/
strategy.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    .boxs{
        display: flex;
        flex-direction: row;
    }

    .box{
        margin: 20px;
        width:100px;
        height:100px;
        background: #999;

        text-align: center;
        font-size: 2rem;
        line-height: 100px;
        transition: all 0.5s ease-in-out;
        user-select: none;
        cursor: pointer;
        border-radius: 100%;
        box-shadow: 2px 5px 60px #ddd;
    }

    .active{background:red}
</style>
<body>
    <div class="boxs">
        <div class="box">高</div>
        <div class="box">富</div>
        <div class="box">帅</div>
    </div>

    <script>
        class Client{
            constructor(nodes,strategy){
                this.nodes = [...nodes];
                this.strategy = strategy;
                this.initEvent();
            }
            initEvent(){
                this.nodes.forEach(item=>{
                    item.addEventListener("click",(e)=>{
                        this.handleClick(e.target);
                    })
                })
            }
            handleClick(ele){
                this.strategy.process(ele,this.nodes);
            }
        }

        class Strategy1{
            process(ele,nodes){
                ele.classList.toggle("active");
            }
        }
        class Strategy2{
            process(ele,nodes){
                const items = nodes.filter(item=>item.classList.contains("active"));
                if(items.length===2 && !items.includes(ele))
                    return;

                ele.classList.toggle("active");
            }
        }
        class Strategy3{
            process(ele,nodes){
                ele.classList.toggle("active");
                if(nodes.every(item=>item.classList.contains("active"))){
                    nodes.filter(item=>item!==ele)[Math.floor(Math.random()*2)]
                    .classList.toggle("active");
                }
            }
        }

        const client = new Client(document.querySelectorAll(".box"),new Strategy3());
    </script>


</body>
</html>