如何写好JavaScript

缺乏、安全感 2024-04-17 05:59 125阅读 0赞

需求： 用js实现红绿灯效果。  
三个状态用红（stop）、绿（pass）、黄（wait）  
要求用JavaScript让三个状态轮流切换，每个状态停留2s

**HTML**

**CSS**

li{
                list-style: none;
            }
            ul li span{
                display: inline-block;
                width: 50px;
                height: 50px;
                background-color: gray;
                margin: 5px;
                border-radius: 50%;
            }
    
            #traffic.stop li:nth-child(1) span{
                background-color: red;
            } 
             #traffic.wait li:nth-child(2) span{
                background-color: yellow;
            }
        
            #traffic.pass li:nth-child(3) span{
                background-color: green;
            }

JavaScript实现  
**版本1**  
缺点：依赖外部变量stataList，currentIndex， 封装性差了点

const traffic = document.getElementById('traffic');
    const statusList = ['stop', 'wait', 'pass'];
    var curentIndex=0;
    setInterval(() => {
        let state = statusList[curentIndex];
        traffic.className = state;
        curentIndex = (curentIndex+1) % statusList.length;
    }, 2000);

**版本2 数据抽象**  
缺点：比版本1好点，不过扩展性较差

const traffic = document.getElementById('traffic');
    const stateArr = ['stop', 'wait', 'pass'];
    function trafficFn(trafficDom, stateList){
        let currentIndex = 0;
        setInterval( ()=>{
            const state = stateList[currentIndex];
            trafficDom.className = state;
            currentIndex = (currentIndex+1) % stateList.length;
        }, 2000 )
    }
    
    trafficFn( traffic, stateArr );

**版本3 函数式编程， 抽象出poll方法**

#### 2.简单的深拷贝 ####

#### 3.使用Promise异步加载一个图片 ####