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

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

我不明白：

a） 我应该如何包括方便的函数，如

secondsToTime（）

函数（假设我需要它在函数中-我知道在本例中它不需要）。为什么它在这里从这个块中工作

b） 我声明的变量（

\u this，seconds，interval

）的作用域是怎样的？对于每个元素，它们都是同时保存的

c） 这个插件的结构能更好吗

代码：

$（文档）.ready（函数（）{
$（'.ticker'）.countup（）；
});
（函数（$）{
$.fn.countup=函数（）{
返回此值。每个（函数（）{
var_this=这个，
秒=parseInt（$（this）.text（）），
间隔=设置间隔（更新器，1000）；
updateTicker（）；
函数updateTicker（）{
秒+=1；
时间=秒到秒（秒）；
outputtime=time.h+“：”+（（time.m
a） 如何包含像secondsToTime（）函数这样的方便函数

我会将它移出一个级别，放到
（function（$）{
…
}）（jQuery）；
函数中，因为它不必为每个元素重新创建

a） …为什么每个街区都能在这里工作

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

b） 我声明的变量（
\u this
，
seconds
，
interval
）的范围是如何确定的

它们都特定于要传递到
中的每个函数调用。每个
。更具体地说，当调用函数时，会创建调用的执行上下文。该执行上下文有一个变量对象，其中包含被调用函数中声明的变量、函数参数和函数（所有这些都是特定于函数调用的，因此每次都会创建）。您的
updateTicker
函数（为每次调用创建）是该变量对象的闭包，因此具有对这些变量的持久引用。（更多信息：）

c） 这个插件的结构能更好吗

见上文（a）
我可能会让我的插件函数成为一个命名函数，而不是匿名函数。（更多：）您已经有了包装函数（我在（a）中提到的一个），因此它不会花费任何费用，但当函数实际有名称时，它会使调试变得更容易
我可能只为
this
创建一次jQuery对象，然后重用它，而不是一开始就做两次，然后每次运行
updatecker
时再做一次。例如，使
var\u this=this，
=>
var\u this=$（this），
并在下一行和
updatecker
中使用此.text
通过提供第二个参数（否则，前导零可能会发生奇怪的事情），将基数强制设置为
parseInt
您可以考虑只使用一个间隔定时器来更新所有元素，而不是每个元素的间隔。
我想添加一种方法来停止更新
请注意，计时器根本不精确，因此您的倒计时可能会漂移。您可以考虑抓取起始时间并计算实际时间，而不是减去<代码>秒值。
这是第一步，只执行上面的#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); 

（函数（$）{
$.fn.countup=MyNiftyPlugin_countup；//2
函数MyNiftyPlugin_countup（）{/#2 cont'd
返回此值。每个（函数（）{
var _this=$（this），/#3
秒=parseInt（_this.text（），10），//#3续，#4
间隔=设置间隔（更新器，1000）；
updateTicker（）；
函数updateTicker（）{
秒+=1；
时间=秒到秒（秒）；
outputtime=time.h+“：”+（（time.m改进@T.JCrowder给出的代码示例）

我们在循环外取间隔，只运行一次。我们将时间作为整数存储在数据中，因此只需解析int一次。我们使用toTime函数返回格式化字符串。还有一些其他的小改进

(function($) {   

    $.fn.countup = MyNiftyPlugin_countup;

    function MyNiftyPlugin_countup() {
        var that = this;
        function updateTicker(){
            that.each(updateNode);
        }      
        function updateNode() {
            var $this = $(this); // cache
            var seconds = $this.data("time") + 1; // get time from $.data
            $this.data("time", seconds);
            //var seconds = Date.now() // alternative get accurate time right _now_
            var time = secondsToTime(seconds)[1]; // get string from tuple
            $this.text(time).data("time", seconds);
        }
        setInterval(updateTicker, 1000);
        updateTicker();

        return this.each(function(){
            var $this = $(this); // cache
            $this.data("time", parseInt($this.text(), 10);
        }); 
    }

    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 time = { 
          "h": hours,
          "m": minutes,
          "s": seconds
        };  
        var outputtime = time.h + ":" + ((time.m <= 9) ? '0' + time.m : time.m) + ":" + ((time.s <= 9) ? '0' + time.s : time.s)
        return [time, outputtime];
    }   
})(jQuery); 

（函数（$）{
$.fn.countup=粘伤寒菌素\u countup；
函数MyNiftyPlugin_countup（）{
var=这个；
函数updateTicker（）{
每个（更新节点）；
}      
函数updateNode（）{
var$this=$（this）；//缓存
var seconds=$this.data（“time”）+1；//从$.data获取时间
$this.data（“时间”，秒）；
//var seconds=Date.now（）//立即获取准确的时间_
var time=secondsToTime（秒）[1]；//从元组获取字符串
$this.text（time）.data（“time”，秒）；
}
setInterval（updatecker，1000）；
updateTicker（）；
返回此值。每个（函数（）{
var$this=$（this）；//缓存
$this.data（“time”，parseInt（$this.text（），10）；
}); 
}
功能秒至秒（秒）{
var小时=数学楼层（秒/（60*60））；
分钟的var除数=s%（60*60）；
var minutes=数学下限（除数为分钟/60）；
var除数为秒=除数为分钟%60；
var seconds=Math.ceil（除数为秒）；
变量时间={
“h”：小时，
“m”：分钟，
“s”：秒
};  
var outputtime=time.h+“：”+（（time.m@doctorrange:不用担心，很高兴这有帮助。）
(function($) {   

    $.fn.countup = MyNiftyPlugin_countup;

    function MyNiftyPlugin_countup() {
        var that = this;
        function updateTicker(){
            that.each(updateNode);
        }      
        function updateNode() {
            var $this = $(this); // cache
            var seconds = $this.data("time") + 1; // get time from $.data
            $this.data("time", seconds);
            //var seconds = Date.now() // alternative get accurate time right _now_
            var time = secondsToTime(seconds)[1]; // get string from tuple
            $this.text(time).data("time", seconds);
        }
        setInterval(updateTicker, 1000);
        updateTicker();

        return this.each(function(){
            var $this = $(this); // cache
            $this.data("time", parseInt($this.text(), 10);
        }); 
    }

    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 time = { 
          "h": hours,
          "m": minutes,
          "s": seconds
        };  
        var outputtime = time.h + ":" + ((time.m <= 9) ? '0' + time.m : time.m) + ":" + ((time.s <= 9) ? '0' + time.s : time.s)
        return [time, outputtime];
    }   
})(jQuery);