jQuery 插件封装的方法

扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识，最佳做法和常见的陷阱。

一、入门

编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性，此处添加的对象属性的名称就是你插件的名称：

. 代码如下:

jQuery.fn.myPlugin = function(){ //你自己的插件代码 };

用户非常喜欢的符号哪里去了？它仍然存在，但是，为了避免和其他JavaScript库冲突，我们最好将jQuery传递给一个自我执行的封闭程序，jQuery在此程序中映射为符号，这样可以避免$号被其他库覆写。

. 代码如下:

(function ($) {$.fn.m​​yPlugin = function () {//你自己的插件代码};})(jQuery);

在这个封闭程序中，我们可以无限制的使用$符号来表示jQuery函数。

二、环境

现在，我们可以开始编写实际的插件代码。 但是，在这之前，我们必须得对插件所处的环境有个概念。 在插件的范围里， this关键字代表了这个插件将要执行的jQuery对象， 这里容易产生一个普遍的误区，因为在其他包含callback的jQuery函数中，this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中，如下所示。

. 代码如下:

(function ($) {$.fn.m​​yPlugin = function () {//此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。//$(this)等同于 $($('#element'));this.fadeIn('normal', function () {//此处callback函数中this关键字代表一个DOM元素});};})(jQuery);$('#element').myPlugin();

三、基础知识

现在，我们理解了jQuery插件的基础知识，让我们写一个插件，做一些事情。

. 代码如下:

(function ($) {$.fn.m​​axHeight = function () {var max = 0;this.each(function () {max = Math.max(max, $(this).height());});return max;};})(jQuery);var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度

这是一个简单的插件，利用.height()返回页面中高度最大的div元素的高度。

四、维护Chainability

很多时候，一个插件的意图仅仅是以某种方式修改收集的元素，并把它们传递给链中的下一个方法。 这是jQuery的设计之美，是jQuery如此受欢迎的原因之一。 因此，要保持一个插件的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');