Extending jQuery plug-ins and methods is very powerful and can save a lot of development time. This article will outline the basics, best practices, and common pitfalls of jQuery plugin development.

1. Getting started

Writing a jQuery plug-in starts by adding a new function attribute to jQuery.fn. The name of the object attribute added here is the name of your plug-in:

. The code is as follows:

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

Where have the symbols that users loved so much gone? It still exists, but, in order to avoid conflicts with other JavaScript libraries, it is better to pass jQuery to a self-executing closed program, where jQuery is mapped as a symbol, so as to avoid the $ sign being overwritten by other libraries.

. The code is as follows:

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

In this closed program, we can use the $ symbol without restriction to represent jQuery functions.

2. Environment

Now, we can start writing the actual plug-in code. However, before that, we must have an idea of ??the environment in which the plug-in is located. In the scope of the plug-in, the this keyword represents the jQuery object that the plug-in will execute. A common misunderstanding is easy to occur here, because in other jQuery functions that contain callbacks, the this keyword represents the native DOM element. This often causes developers to mistakenly wrap the this keyword in jQuery unnecessarily, as shown below.

. The code is as follows:

(function ($) {
$.fn.myPlugin = function () {
//此處沒有必要將this包在$號中如$(this)，因為this已經(jīng)是一個jQuery對象。
//$(this)等同于 $($('#element'));
this.fadeIn('normal', function () {
//此處callback函數(shù)中this關鍵字代表一個DOM元素
});
};
})(jQuery);
$('#element').myPlugin();

3. Basic knowledge

Now that we understand the basics of jQuery plug-ins, let’s write a plug-in to do something.

. The code is as follows:

(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元素的高度。

4. Maintain Chainability

Many times, the intention of a plug-in is simply to modify the collected elements in some way and pass them to the next method in the chain. This is the beauty of jQuery's design and one of the reasons jQuery is so popular. Therefore, to maintain a plugin's chainability, you must ensure that your plugin returns the this keyword.

. The code is as follows:

(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');

Since the plugin returns this keyword, it maintains chainability, so that elements collected by jQuery can continue to be controlled by jQuery methods such as .css. Therefore, if your plugin does not return an intrinsic value, you should always return the this keyword within its scope. Additionally, you might deduce that parameters passed to a plugin will be passed within the plugin's scope. Therefore, in the previous example, the string 'width' becomes a type parameter of the plugin.

5. Default values ??and options

For plugins that are more complex and provide many customizable options, it is best to have a default setting that can be extended when the plugin is called (by using $.extend). So instead of calling a plugin with a bunch of parameters, you can call it with an object parameter containing the settings you want to override.

. The code is as follows:

(function ($) {
$.fn.tooltip = function (options) {
//創(chuàng)建一些默認值，拓展任何被提供的選項
var settings = $.extend({
'location': 'top',
'background-color': 'blue'
}, options);
return this.each(function () {
// Tooltip插件代碼
});
};
})(jQuery);
$('div').tooltip({
'location': 'left'
});

In this example, when calling the tooltip plug-in, the location option in the default settings is overwritten, and the background-color option remains at its default value, so the final called setting value is:

. The code is as follows:

{
'location': 'left',
'background-color': 'blue'
}

This is a very flexible way to provide a highly configurable plugin without the developer having to define all the available options.

6. Namespace

Correctly naming your plug-in is a very important part of plug-in development. With the right namespace, you can guarantee that your plugin will have a very low chance of being overwritten by other plugins or other code on the same page. Namespaces also make your life as a plugin developer easier because it helps you better keep track of your methods, events, and data.

7. Plug-in methods

In any case, a single plug-in should not have multiple namespaces in the jQuery.fnjQuery.fn object.

. The code is as follows:

(function ($) {
$.fn.tooltip = function (options) {
// this
};
$.fn.tooltipShow = function () {
// is
};
$.fn.tooltipHide = function () {
// bad
};
$.fn.tooltipUpdate = function (content) {
// !!!
};
})(jQuery);

This is discouraged because .fn clutters the .fn namespace. To solve this problem, you should collect all the plugin's methods in the object text and call them by passing the string name of the method to the plugin.

. The code is as follows:

(function ($) {
var methods = {
init: function (options) {
// this
},
show: function () {
// is
},
hide: function () {
// good
},
update: function (content) {
// !!!
}
};
$.fn.tooltip = function (method) {
// 方法調(diào)用
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);
//調(diào)用init方法
$('div').tooltip();
//調(diào)用init方法
$('div').tooltip({
foo: 'bar'
});
// 調(diào)用hide方法
$(‘div').tooltip(‘hide');
//調(diào)用Update方法
$(‘div').tooltip(‘update', ‘This is the new tooltip content!');

This type of plugin architecture allows you to encapsulate all methods in a parent package and call them by passing the string name of the method and the additional parameters required by this method. This type of encapsulation and architecture is standard in the jQuery plug-in community, and it is used by countless plug-ins, including plug-ins and widgets in jQuery UI.

8. Events

A little-known function of the bind method allows binding event namespaces. If your plugin binds an event, a good practice is to namespace this event. This way, when you unbind, you won't interfere with other events of the same type that may already be bound. You can do this by appending the namespace to the event you need to bind via '.'.

. The code is as follows:

(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
$(window).bind('resize.tooltip', methods.reposition);
});
},
destroy: function () {
return this.each(function () {
$(window).unbind('.tooltip');
})
},
reposition: function () {
//...
},
show: function () {
//...
},
hide: function () {
//...
},
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);
$('#fun').tooltip();
//一段時間之后… …
$(‘#fun').tooltip(‘destroy');

在這個例子中，當tooltip通過init方法初始化時，它將reposition方法綁定到resize事件并給reposition非那方法賦予命名空間通過追加.tooltip。 稍后， 當開發(fā)人員需要銷毀tooltip的時候，我們可以同時解除其中reposition方法和resize事件的綁定，通過傳遞reposition的命名空間給插件。 這使我們能夠安全地解除事件的綁定并不會影響到此插件之外的綁定。

九、數(shù)據(jù)

通常在插件開發(fā)的時候，你可能需要記錄或者檢查你的插件是否已經(jīng)被初始化給了一個元素。 使用jQuery的data方法是一個很好的基于元素的記錄變量的途徑。盡管如此，相對于記錄大量的不同名字的分離的data, 使用一個單獨的對象保存所有變量，并通過一個單獨的命名空間讀取這個對象不失為一個更好的方法。

. 代碼如下:

(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $(&#39;<div />&#39;, {
text: $this.attr(&#39;title&#39;)
});
// If the plugin hasn&#39;t been initialized yet
if (!data) {
/*
Do more setup stuff here
*/
$(this).data(&#39;tooltip&#39;, {
target: $this,
tooltip: tooltip
});
}
});
},
destroy: function () {
return this.each(function () {
var $this = $(this),
data = $this.data(&#39;tooltip&#39;);
// Namespacing FTW
$(window).unbind(&#39;.tooltip&#39;);
data.tooltip.remove();
$this.removeData(&#39;tooltip&#39;);
})
},
reposition: function () {
// ...
},
show: function () {
// ...
},
hide: function () {
// ...
},
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 === &#39;object&#39; || !method) {
return methods.init.apply(this, arguments);
} else {
$.error(&#39;Method &#39; + method + &#39; does not exist on jQuery.tooltip&#39;);
}
};
})(jQuery);

