您的位置:首页 > Web前端 > JavaScript

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

2015-09-14 22:29 651 查看
这个demo的学习过程很值得记录下来。

前言:学习了一遍js的面向对象,想找点东西练练手,就上网找了个用js面向对象实现图片轮播插件:
http://www.codefans.net/jscss/code/3327.shtml

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

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

写原生的时候,遇到的问题:
不知道怎么样停止计时器:clearInterval、clearTimeout

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

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

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

写面向对象的时候,遇到的问题:
http://segmentfault.com/q/1010000003746641
我想了很久,也没想出来,查不来,然后就问QQ群的人和上SF了,其实我排错的思路是正确的,找到错误是在哪部分上,但是我在那个部门没有注意细节,就是var _this=this!我没有加var!意味着_this是全局变量。

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

总结:写程序的时候,除了逻辑,还有细节,这些细节,其实是习惯,以后要多在习惯上面下苦工啊!
代码和图片都放在我的github里了: https://github.com/Rockergmail/jsdemo/tree/objectorient/oo/picRobin 本文出自 “Rocker” 博客,谢绝转载!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: