一、背景知识

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

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

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

二、编写插件

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

(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 对象

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()方法经常被用于设置插件方法的一系列默认参数：

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

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

编写设置和获取颜色的插件
待实现功能：

设置匹配元素的颜色
获取匹配的第一个元素的颜色

(1) 代码模板

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

Shiqi's Blog

jQuery插件的编写和使用