jQuery插件/创作

当然你已经成为舒适的使用jQuery和想学习如何编写自己的插件。太好了！你在正确的位置。扩展jQuery的插件和方法是非常强大的，通过抽象出来的最聪明的功能插件可以为您和您的同事节省大量的开发时间。这篇文章将概述当你开始写你的插件时的基础知识，最佳实践和常见的陷阱。
1.入门
 为了写一个jQuery插件，jQuery.fn对象的属性的名称是你的插件的名称，添加一个新的功能特性：

 

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

   但是等等，我所知道和喜欢的最棒的美元符（$）在哪里呢？它是仍然存在，但是要确保你的插件没有与其他的库产生冲突，如何可以使用美元符号？可以通过jQuery的一个IIFE（立即调用函数的表达），映射它的美元符号，从而在其执行范围​​不会覆盖另一个库。这是一个最佳的实现方式。

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

哈，那是更好的。现在，在那个封闭中，我们可以使用尽可能多的美元符号代替jQuery。

2.上下文
现在，我们有我们的外壳，我们可以开始写我们的实际的插件代码。但是，在我们这样做之前，我想说的一个有关上下文的
词this。在立即调用函数的表达式的范围的插件功能，this关键字指的是插件反射的jQuery对象。这是一个普遍的事实由于在许多情况下，jQuery会接受一个回调，this关键字指的是原生的DOM元素。这往往会导致开发者不必要再次包装this关键字在jQuery功能。

(function( $ ){
$.fn.myPlugin = function() {
// there's no need to do $(this) because
// "this" is already a jquery object
// $(this) would be the same as $($('#element')) 
this.fadeIn('normal', function(){
// the this keyword is a DOM element
});
};
})( jQuery );
$('#element').myPlugin();//调用插件方法

3.基础
现在，我们了解了jQuery插件的上下文，让我们写一个插件，实际做一些事情。3.基础
现在，我们了解了jQuery插件的上下文，让我们写一个插件，实际做一些事情。3.基础
现在，我们了解了jQuery插件的上下文，让我们写一个插件，实际做一些事情。

3.基础
现在，我们了解了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的高度。

 

4.保持链的特性
在前面的例子中返回一个最高的页面上的div整型值，但很多时候，一个插件的目的是以某种方式简单地修改该集合的元素，然后把修改后的元素传递给链中的下一个方法。这是jQuery的设计之美，是jQuery如此受欢迎的原因之一。因此链特性必须保持在一个插件，你必须确保你的插件返回元素。

 

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

 

因为插件返回其立即表达式范围元素，它保持链特性。jQuery集合可以继续通过jQuery的方法，如CSS操纵。所以如果你的插件不返回一个内部值，你应该总是返回this关键字在插件功能的立即表达式范围。同时，你可能会认为，你通过你的插件调用参数到插件功能的立即范围。所以在前面的例子中，字符串“宽度”成为插件函数类型参数。

5.缺省值和选项
对于更复杂的和可定制的插件，提供许多选项，它是一种最佳实践有默认设置，这个选项可以用（$.extend)扩展当扩展插件被调用。所以不要用大量的参数调用一个插件。你可以称之为一元，你可以想成可以覆盖设置的文字对象。这里的你如何做。

(function( $ ){
$.fn.tooltip = function( options ) { 
// Create some defaults, extending them with any options that were provided
var settings = $.extend( {
'location' : 'top',
'background-color' : 'blue'
}, options);
return this.each(function() { 
// Tooltip plugin code here
});
};
})( jQuery );
$('div').tooltip({
'location' : 'left'
});

 

在这个例子中，调用插件通过给一些选项值，这个缺省位置的设置将被覆盖为“left”，而这个缺省的背景色将保持原来的缺省值“blue”，因此最终的设置对象是这个：

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

 

这是一个不需要开发人员定义所有可用的选项的提供高度可配置的插件，这种方式非常好。

6.命名空间
正确的命名空间对于你的插件是插件开发的一个重要组成部分。正确的命名空间确保你的插件将有一个非常低的机会被同在一个页面的其他插件或代码覆盖。命名空间也可以使你作为一个插件开发者的生活更容易，因为它可以帮助你更好的管理自己的方法，事件和数据。

7.插件方法
在任何情况下，一个插件对应一个jQuery.fn object是最好的。

(function( $ ){
$.fn.tooltip = function( options ) { 
// THIS
};
$.fn.tooltipShow = function( ) {
// IS
};
$.fn.tooltipHide = function( ) { 
// BAD
};
$.fn.tooltipUpdate = function( content ) { 
// !!! 
};
})( jQuery );
//上述的这个是不好的，因为它混淆了$.fn的命名空间，为了解决这个问题，你需要搜集到你的所有对象中的插件方法名，调用它们通过传递方法的字符串名给这个插件。

(function( $ ){
var methods = {
init : function( options ) { 
// THIS 
},
show : function( ) {
// IS
},
hide : function( ) { 
// GOOD
},
update : function( content ) { 
// !!! 
}
};
$.fn.tooltip = function( method ) {
// Method calling logic
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 );

// calls the init method
$('div').tooltip(); 
// calls the init method
$('div').tooltip({
foo : 'bar'
});
// calls the hide method
$('div').tooltip('hide'); 
// calls the update method
$('div').tooltip('update', 'This is the new tooltip content!'); 

这种类型的插件架构允许你将你所有的方法在插件的父集合关闭，然后调用他们通过方法的字符串名字，然后你可以通过为该方法添加需要额外的参数。这种方法的封装和体系结构在jQuery插件社区标准用无数的插件，包括JQueryUI的插件。这种类型的插件架构允许你将你所有的方法在插件的父集合关闭，然后调用他们通过方法的字符串名字，然后你可以通过为该方法添加需要额外的参数。这种方法的封装和体系结构在jQuery插件社区标准用无数的插件，包括JQueryUI的插件。这种类型的插件架构允许你将你所有的方法在插件的父集合关闭，然后调用他们通过方法的字符串名字，然后你可以通过为该方法添加需要额外的参数。这种方法的封装和体系结构在jQuery插件社区标准用无数的插件，包括JQueryUI的插件。