將數(shù)據(jù)通過命名空間封裝在一個對象中，可以更容易的從一個集中的位置讀取所有插件的屬性。

十、總結(jié)和最佳做法

編寫jQuery插件允許你做出庫，將最有用的功能集成到可重用的代碼，可以節(jié)省開發(fā)者的時間，使開發(fā)更高效。 開發(fā)jQuery插件時，要牢記：

1.始終包裹在一個封閉的插件：

. 代碼如下:

(function($) {
/* plugin goes here */
})(jQuery);

2.不要冗余包裹this關鍵字在插件的功能范圍內(nèi)

3.除非插件返回特定值，否則總是返回this關鍵字來維持chainability 。

4.傳遞一個可拓展的默認對象參數(shù)而不是大量的參數(shù)給插件。

5.不要在一個插件中多次命名不同方法。

3.始終命名空間的方法，事件和數(shù)據(jù)。

最后加一個自己寫的放大鏡的插件`

(function($){$.fn.Fdj=function(){
$('#smallImg').on('mouseover', function() {
$('#slider').show();
})
$('#smallImg').on('mouseout', function() {
$('#slider').hide();
})
$('#smallImg').on('mousemove', function(e) {
var x = e.clientX - $('#slider').width() / 2;
var y = e.clientY - $('#slider').height() / 2;
if(x <= 0) {
x = 0
}
if(x > $(&#39;#smallImg&#39;).width() - $(&#39;#slider&#39;).width()) {
x = $(&#39;#smallImg&#39;).width() - $(&#39;#slider&#39;).width();
}
if(y <= 0) {
y = 0
}
if(y > $(&#39;#smallImg&#39;).height() - $(&#39;#slider&#39;).height()) {
y = $(&#39;#smallImg&#39;).height() - $(&#39;#slider&#39;).height();
}
$(&#39;#slider&#39;).css({
&#39;left&#39;: x,
&#39;top&#39;: y
})
var X=x/$(&#39;#smallImg&#39;).width()*800
var Y=y/$(&#39;#smallImg&#39;).height()*800
$(&#39;#img&#39;).css({
left:-X,
top:-Y
})
})
}
})(jQuery)

? ?