一个简单API设计

gitmilk 发布于2019-08-20 17:36 / 3254人阅读

摘要：用一个红绿灯来学习的设计结构第一个版本的第一个版本实现了红绿灯功能，但是耦合性高，使得代码的可维护性可扩展性降低第二个版本第二个版本将状态放到数组里，以后想改变顺序，或者添加更多的状态，只需要操作数组元素就可以了，当

用一个红绿灯来学习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设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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