javascript - 范围或功能提升问题？我不知道

Question

如下所示，我制作了一个简单的高分数组，保存到本地存储并添加到用户提示中。

作为一个独立的文件，它本身就很好用。或者至少看起来是这样。

但是，当我尝试将它集成到我的大型应用程序中时，我的全局变量 allScores 似乎遇到了范围问题。数组的长度保持为 0。我检查了是否有任何重复的变量，但我没有。

我一直在尝试阅读有关函数提升和作用域的内容。我不确定为什么下面的代码作为一个独立的文件工作，但是当我将它集成到我的更大的应用程序中时，我遇到了范围问题。

我应该如何以不同的方式来做这件事？由于我是 JavaScript 的新手，所以我的最佳实践很可能已经过时了。感谢您的指导。谢谢。

var allScores = [];

function saveScore() {

if (allScores.length === 0) {
    allScores[0]= prompt('enter score', '');
    localStorage ['allScores'] = JSON.stringify(allScores);
}

else if (allScores.length < 3) {
    var storedScores = JSON.parse(localStorage ['allScores']);
    storedScores = allScores;
    var injectScore = prompt('enter score', '');
    allScores.push(injectScore);
    allScores.sort(function(a, b) {return b-a});
    localStorage ['allScores'] = JSON.stringify(allScores);
}

else {
    var storedScores = JSON.parse(localStorage ['allScores']);
    storedScores = allScores;
    var injectScore = prompt('enter score', '');
    allScores.pop();
    allScores.push(injectScore);
    allScores.sort(function(a, b) {return b-a});
    localStorage ['allScores'] = JSON.stringify(allScores);
}
document.getElementById('readScores').innerHTML = allScores;
}**

Answer 1

由于您在问题中提到了最佳实践，因此我重构了您的代码以展示一些可能在未来对您和其他人有所帮助的实践。此重构中使用的概念列表如下。

var saveScore = (function () { /* Begin IIFE */
    /*
    The variables here are scoped to this function only.
    They are essentially private properties.
    */
    var MAX_ENTRIES = 3;

    /*
    Move the sorting function out of the scope of saveScore,
    since it does not need any of the variables inside,
    and possibly prevent a closure from being created every time
    that saveScore is executed, depending upon your interpreter.
    */
    function sorter(a, b) {
        return b - a;
    }

    /*
    As far as your example code shows, you don't appear to need the
    allScores variable around all the time, since you persist it
    to localStorage, so we have this loadScore function which
    pulls it from storage or returns a blank array.
    */
    function getScores() {
        var scores = localStorage.getItem('scores');
        return scores ? JSON.parse(scores) : [];
        /*
        Please note that JSON.parse *could* throw if "scores" is invalid JSON.
        This should only happen if a user alters their localStorage.
        */
    }

    function saveScore(score) {
        /* Implicitly load the scores from localStorage, if available. */
        var scores = getScores();

        /*
        Coerce the score into a number, if it isn't one already.
        There are a few ways of doing this, among them, Number(),
        parseInt(), and parseFloat(), each with their own behaviors.

        Using Number() will return NaN if the score does not explicitly
        conform to a textually-represented numeral.
        I.e., "300pt" is invalid.

        You could use parseInt(score, 10) to accept patterns
        such as "300pt" but not anything with
        leading non-numeric characters.
        */
        score = Number(score);

        /* If the score did not conform to specifications ... */
        if (isNaN(score)) {
            /*
            You could throw an error here or return false to indicate
            invalid input, depending on how critical the error may be
            and how it will be handled by the rest of the program.

            If this function will accept user input,
            it would be best to return a true or false value,
            but if a non-numeric value is a big problem in your
            program, an exception may be more appropriate.
            */

            // throw new Error('Score input was not a number.');
            // return false;
        }

        scores.push(score);
        scores.sort(sorter);

        /*
        From your code, it looks like you don't want more than 3 scores
        recorded, so we simplify the conditional here and move
        "magic numbers" to the header of the IIFE.
        */
        if (scores.length >= MAX_ENTRIES) {
            scores.length = MAX_ENTRIES;
        }
        /* Limiting an array is as simple as decreasing its length. */

        /* Save the scores at the end. */
        localStorage.setItem('scores', JSON.stringify(scores));

        /* Return true here, if you are using that style of error detection. */
        // return true;
    }

    /* Provide this inner function to the outer scope. */
    return saveScore;

}()); /* End IIFE */

/* Usage */
saveScore(prompt('Enter score.', ''));

如您所见，通过将分数处理逻辑封装在此函数上下文中，几乎没有任何东西可以在不使用接口(interface)的情况下篡改内部。理论上，您的 saveScore 函数可以被其他代码取代，但是 IIFE 上下文的内部只对那些有权访问的人是可变的。虽然有 no constants 还 standardized ECMAScript ，这种模块模式的方法论提供了一个具有可预测结果的体面的解决方案。

• > IIFE ，一个立即调用的函数表达式，用于创建我们的模块
• > DRY , 不要重复自己:代码重用
• > Magic numbers , 及其消除
• > Type coercion of a string to a number
• > Error handling ，以及异常或返回代码使用之间的辨别。相关:8 , 9