用js單例設(shè)計(jì)模式寫了一個(gè)Drag組件demo，暫時(shí)只有三個(gè)配置項(xiàng)。

config：{ id，toDown，toUp } ? ? ? ? //id為必填項(xiàng)，可以放在初始化方法init()中第一個(gè)參數(shù)。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//toDown：function類型

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //toUp：function類型

源碼地址：https://github.com/dingjiamughal/components/blob/master/componentDrag.html

演示效果：https://dingjiamughal.github.io/components/componentDrag.html

面向?qū)ο蠼M件開發(fā)思路：

構(gòu)造目標(biāo)主題函數(shù)Drag()，聲明默認(rèn)options：

extend方法，覆蓋默認(rèn)參數(shù)：

初始化方法init，在init中調(diào)用extend方法：

基本思路完成，剩下的補(bǔ)充方法邏輯：

init為主接口，包含所有參數(shù)，因此所有方法都要寫在init中

這里和demo版的有點(diǎn)區(qū)別——將id作為必選參數(shù)（id放在opt中如果不寫也會(huì)報(bào)錯(cuò)，因?yàn)閠his.obj需要傳id）

注意this指向問題：在init接口下的事件中的this指向this.obj，為了拿到Drag中的配置參數(shù)和Drag原型下的方法，要在init中保存this --> var _this=this;

關(guān)于This.settings.toDown()：調(diào)用的是默認(rèn)配置項(xiàng)中的方法，牽涉到extend函數(shù)將引用類型的自定義對(duì)象屬性傳給默認(rèn)對(duì)象settings，所以直接調(diào)用默認(rèn)參數(shù)即可

默認(rèn)配置項(xiàng)settings的作用，防止多次調(diào)用產(chǎn)生效果沖突。

方法調(diào)用：

以上是Drag組件開發(fā)的基本流程，可以根據(jù)需求補(bǔ)充自定義參數(shù)settings。