本文实例报告了jQuery插件编写步骤。分享给人人供人人参考，详细以下：

现在做web开辟，jquery 几乎是必不可少的，就连vs神器在2010版本最先将Jquery 及ui 内置web项目里了。至于运用jquery优点这里就不再赘述了，用过的都晓得。本日我们来议论下jquery的插件机制，jquery有着不计其数的第 三方插件，偶然我们写好了一个自力的功用，也想将其与jquery结合起来，能够用jquery链式挪用，这就要扩大jquery，写成插件情势了，以下 面就是一个简朴扩大Jquery对象的demo：

//sample:扩大jquery对象的要领，bold()用于加粗字体。
(function ($) {
  $.fn.extend({
    "bold": function () {
      ///<summary>
      /// 加粗字体
      ///</summary>
      return this.css({ fontWeight: "bold" });
    }
  });
})(jQuery);

挪用体式格局：$("p").bold();

这是一个异常简朴的扩大。接下来我们一步步来剖析上面的代码。

一、jquery的插件机制

为了轻易用户建立插件，jquery供应了jQuery.extend()和jQuery.fn.extend()要领。

1.jQuery.extend() 要领有一个重载。

jQuery.extend(object) ,一个参数的用于扩大jQuery类自身，也就是用来在jQuery类/定名空间上增添新函数，或许叫静态要领，比方jQuery内置的 ajax要领都是用jQuery.ajax()如许挪用的，有点像 “类名.要领名” 静态要领的挪用体式格局。下面我们也来写个jQuery.extend(object)的例子：

//扩大jQuery对象自身
jQuery.extend({
  "minValue": function (a, b) {
    ///<summary>
    /// 比较两个值，返回最小值
    ///</summary>
    return a < b ? a : b;
  },
  "maxValue": function (a, b) {
    ///<summary>
    /// 比较两个值，返回最大值
    ///</summary>
    return a > b ? a : b;
  }
});
//挪用
var i = 100; j = 101;
var min_v = $.minValue(i, j); // min_v 即是 100
var max_v = $.maxValue(i, j); // max_v 即是 101

重载版本：

jQuery.extend([deep], target, object1, [objectN])

用一个或多个其他对象来扩大一个对象，返回被扩大的对象。
假如不指定target，则给jQuery定名空间自身举行扩大。这有助于插件作者为jQuery增添新要领。
假如第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。不然的话，副本会与原对象同享构造。
未定义的属性将不会被复制，然则从对象的原型继续的属性将会被复制。

参数：

deep:       可选。假如设为true，则递归兼并。
target:     待修正对象。
object1:   待兼并到第一个对象的对象。
objectN:   可选。待兼并到第一个对象的对象。

示例1：

兼并 settings 和 options，修正并返回 settings。

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

结果：

settings == { validate: true, limit: 5, name: "bar" }

示例2：

兼并 defaults 和 options, 不修正 defaults。

var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);

结果：

settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

这个重载的要领，我们平常用来在编写插件时用自定义插件参数去掩盖插件的默许参数。

jQuery.fn.extend(object)扩大 jQuery 元素集来供应新的要领（一般用来制造插件）。

起首我们来看fn 是什么东西呢。检察jQuery代码，就不难发明。

jQuery.fn = jQuery.prototype = {
  init: function( selector, context ) {.....};
};

本来 jQuery.fn = jQuery.prototype，也就是jQuery对象的原型。那jQuery.fn.extend()要领就是扩大jQuery对象的原型要领。我 们晓得扩大原型上的要领，就相当于为对象增加”成员要领”，类的”成员要领”要类的对象才挪用，所以运用 jQuery.fn.extend(object)扩大的要领， jQuery类的实例能够运用这个”成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)要领一 定要辨别开来。

二、自实行的匿名函数/闭包

1.什么是自实行的匿名函数?

