6

好的，这是我第一次尝试创建一个 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方法那样硬编码一些特定的东西。

那么，有了这个，我如何在渲染后将这种类型的功能添加到事物中？

4

2 回答 2

21

在创建插件时，很容易让事情变得过于复杂，所以尽量让事情变得简单。

我为您提供了该插件的两个示例。tippedOff这也是两个插件的jsfiddle 演示。

第一个按原样使用您的原始代码（未进行重大更改）：

$.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;
    };

但是，这个是基于您的原始代码。基本上，我已经使用这些技巧重建了您的原始代码。这就是我个人的做法。我还为您提供了以下更改的细分。（做出重大改变）：

$.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命名空间而不是$命名空间将使您不必提供 aselector并使生活更简单。

我个人喜欢这个答案，其中@Chad 指出：

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

原始代码：

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(){})是很好的做法并保持可链接性。不仅如此，您将不再需要担心selector's 的长度。

*注意：如果你想添加额外的事件，那么methods在你的插件中使用不同的：jQuery Doc Reference - Authoring Plugins。

我希望这会有所帮助，如果您有任何问题，请告诉我！

于 2013-04-17T19:32:08.263 回答
4

我没有足够的声誉点来评论并完全同意知识渊博的 Dom。我只想在更改的代码中添加它，最好使用var关键字创建一个局部变量： 这将使插件更好，并允许您将插件应用于页面中的多个元素，例如：
var $this = $(this);

$('#testX').tippedOff2();
$('#testY').tippedOff2();
$('#testZ').tippedOff2();

于 2014-08-13T21:37:23.900 回答