簡單來說，所謂 jQuery 插件就是擴(kuò)展在 jQuery 原型對象上的一個(gè)方法。通過擴(kuò)展 jQuery 對象，每次調(diào)用 jQuery 對象的時(shí)候，對象里面都包含了我們自己所添加的那個(gè)方法。

一般插件的設(shè)計(jì)目的都是為了能在選擇器所選擇的結(jié)果集上做某些事情，本質(zhì)上和 jQuery 自帶的fadeOut和addClass 之類的方法沒什么區(qū)別。

制作好自己的插件后，可以在自己的項(xiàng)目中私用，如果你愿意的話，也可以免費(fèi)公開給其它人使用。而且，現(xiàn)在互聯(lián)網(wǎng)上的免費(fèi)插件也非常的多。另外，制作一個(gè)屬于自己的 jQuery 插件的門檻真的很低。

如何制作一個(gè)插件

一個(gè)典型的插件制作方法如下：

(function($){$.fn.myNewPlugin =function() {return this.each(function(){// do something});};}(jQuery));

不要被上面的代碼迷惑，制作 jQuery 插件的關(guān)鍵點(diǎn)就是擴(kuò)展 jQuery 的原型對象，其實(shí)也就是下面這行代碼：

$.fn.myNewPlugin =function() {/* do something */}

然后再將其封裝在一個(gè)自執(zhí)行函數(shù)中：

(function($){//...}(jQuery));

其實(shí)也就是創(chuàng)建一個(gè)私有的作用域來擴(kuò)展 jQuery，在這個(gè)作用域中可以隨意使用 $ 符號(hào)，而不用擔(dān)心和其它 JavaScript 庫中的 $ 產(chǎn)生沖突。

所以，真正意義上的插件代碼就是以下部分：

$.fn.myNewPlugin =function() {return this.each(function(){// do something});};

其中的 this 關(guān)鍵字，指向的是調(diào)用這個(gè)插件的 jQuery 對象。

var somejQueryObject = $('#something');$.fn.myNewPlugin =function() {alert(this=== somejQueryObject);};somejQueryObject.myNewPlugin();// alerts 'true'

一個(gè)典型的 jQuery 對象通常包含許多 DOM 元素，所以說 jQuery 對象也被看做是 DOM 對象集。因此，如果要對對象集中的每個(gè)元素作處理，就要借助于 jQuery 的 each() 方法：

$.fn.myNewPlugin =function() {return this.each(function(){});};

和其它大多數(shù) jQuery 方法一樣，jQuery 的 each() 方法返回的也是一個(gè) jQuery 對象，所以我們才可以使用 $(...).css().attr()... 這種廣受喜愛的鏈?zhǔn)讲僮鳌榱耸刮覀兊牟寮仓С宙準(zhǔn)讲僮?#xff0c;插件也要返回 jQuery 對象。通過 each() 方法，可以對 jQuery 結(jié)果集中的 DOM 元素逐個(gè)進(jìn)行處理，下面是個(gè)示例：

(function($){$.fn.showLinkLocation =function() {return this.filter('a').each(function(){$(this).append(' ('+ $(this).attr('href') +')');});};}(jQuery));// Usage example: $('a').showLinkLocation();

此小插件的功能就是將每個(gè)超鏈接的地址，在超鏈接后面也顯示出來：

<!-- 插件調(diào)用前： --><ahref="page.html">Foo</a><!-- 插件調(diào)用后： --><ahref="page.html">Foo (page.html)</a>

其實(shí)，這個(gè)插件的代碼還可以再優(yōu)化一下：

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

我們使用一個(gè)匿名的回調(diào)函數(shù)作為 append 方法的參數(shù)，并且這個(gè)回調(diào)函數(shù)的返回值即為超鏈接的地址，和上面例子中使用 attr 方法不一樣，此示例中使用了 DOM 內(nèi)置的 API，通過元素的 href 屬性來取得相關(guān)的值。

這里還有另外一個(gè)插件的例子，這個(gè)例子中并沒有使用 each() 做循環(huán)，而是直接調(diào)用了 jQuery 的其它方法：

(function($){$.fn.fadeInAndAddClass =function(duration, className) {return this.fadeIn(duration,function(){$(this).addClass(className);});};}(jQuery));// Usage example: $('a').fadeInAndAddClass(400,'finishedFading');

什么時(shí)候才需要自己寫插件

有時(shí)候我們需要用一小段代碼實(shí)現(xiàn)某功能，并且這個(gè)功能在其它很多地方都可能被復(fù)用，那么這時(shí)可以考慮將這個(gè)功能寫成插件。

大多數(shù)插件都僅僅是在 $.fn 命名空間下添加方法而已，jQuery 確保在此方法中使用的 this 都是指向調(diào)用該方法的 jQuery 對象。反過來，編寫插件的時(shí)候，也要確保插件方法返回的也是這個(gè)對象。

下面又是一個(gè)簡單的 jQuery 插件示例：

// 定義插件(function($){$.fn.hoverClass =function(c) {return this.hover(function() { $(this).toggleClass(c); });};})(jQuery);// 調(diào)用插件 $('li').hoverClass('hover');

要想了解更多關(guān)于 jQuery 插件開發(fā)的方法，可以參考 Mike Alsup 撰寫的 A Plugin Development Pattern 一文，文中詳細(xì)介紹了一款名為 $.fn.hilight 插件的開發(fā)方法。

該插件的設(shè)計(jì)模式如下：

//// create closure//(function($) {//// plugin definition//$.fn.hilight =function(options) {debug(this);// build main options before element iterationvar opts = $.extend({}, $.fn.hilight.defaults, options);// iterate and reformat each matched elementreturn this.each(function() { $this= $(this);// build element specific optionsvar o = $.meta ? $.extend({}, opts, $this.data()) : opts;// update element styles $this.css({backgroundColor: o.background,color: o.foreground});var markup = $this.html();// call our format function markup = $.fn.hilight.format(markup); $this.html(markup);});};//// private function for debugging//functiondebug($obj) {if(window.console && window.console.log) window.console.log('hilight selection count: '+ $obj.size());};//// define and expose our format function//$.fn.hilight.format =function(txt) {return'<strong>'+ txt +'</strong>';};//// plugin defaults//$.fn.hilight.defaults = {foreground:'red',background:'yellow'};//// end of closure//})(jQuery);

如果有興趣，可至原文深度閱讀。

via http://jqfundamentals.com/#chapter-8

http://www.akasuna.com/2012/03/12/what-is-a-jquery-plugin-and-how-to-develop-a-jquery-plugin

轉(zhuǎn)載于:https://blog.51cto.com/bzjbest/1260037

總結(jié)

以上是生活随笔為你收集整理的所谓 jQuery 插件，怎样开发一个 jQuery 插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。