jQuery基础之插件（六）

Created at 2016-08-07 Updated at 2017-01-06 Category Front-End Tag jQuery

• 什么是插件
  插件(Plugin)也称为jQuery的扩展。以`jQuery核心代码为基础编写的符合一定规范的应用程序。通过js文件的方式引用。

• 插件分为哪几类

  • UI类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类等等

• 引入插件的步骤

  • a.引入jquery.js文件，而且在所以插件之前引入
  • b.引入插件
  • c.引入插件相关文件，比如皮肤、中文包

• 使用插件（验证demo）

• 如何自定义插件：

  • 插件形式分为3类：

    • a. 封装对象方法插件
    • b. 封装全局函数插件
    • c. 选择器插件(类似于.find())

  • 自定义插件的规范（解决各种插件的冲突和错误，增加成功率）

    • 命名：jquery.插件名.js
    • 所有的新方法附加在jquery.fn对象上面，所有新功能附加在jquery上
    • 所有的方法或插件必须用分号结尾，避免出问题
    • 插件必须返回jQuery对象，便于链式连缀
    • 避免插件内部使用$，如果要使用，请传递jQuery($并不是总等于jQuery，另外其他js框架也可能使用$)
    • 插件中的this应该指向jQuery对象
    • 使用this.each()迭代元素

• 自定义插件案例

  • 为了方便用户创建插件，jQuery提供了 jQuery.extend() 和 jQuery.fn.extend()
  • jQuery.extend()：创建工具函数或者是选择器

  • jQuery.fn.extend()：创建jQuery对象命令 （fn相当于prototype的别名）

  • 自定义jQuery函数：

1
2
3
4
5
6
7

(function($){
		$.extend({
			test: function(){
				alert("hello plugin");
			}
		})
	})(jQuery);

• 自定义jQuery命令：

  形式1：

1
2
3
4
5
6
7

(function($){
			$.fn.extend({
				say : function(){
					alert("hello plugin");
				}
			})
		})(jQuery);

形式2：

1
2
3
4
5
6

(function($){
			$.fn.say = function(){
					alert("hello plugin");
			};
			
		})(jQuery);