如何重构此 JavaScript 以删除 'with' 语句

Question

这是一个简单的时钟应用程序的JS。 ~~在 JS 中，不再使用 'with' 语句。~~ 我想帮助理解如何在删除使用 'with' 语句的同时保留功能。谢谢你。

function moveHands() {
  with (new Date()) {
    h = 30 * (getHours() % 12 + getMinutes() / 60); // 30 degrees for each hour
    m = 6 * (getMinutes()); // 6 degrees each minute
    s = 6 * (getSeconds()); 
    // now rotate the clock via changing css

    document.getElementById('hours').style.cssText = "-webkit-transform:rotate(" + h + "deg);";
    document.getElementById('minutes').style.cssText = "-webkit-transform:rotate(" + m + "deg);";
    document.getElementById('seconds').style.cssText = "-webkit-transform:rotate(" + s + "deg);";

    setTimeout(moveHands, 1000);
  }
}
window.onload = moveHands;

Answer 1

来自MDN with documentation：

Using with is not recommended, and is forbidden in ECMAScript 5 strict mode. The recommended alternative is to assign the object whose properties you want to access to a temporary variable.

基本上，这只是意味着您必须在使用对象之前将其分配给变量，这是非常标准的。所以在你的情况下，你的代码应该是这样的：

function moveHands() {
  var date =  new Date();
    h = 30 * (date.getHours() % 12 + date.getMinutes() / 60); // 30 degrees for each hour
    m = 6 * (date.getMinutes()); // 6 degrees each minute
    s = 6 * (date.getSeconds()); 
    // now rotate the clock via changing css

    document.getElementById('hours').style.cssText = "-webkit-transform:rotate(" + h + "deg);";
    document.getElementById('minutes').style.cssText = "-webkit-transform:rotate(" + m + "deg);";
    document.getElementById('seconds').style.cssText = "-webkit-transform:rotate(" + s + "deg);";

    setTimeout(moveHands, 1000);

}

window.onload = moveHands;

Answer 2

只需将日期分配给变量，然后显式调用该变量的日期方法。

function moveHands() {
  var currentDate = new Date();

  h = 30 * (currentDate.getHours() % 12 + currentDate.getMinutes() / 60); // 30 degrees for each hour
  m = 6 * (currentDate.getMinutes()); // 6 degrees each minute
  s = 6 * (currentDate.getSeconds()); 
  // now rotate the clock via changing css

  document.getElementById('hours').style.cssText = "-webkit-transform:rotate(" + h + "deg);";
  document.getElementById('minutes').style.cssText = "-webkit-transform:rotate(" + m + "deg);";
  document.getElementById('seconds').style.cssText = "-webkit-transform:rotate(" + s + "deg);";

  setTimeout(moveHands, 1000);
}
window.onload = moveHands;

Answer 3

我只会使用局部变量。

function moveHands() {
  var date = new Date();
  h = 30 * (date.getHours() % 12 + date.getMinutes() / 60); // 30 degrees for each hour
  m = 6 * (date.getMinutes()); // 6 degrees each minute
  s = 6 * (date.getSeconds()); 
  // now rotate the clock via changing css

  document.getElementById('hours').style.cssText = "-webkit-transform:rotate(" + h + "deg);";
  document.getElementById('minutes').style.cssText = "-webkit-transform:rotate(" + m + "deg);";
  document.getElementById('seconds').style.cssText = "-webkit-transform:rotate(" + s + "deg);";

  setTimeout(moveHands, 1000);
}
window.onload = moveHands;

如何重构此 JavaScript 以删除 'with' 语句

How would this JavaScript be refactored to remove the 'with' statement

javascript

refactoring

with-statement