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

序言

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

 

一、預(yù)備知識(shí)

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

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

 

二、思路分析

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

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

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

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