함수에 대한 Javascript JQuery 모범 사례

Question

나는 github을 시험해보고 거기에 작은 테스트 프로젝트를 넣을 것이다. 내가 JSHint을 통해 내가 도망 공개하지만 난 내가 흔들 수없는 오류가 발생하기 때문에 :

$(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); 
    } 

}); 

기능을 넣어하는 가장 좋은 방법은 다음과 같습니다

Line 21 preloadImages(); 

'preloadImages' is not defined. 

이 코드는? 맨위로?

다음은 범위의 시작 부분에 함수 선언 리프트 자바 스크립트 내 프로젝트 https://github.com/Benjaminsson/Image-expo

Answer 1

입니다. 따라서이 함수는 정의 된 위치에 상관없이 전체 범위 ($()에 전달 된 함수)에서 사용할 수 있습니다. JSLint는이를 올바르게 감지하지 못할 수도 있고 호출하는 시점에서 함수를 정의되지 않은 것으로 생각할 수도 있습니다.

Answer 2

일부 사람들은 함수 정의와 변수 선언을 범위의 맨 위에 (즉 함수의 시작 부분에) 두는 것이 좋습니다. 이는 자바 스크립트 인터프리터가 코드가 어디에 있든간에 그렇게 할 것이고, 코드가 인터프리터의 이해에 최대한 가깝다면 오류를 혼동하는 것을 방지하는 데 도움이되기 때문입니다.

이것은 스타일적인 선택입니다. 당신은 그것을 무시할 자유입니다. JSHint를 사용하면 "사용하기 전에 선언 할 변수 필요"옵션의 선택을 취소 할 수 있으며 코드가 전달됩니다.

은 (글쎄, 당신은 JSHint 보고서를 다른 오류를 정정 할 때!) 자바 스크립트 런타임이 첫 번째 코드 실행하기 전에 모든 라는 이름의 기능를 게양하기 때문에 귀하의 코드가 작동

Answer 3

:

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

베스트 연습은 모든 명명 된 함수을 실행 범위의 맨 위에 놓을 것입니다. 귀하의 경우 그것은 첫 번째 라인 이후입니다 : $(function() {

이것은 혼동을 피하기위한 것입니다.

) (자세한에서 http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting