波莫多罗定时器模块

Question

我学习javascript已经有一段时间了，并且刚刚完成了我的第一段代码，它不仅可以实际完成一些事情，而且还要比几行代码还要长。这很可能是相当可怕的(但有效！)我希望有任何帮助，洞察力或/和指点。

一般的想法是创建一个模块，我可以导入该模块，生成HTML并执行计时器操作，同时公开简单的API，同时保持大多数内部的私有(试图将我的注意力集中在模块和一些流行模式的一般概念上)。

var timer_module = function (wrkTime, brkTime, parentEl) {

var locRef = {
        workTime: wrkTime ? wrkTime : 25,
        breakTime: brkTime ? brkTime : 10,
        seconds: 0,
        isPlaying: false,
        isBreak: false
    },
    seconds = locRef.seconds,
    minutes = locRef.workTime,
    pubAcc = {},
    secondsHandle, sdiv, mdiv, resetButton, startPauseButton;

(function render_DOM_elements(){
    var array_of_elements = [
        {tag: 'section', id: 'tm_container', parent: parentEl, initialContent: ''},
        {tag: 'div', id: 'tm_minutes', parent: 'tm_container', initialContent: ''},
        {tag: 'div', id: 'tm_seconds', parent: 'tm_container', initialContent: ''},
        {tag: 'div', id: 'tm_bcontainer', parent: 'tm_container', initialContent: ''},
        {tag: 'button', id: 'tm_playStopButton', parent: 'tm_bcontainer',
            initialContent: '<i class="fa fa-play-circle-o" aria-hidden="true"></i>'},
        {tag: 'button', id: 'tm_resetButton', parent: 'tm_bcontainer',
            initialContent: '<i class="fa fa-stop-circle-o" aria-hidden="true"></i>'}
    ];
    function create_element(elementObject){
        var el = document.createElement(elementObject.tag);
        var parent = document.getElementById(elementObject.parent);
        el.setAttribute('id', elementObject.id);
        el.innerHTML = elementObject.initialContent;
        if(!parent){
            document.body.appendChild(el)
        } else {
            parent.appendChild(el)
        }
    }
    array_of_elements.forEach(create_element);

    sdiv = document.getElementById('tm_seconds');
    mdiv = document.getElementById('tm_minutes');
    startPauseButton = document.getElementById('tm_playStopButton');
    resetButton = document.getElementById('tm_resetButton');
})();

//update the dom/display and format(zero-pad) the time
function updateTime() {
    sdiv.innerHTML = seconds < 10 ? '0' + seconds.toString() : seconds;
    mdiv.innerHTML = minutes < 10 ? '0' + minutes.toString() : minutes;
}

//change the guts of buttons, start/pause
function play_reset_change() {
    var play_icon = '<i class="fa fa-play-circle-o" aria-hidden="true"></i>',
        pause_icon = '<i class="fa fa-pause-circle-o" aria-hidden="true"></i>';
    startPauseButton.innerHTML = locRef.isPlaying ? pause_icon : play_icon
}

//steInterval guts
function minusSec() {
    if (minutes === 0 && seconds === 0) {
        if (!locRef.isBreak) {
            locRef.isBreak = true;
            minutes = locRef.breakTime;
            seconds = 0;
            updateTime();
        } else {
            locRef.isBreak = true;
            minutes = locRef.workTime;
            seconds = 0;
            updateTime();
        }
    } else if (minutes !== 0 && seconds === 0) {
        seconds = 59;
        minutes--;
        updateTime();
    } else {
        seconds--;
        updateTime();
    }
}
//initial time display
updateTime();

pubAcc.start = function () {
    locRef.isPlaying = true;
    //updateTime();
    play_reset_change();
    secondsHandle = setInterval(minusSec, 1000);
};
pubAcc.pause = function () {
    locRef.isPlaying = false;
    play_reset_change();
    clearInterval(secondsHandle);
};
pubAcc.reset = function () {
    locRef.isPlaying = false;
    locRef.isBreak = false;
    clearInterval(secondsHandle);
    minutes = locRef.workTime;

    seconds = 0;
    play_reset_change();
    updateTime();
};

startPauseButton.addEventListener('click', function () {
    if (!locRef.isPlaying) {
        pubAcc.start();
    } else {
        pubAcc.pause();
    }
});
resetButton.addEventListener('click', function () {
    pubAcc.reset();
});

return pubAcc;
};

var timer1 = timer_module(15,7,'i_want_pomodoro_here');

Answer 1

我已经将您的代码放入下面的代码片段中，以及一个jsFiddle，这样任何人都可以轻松地看到它是如何运行的。

