javascript - 我的第一个 jQuery 插件。需要帮助格式化和理解它是如何工作的

Question

我今天写了我的第一个插件:一个使元素中的数字向上计数的简单工具。它工作得很好，但我是根据示例和一些试验和错误构建它的，所以我不能说我完全理解它是如何工作的。

我不明白:

a) 我应该如何包含方便的函数，例如 secondsToTime() 函数(假设我需要它在一个函数中 - 我知道在这个例子中它不需要。)为什么它有效这里来自 this.each block ？

b) 我声明的变量 (_this, seconds, interval) 的范围如何？它们同时为每个元素保存。

c) 这个插件的结构可以更好吗？

代码:

$(document).ready(function(){
  $('.ticker').countup();
});

(function($) {   
  $.fn.countup = function() {
    return this.each(function(){
      var _this = this,
      seconds = parseInt($(this).text()),
      interval = setInterval(updateTicker, 1000 );
      updateTicker();
      function updateTicker(){
        seconds += 1;
        time = secondsToTime(seconds);
        outputtime = time.h + ":" + ((time.m <= 9) ? '0' + time.m : time.m) + ":" + ((time.s <= 9) ? '0' + time.s : time.s)
        $(_this).text(outputtime);
      }   
      function secondsToTime(secs){
        var hours = Math.floor(secs / (60 * 60));
        var divisor_for_minutes = secs % (60 * 60);
        var minutes = Math.floor(divisor_for_minutes / 60);
        var divisor_for_seconds = divisor_for_minutes % 60; 
        var seconds = Math.ceil(divisor_for_seconds);
        var obj = { 
          "h": hours,
          "m": minutes,
          "s": seconds
        };  
        return obj;
      }   
    }); 
  };  
})(jQuery); 

感谢您的反馈。

Answer 1

a) How I should include handy functions like the secondsToTime() function

我会把它移到你的 (function($) { ... })(jQuery); 函数中，因为它没有为每个元素重新创建。

a) ...Why does it work here from within this.each block?

因为可以从定义在相同级别作用域或嵌套作用域的代码访问函数。

b) How are the variables I declared (_this, seconds, interval) scoped?

它们都特定于您传递给 this.each 的函数的每次调用。更具体地说:调用函数时，会创建调用的执行上下文。该执行上下文有一个变量对象，其中包含变量、函数参数和在被调用的函数中声明的函数(所有这些都是特定于函数调用的，因此每次都创建)。您的 updateTicker 函数(为每次调用创建)是该变量对象的闭包，因此具有对这些变量的持久引用。 (更多:Closures are not complicated。)

c) Could this plugin be structured better?

1. 参见上文 (a)。
2. 我可能会将我的插件函数设为命名函数，而不是匿名函数。 (更多:Anonymouses anonymous)您已经有了包装函数(我在上面的 (a) 中提到的那个)，因此它不会花费您任何费用，但是当函数实际有名称时它会使调试更容易。
3. 我可能只为 this 创建 jQuery 对象一次，然后重用它，而不是一开始就创建两次，然后每次 updateTicker 运行时都创建一次。例如，制作 var _this = this, => var _this = $(this), 并在下一行和内部使用 _this.text updateTicker.
4. 通过提供第二个参数在 parseInt 上强制使用基数通常是个好主意(否则，前导零可能会发生奇怪的事情)。
5. 您可以考虑只使用一个间隔计时器来更新所有元素，而不是为每个元素使用一个间隔。
6. 我会添加一种停止更新的方法。
7. 请注意，计时器根本不精确，因此您的倒计时可能会漂移。您可能会考虑获取开始时间并计算它实际持续了多长时间，而不是减少 seconds 值。

这是第一个步骤，仅实现上面的#1 - #4，其他的留给你去做:

(function($) {   

  $.fn.countup = MyNiftyPlugin_countup;               // #2

  function MyNiftyPlugin_countup() {                  // #2 cont'd
    return this.each(function(){
      var _this = $(this),                            // #3
          seconds = parseInt(_this.text(), 10),       // #3 cont'd, #4
          interval = setInterval(updateTicker, 1000 );

      updateTicker();

      function updateTicker(){
        seconds += 1;
        time = secondsToTime(seconds);
        outputtime = time.h + ":" + ((time.m <= 9) ? '0' + time.m : time.m) + ":" + ((time.s <= 9) ? '0' + time.s : time.s)
        _this.text(outputtime);                       // #3 cont'd
      }   
    }); 
  }

  function secondsToTime(secs){                       // #1 (moving this out a level)
    var hours = Math.floor(secs / (60 * 60));
    var divisor_for_minutes = secs % (60 * 60);
    var minutes = Math.floor(divisor_for_minutes / 60);
    var divisor_for_seconds = divisor_for_minutes % 60; 
    var seconds = Math.ceil(divisor_for_seconds);
    var obj = { 
      "h": hours,
      "m": minutes,
      "s": seconds
    };  
    return obj;
  }   
})(jQuery);