jQuery插件的编写和使用

jQuery插件的编写和使用

  • 2018年6月20日

一、背景知识

编写插件的目的是给已有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提供开发效率。

jQuery 的插件一共分为 3 种类型

  1. 封装对象方法的插件(最常见的一种插件)
  2. 封装全局函数的插件
  3. 选择器插件

二、编写插件

1. 编写插件应在闭包中进行

1
2
3
4
(function($) {
//此处将$作为匿名函数的形参
/* 这里放置插件的代码 */
})(jQuery); //这里将jQuery作为实参传递给匿名函数

2. jQuery 插件的机制

(1) jQuery提供的两个方法

jQuery 提供两个用于扩展 jQuery 功能的方法,jQuery.fn.extend()方法和jQuery.extend()方法。

  • jQuery.fn.extend() 用于拓展 jQuery 第一类插件,即封装对象方法的插件
  • jQuery.extend() 用于拓展 jQuery 后两类插件,即封装全局函数的插件和选择器插件。

这两个方法都接受一个参数,类型为Object,Object对象的"名/值对"分别代表"函数或方法名/函数主体"。

(2) jQuery.extend()方法

jQuery.extend()方法除了可以用于拓展 jQuery 对象之外,还有一个很强大的功能,就是用于拓展已有的 Object 对象。

1
jQuery.extend(target, obj1, obj2, ..., objn)

合并 settings 对象和 options 对象,修改并返回 settings 对象

1
2
3
4
var settings  = { validate: false, limit: 5 , name: 'foo' }
var options = { validate: true, name: 'bar' }
var newOptions = jQuery.extend(settings, options)
// 结果: newOptions = { validate: true, limit: 5, name: 'bar' }

因此,jQuery.extend()方法经常被用于设置插件方法的一系列默认参数:

1
2
3
4
5
6
7
8
9
function foo(options) {
options = jQuery.extend({
name: 'bar',
length: 5,
dataType: 'xml' /* 默认参数 */
}, options) /* options为传递的传递的参数 */
}
// 用户调用 foo()方法的时候,在传递的参数options对象中设置了相应的值
// 那么就使用设置的值,否则使用默认值

3. 编写封装对象方法的插件

  • 编写设置和获取颜色的插件
  • 待实现功能:
  1. 设置匹配元素的颜色
  2. 获取匹配的第一个元素的颜色

(1) 代码模板

1
2
3
4
5
6
7
8
9
(function($){
$.fn.extend({
color(value) {
// 这里编写插件代码
}
})
})(jQuery)
// 这里给这个方法提供一个参数value, 如果调用方法的时候传递了value这个参数, 那么就是用这个
// 值来设置字体颜色; 否则就是获取匹配元素字体颜色的值