一個簡單API設計

用一個紅綠燈來學習jsAPI的設計

CSS

#trafficLight > li{
        display: inline-block;
    }
    #trafficLight span{
        display: inline-block;
        width:50px;
        height: 50px;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        border-radius:50%;
        background: gray;
        margin: 5px;
    }
    #trafficLight.stop li:nth-child(1) span{
        background: #a00;
    }
    #trafficLight.wait li:nth-child(2) span{
        background: #aaaa00;
    }
    #trafficLight.pass li:nth-child(3) span{
        background: #00aa00;
    }

HTML結構

<ul id="trafficLight" class="wait">
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
</ul>

第一個版本的JS

var el = document.getElementById('trafficLight')
function rest() {
    el.className = 'wait'
    setTimeout(function(){
        el.className = "stop"
        setTimeout(function () {
            el.className = 'pass';
            setTimeout(rest, 2000)
        }, 2000)
    }, 2000)
}
window.onload = rest()

第一個版本實現了紅綠燈功能，可是耦合性高+callback，使得代碼的可維護性、可擴展性下降

第二個版本

var state = ['wait', 'stop', 'pass'];
  var stateIndex = 0;
  setInterval(function() {
      var lightState = state[stateIndex]
      el.className = lightState
      stateIndex = (stateIndex + 1) % state.length
  }, 2000)

第二個版本將狀態放到數組裏，之後想改變順序，或者添加更多的狀態，只須要操做數組元素就能夠了，固然這個版本仍有問題，封裝性很差，能夠考慮將其放到一個函數裏面，暴露出state和el給使用者

第三個版本

function start(el, stateList) {
      var stateIndex = 0;
      setInterval(function () {
        var lightState = state[stateIndex]
        el.className = lightState
        stateIndex = (stateIndex + 1) % state.length
      }, 2000)
    }
    start(el, ['wait','stop','pass'])