功能的Javascript jquery最佳實踐

我試着github和thpught我會把一個小測試項目在那裏。既然是公共我跑我通過JSHint，但我得到一個錯誤，我不能動搖：功能的Javascript jquery最佳實踐

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

來源

2011-09-19 Johan B

this.preloadImages（）; ？ –

@Daniel：不，這是一個常規功能。 – ThiefMaster

的JavaScript吊函數聲明爲範圍的開始。所以函數在整個範圍內都可用（函數傳遞給$()），無論它在哪裏定義。 JSLint可能無法正確檢測到這種情況，並認爲該函數在您調用它的位置處未定義。

來源

2011-09-19 11:40:50 ThiefMaster

JSLint/JSHint將不得不進行兩次傳遞（一個用於提升函數，另一個用於解析文檔）。他們不。但爲了可讀性，將函數放置在頂部仍然很有價值 – Raynos

因此，最佳實踐是這樣的順序嗎？變量，函數，init代碼？ –

沒關係。這樣做是爲了使其更具可讀性。 – ThiefMaster

有些人認爲把所有的函數定義和變量聲明放在其作用域的頂部（即在函數的開頭）是一個好主意。這是因爲無論您的代碼在哪裏，Javascript解釋器都會這樣做，並且如果您的代碼儘可能接近解釋者對它的理解，這有助於避免混淆錯誤。

這是一種文體選擇;你可以自由地忽略它。使用JSHint，您可以取消選中「需要在使用前聲明變量」選項，並且您的代碼將會通過。

（當然，它會在您更正其他錯誤JSHint報告！）

來源

2011-09-19 11:46:40 lonesomeday

你的代碼工作，因爲JavaScript運行時會首先扯起所有命名的功能代碼執行前：

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

最好練習將把您所有的命名函數置於執行範圍的頂部;在你的情況下，它是在第一行之後：$(function() {

這是爲了避免任何可能的混淆。

來源

2011-09-19 11:58:09

功能的Javascript jquery最佳實踐

回答

相關問題