如何寫一個jquery插件

      本文總結整理一下如何寫一個jquery插件？雖然現今各種mvvm框架異常火爆，但是jquery這個陪伴我們成長，給我們帶來很多幫助的優秀的庫不應該被我們拋棄，寫此文章，作為對以往欠下的筆記的補充，以及對jquery的重溫。

       寫jquery插件有三種方法：

       1.使用$.extend()來拓展jquery;

       2.使用$.fn來給jquery添加新的方法；

       3.使用$.widget()應用jquery UI的部件工廠方式創建。

        方法一：      

$.extend({
        'sayHello':function(msg){
             console.log(msg);
        },
        $(function(){
          $.sayHello('Hello jQuery!!!');//Hello jQuery!!!
        });
});

　　  方法二：

        

 //方法二(基本)：jQuery.fn = jQuery.prototype = {
	 //}
     $.fn.myplugin = function(){
         this.css('background','red');
     }

　　

 //方法二(傳參)：
     $.fn.myPlugin  = function(opt){
         var defaults = {
         	 'bgc':'red',
         	 'fontSize':'12px'
         };
         var settings = $.extend({},defaults,opt);
         debugger;
         this.css({
         	 'background':settings.bgc,
         	 'fontSize':settings.fontSize
         });
     }

　　

//繼續升級方法二，改造成面向對象的形式來定義插件，提升插件的可讀性可維護性，
     ;(function($,window,document,undefined){
		var Beautifier = function(ele,opts){
		 this.$element = $(ele);
		 this.defaults = {
		     'bgc':'red',
		 	 'fontSize':'12px'
		 }
		 this.settings = $.extend({},this.defaults,opts);
		};
		Beautifier.prototype = {
		 'construct':Beautifier,
		  'bueatify':function(){
		  	  return this.$element.css({
		  	  	   'background':this.settings.bgc,
		 	        'fontSize':this.settings.fontSize
		  	  })
		  }
		}
		$.fn.myplugin2 = function(opts){
			var bt = new Beautifier(this,opts);
			return bt.bueatify();
		}
     })(jQuery,window,document);

　　

 //調用
     $(function(){
        $("a").myplugin2({
        	'bgc':'red',
        	'fontSize':'50px'
        });
     });

　　執行結果：

     

 

     方法三：這個方法用的較少，暫時不做研究講解。