jQuery插件开发入门简明教程概述

2017年03月22日

阅读:900
jQuery插件开发包括两种:
\r\n
1.给jQuery添加静态方法
\r\n2.给jQuery的原型添加方法
\r\n
给jQuery添加静态方法
\r\n

1.直接添加新的全局函数

\r\n
jQuery.foo = function() {\r\n	alert(''This is a test. This is only a test.'');\r\n};
\r\n

2.使用jQuery.extend(object)

\r\n
jQuery.extend({\r\n	foo: function() {\r\n		alert(''This is a test. This is only a test.'');\r\n	},\r\n	bar: function(param) {\r\n		alert(''This function takes a parameter, which is "'' + param +''".'');\r\n	}\r\n});
\r\n

对于一些全局配置的插件,可以在插件中进行调用,这样直接引用插件javascript即可,不用再调用

\r\n
给jQuery的原型添加方法
\r\n

这是插件开发中最常用的一种方法:最简单的形式

\r\n
(function($){       \r\n	$.fn.pluginName = function() {     \r\n		// code    \r\n	};     \r\n})(jQuery);  
\r\n

上下文:在插件函数的立即作用域中,关键字this指向调用插件的jQuery对象,不需要再用$包裹

\r\n
(function($){\r\n	$.fn.pluginName = function() {      \r\n		// 没有必要再写$(this),因为"this"就是jQuery对象             \r\n	};          \r\n})(jQuery);
\r\n

保持链式调用:为了保持链式调用,插件请return this。

\r\n
设置默认参数并将之暴露出来
\r\n
(function($){\r\n	$.fn.pluginName = function(options) {    \r\n		var opts = $.extend({}, $.fn.hilight.defaults, options);      \r\n	};  \r\n\r\n	$.fn.pluginName.defaults = {    \r\n		foo: ''bar''   \r\n	};                      \r\n})(jQuery);
\r\n

这样用户既可以用过传参也可以通过修改$.fn.pluginName.defaults来修改默认参数

\r\n
暴露一些公有函数
\r\n
(function($){\r\n	$.fn.pluginName = function(options) {    \r\n		var opts = $.extend({}, $.fn.pluginName.defaults, options);      \r\n	};  \r\n\r\n	$.fn.pluginName.defaults = {    \r\n		foo: ''bar''   \r\n	};  \r\n\r\n	$.fn.pluginName.foo = function() {    \r\n		return ''bar'';    \r\n	};                  \r\n})(jQuery);
\r\n

这样用户既可以调用公有函数,也可以去修改它。

\r\n
更安全的闭包写法
\r\n
;(function($,window,document,undefined){\r\n    $.fn.pluginName = function() {     \r\n         // code    \r\n    };\r\n})(jQuery,window,document);
\r\n

加上“;”是为了防止插件之前代码没有“;”引发的错误,加上window和document是这样window等系统变量在插件内部就有了一个局部的引用,可以提高访问速度,同时内部也可以压缩这些变量,undefined是为了防止他人误修改undefined引发插件bug。

\r\n
更多
\r\n
(function () {   \r\n	var Plugin,\r\n		privateMethod;  //插件的私有方法\r\n     \r\n	/**\r\n	 * 这里是一个自运行的单例模式。\r\n	 * \r\n	 */\r\n	Plugin = (function () {\r\n \r\n		/**\r\n		 * 插件实例化部分,初始化时调用的代码可以放这里\r\n		 */\r\n		function Plugin(element, options) {\r\n			//将插件的默认参数及用户定义的参数合并到一个新的obj里\r\n			this.settings = $.extend({}, $.fn.plugin.defaults, options);\r\n			//将dom jquery对象赋值给插件,方便后续调用\r\n			this.$element = $(element);\r\n		}\r\n \r\n		/**\r\n		 * 插件的公共方法,相当于接口函数,用于给外部调用\r\n		 */\r\n		Plugin.prototype.doSomething = function () {\r\n			/**\r\n			 * 方法内容\r\n			 */\r\n		};\r\n		return Plugin;\r\n	})();\r\n \r\n	/**\r\n	 * 插件的私有方法\r\n	 */\r\n	privateMethod = function () {\r\n     \r\n	};\r\n \r\n	/**\r\n	 * 这里是关键\r\n	 * 定义一个插件 plugin\r\n	 */\r\n	$.fn.plugin = function (options) {\r\n		var instance;\r\n		instance = this.data(''plugin'');\r\n		/**\r\n		 *判断插件是否已经实例化过,如果已经实例化了则直接返回该实例化对象\r\n		 */\r\n		if (!instance) {\r\n			return this.each(function () {\r\n				//将实例化后的插件缓存在dom结构里(内存里)\r\n				return $(this).data(''plugin'', new Plugin(this, options));\r\n			});\r\n		}\r\n		if (options === true) return instance;\r\n		/**\r\n		 * 优雅处: 如果插件的参数是一个字符串,则 调用 插件的 字符串方法。\r\n		 * 如 $(''#id'').plugin(''doSomething'') 则实际调用的是 $(''#id).plugin.doSomething();\r\n		 * doSomething是刚才定义的接口。\r\n		 * 这种方法 在 juqery ui 的插件里 很常见。\r\n		 */\r\n		if ($.type(options) === ''string'') instance[options]();\r\n		return this;\r\n	};\r\n     \r\n	/**\r\n	 * 插件的默认值\r\n	 */\r\n	$.fn.plugin.defaults = {\r\n		property1: ''value'',\r\n		property2: ''value''\r\n	};\r\n \r\n	/**\r\n	 * 优雅处: 通过data-xxx 的方式 实例化插件。\r\n	 * 这样的话 在页面上就不需要显示调用了。\r\n	 */\r\n	$(function () {\r\n		return new Plugin($(''[data-plugin]''));\r\n	});   \r\n}).call(this);
\r\n\r\n

别逗了好么

努力每一天,奋斗为明天。

文章 981 作品 25,341

热门作品

文章推荐

猜你喜欢

榜上有名

广告