所謂“插件”，就是用戶自己新增的jQuery實例對象的方法。由于該方法要被所有實例共享，所以只能定義在jQuery構造函數的原型對象（prototype）之上。對于用戶來說，把一些常用的操作封裝成插件（plugin），使用起來會非常方便。

插件的編寫

原理

本質上，jQuery插件是定義在jQuery構造函數的prototype對象上面的一個方法，這樣做就能使得所有jQuery對象的實例都能共享這個方法。因為jQuery構造函數的prototype對象被簡寫成jQuery.fn對象，所以插件采用下面的方法定義。

jQuery.fn.myPlugin = function() { // Do your awesome plugin stuff here };

更好的做法是采用下面的寫法，這樣就能在函數體內自由使用美元符號（$）。

;(function ($){ $.fn.myPlugin = function (){ // Do your awesome plugin stuff here }; })(jQuery);

上面代碼的最前面有一個分號，這是為了防止多個腳本文件合并時，其他腳本的結尾語句沒有添加分號，造成運行時錯誤。

有時，還可以把頂層對象（window）作為參數輸入，這樣可以加快代碼的執行速度和執行更有效的最小化操作。

;(function ($, window) { $.fn.myPlugin = function() { // Do your awesome plugin stuff here }; }(jQuery, window));

需要注意的是，在插件內部，this關鍵字指的是jQuery對象的實例。而在一般的jQuery回調函數之中，this關鍵字指的是DOM對象。

(function ($){ $.fn.maxHeight = function (){ var max = 0; // 下面這個this，指的是jQuery對象實例 this.each(function() { // 回調函數內部，this指的是DOM對象 max = Math.max(max, $(this).height()); }); return max; }; })(jQuery);

上面這個maxHeight插件的作用是，返回一系列DOM對象中高度最高的那個對象的高度。

大多數情況下，插件應該返回jQuery對象，這樣可以保持鏈式操作。

(function ($){ $.fn.greenify = function (){ this.css("color", "green"); return this; }; })(jQuery); $("a").greenify().addClass("greenified");

上面代碼返回this對象，即jQuery對象實例，所以接下來可以采用鏈式操作。

對于包含多個jQuery對象的結果集，可以采用each方法，進行處理。

$.fn.myNewPlugin = function() { return this.each(function() { // 處理每個對象 }); };

插件可以接受一個屬性對象參數。

(function ($){ $.fn.tooltip = function (options){ var settings = $.extend( { 'location' : 'top', 'background-color' : 'blue' }, options); return this.each(function (){ // 填入插件代碼 }); }; })(jQuery);

上面代碼使用extend方法，為參數對象設置屬性的默認值。

?

實例

下面是一個將a元素的href屬性添加到網頁的插件。

(function($){ $.fn.showLinkLocation = function() { return this.filter('a').append(function(){ return ' (' + this.href + ')'; }); }; }(jQuery)); // 用法 $('a').showLinkLocation();

從上面的代碼可以看到，插件的開發和使用都非常簡單。

定義插件的方式除了上面說的用$.fn來定義，還有另外一種方式來定義插件，那就是使用$.fn.extend方法。類似下面的寫法：

(function($){$.fn.extend({ changeStyle:function(option){ var defaultSetting = { colorStr:"green",fontSize:12};var setting = $.extend(defaultSetting,option);this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px"); return this; }}); }(jQuery));

?

PS:

$.extend方法和$.fn.extend方法都可以用來擴展jQuery功能，通過閱讀jQuery源碼我們可以發現這兩個方法的本質區別：

$.extend方法是在jQuery全局對象上擴展方法；

$.fn.extend方法是在$選擇符選擇的jQuery對象上擴展方法。

所以擴展jQuery的公共方法一般用$.extend方法，定義插件一般用$.fn.extend方法。

?

插件的發布

編寫插件以后，可以將它發布到jQuery官方網站上。

首先，編寫一個插件的信息文件yourPluginName.jquery.json。文件名中的yourPluginName表示你的插件名。

{"name": "plugin_name", "title": "plugin_long_title", "description": "...", "keywords": ["jquery", "plugins"], "version": "0.0.1", "author": { "name": "...", "url": "..." }, "maintainers": [ { "name": "...", "url": "..." } ], "licenses": [ { "type": "MIT", "url": "http://www.opensource.org/licenses/mit-license.php" } ], "bugs": "...", // bugs url "homepage": "...", // homepage url "docs": "...", // docs url "download": "...", // download url "dependencies": { "jquery": ">=1.4" } }

上面是一個插件信息文件的實例。

然后，將代碼文件發布到Github，在設置頁面點擊“Service Hooks/WebHook URLs”選項，填入網址http://plugins.jquery.com/postreceive-hook，再點擊“Update Settings”進行保存。

最后，為代碼加上版本，push到github，你的插件就會加入jQuery官方插件庫。

git tag 0.1.0 git push origin --tags

以后，你要發布新版本，就做一個新的tag。

參考

【1】阮一峰?http://javascript.ruanyifeng.com/jquery/plugin.html

【2】簡書?http://www.jianshu.com/p/518d424d4994

轉載于:https://www.cnblogs.com/ybtools/p/6897408.html

總結

以上是生活随笔為你收集整理的JQuery系列（8） - JQuery插件开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。