var timer_module = function(wrkTime, brkTime, parentEl) {

  var locRef = {
      workTime: wrkTime ? wrkTime : 25,
      breakTime: brkTime ? brkTime : 10,
      seconds: 0,
      isPlaying: false,
      isBreak: false
    },
    seconds = locRef.seconds,
    minutes = locRef.workTime,
    pubAcc = {},
    secondsHandle, sdiv, mdiv, resetButton, startPauseButton;

  (function render_DOM_elements() {
    var array_of_elements = [{
      tag: 'section',
      id: 'tm_container',
      parent: parentEl,
      initialContent: ''
    }, {
      tag: 'div',
      id: 'tm_minutes',
      parent: 'tm_container',
      initialContent: ''
    }, {
      tag: 'div',
      id: 'tm_seconds',
      parent: 'tm_container',
      initialContent: ''
    }, {
      tag: 'div',
      id: 'tm_bcontainer',
      parent: 'tm_container',
      initialContent: ''
    }, {
      tag: 'button',
      id: 'tm_playStopButton',
      parent: 'tm_bcontainer',
      initialContent: '<i class="fa fa-play-circle-o" aria-hidden="true"></i>'
    }, {
      tag: 'button',
      id: 'tm_resetButton',
      parent: 'tm_bcontainer',
      initialContent: '<i class="fa fa-stop-circle-o" aria-hidden="true"></i>'
    }];

    function create_element(elementObject) {
      var el = document.createElement(elementObject.tag);
      var parent = document.getElementById(elementObject.parent);
      el.setAttribute('id', elementObject.id);
      el.innerHTML = elementObject.initialContent;
      if (!parent) {
        document.body.appendChild(el)
      } else {
        parent.appendChild(el)
      }
    }
    array_of_elements.forEach(create_element);

    sdiv = document.getElementById('tm_seconds');
    mdiv = document.getElementById('tm_minutes');
    startPauseButton = document.getElementById('tm_playStopButton');
    resetButton = document.getElementById('tm_resetButton');
  })();

  //update the dom/display and format(zero-pad) the time
  function updateTime() {
    sdiv.innerHTML = seconds < 10 ? '0' + seconds.toString() : seconds;
    mdiv.innerHTML = minutes < 10 ? '0' + minutes.toString() : minutes;
  }

  //change the guts of buttons, start/pause
  function play_reset_change() {
    var play_icon = '<i class="fa fa-play-circle-o" aria-hidden="true"></i>',
      pause_icon = '<i class="fa fa-pause-circle-o" aria-hidden="true"></i>';
    startPauseButton.innerHTML = locRef.isPlaying ? pause_icon : play_icon
  }

  //steInterval guts
  function minusSec() {
    if (minutes === 0 && seconds === 0) {
      if (!locRef.isBreak) {
        locRef.isBreak = true;
        minutes = locRef.breakTime;
        seconds = 0;
        updateTime();
      } else {
        locRef.isBreak = true;
        minutes = locRef.workTime;
        seconds = 0;
        updateTime();
      }
    } else if (minutes !== 0 && seconds === 0) {
      seconds = 59;
      minutes--;
      updateTime();
    } else {
      seconds--;
      updateTime();
    }
  }
  //initial time display
  updateTime();

  pubAcc.start = function() {
    locRef.isPlaying = true;
    //updateTime();
    play_reset_change();
    secondsHandle = setInterval(minusSec, 1000);
  };
  pubAcc.pause = function() {
    locRef.isPlaying = false;
    play_reset_change();
    clearInterval(secondsHandle);
  };
  pubAcc.reset = function() {
    locRef.isPlaying = false;
    locRef.isBreak = false;
    clearInterval(secondsHandle);
    minutes = locRef.workTime;

    seconds = 0;
    play_reset_change();
    updateTime();
  };

  startPauseButton.addEventListener('click', function() {
    if (!locRef.isPlaying) {
      pubAcc.start();
    } else {
      pubAcc.pause();
    }
  });
  resetButton.addEventListener('click', function() {
    pubAcc.reset();
  });

  return pubAcc;
};

var timer1 = timer_module(15, 7, 'i_want_pomodoro_here');

<!DOCTYPE html>
<html>

<head>
  <meta name="description">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="i_want_pomodoro_here">
  </div>
</body>

</html>

我的第一条建议是尽量避免过度使用逗号符号来声明变量：

var locRef = {
        workTime: wrkTime ? wrkTime : 25,
        breakTime: brkTime ? brkTime : 10,
        seconds: 0,
        isPlaying: false,
        isBreak: false
    },
    seconds = locRef.seconds,
    minutes = locRef.workTime,
    pubAcc = {},
    secondsHandle, sdiv, mdiv, resetButton, startPauseButton;

这是完全有效的JavaScript。但乍一看，它看上去有点混乱，因为您从每一个变量一行转到每一行多个变量，所有这些变量都与逗号串在一起。没有一种正确的方法可以做到这一点，但在这种情况下，我会坚持每行一个变量。

var locRef = {
    workTime: wrkTime ? wrkTime : 25,
    breakTime: brkTime ? brkTime : 10,
    seconds: 0,
    isPlaying: false,
    isBreak: false
};
var seconds = locRef.seconds;
var minutes = locRef.workTime;
var pubAcc = {};
var secondsHandle, sdiv, mdiv, resetButton, startPauseButton;

这是一个风格问题，所以如果你觉得上面的代码看上去不对，可以忽略我的建议。