总结jQuery插件开发中的一些要点

基础 1、jQuery插件开发主要使用如下两个方法: 1.1、添加静态方法

为扩展jQuery本身,为类添加新的方法,可以理解文添加静态方法

1.2、添加成员方法

给jQuery对象添加方法,对jQuery.prototype进行扩展,为jQuery类添加成员方法

$("#username").getInputText();

2、一个通用的框架:

以下是一个通用的框架:

属性和参数
var options = $.extend(defaults,options); 

this.each(function(){ 
  //<a href="https://www.f2er.com/tag/chajian/" target="_blank" class="keywords">插件</a>的实现<a href="https://www.f2er.com/tag/daima/" target="_blank" class="keywords">代码</a>

}); 

};
})(jQuery);

关于

就是通过合并defaults和options来扩展defaults,实现插件默认参数的功能

实践

1、声明插件名称

添加一个函数到jQuery.fn(jQuery.prototype)对象,该函数名称就是你的插件名称

// Do your awesome plugin stuff here

};

在命名不与jQuery其他函数冲突的情况,可以使用闭包的方式使用$符号:

// Do your awesome plugin stuff here

};
})( jQuery );

2、插件中的上下文:

jQuery接收一个回调,该回调本身就指向了dom,直接使用this就相当于我们平时的$(this)的情况:

$.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();

下面是一个简单的jQuery插件,实现获取所有div的最大高度:

$.fn.maxHeight = function() {

var max = 0;

this.each(function() {
max = Math.max( max,$(this).height() );
});

return max;
};
})( jQuery );
var tallest = $('div').maxHeight(); // Returns the height of the tallest div

3、维护链接性:

前面的示例返回一个整数值最高的div,但是通常的意图仅在某种程度上是仅修改插件的元素集合,并将它们传递到下一个链中的方法。这样的jQuery的设计优雅的地方。所以保持链接性放到一个插件,您必须确保您的插件返回这个关键字。

$.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关键字的范围,它维护链接性,jQuery可以继续利用jQuery方法,如. css。所以,如果你的插件不返回一个内在价值,你应该总是返回this。

4、参数的传递,Defaults和Options:

$.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'
});

通过$.extend合并默认参数和调用者传入的参数。

5、命名空间:

正确的命名空间在插件开发中是一个非常重要的部分。正确的命名空间,可以确保你的插件将有一个很低的几率在同一个页面上被他插件代码覆盖。

在任何情况下都不应该在一个插件的jQuery.fn对象中声称多个名称空间。

$.fn.tooltip = function( options ) {
// THIS
};
$.fn.tooltipShow = function( ) {
// IS
};
$.fn.tooltipHide = function( ) {
// BAD
};
$.fn.tooltipUpdate = function( content ) {
// !!!
};

})( jQuery );

你应该收集所有的方法到一个对象化字面,并且通过方法的字面值进行调用

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插件和小部件。

6、Events:

Bind方法允许通过命名空间的方式绑定事件,如果你的插件绑定了事件,可以通过命名空间的方式,在解除绑定事件时,你也可以这样做,来防止影响到其他的事件。可以通过“.” 的方式来设置绑定事件的命名空间。

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,arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}

};

})( jQuery );
$('#fun').tooltip();
// Some time later...
$('#fun').tooltip('destroy');

7、Data:

关于data方法可以参考官方的文档:http://docs.jquery.com/Data,既是在页面的元素中绑定存储数据。

这里通过编写插件,实现在页面中的每个元素都绑定一些当前的状态或者内容

var methods = {
init : function( options ) {

return this.each(function(){

 var $this = $(this),data = $this.data('tooltip'),tooltip = $('<div />',{
    text : $this.attr('title')
   });

 // If the plugin hasn't been initialized yet
 if ( ! data ) {

  /*

Do more setup stuff here
*/

  $(this).data('tooltip',{
    target : $this,tooltip : tooltip
  });

 }
});

},destroy : function( ) {

return this.each(function(){

 var $this = $(this),data = $this.data('tooltip');

 // Namespacing FTW
 $(window).unbind('.tooltip');
 data.tooltip.remove();
 $this.removeData('tooltip');

})

},reposition : function( ) { // ... },show : function( ) { // ... },hide : function( ) { // ... },update : function( content ) { // ...}
};

$.fn.tooltip = function( method ) {

if ( methods[method] ) {
return methods[method].apply( this,arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}

};

})( jQuery );

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...