解决了很长时间困扰的疑惑,建议初学者能够静下心来,认真研究工作中于遇到的新问题,举一反三。凡事最怕用心。
原文转载
jQuery为开发插件的两个方法:
jQuery.fn.extend(object);
jQuery.extend(object);
先看写法和使用方式
/** -------1、jQuery.fn.extend(object);------------- **/
;(function($){
$.fn.extend({
"函数名":function(自定义参数){
//这里写插件代码
}
});
})(jQuery);
或者
;(function($){
$.fn.函数名=function(自定义参数){
//这里写插件代码
}
})(jQuery);
使用方式:$("#id").函数名(参数)
/** -------2、jQuery.extend(object);写法------------- **/
;(function($){
$.extend({
"函数名":function(自定义参数){
//这里写插件代码
}
});
})(jQuery);
或者
;(function($){
$.函数名=function(自定义参数){
//这里写插件代码
}
})(jQuery);
使用方式:$.函数名(参数) 或 jQuery.函数名(参数);
$:是形参,函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名而不会与prototype引起冲突.
1.区别
代码形式上:有没有fn;
含义:
jQuery.fn.extend给jQuery对象添加方法;
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法,可以理解为添加静态方法。
2.代码规范
// 创建一个闭包
;(function($){
})(jQuery);
// 闭包结束
3.参数默认值的位置写法
;(function($){
$.fn.函数名 = function(options) {
var defaults = {
foreground: 'red',
background: 'yellow'
};
// Extend our default options with those provided.
var opts = $.extend(defaults, options);
// Our plugin implementation code goes here.
};
})(jQuery);
或者 省略定义defaults
;(function($){
$.fn.函数名 = function(options) {
var opts = $.extend({
foreground: 'red',
background: 'yellow'
}, options);
// Our plugin implementation code goes here.
};
})(jQuery);
或者 使用上文提到的另一种写法+省略定义defaults(写出来让大家有个印象,方便阅读他人代码)
;(function($){
$.fn.extend({
"函数名":function(options){
options = $.extend({
foreground:'red',
background:'yellow'
},options);
}
});
})(jQuery);
改进:虽然这样可以
eg:
// 创建一个闭包
;(function($){
//plugin definition
$.fn.hilight = function(options) {
var defaults = {
color: 'red',
background: 'yellow'
};
// Extend our default options with those provided.
var opts = $.extend(defaults, options);
// Our plugin implementation code goes here.
var $this = $(this);
$this.css({
background: opts.background,
color: opts.color
})
};
})(jQuery);
//闭包结束
// 使用默认值
$('#link_tilte_a').hilight();
// 改变默认值
$('#link_tilte_a').hilight({"color":"pink"});
单独定义一个变量传入
var dataInit = {"color":"pink","background":"red"};
$('#link_tilte_a').hilight(dataInit);
4.更深入的写法利用函数对象提供可修改的默认设置
// 创建一个闭包
;(function($){
//plugin definition
$.fn.hilight = function(options) {
// Extend our default options with those provided.
var opts = $.extend({},$.fn.hilight.defaults, options );
// Our plugin implementation code goes here.
var $this = $(this);
$this.css({
background: opts.background,
color: opts.color
})
};
$.fn.hilight.defaults = {
color: 'red',
background: 'yellow'
};
})(jQuery);
//闭包结束
$.fn.hilight.defaults.color = "#FFF";
$.fn.hilight.defaults.background = "#000";
$('#link_tilte_a').hilight();
或者
var dataInit = {"color":"pink","background":"red"};
$('#link_tilte_a').hilight(dataInit);
5.适当的暴露一些函数,可以让人更容易扩展你的插件
eg
// 创建一个闭包
;(function($){
// plugin definition
$.fn.hilight = function(options) {
// iterate and reformat each matched element
return this.each(function() {
var $this = $(this);
// ...
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
// define our format function
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
})(jQuery);
//闭包结束
$.fn.hilight.format=function(obj){
return "<h1>"+obj+"</h1>";
}
$('span').hilight();
6.闭包代码块中写内部函数,可以防止他人随意更改,也更利于代码的整洁
// 创建一个闭包
;(function($){
// plugin definition
$.fn.hilight = function(options) {
debug(this);
};
// define our format function
function debug($obj) {
if(window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
}
})(jQuery);
//闭包结束
我们的debug方法不能从外部闭包进入,因此对于我们的实现是私有的。
7.回调函数
;(function($){
jQuery.fn.superGallery = function( options ) {
var defaults = {
// We define an empty anonymous function so that。空方法
// we don't need to check its existence before calling it.
onImageShow : function() {},
textColor: "#000"
// ... 其他的设置等等 ...
};
var settings = $.extend( {}, defaults, options );
return this.each(function() {
// Plugin code would go here...
});
// Later on in the plugin:
nextButton.on( "click", showNextImage );
function showNextImage() {
// Returns reference to the next image node
var image = getNextImage();
// Stuff to show the image here...
// Here's the callback:
settings.onImageShow.call( image );
}
})(jQuery);
我们不是通过传统的方法(添加括号)来启动回调,而是在图像的上下文中调用它,这将是对图像节点的引用。这意味着您可以通过回调中的这个关键字访问实际的图像节点
调用
$( "ul.imgs li" ).superGallery({
onImageShow: function() {
$( this ).after( "<span>" + $( this ).attr( "longdesc" ) + "</span>" );
},
// ... 其他的设置等等 ...
});