章节
问答
课签
笔记
评论
占位
占位

小男孩部分代码的封装

前端充斥着大量的异步操作,动画就是异步的逻辑,七夕主题的整个设计都是以小男孩走路为主线。在走到不同的路段就会有不同的操作,走路是通过CSS3的transition与animation结合完成的,所以针对这类异步的处理我采用了jQuery的Deferred封装起来。

除此之外,在整个结构中都是采用面向接口编程,简单的说就是将行为分布在各个对象中,并让这些对象自己各自负责自己的行为。那么小孩男的整个行为逻辑我都将会封装成一个独立的对象,通过接口调用

说了半天,我们看右边的代码最直接,我单独用了个BoyWalk.js把小男孩的动作给封装了起来,暴露了walkTo、stopWalk、setColoer三个接口,提供给外部调用。 接口的命名与数量是需要根据具体的业务逻辑的需要,随着人物的动作变化的增加,接口也会增加

以小男孩走路为变化,不同的路段有不同的速率与距离,所以会提供一个走路的walkTo接口给外部。在第三章的时候我把走路动作的一些细节与实现都分解了一遍,这里主要看下怎么融入Deferred的处理

index.html中的代码调用,可以这样理解:

  • 生成一个小男孩对象
  • 开始走路,2秒走到页面的20%的距离
  • 完成了设置一个颜色效果
  • 继续走路,走到40%的区域
  • 完成了设置一个颜色效果
  • 继续走路,走到60%的区域
  • 完成了设置一个颜色效果

通过加入Deferred的处理,让我们的流程就跟同步一样,这件事完成了就开始下一件事,非常合适人类的线性编程的逻辑,之后的整个流程都会基于then的方式书写

任务

打开index.html文件,在代码的68行填入相应代码,可以观察到之后的更多动作

.then(function() {
    //第二次走
    return boy.walkTo(2000, 0.4)
}).then(function() {
    //第二次走路完成
    boy.setColoer('yellow')
}).then(function() {
    //第三次走路
    return boy.walkTo(2000, 0.6)
}).then(function() {
    //第三次走路完成
    boy.setColoer('blue')
});
?不会了怎么办
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?