javascript - 创建一个 jQuery 插件，使单个元素在调整窗口大小时使用react。我如何处理听众？

Question

我正在开发一个插件，该插件会在调整窗口大小时在选定元素中发生某些事情。发生的事情的逻辑非常好，但是当涉及到事件监听器的 Hook 位置时，我遇到了一个难题。

基本上，代码看起来像这样:

$.fn.beAwesome = function() {
  return this.each(function(){
    // ???
  });
}

虽然我已经完成了插件的其余部分(并且让它工作得很好，比如说，甚至在 this 上单击)，但我不能在不解决的情况下将它“全部放在一起”这个核心问题。

我考虑过为每个很棒的元素添加一个额外的绑定(bind) resize 到 $(window)，但是没有办法从闭包中访问该元素:

$.fn.beAwesome = function() {
  $window = $(window);
  return this.each(function(){
    $window.resize(function(){
      // can't access initial awesome element
    });
  });
}

另一个想到的解决方案是实例化一个全局数据存储(可能在 $(document).data('beAwesome') 或类似的地方。然而，这不是看起来像 Javascript，一旦函数运行它的过程就会阻止访问，所以我必须想出一些迂回的方法来做一些事情，比如删除钩子(Hook)。我肯定在我使用过的 Javascript 库中看到过这样的方法过去，但我不知道这是由于作者的必要性还是懒惰。

那么有没有一种有效的方法来完成我正在寻找的东西呢？

Answer 1

你不应该多次绑定(bind)到 resize 事件，这只会导致膨胀和缓慢。

您可以做的是创建一个 var 来存储所有要成为 Awesome 的元素。绑定(bind)到调整大小事件一次。然后在调整大小时对 var 中的所有元素执行一些操作。

(function($){ // closure to keep your pluggin contained.
    var elems = $([]);
    $(window).bind('resize.beAwesome', function(){
        if (!elems.length) return; //no need to continue if elems in empty.
        // Do something with elems here.
    });

    $.fn.beAwesome = function() {
      elems = elems.add(this);
      return this;
    }
})(jQuery);

您可能还想为调整大小事件命名空间。