摘要:用一个红绿灯来学习的设计结构第一个版本的第一个版本实现了红绿灯功能,但是耦合性高,使得代码的可维护性可扩展性降低第二个版本第二个版本将状态放到数组里,以后想改变顺序,或者添加更多的状态,只需要操作数组元素就可以了,当
用一个红绿灯来学习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"])
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/83707.html
showImg(https://segmentfault.com/img/bV6aHV?w=1280&h=800); 社区优秀文章 Laravel 5.5+passport 放弃 dingo 开发 API 实战,让 API 开发更省心 - 自造车轮。 API 文档神器 Swagger 介绍及在 PHP 项目中使用 - API 文档撰写方案 推荐 Laravel API 项目必须使用的 8 个...
摘要:其标准为前身是,提供强大的在线编辑功能,包括语法高亮错误提示自动完成实时预览,并且支持用户以格式撰写导入导出转换文档。 团队内部RestAPI开发采用设计驱动开发的模式,即使用API设计文档解耦前端和后端的开发过程,双方只在联调与测试时耦合。在实际开发和与前端合作的过程中,受限于众多因素的影响,开发效率还有进一步提高的空间。本文的目的是优化工具链支持,减少一部分重复和枯燥的劳动。 现状...
摘要:对团队而言,如果有统一的规范命名,交接时可以减少大量的学习和沟通成本。当时一直不知道是什么玩意,后来向那个人打听才知道,是执行登录的操作,是中文拼音,又是英文,这样的命名。 1.前言 对于前端开发而言,肯定会和API打交道,大家也都会想过怎么设计自己的API。优秀的 API 之于代码,就如良好内涵对于每个人。好的 API 不但利于使用者理解,开发时也会事半功倍,后期维护更是顺风顺水。至...
摘要:场景一版本号控制随着互联网发展的,用户体验要求也是越来越高,产品形式也会随之每年有不一样的变化。使用客户端版本号控制是首选考虑策略。 一、前言笔者曾负责vivo应用商店服务器开发,有幸见证应用商店从百万日活到几千万日活的发展历程。应用商店客户端经历了大大小小上百个版本迭代后,服务端也在架构上完成了单体到服务集群...
摘要:场景一版本号控制随着互联网发展的,用户体验要求也是越来越高,产品形式也会随之每年有不一样的变化。场景二客户端版本号控制类似首页列表,商店的穿插也经历了多个版本的迭代。使用客户端版本号控制是首选考虑策略。一、前言笔者曾负责vivo应用商店服务器开发,有幸见证应用商店从百万日活到几千万日活的发展历程。应用商店客户端经历了大大小小上百个版本迭代后,服务端也在架构上完成了单体到服务集群、微服务升级。...
阅读 1957·2021-10-09 09:41
阅读 1584·2021-09-28 09:36
阅读 1071·2021-09-26 09:55
阅读 1266·2021-09-10 11:17
阅读 1112·2021-09-02 09:56
阅读 2737·2019-08-30 12:58
阅读 2879·2019-08-29 13:03
阅读 1796·2019-08-26 13:40