這個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：

與不推薦使用，而在5的ECMAScript嚴格 模式是被禁止的。建議的替代方法是將您想要訪問的對象的對象分配給臨時變量。

基本上，這意味着你必須在使用它之前將對象賦值給一個變量，這非常標準。 所以你的情況，你的代碼應該是這樣的：

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;