js面向對象實現圖片輪播插件

這個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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章