用jQuery开发插件详解

Posted 2020-06-27 黑客

jQuery插件的开发包括两种：

一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

 

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：

 

1.1 添加一个新的全局函数

添加一个全局函数，我们只需如下定义：

jQuery.foo = function() {   

    alert(‘This is a test. This is only a test.‘);  

};    

 

1.2 增加多个全局函数

添加多个全局函数，可采用如下定义：

jQuery.foo = function() {   

    alert(‘This is a test. This is only a test.‘);  

};  

jQuery.bar = function(param) {   

    alert(‘This function takes a parameter, which is "‘ + param + ‘".‘);  

};   

调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar(‘bar‘); 

 

1.3 使用jQuery.extend(object);　

jQuery.extend({      

    foo: function() {      

        alert(‘This is a test. This is only a test.‘);      

    },      

    bar: function(param) {      

        alert(‘This function takes a parameter, which is "‘ + param +‘".‘);      

    }     

});  

 

1.4 使用命名空间

虽然在jQuery命名空间中，我们禁止使用了大量的javascript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。

jQuery.myPlugin = {          

    foo:function() {          

        alert(‘This is a test. This is only a test.‘);          

    },          

    bar:function(param) {          

        alert(‘This function takes a parameter, which is "‘ + param + ‘".‘);    

    }         

};  

采用命名空间的函数仍然是全局函数，调用时采用的方法：  

$.myPlugin.foo();         

$.myPlugin.bar(‘baz‘);  

通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。

 

2、对象级别的插件开发

对象级别的插件开发需要如下的两种形式：、

形式1

(function($){     

$.fn.extend({     

    pluginName:function(opt,callback){     

        // Our plugin implementation code goes here.       

    }     

})     

})(jQuery);

 

形式2：

Java代码  收藏代码

(function($) {       

$.fn.pluginName = function() {     

     // Our plugin implementation code goes here.     

};     

})(jQuery);      

上面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.

 

2.1 在JQuery名称空间下申明一个名字

这是一个单一插件的脚本。如果你的脚本中包含多个插件，或者互逆的插件（例如： $.fn.doSomething() 和 $.fn.undoSomething()），那么你需要声明多个函数名字。但是，通常当我们编写一个插件时，力求仅使用一个名字来包含它的所有内容。我们的示例插件命名为“highlight“    

$.fn.hilight = function() {    

    // Our plugin implementation code goes here.    

}; 

我们的插件通过这样被调用：  

$(‘#myDiv‘).hilight();     

 

但是如果我们需要分解我们的实现代码为多个函数该怎么办？有很多原因：设计上的需要；这样做更容易或更易读的实现；而且这样更符合面向对象。 这真是一个麻烦事，把功能实现分解成多个函数而不增加多余的命名空间。出于认识到和利用函数是javascript中最基本的类对象，我们可以这样做。就像其他对象一样，函数可以被指定为属性。因此我们已经声明“hilight”为jQuery的属性对象，任何其他的属性或者函数我们需要暴露出来的，都可以在"hilight" 函数中被声明属性。

 

2.2 接受options参数以控制插件的行为

让我们为我们的插件添加功能指定前景色和背景色的功能。我们也许会让选项像一个options对象传递给插件函数。例如:   

$.fn.hilight = function(options) {    

    var defaults = {    

        foreground: ‘red‘,    

        background: ‘yellow‘    

    };      

    var opts = $.extend(defaults, options);  

};    

我们的插件可以这样被调用：  

$(‘#myDiv‘).hilight({    

  foreground: ‘blue‘    

});     

 

2.3 暴露插件的默认设置

我们应该对上面代码的一种改进是暴露插件的默认设置。这对于让插件的使用者更容易用较少的代码覆盖和修改插件。接下来我们开始利用函数对象。     

$.fn.hilight = function(options) {      

    var opts = $.extend({}, $.fn.hilight.defaults, options);   

};     

$.fn.hilight.defaults = {    

    foreground: ‘red‘,    

    background: ‘yellow‘    

};   

现在使用者可以包含像这样的一行在他们的脚本里：  

这个只需要调用一次，且不一定要在ready块中调用  

$.fn.hilight.defaults.foreground = ‘blue‘;    

接下来我们可以像这样使用插件的方法，结果它设置蓝色的前景色：  

