代码之家 › 专栏 › 技术社区 › chris

jQuery插件-如何添加/绑定事件

jquery-plugins jquery javascript

chris · 技术社区 · 11 年前

好吧,这是我第一次尝试创建jQuery插件,所以我现在要停止教程了。

到目前为止

(function($)
{
    $.tippedOff = function(selector, settings)
    {
        var config = {
            'top':0,
            'left':0,
            'wait':3000
        };
        if(settings){$.extend(config, settings);}

        var $elem = $(selector);
        if($elem.length > 0)
        {
            $elem.each(function()
            {
                $(this).css({"color":"#F00"});
            })
        }

        return this;
    };
})(jQuery);

用于更改所提供元素的文本颜色。然而我想为插件生效的元素添加功能。比如悬停或点击事件。但我现在无法理解这个想法,因为 selector 可以是任何东西。所以我不能像通过普通的jQuery方法那样,在per中硬编码一些特定的东西。

那么,有了这些,我该如何在渲染后将这种类型的功能添加到事物中呢?

2 回复 | 直到 11 年前

Community 7 年前

在创建插件时,很容易使事情过于复杂,所以尽量保持简单美观。

我已经为你提供了 2 示例 tippedOff 插件。这也是一个 jsfiddle demo 两个插件的。

第一个按原样使用原始代码( 未进行重大更改 ):

$.tippedOff = function(selector, settings)
    {
        var config = {
            'top':0,
            'left':0,
            'wait':3000
        };
        if(settings){$.extend(config, settings);}

        var $elem = $(selector);
        if($elem.length > 0)
        {
            $elem.each(function()
            {
              //bind mouseenter, mouseleave, click event
                $(this).css({"color":"#F00"})
                .mouseenter(function(){
                  $(this).css({"color":"green"});
                })
                .mouseleave(function(){
                  $(this).css({"color":"#F00"});
                })
                .click(function(){
                  $(this).html('clicked');
                });

            })
        }

        return this;
    };

然而,这一个是基于您的原始代码。基本上,我已经用 these tips 。这是我个人的做法。我还向您提供了以下所做更改的明细。( 所做的重大更改 ):

$.fn.tippedOff = function(settings) {
      var config = $.extend( {
          'top':0,
          'left':0,
          'wait':3000,
          'color': 'orange',
          'hoverColor': 'blue'
      }, settings);

      return this.each(function() {
          $this = $(this);
          $this.css({ 'color': config.color})
          .mouseenter(function(){
             $this.css({ 'color': config.hoverColor });
          })
          .mouseleave(function(){
             $this.css({ 'color': config.color });
          })
          .click(function(){
             $this.html('clicked');
          });
      });
    }

----------------------------------------

细分:

原始代码:

$.tippedOff = function(selector, settings) {

改变:

$.fn.tippedOff = function( settings ) {

评论:

两者之间的差异 $.tippedOff 和 $.fn.tippedOff 是巨大的!将您的插件添加到 $.fn 命名空间,而不是 $ 命名空间将防止您必须提供 selector 让生活变得更简单。

我个人喜欢 this answer ,其中@Chad声明:

我遵循的经验法则是:使用$。当它与DOM无关时(如ajax),当它对用选择器抓取的元素(如DOM/XML元素)进行操作时使用$.fn。

原始代码:

if(settings){$.extend(config, settings);}

改变:

var config = $.extend( {
          'top':0,
          'left':0,
          'wait':3000
      }, settings);

评论:

拥有 if 这句话是多余的。 .extend() 为你做所有的工作。

原始代码:

var $elem = $(selector);
        if($elem.length > 0)
        {
            $elem.each(function()
            {
                $(this).css({"color":"#F00"});
            })
        }

        return this;

改变:

return this.each(function() {
          $this = $(this);
          $this.css({ 'color': config.color});
});

评论:

使用 return this.each(function(){}) 是良好的实践,并保持可链接性。不仅如此,您将不再需要担心 选择器 的长度。

*注意:如果要添加其他事件,请使用不同的 methods 在您的插件中: jQuery Doc Reference - Authoring Plugins .

我希望这能有所帮助,如果你有任何问题,请告诉我!

Dimi 10 年前

我没有足够的声誉点来评论,我完全同意多姆的观点,他知识渊博。我只想补充一点,在更改后的代码中,最好创建 地方的 变量,方法是使用变量关键字:
var $this = $(this);
这将使插件变得更好,并允许您将插件应用于页面中的多个元素,例如:
$('#testX').tippedOff2();
$('#testY').tippedOff2();
$('#testZ').tippedOff2();