더 나은 JavaScript 구성 및 실행 방해하지 않는 방법 - 자체 실행 익명 함수

Question

JavaScript를 더 잘 이해하고 있지만 특정 조직/실행 시나리오를 해결하는 최선의 방법에 대해 고민하고 있습니다.

저는 C# 배경에서 왔고 네임 스페이스 작업에 익숙해 져서 JavaScript로 이것을 달성하는 방법을 읽었습니다. 이미 큰 자바 스크립트 파일이되어 더 많은 논리적 인 부분으로 나누기 시작했습니다.

재사용 가능한 유틸리티 기능과 같은 두 개 이상의 페이지에 공통적 인 페이지 특정 JavaScript에 대해 페이지 당 하나의 파일을 다른 네임 스페이스 및 파일로 결정했습니다.

이것은 현재 나에게 의미가 있으며 적어도 개발 프로세스 중에는 대중적인 선택 인 것으로 보입니다. 어쨌든 번들링 도구를 사용하여 이러한 분산 된 파일을 배포하여 프로덕션에 배포하므로 개발을보다 논리적이고 쉽게 코드를 찾기가 더 수월하게 만듭니다. 이것은 분명히 멀리

common.js를

$(document).ready(function() { 
    var historyUrl = '/history/GetHistory/'; 
    $.getJSON(historyUrl, null, function (data) { 
     $.each(data, function (index, d) { 
      $('#history-list').append('<li>' + d.Text + '</li>'); 
     }); 
    }); 
}); 

: 사용자 정의 자바 스크립트를 많이 다루는 나의 경험 부족의 결과로

나는 일반적인 자바 스크립트에서 정의 된 함수는 다음과 같이 제기했다 응용 프로그램의 단일 페이지에만 한정되어 있지만 모든 페이지 요청에서 실행 중이므로 완전히 이상하지 않습니다. 완전히 바보가 아니더라도 완전히 무의미하고 비효율적입니다. 그래서 저를 먼저 네임 스페이스에서 읽는 것을 시작했습니다. 지금 페이지 특정 파일이 이동 한 읽기의 조금 후

이처럼 재 작성 :

는 historyPage.js

(function(historyPage, $, undefined) { 

    historyPage.GetHistory = function() { 
     var historyUrl = '/history/GetHistory/'; 
     $.getJSON(historyUrl, null, function (data) { 
      $.each(data, function (index, d) { 
       $('#history-list').append('<li>' + d.Text + '</li>'); 
      }); 
     }); 
    }; 
    }(window.historyPage = window.historyPage || {}, jQuery)); 

에 common.js를 옮겨 이 패턴은 jQuery Enterprise page에 있습니다. 아직 완전히 이해하지 못한 척하지만, JavaScript를 구성하고 실행하는 데 가장 인기 있고 가장 유연한 방법 인 것 같습니다. 다양한 범위로 전역 범위에서 물건을 지키는 것입니다.

그러나 지금 내가 고민하고있는 것은 실행 패턴에서이 패턴을 올바르게 사용하는 방법입니다. 또한 HTML Razor 뷰에서 JavaScript를 제거하고 눈에 잘 띄지 않게 작업하려고합니다.

그럼 실제로 실행해야하는 경우에만 historyPage.GetHistory 함수를 호출 할 수 있습니다. 예를 들어 사용자가 웹 사이트의 방문 페이지로 이동하여 함수 결과가 필요한 경우에만 사용할 수 있습니까?

Answer 1

다음

@if (IsSectionDefined("History")) 
    { 
     <script type="text/javascript"> 
      $(document).ready(function() { 
      @RenderSection("History", required: false) 
     }); 
     </script> 
    } 

History.cshtml에서 _Layout.cshtml에서

@section History 
{ 
    historyPage.GetHistory(); 
} 

코드는 사용자가 방문 기록을 요청한 경우에만 필요에 따라 실행됩니다. 웹 사이트의 페이지. 위의 @Dagg Nabbit의 의견이 저에게 커브 볼을 던져 옳은 길에 있다고 생각했지만 ... 음 ...

Answer 2

코드를 보면 가장 쉬운 테스트는 id 인 요소가 포함 된 페이지가 history-list인지 확인하는 것입니다. 이런 식으로 뭔가 :

이

var $histList = $('#history-list'); 

if($histList.length > 0){ 
    // EXECUTE THE CODE 
} 

정말 오직 하나의 특정 페이지에서 실행해야하는 경우지만, 어쩌면 그냥 공유 자바 스크립트 파일에 대한 좋은 후보가 아니다.내가 질문에 내가 수행하여 작업을 입수했습니다 위에 설명 한 코드를 사용