擴充套件jQuery外掛和方法的作用是非常強大的，它可以節省大量開發時間。
入門
編寫一個jQuery外掛開始於給jQuery.fn加入新的功能屬性，此處新增的物件屬性的名稱就是你外掛的名稱：
jQuery.fn.myPlugin = function(){
//你自己的外掛程式碼
};為了避免和其他JavaScript庫衝突，我們最好將jQuery傳遞給一個自我執行的封閉程式:
(function ($) {
$.fn.myPlugin = function () {
//你自己的外掛程式碼
};
})(jQuery);執行環境
現在，我們可以開始編寫實際的外掛程式碼。 但是，在這之前，我們必須得對外掛所處的環境有個概念。 在外掛的範圍裡， this關鍵字代表了這個外掛將要執行的jQuery物件， 這裡容易產生一個普遍的誤區，因為在其他包含callback的jQuery函式中，this關鍵字代表了原生的DOM元素。這常常會導致開發者誤將this關鍵字無謂的包在jQuery中，如下所示。
(function ($) {
$.fn.myPlugin = function () {
//此處沒有必要將this包在$號中如$(this)，因為this已經是一個jQuery物件。
//$(this)等同於 $($(`#element`));
this.fadeIn(`normal`, function () {
//此處callback函式中this關鍵字代表一個DOM元素
});
};
})(jQuery);
$(`#element`).myPlugin();簡單例子
當理解了jquery的相關知識後，來看下面一個簡單的例子：
(function ($) {
$.fn.maxHeight = function () {
var max = 0;
this.each(function () {
max = Math.max(max, $(this).height());
});
return max;
};
})(jQuery);
var tallest = $(`div`).maxHeight(); //返回高度最大的div元素的高度
這是一個簡單的外掛，利用.height()返回頁面中高度最大的div元素的高度。
鏈式操作
要保持一個外掛的鏈式操作（chainability），你必須確保你的外掛返回this關鍵字。
如下例子：
(function ($) {
$.fn.lockDimensions = function (type) {
return this.each(function () {
var $this = $(this);
if (!type || type == `width`) {
$this.width($this.width());
}
if (!type || type == `height`) {
$this.height($this.height());
}
});
};
})(jQuery);
$(`div`).lockDimensions(`width`).CSS(`color`, `red`);
由於外掛返回this關鍵字，它保持了chainability，這樣jQuery收集的元素可以繼續被jQuery方法如.css控制。 因此，如果你的外掛不返回固有的價值，你應該總是在其作用範圍內返回this關鍵字。 此外，你可能會推斷出，傳遞給外掛的引數將會在外掛的作用範圍內被傳遞。 因此，在前面的例子，字串’width’變成了外掛的型別引數。
預設值和選項
通過使用$.extend來設定預設設定。
(function ($) {
$.fn.tooltip = function (options) {
//建立一些預設值，擴充任何被提供的選項
var settings = $.extend({
`location`: `top`,
`background-color`: `blue`
}, options);
return this.each(function () {
// Tooltip外掛程式碼
});
};
})(jQuery);
$(`div`).tooltip({
`location`: `left`
});
在這個例子中，呼叫tooltip外掛時覆寫了預設設定中的location選項，background-color選項保持預設值，所以最終被呼叫的設定值為：
{
`location`: `left`,
`background-color`: `blue`
}這是一個很靈活的方式，提供一個高度可配置的外掛，而無需開發人員定義所有可用的選項。
外掛方法
在任何情況下，一個單獨的外掛不應該在jQuery.fn jQuery.fn物件裡有多個名稱空間。
如下的寫法是糟糕的：
(function ($) {
$.fn.tooltip = function (options) {
// this
};
$.fn.tooltipShow = function () {
// is
};
$.fn.tooltipHide = function () {
// bad
};
$.fn.tooltipUpdate = function (content) {
// !!!
};
})(jQuery);
這是不被鼓勵的，因為它$.fn使$.fn名稱空間混亂。 為了解決這個問題，你應該收集物件文字中的所有外掛的方法，通過傳遞該方法的字串名稱給外掛以呼叫它們。
(function ($) {
var methods = {
init: function (options) {
// this
},
show: function () {
// is
},
hide: function () {
// good
},
update: function (content) {
// !!!
}
};
$.fn.tooltip = function (method) {
// 方法呼叫
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === `object` || !method) {
return methods.init.apply(this, arguments);
} else {
$.error(`Method` + method + `does not exist on jQuery.tooltip`);
}
};
})(jQuery);
//呼叫init方法
$(`div`).tooltip();
//呼叫init方法
$(`div`).tooltip({
foo: `bar`
});
// 呼叫hide方法
$(`div`).tooltip(`hide`);
//呼叫Update方法
$(`div`).tooltip(`update`, `This is the new tooltip content!`);
這種型別的外掛架構允許您封裝所有的方法在父包中，通過傳遞該方法的字串名稱和額外的此方法需要的引數來呼叫它們。 這種方法的封裝和架構型別是jQuery外掛社群的標準，它被無數的外掛在使用，包括jQueryUI中的外掛和widgets。
總結
編寫jQuery外掛允許你做出庫，將最有用的功能整合到可重用的程式碼，可以節省開發者的時間，使開發更高效。 開發jQuery外掛時，要牢記：
- 始終包裹在一個封閉的外掛：
(function($) {
/* plugin goes here */
})(jQuery);
- 不要冗餘包裹this關鍵字在外掛的功能範圍內。
- 除非外掛返回特定值，否則總是返回this關鍵字來維持chainability 。
- 傳遞一個可擴充的預設物件引數而不是大量的引數給外掛。
- 不要在一個外掛中多次命名不同方法。