JQuery Plugin 開發

學習 JQuery 插件開發之後, 可以将自己平時常用的功能封裝成插件, 便于在不同的項目之間使用.

JQuery 官網上的 插件開發教程就很不錯, 簡單易懂.

參考網址:

<a href="http://learn.jquery.com/plugins/basic-plugin-creation/">http://learn.jquery.com/plugins/basic-plugin-creation/</a>

<a href="http://learn.jquery.com/plugins/advanced-plugin-concepts/">http://learn.jquery.com/plugins/advanced-plugin-concepts/</a>

本文就是基于官網上的教程整理的, 也加入了自己實驗的一些示例。

jquery 中有2個重要的API是和插件編寫相關的.

jQuery.extend(object)    即 $.extend(object)

jQuery.fn.extend(object) 即 $.fn.extend(object)

這2個API都是為了将自己編寫的功能以插件的形式加入到 jquery 中.

但是含義上是有差別的.

這個函數是用來擴充 jQuery 本身, 也就是擴充 "$" 的.

示例如下:

首先點選 [btn-test] 按鈕, 提示沒有 test 方法, 然後點選 [btn-extend] 按鈕, 擴充 $ 本身.

再次點選 [btn-test] 按鈕, 執行擴充的 $.test() 函數.

這個函數用來為 jQuery 對象提供新的方法.

所謂 jQuery 對象, 最常見的我們平時通過jQuery選擇器擷取的對象, 比如: $("#id"), $(".class") 等等.

首先點選 [btn-test] 按鈕, 提示沒有 test 方法, 然後點選 [btn-extend] 按鈕, 擴充 $ 對象.

再次點選 [btn-test] 按鈕, 執行擴充的 $.fn.test() 函數.

編寫 jQuery 插件之前, 一定要弄懂 "$ 本身" 和 "$ 對象" 的差別. ($ 就是 jQuery)

也就是弄懂 $.extend 和 $.fn.extend 之間的差別.

一般來說, 純UI相關的插件很少, 都是UI和功能一起配合使用的, 比如 jQuery UI 庫.

下面的示例主要為了說明如何使用 jQuery 插件, 是以隻和UI相關.

示例 HTML:

示例 jQuery 插件:

通過點選 html 頁面上的按鈕, 可以切換所有 smalldiv 的背景色.

這個例子比上面那個略微複雜一些, 上面的示例1 是對所有 smalldiv 統一設定背景色, 不夠靈活.

這個示例通過 jQuery 的 $.fn.each 函數根據每個 smalldiv 的 class 分别設定背景色.

(HTML部分的代碼和示例1 一樣)

這裡需要注意2個地方:

1. 代碼中 this 的含義

這裡的 this 是jQuery 對象, 也就是通過 $("#id"), $(".class") 之類的選擇器擷取的對象.

*注意* 這個 this 的位置是在 $.fn.toggle_back 的主函數體中.

這裡的 this 是 DOM 對象, 是以通過 $(this) 才能變成 jQuery 對象.

至于為什麼 each 中的this就是各個 DOM 對象, 那是因為 each 的實作中将 jQuery 對象轉換為了 DOM 對象.

2. 插件代碼最後的 return this;

這裡之是以要 return this; 是為了實作 jQuery 的鍊式表達式. 也就是 return this; 之後, 可以接着調用其他 jQuery 函數.

比如 $(".class").toggle_back().css("color", "red");

上面的示例2中 $("#btn-plugin").click 函數可以改為如下:

下面通過一個 日期轉換 的例子, 說明功能型插件的寫法.

HTML 部分:

插件 js 隻是簡單的轉換了一時間格式, 僅僅為了示範:

點選HTML頁面上的按鈕, 分别轉換出不同的時間格式并顯示在頁面上.

上面的插件需要一個參數, 如果調用插件時沒有帶參數, 則導緻js錯誤.

為了更好的使用者體驗, 下面給插件加入預設參數(也就是目前時間).

新的 plugin js如下:

HTML中調用插件時可以不用參數了

補充: 合并參數時, 使用了 $.extend, 這個方法的作用是将所有參數 合并成一個大的json對象, 有相同的key時, 後面的參數覆寫前面的參數.

$.extend 的第一個參數是 {}, 之是以這樣, 是因為合并後, 會破壞第一個參數, 是以不能将 defaults 放在第一個.

說明示例如下: (用chrome的console視窗可以看到輸出結果)

雖然 javascript 不是純粹的面向對象的語言, 但是通過其強大的閉包功能, 也能構造出類似其他面向對象語言的公有/私有函數.

*功能型插件* 中的示例中3個函數 $.fn.dt_format.date, $.fn.dt_format.time, $.fn.dt_format.datetime 都是公有函數, 可以被插件使用者所覆寫.

比如, 将上面示例的HTML改為如下: (覆寫了插件中的 $.fn.dt_format.datetime 方法)

如果不想公開方法, 改變那3個函數定義方法即可:

這樣, 插件使用者就不能覆寫 date, time, datetime 方法了.

是從 jQuery 官方網站的插件教程中總結出來的:

不要自定義文法

不要寫死元素的id或者class, 将其以 options 的形式開放出來

提供 callback

本文轉自wang_yb部落格園部落格，原文連結：http://www.cnblogs.com/wang_yb/p/4103137.html，如需轉載請自行聯系原作者