码迷,mamicode.com
首页 > Web开发 > 详细

js面向对象实现图片轮播插件

时间:2015-09-15 01:43:24      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:视频教程   图片   计时器   记录   新建   

这个demo的学习过程很值得记录下来。


前言:学习了一遍js的面向对象,想找点东西练练手,就上网找了个用js面向对象实现图片轮播插件:

http://www.codefans.net/jscss/code/3327.shtml


功能:新建一个实例就是一个图片轮播,可以新建多个,但是实例与实例之间是干扰的。


过程:看视频教程说,第一次搞面向对象,把面向过程改头换面就可以了。自己就死磕地先写了原生,再改为面向对象。


写原生的时候,遇到的问题:

  1. 不知道怎么样停止计时器:clearInterval、clearTimeout

  2. 设计计时器设计错了,之前我以为设置一个setInterval为1000ms然后再设置一个setTimeout为1000ms。这样效果是出来了,但是不好控制;更好的设计是外面是一个setInterval为2000ms,里面也设一个setInterval为1000ms,然后用clearInterval来停止里面的那个

  3. 写的时候,逻辑很混乱,不过呢,现在回想起来,把最小的单位功能先写出来,再考虑其他功能与这个子功能的关系,这样写的话比较容易理清楚他们的逻辑。(逻辑问题那晚都没理清楚,很沮丧,做了一些不理智的事情,也发现自己抵挫能力需要加强

  4. 不管怎么,我写出来了。加油!


写面向对象的时候,遇到的问题:

http://segmentfault.com/q/1010000003746641

  1. 我想了很久,也没想出来,查不来,然后就问QQ群的人和上SF了,其实我排错的思路是正确的,找到错误是在哪部分上,但是我在那个部门没有注意细节,就是var _this=this!我没有加var!意味着_this是全局变量。

  2. 找到答案之后,再联系一下自己之前的猜想,就是什么让他们合并在一起了,我意味是prototype的问题,但是我直接把prototype干掉,放在构造函数里面,console.log出来的一模一样!我就蒙了!以后就可以在这里找原因。


总结:写程序的时候,除了逻辑,还有细节,这些细节,其实是习惯,以后要多在习惯上面下苦工啊!

代码和图片都放在我的github里了:

https://github.com/Rockergmail/jsdemo/tree/objectorient/oo/picRobin

本文出自 “Rocker” 博客,谢绝转载!

js面向对象实现图片轮播插件

标签:视频教程   图片   计时器   记录   新建   

原文地址:http://rocker.blog.51cto.com/6314218/1694747

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!