一個簡單API設計

gitmilk 發布于2019-08-20 17:36 / 3325人閱讀

摘要：用一個紅綠燈來學習的設計結構第一個版本的第一個版本實現了紅綠燈功能，但是耦合性高，使得代碼的可維護性可擴展性降低第二個版本第二個版本將狀態放到數組里，以后想改變順序，或者添加更多的狀態，只需要操作數組元素就可以了，當

用一個紅綠燈來學習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結構

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

GPU云服務器云服務器簡單編寫一個html 您編一個簡單點的怎樣設計一個網站 api設計

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83707.html

PHP / Laravel API 開發推薦閱讀清單

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

shmily 2019-06-28 18:34 評論0 收藏0
架構～微服務

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

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

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

tianyu 2019-08-16 10:42 評論0 收藏0
大道至簡--API設計的美學

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

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

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

不知名網友 2021-11-29 10:50 評論0 收藏0
服務API版本控制設計與實踐

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

不知名網友 2021-11-29 10:50 評論0 收藏0