Jquery插件開發

  1. Jquery插件開發的三種方式

準備工作:請見我的博客《Jquery對象與DOM對象的轉換》


1 通過$.extend()來擴展jQuery

wKioL1hmH_KSvJpaAAAXC1XlDQA185.png

wKioL1hmH82w-rmNAAAnxkpNb2A052.png


2 通過$.fn 向jQuery添加新的方法

wKiom1hmIdPRrYxCAAAZEkTYhG4742.png

此處需要注意:myFunction裏面的this是Jquery包裝對象。this調用Jquery的each函數,裏面的this是DOM對象,如果需要調用Jquery方法,需要先用$()包裝。

wKioL1hmIgLTaigsAAA2bY-3PHE479.png3.讓插件接收參數

wKiom1hrSGuQgO9sAAAqp9x5oGU233.png

wKioL1hrSlPQx-hCAAANuoCbQTU649.png

當給extend方法傳遞一個以上的參數時,他會將所有參數對象合併到第一個裏。同時,如果對象中有同名屬性時,合併的時候後面的會覆蓋前面的。

利用這一點,上面的代碼就實現了用戶指定了值得參數使用指定的值,未指定的參數使用插件默認值。

4 保護好默認參數

注意到上面代碼調用extend時會將defaults的值改變,這樣不好。一個好的做法是將空對象作爲$.extend的第一個參數。

wKiom1hrS2fgVqOAAAAqYQRTK28577.png

5 面向對象的插件開發

希望將需要的重要變量定義到對象的屬性上,函數變成對象的方法,當我們需要的時候通過對象來獲取。一來方便管理,二來不會影響外部命名空間,因爲所有這些變量名和方法名都在對象內部。

wKioL1hrUqDS0U_2AABLoaDjNdw824.png


6 完善代碼

關於命名空間:

不僅僅是jQuery插件的開發,我們在寫任何JS代碼時都應該注意不要污染全局命名空間。因爲隨着你代碼的增多,如果有意無意在全局範圍內定義一些變量的話,最後很難維護,也容易跟別人寫的代碼有衝突。

比如你在代碼中向全局window對象添加了一個變量status用於存放狀態,同時頁面中引用了另一個別人寫的庫,也向全局添加了這樣一個同名變量,最後的結果肯定不是你想要的。所以不到萬不得已,一般我們不會將變量定義成全局的。

一個好的做法是始終用自調用匿名函數包裹你的代碼,即保持原來的代碼不變,我們將所有代碼用自調用匿名函數包裹。這樣就可以完全放心,安全地將它用於任何地方了,絕對沒有衝突。

wKiom1hrU8vi3wtqAABUGafATZg140.png

此外,爲防止前面別人寫的代碼沒有用分號結尾,而導致報錯,我們的代碼無法正常執行。好的做法是我們在代碼開頭加一個分號,這在任何時候都是一個好的習慣。

wKioL1hrVNHjh6RKAAATs05bDtk668.png

此處可以暫記住:如果有function前面是'('開頭的,前面加';'

wKiom1hrVYWilCQdAABVNem-VDk526.png

同時,將系統變量以參數形式傳遞到插件內部也是個不錯的實踐。

當我們這樣做之後,window等系統變量在插件內部就有了一個局部的引用,可以提高訪問速度,會有些許性能的提升

wKioL1hrVlCi6A6uAABcwShjvYo486.png

一個安全,結構良好,組織有序的插件編寫完成。

7 代碼壓縮

。。。

8 插件發佈(GitHub)

。。。

未完待續。。。

此篇博客學習資料來自於http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html

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