Javascript JQuery 函数的最佳实践答案

【问题标题】：Javascript JQuery best practise for functionsJavascript JQuery 函数的最佳实践
【发布时间】：2011-09-19 11:36:53
【问题描述】：

我正在尝试 github 并且我会在那里放一个小型测试项目。由于它是公开的，我通过 JSHint 运行了我，但我得到了一个我无法摆脱的错误：

Line 21 preloadImages();

'preloadImages' is not defined.

这是代码：

$(function() {

    var allImagesLoaded = false, imagesLength = 0, counter = 0, imageArray = [], loadedImages = [], loadedImagesCounter = 0;

    /*--------------------------------
    Add your images to the array
    and your good to go
    --------------------------------*/
    imageArray = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];
    imagesLength = imageArray.length;

    if(imagesLength === 0) {
        $('#container').html('<p><strong>You need to put some images in your array</strong></p>');
    }
    else {

        preloadImages();
    }

    function preloadImages() {
        var tempImage = $("<img />").attr("src", imageArray[loadedImagesCounter]);

        tempImage.load(function(){

            loadedImages.push(this);
            loadedImagesCounter++;
            if(loadedImagesCounter == imagesLength) {
                imageArray = loadedImages;
                initEverything();
            }
            else {
                if(!allImagesLoaded)
                {
                    preloadImages();
                }
            }       
        });
    }

    function initEverything() {


        allImagesLoaded = true;
        $('#preloadingImages').hide();

        // Deactivate the context menu that appears on right click
        $(document).bind("contextmenu", function(e) {
            return false;
        });

        var theSource = $(imageArray[0]).attr('src');

        var theImage = $('<img />');
        $(theImage)
            .attr('src', theSource)
            .attr('width', imageArray[0].width)
            .attr('height', imageArray[0].height)
            .attr('alt', 'demobild 1')
            .attr('id', 'pageImage');

        $('#container').append(theImage)

        $("#pageImage").mousedown(function(e) {
            if (allImagesLoaded) {
                switch (e.which) {
                    case 1:
                        stepForward();
                        break;
                    case 2:
                        // center button on the mouse
                        break;
                    case 3:
                        stepBackward();
                        break;
                    default:
                        // Nada
                }
            }
        });
        $(document).keydown(function(e) {
            e.preventDefault();
            if (allImagesLoaded) {
                switch (e.keyCode) {
                    case 37: // Left
                        stepBackward();
                        break;
                    case 38: // Up
                        stepBackward();
                        break;
                    case 39: // Right
                        stepForward();
                        break;
                    case 40: // Down
                        stepForward();
                        break;
                    default:
                        // Nada
                }
            }
        });

    }

    function stepForward() {

        if (counter === imagesLength-1) {
            counter = 0;
        } else {
            counter++;
        }
        $("#pageImage").attr("src", $(loadedImages[counter]).attr('src'));
        $("#pageImage").attr("alt", "demobild " + counter);
    }

    function stepBackward() {

        if (counter === 0) {
            counter = imagesLength-1;
        } else {
            counter--;
        }
        var sourcePath = $(imageArray[counter]).attr('src');
        $("#pageImage").attr("src", sourcePath);
        $("#pageImage").attr("alt", "demobild " + counter);
    }

});

放置函数的最佳实践在哪里？在顶部？

这是我的项目 https://github.com/Benjaminsson/Image-expo

【问题讨论】：

@Daniel：不。这是一个常规函数。

标签： javascript jquery jshint

【解决方案1】：

JavaScript 将函数声明提升到作用域的开头。因此该函数在整个范围内都可用（传递给$() 的函数），无论它在哪里定义。 JSLint 可能无法正确检测到这一点，并认为该函数在您调用它时处于未定义状态。

【讨论】：

JSLint/JSHint 必须进行两次传递（一次用于提升函数，一次用于解析文档）。他们没有。但是为了可读性，将函数放在顶部仍然很有价值
所以最好的做法是这个顺序？变量、函数、初始化代码？
没关系。以使其最具可读性的方式进行。

【解决方案2】：

您的代码有效，因为 JavaScript 运行时会在代码执行之前首先提升所有命名函数：

alert(typeof(preloadImages)); // "function
function preloadImages() {
    // your code
}

最佳实践将把你所有的命名函数放在执行范围的顶部；在您的情况下，它位于第一行之后：$(function() {

这是为了避免任何可能的混淆。

【讨论】：

【解决方案3】：

有些人认为将所有函数定义和变量声明放在其作用域的顶部（即函数的开头）是个好主意。这是因为无论您的代码在哪里，Javascript 解释器都会这样做，并且如果您的代码尽可能接近解释器对它的理解，它有助于避免混淆错误。

这是一种风格选择；你可以忽略它。使用 JSHint，您可以取消选择“需要在使用前声明变量”选项，您的代码将通过。

（好吧，当您更正 JSHint 报告的其他错误时，它就会出现！）

【讨论】：