如何写一个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'
        });
     });

　　执行结果：

     

     方法三：这个方法用的较少，暂时不做研究讲解。