버그 수정 및 자바 스크립트 코드 최적화에 도움이 필요합니다.

Question

저는이 웹 페이지를 개선하기 위해 노력해 왔으며 다음 코드를 볼 때 모두 웃을 것이라고 확신합니다. 그러나 제가가는대로 스스로 가르치고 있습니다. 나는 내 자신을 얼마나 멀리 할 수 ​​있었는지 조금 자랑 스럽다. 문제는지도에서 여러 도시를 클릭하기 시작하면 내가 한 일은 다소 버그가있는 것이지요. 알아낼만큼 정통하지는 않습니다. 또한 코드를 작동시키는 데 긴 경치 좋은 길을 택 했으므로 누구나 코드 작성 방법을이 사람에게 가르쳐 줄 수 있기를 희망합니다.

당신은 여기에 전체 개발 볼 수 있습니다 http://buhmanphotography.com/map/buggyCode/

$(document).ready(function() { 
     // Show the Map Container 
     $('.locBox a').click(function (e) { 

      // Initialize info for clicked location 
      var initLocInfo = $(this).attr("rel") + "Ctn"; 

      // Show Initial Information 
      $('#' + initLocInfo).show(); 
      $('#' + initLocInfo).css('opacity','1'); 
      $('#' + initLocInfo).addClass('modActive'); 


      // Initialize Button State on Map 
      var initLocBtn = $(this).attr("rel") + "Btn"; 
      $('#' + initLocBtn).css('backgroundPosition','top'); 

      // Open Map Box 
      $("#mapModalCtn").show(); 
      $("#mapModalCtn").animate({ 
       opacity: 1 
      }, 500); 
      e.preventDefault(); 
     }); 

     // Hide the Map Container 
     $('#modalTitle a').click(function (e) { 
      $("#mapModalCtn").animate({ 
       opacity: 0 
      }, 500, function() { 
       $("#mapModalCtn").hide(); 
       $('#modLeftCol > div').removeClass('modActive'); 
       $('#modLeftCol > div').hide(); 
       $('#modRightCol a').css('backgroundPosition','bottom'); 
      }); 
      e.preventDefault(); 
     }); 

     // Show the info for the selected Location on the Map 
     $('#modRightCol a').click(function (e) { 
      e.preventDefault(); 
      var locInfo = $(this).attr("rel") + "Ctn"; 
      var locBtn = $(this).attr("rel") + "Btn"; 

      // Change Map Location Button State 
      $('#modRightCol a').css('backgroundPosition','bottom'); 
      $(this).css('backgroundPosition','top'); 

      // Hide currently visible information 
      if ($('#modLeftCol > div').hasClass('modActive')) { 
       $("#modLeftCol > div").animate({ 
        opacity: 0 
       }, 500, function(){ 
        $("#modLeftCol > div").hide(); 
        $("#modLeftCol > div").removeClass('modActive'); 

        //Show information related to location clicked 
        $('#' + locInfo).show(); 
        $('#' + locInfo).animate({ 
          opacity: 1 
         }, 500, function(){ 
          $('#' + locInfo).addClass('modActive'); 
         }); 
       }); 
      } 


     }); 

    }); 

Answer 1

Need help fixing bugs and optimizing javascript code

내가 당신에게 몇 가지 일반적인를 제공하기 위하여려고하고있다 : 여기 http://buhmanphotography.com/map/

는 버그 제가 보는의 비디오입니다 조언. 일반적으로 무언가가 완벽하게 효율적인지 걱정하기 전에 뭔가를 얻는 것이 좋습니다. 그렇다고 의도적으로 비효율적 인 방법으로 일을해야한다는 의미는 아니지만 최적화가 필요한 것보다 정확해야합니다.

코드를 다시 검토하여 작업 한 후에 최적화 할 수 있습니다. 나는 내가 (그것을 완성하기 전에) 효율적으로 무언가를 만들기에 너무 열심히 집중한다면 나는 그것을 끝내지 않을 것이라고 발견했다.

코드를 더 잘 만드는 것은 일을 캐시하는 것입니다. 예를 들어

는 수행

var container = $('#container'); 
container.css({ ‘background-color’ : ‘#f00’}); 
container.bind(‘click’, function() { do something }); 

대신에 :

$(‘#container’).css({‘background-color’ : ‘#f00’}); 
$(‘#container’).bind(‘click’, function() { do something }); 

매번 당신이 $ ('someElement')을 할이 시간이 걸립니다. 해당 요소를 찾으려면 전체 DOM을 검색해야합니다. 이 DOM 요소를 자주 참조하는 경우이 요소에 대한 참조를 저장하고이 참조를 사용하는 것이 좋습니다. 따라서 이러한 모든 불필요한 조회를 제거하십시오.

가능한 경우 jquery의 대리자를 사용하는 것에 대해 생각해 볼 또 다른 사항은 jquery의 대리자입니다. 같은 지역 내에 많은 청취자가있는 경우 대표가 좋습니다. 예를 들어

오히려 다음 .locBox 클래스의 모든 링크에 클릭 리스너를 추가 :

$('.locBox a').click(function (e) { 

이런 식으로 뭔가를 수행하는 것은 :

$(‘.locBox’).delegate(‘a’, ‘click’, function() { … do something … }); 

이 좋은 지금 당신이 있기 때문에 각 .locBox에 하나의 리스너 만 있고 링크 태그 클릭이 위로 올라가면 이벤트 핸들러가 실행될 때까지 기다립니다.

"버그가있는"동작에 대해서는 언급하지 않았지만 향후 프로젝트에서 유용하게 사용할 수있을 것입니다.