jQuery插件构成基础知识

通常，咱们对Jquery的扩展有两种形式

1. 注册在$.fn命名空间的插件扩展
2. 注册在$命名空间的工具函数扩展

插件扩展通常是依赖Dom节点的，也就是咱们常见的插件启动每每是这种形式的：

$('#target').plugin(options);

工具是不依赖Dom节点的，如 $.extend()、 $.parseJSON() 方法。

一个典型的Jquery插件通常会包含以下几部分:

• Jquery库_
• 插件的jQuery实现文件，主要是注册在$.fn命名空间中的插件核心代码_
• 静态资源文件：关联的CSS样式文件、图片等_
• 做为插件容器的目标DOM节点_
• 若干行插件的启动代码_

在Jquery插件核心实现的外层设计上，每每遵循如下设计：

首先会在核心实现代码最外部套上

(function($){
	//implemention code for plugin ...
})(Jquery);

即给闭包传入Jquery对象来初始化$参数，从而避免在插件的代码实现中用到的$变量与其余框架中的$冲突， 同时也将插件实现时定义的变量与外部上下文环境解耦出来，避免变量污染。

接着开始在fn命名空间中注册插件函数

(function($){
	$.fn.插件名字 = function(customizeOptions){
		//coding ...
	}
})(Jquery);

右边的闭包实现每每能够传入一个customize option， 其会在闭包内部经过extend方法与将用户自定义配置与默认选项合并

(function($){
	$.fn.插件名字 = function(customizeOption){
		var defaultOption = {
			a: xxx,
			b: xxx,
			...
		};

		var option = $.extend({}, defaultOption, customizeOption);
	}
})(Jquery);

接着你能够经过this.each来迭代每一个符合css选择器规则的目标Dom节点， 经过$(this)来访问插件的单个特定的目标Dom节点所对应的Jquery对象。

(function($){
	$.fn.插件名字 = function(customizeOptions){
		var defaultOption = {
			a: xxx,
			b: xxx,
			...
		};

		var option = $.extend({}, defaultOption, customizeOption);

		return this.each(function(){
			$this = $(this);
			//implemention coding...
		});
	}
})(Jquery);

以上即是Jquery插件的通常外层设计，最后即是须要发挥你的想象来操做$this对象实现各类效果。

最后拓展一下，在jQuery特效插件方面，通常站点有三种组织形式

1. 经过iframe内联一个特定页面来显示特效，而这个特定页面独占式的仅仅是用于实现特效的
2. 经过内联一个flash object对象来显示特效
3. 手动在当前页面启动的jQuery插件特效

前两种形式咱们直接找出相关引用的路径就能直接抠出效果插件了。 第三种形式咱们能够尝试找到DOM的启动节点，而后全文搜索节点ID每每就能找到插件函数名，咱们能够上github上搜索一下是否有相应的现成的项目，找不到的话只能按插件的构成一步步去抠出来。