jquery 插件级别开发

1 插件对象级别开发

//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
    this.$element = ele
    //为每个对象赋予初始值
	this.settings= ele.data(key);
    if(typeof  this.settings == "undefined"){
		this.defaults = {
	        'color': 'red',
	        'fontSize': '12px',
	        'textDecoration':'none'
	    },
	        //flag true 表示深拷贝 将val-1,val-2合并
   			//$.extend(flag , val-1,val-2)
	    this.settings= $.extend({}, this.defaults, opt)
	}else{
	  this.settings= $.extend({}, this.settings, opt)
	}
    ele.data(key，settings);

   
    
}
//定义Beautifier的方法
Beautifier.prototype = {
    init: function() {
        return this.$element.each(function(){
        	
        	//这里使用， 当然 使用$.data()方法是为 标签添加数据，进行保存
			var a = this.$element.data("key");
        	//获取值
        });
    }
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
    //创建Beautifier的实体
    var beautifier = new Beautifier(this, options);
    //调用其方法
    return beautifier.beautify();
}

//用法
// opt 表示自己定义的变量， 可以在插件内部使用，也可以不传 
$("#supper").myPlugin(opt).init();
$("#supper").myPlugin({}).init();

2.函数式开发

(function($) {

   // 在我们插件容器内，创造一个公共变量来构建一个私有方法
   var privateFunction = function() {
       // code here
   }

   // 通过字面量创造一个对象，存储我们需要的共有方法
   var methods = {
   	   val: function(){
   	   	
   	   },
       // 在字面量对象中定义每个单独的方法
       init: function(list,opt) {

           // 为了更好的灵活性，对来自主函数，并进入每个方法中的选择器其中的每个单独的元素都执行代码
           return this.each(function() {
               // 为每个独立的元素创建一个jQuery对象
               var $this = $(this);
				var settings = $this.data("key");
				if(typeof settings == "undefined"){
   					var default ={
   							name: "aa",
   							myList: list
   						}
   					settings = $.extend(true,default,opt);			
   			}else{
   					settings = $.extend(true,settings,opt);			
   			}
               	$this.data("key",settings);
   				//下面使用时 直接用settings属性初始化， 再sel方法时 是另一个对象， 需要使用this.data("key")  获取初始化保存的值， 后续操作，都放到这个data里面
           });
       },
       destroy: function() {
           // 对选择器每个元素都执行方法
           return this.each(function() {
              this.removeData("key")
           });
       }
   };

   $.fn.pluginName = function() {
       // 获取我们的方法，遗憾的是，如果我们用function(method){}来实现，这样会毁掉一切的
       var method = arguments[0];

       // 检验方法是否存在
       if(methods[method]) {

           // 如果方法存在，存储起来以便使用
           // 注意：我这样做是为了等下更方便地使用each（）
           method = methods[method];

       // 如果方法不存在，检验对象是否为一个对象（JSON对象）或者method方法没有被传入
       } else if( typeof(method) == 'object' || !method ) {

           // 如果我们传入的是一个对象参数，或者根本没有参数，init方法会被调用
           method = methods.init;
       } else {

           // 如果方法不存在或者参数没传入，则报出错误。需要调用的方法没有被正确调用
           $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
           return this;
       }

       // 调用我们选中的方法
       // 再一次注意我们是如何将each（）从这里转移到每个单独的方法上的
       return method.call(this);

   }

})(jQuery);







//用法：
 $("#supper").pluginName(list,opt)
  $("#supper").pluginName({},{})