自己動手寫插件底層篇—基于jquery移動插件實(shí)現(xiàn)

序言

本章作為自己動手寫插件的第一篇文章,會盡可能的詳細(xì)描述一些實(shí)現(xiàn)的方式和預(yù)備知識的講解,隨著知識點(diǎn)積累的一點(diǎn)點(diǎn)深入,可能到了后期講解也會有所跳躍。所以,希望知識點(diǎn)不是很扎實(shí)的讀者或者是初學(xué)者,不要跳讀。因?yàn)樵谶@里即使是你已經(jīng)掌握的知識,重新的閱讀也會使你的記憶更加的深刻。還有作者才疏學(xué)淺,如果有什么地方講解錯的話,希望各位能夠斧正。另外,博主近期發(fā)現(xiàn)有某些人未經(jīng)本人的允許,私自引用本人的文章。更離譜的是還沒有標(biāo)注署名和來源,在此,特此聲明,本系列教程為博主與【博客園】共同所有,如需引用請注明出處

 

一、預(yù)備知識

 這個系列的文章至少需要掌握HTML5的一些新的特性和CSS3的新特性,同時還需要各位能夠掌握基礎(chǔ)的JS操作和jquery操作。

 在以上都知識點(diǎn)都掌握的基礎(chǔ)上,推薦還不是很清楚jquery插件是怎么回事的同學(xué)可以看一下我之前的一篇文章: jQuery插件編寫精講與技巧

 

二、思路分析

 說到這一個思路分析:大致上實(shí)現(xiàn)的思路有以下兩種。

一、判斷塊是否被按下(mousedown),然后在點(diǎn)擊事件中嵌套移動事件(mousemove),同時在里面放置一個松開的事件(mouseup)

二、跟第一種方法類似,都是分成三個事件來觸發(fā),但是不同的是:事件與事件之間沒有互相嵌套,而是分成三個獨(dú)立的事件,通過一個控制器(變量)來達(dá)到事件之間的交互

第一種方法是不推薦的,因?yàn)檫@種方法雖然直觀,符合整個思考的邏輯,但是這個方法的做法相對比較復(fù)雜,而且如果有什么要改動的話也不方便。這個我們可以理解為耦合性較高。第二種方法事件邏輯簡單,而且所有的事件都是分開來執(zhí)行的,沒有依賴關(guān)系,后期維護(hù)性較好。

網(wǎng)友評論