jsapi设计_一个简单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结构

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

}

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'])

jsapi设计_一个简单API设计相关推荐

mysql设计一个简单的系统_一个简单数据库设计例子
一个曾经做过的简单的管理系统中数据库设计的例子,包括设计表.ER图.建模.脚本. 项目信息 Project Name: Book Manager System DB: MySQL5.5 DB Name ...
简易cpu设计_为简单而设计
简易cpu设计 Before we get started, it's worth me spending a brief moment introducing myself to you. My n ...
java设计游戏_用java设计实现一个简单的动作冒险类游戏
用java设计实现一个简单的动作冒险类游戏 1.背景这是java老师布置的本周作业,具体题目截图如下 2.分析在UML图已经给出的前提下,此作业很容易.自己在此基础上,加了个简单的界面设计和玩家设 ...
java动作游戏教程_用java设计实现一个简单的动作冒险类游戏
用java设计实现一个简单的动作冒险类游戏 1.背景这是java老师布置的本周作业,具体题目截图如下 2.分析在UML图已经给出的前提下,此作业很容易.自己在此基础上,加了个简单的界面设计和玩家设 ...
用java设计实现一个简单的动作冒险类游戏
用java设计实现一个简单的动作冒险类游戏 1.背景这是java老师布置的本周作业,具体题目截图如下 2.分析在UML图已经给出的前提下,此作业很容易.自己在此基础上,加了个简单的界面设计和玩家设 ...
用Android Studio设计的一个简单的闹钟APP
该闹钟是用Android Studio为安卓手机设计的一个简单的闹钟APP 一.介绍系统的设计界面闹钟的布局文件代码如下 <?xml version="1.0" encod ...
基于列表框的简单选课窗体开发。编写Windows应用程序，设计实现一个简单选课系统，要求：（1）点击“添加”按钮，将把在第一文本框中的输入的课程名称添加到左边的列表框中，且所添加的课程不能为空，不能
基于列表框的简单选课窗体开发.编写Windows应用程序,设计实现一个简单选课系统,要求: (1)点击"添加"按钮,将把在第一文本框中的输入的课程名称添加到左边的列表框中,且所添加 ...
餐饮管理系统 mysql数据库设计分析_终稿课程设计_餐饮管理系统数据库设计.docOK版（样例3）...
<课程设计_餐饮管理系统数据库设计.doc>由会员分享,可免费在线阅读全文,更多与<(终稿)课程设计_餐饮管理系统数据库设计.doc(OK版)>相关文档资源请在帮帮文库(www ...
用vb思设计Java编译器_一个简单的VB-VC编译器 - 程序设计(Programming)版 - 北大未名BBS...
发信人: phoenix (凤凰), 信区: VisualBasic 标题: 一个简单的VB-VC编译器发信站: PKU BBS (Thu Jan 6 14:05:52 2000), 转信 V ...

jsapi设计_一个简单API设计

jsapi设计_一个简单API设计相关推荐

最新文章

热门文章