jquery插件开发总结

两种定义方式

类级别：就是给jquery本身加方法

对象级别：就是给jquery对象加方法

类级别

jQuery.myAlert = function() {         

        alert('Hello World');  

};

调用: $.myAlert();

对象级别

又有两种定义形式

注：下面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是, 我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.

形式1：

(function($){           

       $.fn.extend({               

               pluginName:function(opt,callback){                   

                      //插件实现代码             

               }         

        })      

})(jQuery);

形式2：

(function($) {           

       $.fn.pluginName = function() {               

                 // 插件实现代码         

       };      

})(jQuery);

调用： $("#myDiv").pluginName();

 

使用方式

$(DOM).pluginName(options);   //传参数，进行初始化

$(DOM).pluginName(methodName,params);  //调用方法，第一种（推荐）

$(DOM).pluginName.methodName(params);  //调用方法，第二种

 

标准结构

(function($){
	//定义内部全局变量
	var val1;
	//定义内部
	function myMethod() {}

	//定义jquery插件
	$.fn.pluginName = function (options,param) {
		if(typeof options == "string") {
			//如果传来的参数是字符的话，就调用方法
			return $.fn.pluginName.methods[options](this,param);
		}

		//不是调用方法的话，就是传参来初始化的，下面就进行初始化
		options = options || {};  //如果没有传参数来的话，默认给空对象

		//这里为什么要用循环，因为有可能是要对多个jquery对象进行初始化
		return this.each(function(){
			//处理出初始参数，$.fn.pluginName.defaults是下面定义的插件的默认参数，options是传来的，可以覆盖默认的
			options = $.extend({},$.fn.pluginName.defaults,options);

			//把参数放在当前jquery对象的缓存里
			$.data(this, 'pluginName',options);

			//调用初始化方法，该init方法是自己写的方法，根据需求实现初始化
			init(this);
		});
	};

	//定义插件的默认参数
	$.fn.pluginName.defaults = {
		width:"99%",
		editable:true,
		onAddTask:function(taskText,taskDate){}, //除了参数，这里还可以定义事件，在插件的实现过程中，在特定的位置调用该方法，则可发生事件
		onEditTask:function(taskText,taskDate){}
	};

	//定义对外方法
	$.fn.pluginName.methods = {
		//根据方法引用方式，可以都定义这两个参数
		methodName:function(jq,param) {
			return jq.each(function(){
				
			});
		}
	};
})(jQuery);