jquery - 编写第一个 jQuery 插件 : understanding this

Question

我已经为我的网站制作了一个简单的轮播，我想将其带到下一步。我希望在一个页面上有多个轮播，并且只需调用 $('.carousel').swapify() 即可完成。

这是我迄今为止所拥有的:

$.fn.swapify = function() {
  var $this = $(this);
  console.log('this is currently: ' + this.selector);

  function advanceSlide() {
    $('.swapify li:first-child').appendTo('.swapify');
  }

  $(this).find('li').click(function() { advanceSlide(); });
}

$(document).ready(function () {
  $('.carousel').swapify();
});

当我与旋转木马互动时，它们都会前进。这是非常明显的，但我不确定如何使交互具体化。我尝试过类似的方法:

$('li:first-child', this).appendTo(this);

我仍在开发我的 JavaScript 词汇，事实证明很难通过 Google 进行搜索。

编辑:我设置了一个 fiddle 来说明这个问题 http://jsfiddle.net/69FM7/1/

Answer 1

IMSoP 的答案可能就是您想要的，但另一个选择是使用委托(delegate)事件:

$.fn.swapify = (function() {
    function advanceSlide(e) {
        var $carousel = $(e.delegateTarget);
        $carousel.find('li:first-child').appendTo($carousel);
    }

    return function swapify() {    
        this.on("click", "li", advanceSlide);
    };
}());

Fiddle

<小时/>

以下是一些关键概念的快速解释:

• Immediately Invoked Function Expressions

  IIFE 为您提供了一种为新变量和函数创建稳定的新作用域的方法。我们创建一个函数并立即调用它。

  (function() {
      // new scope here   
  }());
  

  我们在这里使用一个为 advanceSlide 和 swapify 函数的单个实例创建一个新的作用域。

• Closures和 Free Variables

  IIFE 的返回值是 swapify 函数。这个函数是一个闭包——它关闭自由变量advanceSlide。 “自由”是指变量 advanceSlide 在从函数返回时与 swapify 一起“转义”——它可以自由地存在于其包含范围之外。

• $.fn 是 jQuery 的 prototype object 的别名。 。简而言之，这意味着 jQuery object 的所有实例将有权访问原型(prototype)定义的函数。

  为了清楚起见，$("someselector") 将返回 jQuery object 。我们将 IIFE 的返回值分配给 $.fn.swapify ，这将为 jQuery 对象注入(inject)我们的新功能。

• Delegated Events

  当我们调用 swapify 帮助器时，而不是在每个 li 上绑定(bind)事件 - 这就是 .find("li").on(.. .) 就可以了——最好在父元素上绑定(bind)事件。 然后让 jQuery 动态检查事件的目标是否与我们关心的集合匹配。

  例如，您可能只有少数 ul 元素，但其中每个元素可能包含数百个 li 元素。我们不需要创建一个处理程序并在每个处理程序上附加一个事件，只需在父级上附加一个处理程序即可。这可以最大限度地减少需要绑定(bind)的事件处理程序的数量。

• 使用delegatedTarget property来自event object

  最后，当我们的事件处理程序被调用时，它将被传递一个 event object 。这将有几个有用的属性，例如 target、currentTarget 和 delegateTarget。我们使用delegateTarget来查找我们最初绑定(bind)到的根元素，并将其分配给$this。然后，其余的逻辑就会按照您期望的方式工作。