1. 程式人生 > >為了能讀懂大神寫的程式碼,研究一下jQuery外掛的寫法

為了能讀懂大神寫的程式碼,研究一下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>" );
		},
		// ... 其他的設定等等 ...
	});