$(‘#myDiv‘).hilight();   

 

如你所见，我们允许使用者写一行代码在插件的默认前景色。而且使用者仍然在需要的时候可以有选择的覆盖这些新的默认值：

覆盖插件缺省的背景颜色 

$.fn.hilight.defaults.foreground = ‘blue‘; 

 

使用一个新的缺省设置调用插件 

$(‘.hilightDiv‘).hilight(); 

 

通过传递配置参数给插件方法来覆盖缺省设置 

$(‘#green‘).hilight({ 

  foreground: ‘green‘ 

});

 

2.4 适当的暴露一些函数

这段将会一步一步对前面那段代码通过有意思的方法扩展你的插件（同时让其他人扩展你的插件）。例如，我们插件的实现里面可以定义一个名叫"format"的函数来格式化高亮文本。我们的插件现在看起来像这样，默认的format方法的实现部分在hiligth函数下面。 

$.fn.hilight = function(options) {    

    return this.each(function() {    

        var $this = $(this);      

        var markup = $this.html();    

        markup = $.fn.hilight.format(markup);    

        $this.html(markup);    

    });    

};    

$.fn.hilight.format = function(txt) {    

    return ‘<strong>‘ + txt + ‘</strong>‘;    

};     

我们很容易的支持options对象中的其他的属性通过允许一个回调函数来覆盖默认的设置。这是另外一个出色的方法来修改你的插件。这里展示的技巧是进一步有效的暴露format函数进而让他能被重新定义。通过这技巧，是其他人能够传递他们自己设置来覆盖你的插件，换句话说，这样其他人也能够为你的插件写插件。

 

2.5 保持私有函数的私有性

这种技巧暴露你插件一部分来被覆盖是非常强大的。但是你需要仔细思考你实现中暴露的部分。一但被暴露，你需要在头脑中保持任何对于参数或者语义的改动也许会破坏向后的兼容性。一个通理是，如果你不能肯定是否暴露特定的函数，那么你也许不需要那样做。

那么我们怎么定义更多的函数而不搅乱命名空间也不暴露实现呢？这就是闭包的功能。为了演示，我们将会添加另外一个“debug”函数到我们的插件中。这个 debug函数将为输出被选中的元素格式到firebug控制台。为了创建一个闭包，我们将包装整个插件定义在一个函数中。 

(function($) {    

$.fn.hilight = function(options) {    

    debug(this);    

};    

function debug($obj) {    

    if (window.console && window.console.log)    

        window.console.log(‘hilight selection count: ‘ + $obj.size());    

};  

})(jQuery);    

我们的“debug”方法不能从外部闭包进入,因此对于我们的实现是私有的。

 

2.6 支持Metadata插件

在你正在写的插件的基础上，添加对Metadata插件的支持能使他更强大。个人来说，我喜欢这个Metadata插件，因为它让你使用不多的"markup”覆盖插件的选项（这非常有用当创建例子时）。而且支持它非常简单。更新：注释中有一点优化建议。

