jquery插件的幾種寫法

最近web應用程式中越來越多地用到了jquery等web前端技術。這些技術架構有效地改善了使用者的操作體驗，同時也提高了開發人員構造豐富用戶端ui的效率。jquery本身提供了豐富的操作，但是，有時候我們需要根據我們自己的業務和系統特色（風格）構造一些我們常用的前端ui元件，而 jquery的插件給了我們一個較好的方式來構造這些ui元件，友善我們日後反複重用這些元件。下面，我将說明jquery插件常用的寫法，以及這些插件的常用場景

首先，在具體說明編寫插件之前，我們先假定一個使用場景：有一個html頁面，頁面上放置了一個5行3列的表格，即：

标記，具體代碼如下：

我要實作的功能是：滑鼠移到表格的某一行時，目前行高亮顯示，其他行正常

結合這個場景，我們進一步探讨如何利用jquery插件實作上述功能。常用的jquery插件有如下幾種寫法：

顧名思義，這種插件是對jquery自身的方法庫進行擴充的。在使用的時候通過$.methodname()的方式直接使用

插件代碼示例：

說明：當要對jquery自身進行擴充的時候，需要采用$.extend();的形式進行開發，jquery的extend()方法為我們提供了擴充 jquery自身的方式，在extend()方法中，我們采用{...}的形式編寫具體的方法體。其中，最重要的是要定義我們自己的擴充方法，如示例中的 handletableui。定義的方式是：方法名 : function(參數){ 方法體 }。通過此種方式我們就可以定義jquery自己的擴充方法，而且這個方法可以在web頁面通過智能提示顯示出來。頁面中調用的代碼如下：

使用這種插件的擴充方式，在使用此插件時，需要首先引用經過jquery包裝的頁面元素，如：$("#tableid").method()

說明：當要對頁面元素進行jquery擴充時，需要采用(function($){...})(jquery);的方式進行開發。在“...”處，定義我們自己的方法，定義方式是：$.fn.自定義方法名 = function(參數){...};的形式定義擴充方法的具體内容。在頁面調用的時候不同于對jquery自身的擴充。具體調用代碼如下：

一 般，如果需要用到一些全局的jquery插件，即：插件的方法不需要顯式調用，而是引用腳本即可；同時，這種插件一般對整個web頁面起到全局配置或設定的作用，如：對<code>&lt;body&gt;&lt;/body&gt;</code>内部的内容進行整體布局，此時可以采用腳本引用的方式實作

說明：如果上面這段代碼在js檔案中，我們隻要在頁面上添加對此腳本檔案的引用即可，當然，在所有要用到jquery的地方，需要首先添加對jquery庫腳本的引用。在引用型插件的代碼中，最主要的就是在插件中要主動調用自己所寫的插件方法。否則，插件代碼将不會起作用

在編寫插件的時候，我們需要記住這些要點，雖然不這麼做不會影響使用，但是要是你的插件是不規範的代碼，那何必花苦心思去寫插件

jquery插件的檔案名推薦命名為jquery.[插件名].js，以免和其他javascript庫插件混淆。例如命名為jquery.color.js

所有的對象方法都應當附加到jquery.fn對象上，而所有的全局函數都應當附加到jquery對象本身上

在插件内部，this指向的是目前通過選擇器擷取的jquery對象，而不像一般的方法那樣，例如click()方法，内部的this指向的是dom元素。可以通過this.each來周遊所有元素。

所有的方法或函數插件，都應當以分号結尾，否則壓縮的時候可能出現問題。為了更穩妥些，甚至可以在插件頭部先加上一個分号，以免他人的不規範代碼給插件帶來影響。插件應該傳回一個jquery對象，以保證插件的可鍊式操作。除非插件需要傳回的是一些需要擷取的量，例如字元串或者數組等。

避免在插件内部使用$作為jquery對象的别名，而應使用完整的jquery來表示。這樣可以避免沖突。當然，也可以利用閉包這種技巧來回避這個問題，使插件内部繼續使用$作為jquery的别名

一個插件的執行個體：

輸出的資訊中自動包含時間

輸出的資訊按照類型顯示不同的樣式

輸出的資訊類型包括：普通資訊、調試資訊、警告、錯誤

可選按照時間升序輸出資訊（稍作修改可以時間降序排列）

首先，來個簡單的原理。寫一個空的 plugin：

這個 plugin 的用法就是：

這裡面的關鍵就是拿到了 this 這個對象，後面的所有代碼、功能的實作都依賴于這個對象

接下來，實作 show 函數來做測試。show 函數将接受消息内容作為參數，然後顯示出來：

然後，可以這樣用：

于是，内容就出來了：hello

接下來，的代碼就很簡單了（jquery.message.js）：

下面把這個插件應用上看看效果：

結果顯示出來：

succeed11:07:52host web context ready.

debug11:07:52list title is 'data list'.

error11:07:52list doesn't exist.