Javascript JQuery лучшая практика для функций - PullRequest
Новая
       3

Javascript JQuery лучшая практика для функций

1 голос
/ 19 сентября 2011

Я пробую 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

Ответы [ 3 ]

1 голос
/ 19 сентября 2011

Ваш код работал, потому что среда выполнения JavaScript сначала поднимет все именованную функцию перед выполнением кода: 

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

Лучшая практика будет помещать всю вашу именованную функцию в верхнюю часть области выполнения; В вашем случае это после первой строки: $(function() {

Это сделано для того, чтобы избежать возможных недоразумений.

Подробнее на http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting

1 голос
/ 19 сентября 2011

JavaScript поднимает объявления функций в начале области. Таким образом, функция доступна во всей области видимости (функция передана в $()) независимо от того, где она определена. JSLint может не определить это должным образом и подумать, что функция не определена в точке, где вы ее вызываете.

0 голосов
/ 19 сентября 2011

Некоторые люди думают, что это хорошая идея, чтобы поместить все ваши определения функций и объявления переменных в верхнюю часть их области (то есть в начало функции). Это потому, что интерпретатор Javascript будет делать это, где бы ни находился ваш код, и это помогает избежать путаницы в ошибках, если ваш код максимально приближен к пониманию интерпретатора.

Это стилистический выбор; Вы можете игнорировать это. С помощью JSHint вы можете отменить выбор параметра «Требовать, чтобы переменные объявлялись перед использованием», и ваш код пройдет.

(Ну, это будет, когда вы исправите другие сообщения об ошибках JSHint!)

...