一個簡單API設(shè)計

gitmilk 發(fā)布于2019-08-20 17:36 / 3329人閱讀

摘要：用一個紅綠燈來學(xué)習(xí)的設(shè)計結(jié)構(gòu)第一個版本的第一個版本實現(xiàn)了紅綠燈功能，但是耦合性高，使得代碼的可維護性可擴展性降低第二個版本第二個版本將狀態(tài)放到數(shù)組里，以后想改變順序，或者添加更多的狀態(tài)，只需要操作數(shù)組元素就可以了，當(dāng)

用一個紅綠燈來學(xué)習(xí)jsAPI的設(shè)計

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結(jié)構(gòu)

第一個版本的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()

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

第二個版本

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

第二個版本將狀態(tài)放到數(shù)組里，以后想改變順序，或者添加更多的狀態(tài)，只需要操作數(shù)組元素就可以了，當(dāng)然這個版本仍有問題，封裝性不好，可以考慮將其放到一個函數(shù)里面，暴露出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"])

云服務(wù)器 GPU云服務(wù)器簡單編寫一個html 您編一個簡單點的怎樣設(shè)計一個網(wǎng)站 api設(shè)計

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83707.html

相關(guān)文章

PHP / Laravel API 開發(fā)推薦閱讀清單

showImg(https://segmentfault.com/img/bV6aHV?w=1280&h=800); 社區(qū)優(yōu)秀文章 Laravel 5.5+passport 放棄 dingo 開發(fā) API 實戰(zhàn)，讓 API 開發(fā)更省心 - 自造車輪。 API 文檔神器 Swagger 介紹及在 PHP 項目中使用 - API 文檔撰寫方案推薦 Laravel API 項目必須使用的 8 個...

shmily 2019-06-28 18:34 評論0 收藏0
架構(gòu)～微服務(wù)

摘要：接下來繼續(xù)介紹三種架構(gòu)模式，分別是查詢分離模式微服務(wù)模式多級緩存模式。分布式應(yīng)用程序可以基于實現(xiàn)諸如數(shù)據(jù)發(fā)布訂閱負(fù)載均衡命名服務(wù)分布式協(xié)調(diào)通知集群管理選舉分布式鎖和分布式隊列等功能。 SpringCloud 分布式配置 SpringCloud 分布式配置史上最簡單的 SpringCloud 教程 | 第九篇: 服務(wù)鏈路追蹤 (Spring Cloud Sleuth) 史上最簡單的 S...

xinhaip 2019-06-24 17:55 評論0 收藏0
【效率專精系列】善用API統(tǒng)一描述語言提升RestAPI開發(fā)效率

摘要：其標(biāo)準(zhǔn)為前身是，提供強大的在線編輯功能，包括語法高亮錯誤提示自動完成實時預(yù)覽，并且支持用戶以格式撰寫導(dǎo)入導(dǎo)出轉(zhuǎn)換文檔。團隊內(nèi)部RestAPI開發(fā)采用設(shè)計驅(qū)動開發(fā)的模式，即使用API設(shè)計文檔解耦前端和后端的開發(fā)過程，雙方只在聯(lián)調(diào)與測試時耦合。在實際開發(fā)和與前端合作的過程中，受限于眾多因素的影響，開發(fā)效率還有進一步提高的空間。本文的目的是優(yōu)化工具鏈支持，減少一部分重復(fù)和枯燥的勞動。現(xiàn)狀...

tianyu 2019-08-16 10:42 評論0 收藏0
大道至簡--API設(shè)計的美學(xué)

摘要：對團隊而言，如果有統(tǒng)一的規(guī)范命名，交接時可以減少大量的學(xué)習(xí)和溝通成本。當(dāng)時一直不知道是什么玩意，后來向那個人打聽才知道，是執(zhí)行登錄的操作，是中文拼音，又是英文，這樣的命名。 1.前言對于前端開發(fā)而言，肯定會和API打交道，大家也都會想過怎么設(shè)計自己的API。優(yōu)秀的 API 之于代碼，就如良好內(nèi)涵對于每個人。好的 API 不但利于使用者理解，開發(fā)時也會事半功倍，后期維護更是順風(fēng)順?biāo)?。?..

jsyzchen 2019-08-22 15:31 評論0 收藏0
服務(wù)API版本控制設(shè)計與實踐

摘要：場景一版本號控制隨著互聯(lián)網(wǎng)發(fā)展的，用戶體驗要求也是越來越高，產(chǎn)品形式也會隨之每年有不一樣的變化。使用客戶端版本號控制是首選考慮策略。一、前言筆者曾負(fù)責(zé)vivo應(yīng)用商店服務(wù)器開發(fā)，有幸見證應(yīng)用商店從百萬日活到幾千萬日活的發(fā)展歷程。應(yīng)用商店客戶端經(jīng)歷了大大小小上百個版本迭代后，服務(wù)端也在架構(gòu)上完成了單體到服務(wù)集群...

不知名網(wǎng)友 2021-11-29 10:50 評論0 收藏0
服務(wù)API版本控制設(shè)計與實踐

摘要：場景一版本號控制隨著互聯(lián)網(wǎng)發(fā)展的，用戶體驗要求也是越來越高，產(chǎn)品形式也會隨之每年有不一樣的變化。場景二客戶端版本號控制類似首頁列表，商店的穿插也經(jīng)歷了多個版本的迭代。使用客戶端版本號控制是首選考慮策略。一、前言筆者曾負(fù)責(zé)vivo應(yīng)用商店服務(wù)器開發(fā)，有幸見證應(yīng)用商店從百萬日活到幾千萬日活的發(fā)展歷程。應(yīng)用商店客戶端經(jīng)歷了大大小小上百個版本迭代后，服務(wù)端也在架構(gòu)上完成了單體到服務(wù)集群、微服務(wù)升級。...

不知名網(wǎng)友 2021-11-29 10:50 評論0 收藏0