它是指形如如许的函数:(function {// code})();

2.疑问：为何(function {// code})();能够被实行, 而function {// code}();却会报错?

3.剖析

(1). 起首, 要清晰二者的区分:

(function {// code})是表达式, function {// code}是函数声明.

(2). 其次, js”预编译”的特征:

js在”预编译”阶段, 会诠释函数声明, 但却会忽略表式.

(3). 当js实行到function() {//code}();时, 因为function() {//code}在”预编译”阶段已被诠释过, js会跳过function(){//code}, 试图去实行();, 故会报错;
当js实行到(function {// code})();时, 因为(function {// code})是表达式, js会去对它求解获得返回值, 因为返回值是一 个函数, 故而碰到();时, 便会被实行.
别的， 函数转换为表达式的要领并不一定要靠分组操作符()，我们还能够用void操作符，~操作符，!操作符……

比方：

bootstrap 框架中的插件写法：

!function($){
//do something;
}(jQuery);

和

(function($){
//do something;
})(jQuery);

是一回事。

匿名函数最大的用处是建立闭包（这是JavaScript言语的特征之一），而且还能够构建定名空间，以削减全局变量的运用。

比方：

var a=1;
(function()(){
  var a=100;
})();
alert(a); //弹出 1

三、一步一步封装JQuery插件

接下来我们一起来写个高亮的jqury插件

1.定一个闭包地区，防备插件”污染”：

//闭包限制定名空间
(function ($) {
})(window.jQuery);

2.jQuery.fn.extend(object)扩大jquery 要领，制造插件：

//闭包限制定名空间
(function ($) {
  $.fn.extend({
    "highLight":function(options){
      //do something
    }
  });
})(window.jQuery);

3.给插件默许参数，完成 插件的功用：

//闭包限制定名空间
(function ($) {
  $.fn.extend({
    "highLight": function (options) {
      var opts = $.extend({}, defaluts, options); //运用jQuery.extend 掩盖插件默许参数
      this.each(function () { //这里的this 就是 jQuery对象
        //遍历一切的要高亮的dom,当挪用 highLight()插件的是一个鸠合的时刻。
        var $this = $(this); //猎取当前dom 的 jQuery对象，这里的this是当前轮回的dom
        //依据参数来设置 dom的款式
        $this.css({
          backgroundColor: opts.background,
          color: opts.foreground
        });
      });
    }
  });
  //默许参数
  var defaluts = {
    foreground: 'red',
    background: 'yellow'
  };
})(window.jQuery);

到这一步，高亮插件基本功用已具有了。挪用代码以下：

$(function () {
  $("p").highLight(); //挪用自定义 高亮插件
});

这里只能 直接挪用，不能链式挪用。我们晓得jQuey是能够链式挪用的，就是能够在一个jQuery对象上挪用多个要领，如：

$('#id').css({marginTop:'100px'}).addAttr("title","测试");

然则我们上面的插件，就不能如许链式挪用了。比方：

$("p").highLight().css({marginTop:'100px'});

将会报找不到css要领，原因在与我的自定义插件在完成功用后，没有将 jQuery对象给返回出来。接下来，return jQuery对象，让我们的插件也支撑链式挪用。（实在很简朴，就是实行完我们插件代码的时刻将jQuery对像return 出来，和上面的代码没啥区分）

//闭包限制定名空间
(function ($) {
  $.fn.extend({
    "highLight": function (options) {
      var opts = $.extend({}, defaluts, options); //运用jQuery.extend 掩盖插件默许参数
      return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支撑链式挪用
        //遍历一切的要高亮的dom,当挪用 highLight()插件的是一个鸠合的时刻。
        var $this = $(this); //猎取当前dom 的 jQuery对象，这里的this是当前轮回的dom
        //依据参数来设置 dom的款式
        $this.css({
          backgroundColor: opts.background,
          color: opts.foreground
        });
      });
    }
  });
  //默许参数
  var defaluts = {
    foreground: 'red',
    background: 'yellow'
  };
})(window.jQuery);

4.暴露大众要领 给他人来扩大你的插件（假如有需求的话）

比方的高亮插件有一个format要领来花样话高亮文本，则我们可将它写成大众的，暴露给插件运用者，差别的运用着依据本身的需求来重写该format要领，从而是高亮文本能够显现差别的花样。

//大众的花样化 要领. 默许是加粗，用户能够经由过程掩盖该要领到达差别的花样化结果。
$.fn.highLight.format = function (str) {
  return "<strong>" + str + "</strong>";
}

5.插件私有要领

有些时刻，我们的插件须要一些私有要领，不能被外界接见。比方 我们插件内里须要有个要领 来检测用户挪用插件时传入的参数是不是相符范例。

6.其他的一些设置，如：为你的插件到场元数据插件的支撑将使其变得更壮大。

完全的高亮插件代码以下：

//闭包限制定名空间
(function ($) {
  $.fn.extend({
    "highLight": function (options) {
      //检测用户传进来的参数是不是正当
      if (!isValid(options))
        return this;
      var opts = $.extend({}, defaluts, options); //运用jQuery.extend 掩盖插件默许参数
      return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支撑链式挪用
        //遍历一切的要高亮的dom,当挪用 highLight()插件的是一个鸠合的时刻。
        var $this = $(this); //猎取当前dom 的 jQuery对象，这里的this是当前轮回的dom
        //依据参数来设置 dom的款式
        $this.css({
          backgroundColor: opts.background,
          color: opts.foreground
        });
        //花样化高亮文本
        var markup = $this.html();
        markup = $.fn.highLight.format(markup);
        $this.html(markup);
      });
    }
  });
  //默许参数
  var defaluts = {
    foreground: 'red',
    background: 'yellow'
  };
  //大众的花样化 要领. 默许是加粗，用户能够经由过程掩盖该要领到达差别的花样化结果。
  $.fn.highLight.format = function (str) {
    return "<strong>" + str + "</strong>";
  }
  //私有要领，检测参数是不是正当
  function isValid(options) {
    return !options || (options && typeof options === "object") ? true : false;
  }
})(window.jQuery);

挪用：

//挪用
//挪用者掩盖 插件暴露的共公要领
$.fn.highLight.format = function (txt) {
  return "<em>" + txt + "</em>"
}
$(function () {
  $("p").highLight({ foreground: 'orange', background: '#ccc' }); //挪用自定义 高亮插件
});