$.fn.hilight = function(options) {      

    var opts = $.extend({}, $.fn.hilight.defaults, options);    

    return this.each(function() {    

        var $this = $(this); 

        var o = $.meta ? $.extend({}, opts, $this.data()) : opts;    

    });    

这些变动行做了一些事情：它是测试Metadata插件是否被安装如果它被安装了，它能扩展我们的options对象通过抽取元数据这行作为最后一个参数添加到JQuery.extend，那么它将会覆盖任何其它选项设置。现在我们能从"markup”处驱动行为,如果我们选择了“markup”：

调用的时候可以这样写： jQuery.foo(); 或 $.foo(); 

<div class="hilight { background: ‘red‘, foreground: ‘white‘ }">    

    Have a nice day!    

</div>    

<div class="hilight { foreground: ‘orange‘ }">    

    Have a nice day!    

</div>    

<div class="hilight { background: ‘green‘ }">    

    Have a nice day!    

</div>    

现在我们能高亮哪些div仅使用一行脚本：  

$(‘.hilight‘).hilight();     

 

2.7 整合

下面使我们的例子完成后的代码：

// 创建一个闭包    

(function($) {    

  // 插件的定义    

  $.fn.hilight = function(options) {    

    debug(this);    

    // build main options before element iteration    

    var opts = $.extend({}, $.fn.hilight.defaults, options);    

    // iterate and reformat each matched element    

    return this.each(function() {    

      $this = $(this);    

      // build element specific options    

      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;    

      // update element styles    

      $this.css({    

        backgroundColor: o.background,    

        color: o.foreground    

      });    

      var markup = $this.html();    

      // call our format function    

      markup = $.fn.hilight.format(markup);    

      $this.html(markup);    

    });    

  };    

  // 私有函数：debugging    

  function debug($obj) {    

    if (window.console && window.console.log)    

      window.console.log(‘hilight selection count: ‘ + $obj.size());    

  };    

  // 定义暴露format函数    

  $.fn.hilight.format = function(txt) {    

    return ‘<strong>‘ + txt + ‘</strong>‘;    

  };    

  // 插件的defaults    

  $.fn.hilight.defaults = {    

    foreground: ‘red‘,    

    background: ‘yellow‘    

  };    

// 闭包结束    

})(jQuery);

 

3、总结

jQuery为开发插件提拱了两个方法，分别是：

jQuery.fn.extend(object);  给jQuery对象添加方法。

jQuery.extend(object);  为扩展jQuery类本身.为类添加新的方法。

 

3.1 jQuery.fn.extend(object);

fn 是什么东西呢。查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = {  

init: function( selector, context ) {//....　  

//......  

};   

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript　没有明确的类的概念，但是用类来理解它，会更方便。jQuery便是一个封装得非常好的类，比如我们用 语句　$("#btn1") 会生成一个 jQuery类的实例。

jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

$.fn.extend({        

     alertWhileClick:function(){       

         $(this).click(function(){      

              alert($(this).val());       

          });       

      }       

});   

$("#input1").alertWhileClick(); //页面上为：<input id="input1" type="text"/>

$("#input1")　为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

 

3.2 jQuery.extend(object);　

为jQuery类添加添加类方法，可以理解为添加静态方法。如：

$.extend({  

    add:function(a,b){return a+b;}  

});  

便为　jQuery　添加一个为 add　的　“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了，$.add(3,4); //return 7

 

10 条建议让你创建更好的 jQuery 插件

 

 

在开发过很多 jQuery 插件以后，我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式。这样我就可以 copy & paste 大部分的代码结构，只要专注最主要的逻辑代码就行了。 使用相同的设计模式和架构也让修复bug或者二次开发更容易。一套经过验证的架构可以保证我的插件不出大的问题，不论插件简单还是复杂。 我在这里分享10条我总结的经验。

 

1. 把你的代码全部放在闭包里面 

这是我用的最多的一条。但是有时候在闭包外面的方法会不能调用。不过你的插件的代码只为你自己的插件服务，所以不存在这个问题，你可以把所有的代码都放在闭包里面。而方法可能应该放在Prototype方法内部，我们后面会讲到这一点。 

(function($){

    //code here

})(jQuery);

 

2. 提供插件的默认选项 

你的插件应该会有一些选项是可以让开发者设置的，所以提供恢复默认选项是以有必要的。你可以通过jQuery的extend功能来设置这些选项： 

var defaultSettings = {

   mode            : ‘Pencil‘,

   lineWidthMin    : ‘0‘,

   lineWidthMax    : ‘10‘,

   lineWidth       : ‘2‘

};

settings = $.extend({}, defaultSettings, settings || {});

 

3. 使用返回一个元素 

JavaScript/jQuery有一个很好的特点就是可以进行方法级联，所以我们不应该破坏这个特性，始终在方法中返回一个元素。我在我的每一个jQuery插件中都遵守这一条。 

$.fn.wPaint = function(settings)

{

   return this.each(function()

   {

       var elem = $(this);

 

       //run some code here

   }

}

 

4. 一次性代码放在主循环以外 

这一条很重要，但是常常被忽略。简单的讲，如果你有一段代码是一堆默认值，只需要被实例化一次，而不是每次调用你插件功能的时候都实例化，你应该把这段代码放在插件方法的外面。这样可以让你的插件运行的更高效，节省内存。我们将会在后面讨论prototype的时候，看这个方法在实际中的运用。 

var defaultSettings = {

   mode            : ‘Pencil‘,

   lineWidthMin    : ‘0‘,

   lineWidthMax    : ‘10‘,

   lineWidth       : ‘2‘

};

 

$.fn.wPaint = function(settings)

{

   settings = $.extend({}, defaultSettings, settings || {});

 

   return this.each(function()

   {

       var elem = $(this);

 

       //run some code here

   }

}

你可以注意到，上面代码中的“defaultSettings”是完全在插件方法外面的，由于这些代码是在闭包里面，我们不用担心这些变量被重写。 

 

5. 为什么要设置 Class Prototyping 

作为你代码的血与肉，方法和函数应该放在prototype函数内。有两个原因： 

它可以节省很多内存，因为可以不用重复创建这些方法。

引用一个现成的方法比重新创建一个好快很多。

简单的说，prototype就是扩展了一个对象，为它提供方法，而不用在每一个对象中实例化这些方法。这也让你的代码更有条理和高效。一旦你习惯这种开发方式，你会发现它在你将来的项目中为你节省了很多时间。 

 

6. 如何设置 Class Prototyping 

设置一个 prototype 方法有两个部分。首先我们需要创建我们最初的类定义，在多数情况下这就意味着创建一个对象。这个定义包含了每一个对象实例都不同的部分。在我的 Paint jQuery Plugin 插件中，我是这么写的： 

function Canvas(settings)

{

   this.settings = settings;

   this.draw = false;

   this.canvas = null;      

   this.ctx = null;

   return this;

}

 

下面来添加全局的方法： 

Canvas.prototype =

{

   generate: function()

   {

       //generate code

   }

}

这里的关键是要让prototype的方法是通用的，但是数据是每个实例自己的，可以用“this”引用。 

 

7. 使用 “this” 对象 

通过使用“$this”，我们可以向别的闭包传递正确的引用。我们也可能需要向别的方法传入 $this 引用。需要注意的是， $this 这个名字是可以改的，任意的变量名都可以。 

Canvas.prototype =

{

   generate: function()

   {

       //some code

 

       var $this = this;

 

       var buton = //...some code

 

       button.click(function(){

           //using this will not be found since it has it‘s own this

 

           //use $this instead.

 

           $this.someFunc($this);

       });

   },

 

   someFunc: function($this)

   {

       //won‘t know what "this" is.

       //use $this instead passed from the click event

   }

}

 

8. 在每一个对象中保存设置 

我一直在每一个对象中保存自己的设置，然后操作它自己的设置。这样你就不用在不同的方法中传递很多参数。把这些变量放在对象中，也方便你在其他地方调用这些变量。 

function Canvas(settings)

{

   this.settings = settings;

 

   return this;

}

9. 分离你的Prototype方法逻辑 

这可能是一个基本的原则。当你在犹豫是否需要提供一个方法的时候，你可以问你自己 “如果其他人要重写这个方法的话，你的代码是否能满足他的需求？”或者“别人来写这个方法有多困难？”。当然这是一个灵活性拿捏的问题。这里列出了我的 Color Picker jQuery Plugin  的方法，你可以参考一下： 

generate()

appendColors()

colorSelect()

colorHoverOn()

colorHoverOff()

appendToElement()

showPalette()

hidePalette()

 

10. 提供 Setter/Getter 选项 

这一条不是必须的，但是我发现我所有的插件都包用到了这一条。因为它只需要一点点代码，就能为别人提供一个他可能需要的功能。 

基本上，我们只要让开发者能够设置或者获取元素已经存在的值： 

var lineWidth = $("#container").wPaint("lineWidth");

$("#container").wPaint("lineWidth", "5");

首先我们要把元素和对象关联起来，然后我们就可以引用它。我们在返回元素之前做如下操作： 

return this.each(function()

{

   var elem = $(this);

 

   var canvas = new Canvas(settings);

 

   //run some code here

 

   elem.data("_wPaint_canvas", canvas);

}

 

下面的代码明确了我们究竟要做什么：

$.fn.wPaint = function(option, settings)

{

   if(typeof option === ‘object‘)

   {

       settings = option;

   }

   else if(typeof option === ‘string‘)

   {

       if(

           this.data(‘_wPaint_canvas‘) &&

           defaultSettings[option] !== undefined

       ){

           var canvas = this.data(‘_wPaint_canvas‘);

 

           if(settings)

           {

               canvas.settings[option] = settings;

               return true;

           }

           else

           {

               return canvas.settings[option];

           }

       }

       else

           return false;

   }

 

   return this.each(function()

   {

       //run some code here

   }

}

以上十条基本上覆盖了jQuery插件开发的核心，并且可以作为开发的模板。有一套基本的代码可以极大的缩短你的开发时间，并且能够让你设计插件架构的时候更自信。