为了能读懂大神写的代码,研究一下jQuery插件的写法

解决了很长时间困扰的疑惑,建议初学者能够静下心来,认真研究工作中于遇到的新问题,举一反三。凡事最怕用心。
原文转载
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>" );
		},
		// ... 其他的设置等等 ...
	});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值