jQuery插件編寫的原理

想寫一個jQuery的小插件，可是沒接觸過，上網看別人的也看不懂，現在也算看出一點小小的原理了

1.類級別插件，直接jQuery.xxx()或$.xxx()調用，類似$.ajax();

//全局函數
		$.foo=function (){console.info('foo')}
		$.foo();
		
		//jQuery.extend()
		$.extend({
			test1:function(){
				console.info("test1");
			},
			test2:function(data){
				console.info("test2"+data);
			}
		});
		$.test1();
		$.test2("ang");
		
		//命名空間
		$.mySpace={
			test1:function(){
				console.info("mySpace1");
			},
			test2:function(data){
				console.info("mySpace2"+data);
			}
		}
		$.mySpace.test1();
		$.mySpace.test2("ang");

結果：

2.對象級別

	<script type="text/javascript">
	
		(function($){
			$.fn.extend({
				color:function(options){
					options=$.extend({//默認參數
						color:"red",
						width:"100px",
						height:"30px"
					},options);//傳遞的參數，如果有傳遞的參數，默認裏面的相同屬性會被傳遞的參數給覆蓋
					$(this).css("color",options.color);
					$(this).height(options.height);
					$(this).width(options.width);
				}
			});
		})(jQuery);
		
		$(function(){
			$("#test1").color();
			$("#test2").color({
				color:"#EEAD0E",
				height:"20px"
			});
			$("#test3").color({
				color:"#blue",
				width:"80px"
			});
		});
	</script>

結果：

分解介紹：

1.對象級別的插件格式，基本都是這樣的格式

(function($){
//需要實現的代碼
})(jQuery);

2.options是要傳遞的參數，是個數組，裏面包含了要控制的屬性

options=$.extend({

options={

}

},options);

這樣用$.extend();後面的options如果有跟前面默認的options的相同的屬性，就會覆蓋掉默認的屬性。這樣，在調用函數的時候可以傳遞參數，實現想要達到的目的。

比如:

var opt1={name:'aaa',age:'25',sex:'男'}；
var opt2={name:'bbb',age'30'};
$.extend(opt1,opt2);
結果是：{name:'bbb',age:'30',sex:'男'}

3.

$(this).css("color",options.color);
$(this).height(options.height);
$(this).width(options.width);

這裏的this是調用方法的對象，裏面的屬性，要用options.xxx的方式調用