단일 페이지 응용 프로그램에서 리소스로드 및 언로드

Question

단일 페이지 응용 프로그램을 개발하는 동안 몇 가지 의문점이 있습니다.

기본적으로 일부 html 파일이 서버에 있습니다. 동적으로, 나는이 파일들을 내 응용 프로그램으로 가져올 것이다. 이 경우이 html 파일로로드되는 리소스를 어떻게 추적 할 수 있습니까?

예를 들어, 내가 index.html 있다고 가정합니다. group.html을 가져 와서 index.html을 오버레이 (또는 대화 상자)로 추가한다고 가정 해 보겠습니다. 이 경우,이 group.html에 의해로드 된 리소스를 모니터링해야합니다. 왜냐하면, 그것들이 필요로하는 몇몇 js, css 파일들을 로딩 할 수 있기 때문입니다. 이 오버레이를 닫으 려 할 때도 이러한 리소스를 언로드해야합니다. 어떻게 추적 할 수 있습니까?

또한 $ .get은 SPA에서 정말 유용합니까? 왜냐하면 내가 DOM에 HTML을 추가하면 어떻게 제거 할까?

또한 SPA에서 html 요소에 id 속성을 사용하지 않아야합니까? 왜냐하면 페이지간에 충돌이있을 수 있습니다.

Answer 1

정규식을 사용하여 스크립트 및 CSS를 찾은 다음 관련 줄을 index.html 헤드에 추가하여 별도로로드 할 수 있습니다. 그러나 사이트의 모든 페이지를 처리하는 단일 JavaScript 파일을 사용하는 것이 가장 좋습니다.

ID의 경우 충돌을 피하는 명명 규칙을 사용할 수 있습니다. 예 :

<div id="page1_id1"></div> 

자산을 언로드하는 것에 대해 걱정할 필요가 없습니다. 브라우저는 쓰레기 수거에 능숙합니다. 전역 변수 이름 등에서 충돌이 없는지 확인하십시오.

Answer 2

로드 할 리소스를 모니터링해야하는 경우 크롬 관리자를 사용하십시오. 그러나 귀하의 경우 왜 index.html을로드 할 때 필요한 모든 파일을로드하지 마십시오. 그러면 group.html을 요청할 때 모든 js와 css가 이미 있습니다.

ID의 클래스와 목적이 다릅니다. 예를 들어 클래스를 사용하여 불가능한 링크로 ID를 사용할 수 있습니다.

ID를 의미 적으로 사용하면 모든 것이 정상적으로 작동합니다. 각 요소는 하나의 ID 만 가질 수 있으며 각 페이지는 해당 ID를 가진 요소를 하나만 가질 수 있습니다.

Answer 3

정직하게는 용도와 목적에 따라 다릅니다. 단일 페이지 응용 프로그램은 콘텐츠가 어느 정도 성장 하는지를 처음에 알았을 때 이상적인 솔루션입니다. 이 시나리오에서는 컨텐츠 페이지를 탐색에 바인딩하고 원하는대로 간단히 추가 할 수 있습니다.

어려운 문제는 아니지만 리소스 관리를위한 한 가지 시나리오는 추적을 위해 전역 변수/개체를 사용하는 것입니다. 이것은 개념의 아주 초보적인 예입니다. 이것은 기존의 일부 응용 프로그램에 사용되는 기초이므로 작동 할 수 있습니다. 트릭은로드 된 컨텐츠와 리소스를 추적하고 호출 할 onready 메소드를 관리하는 것입니다. 일반적으로 콘텐츠로드시 호출되는 초기 함수 인 "contentOnReady()"와 같은 함수가 있고 배가 항해 한 내용을로드 할 때와 같은 의사 $ (document) .OnReady 역할을합니다.

var resources = {group:{script:'group.js'}}; 
var includesPath = 'content/'; 
var currentLoadedContent = 'defaultpage.html'; 
var callbackAssigned = false; 
var callbackMethod; 


    function initContent(){ 
    callbackAssigned = true;          //--set flag for callback 
    callbackMethod = function(){onGroupLoad('group loaded');}  //--set function to run on content load callback 
    loadContent('group'); 
} 

function loadContent(page){ 
    if(page != currentLoadedContent){ 
    currentLoadedContent = page; 
     //--retrieve your content 
     $.get(includesPath + page + '.html', function(data) { 

      //--based on the page, you can assign specific methods and load any dependencies 
       switch(page){ 
        case 'group': 
        $.getScript('scripts/' + resources[page]['script']) 
        break; 
       } 

       /* 
       alternatley you can simply assign a call back prior to loading the content, 
       and then run upon load completion (this example has a delay prior to callback execution, 
       which can be helpful if using any jQuery animation functions to allow them to complete) 
       */ 
       if(callbackAssigned){ 
       window.setTimeout("callbackMethod()",500); //--run assigned callback function 
       callbackAssigned = false; 
      } 
     }); 
    } 
} 

function onGroupLoad(message){ 
    alert(message); 
} 

닷넷이 실제로 필요한 모든 로직과 함께 전체 페이지를 넣어하는 것입니다 사용 후 그냥 페이지를 얻을 때 동료가 사용하는 또 다른 옵션을 선택합니다. 스크립트와 리소스가로드되고 구워진 자체 페이지로 생각하십시오.주의 사항은 스크립트 (예 : 스크립트)의 경로입니다.나는 유지하기가 더 어려워지고 경로는 두통이지만 그것이 효과가 있다고 생각합니다.

모든 개인적인 취향이며 프로젝트에 따라 다릅니다. 희망은 다른 관점을 제공하는 데 도움이됩니다.