한 페이지 디자인

Question

경우 어떻게 사용 하나의 HTML 페이지,

<div id="page1" style="display:block">...</div> 

<div id="page2" style="display:none">...</div> 

<div id="page3" style="display:none">...</div> 

활성 블록을 다음과 같이 스타일 = "디스플레이 : 블록"이없는 사람 "디스플레이 : 없음", 을 블록이 활성화 될 때 " display : 블록 "previous goes"디스플레이 : none ".

AJAX 서버 통신, 예를

에 대한

$.post("json", { "name": $("#name").val(), "sex": $("#sex").val() }, 
function(data) { console.log("server responded", data); }); 

이 방법의 단점은 무엇입니까?

Answer 1

순수한 AJAX를 사용하는 데는 단점이 없습니다. 사실, 많은 방법으로, 그 유리한.

올바르게 계획하지 않은 경우 몇 가지 문제점이있을 수 있습니다. 예를 들어 한 번에 CSS 효과를 1 페이지 씩 사용하는 데 익숙하지만 순수한 AJAX를 사용하면 CSS가 모든 단일 페이지에 영향을 미칩니다.

또한 모든 것이 약간 더 어려워집니다. 자바 스크립트를 사용해야하므로 다른 페이지로 연결하는 것이 어려워집니다.

마지막으로 APP에 JavaScript가 필요할 것이므로 적절하게 대체해야합니다.

Answer 2

이것은 빠르고 동적이지만 데이터가 동적이기 때문에 사용자가 특정 링크를 저장할 수 없으며 검색 엔진 친화적이지 않기 때문에 또 다른 단점은 검색 버튼이 뒤로 이동하지 않는다는 것입니다 작업.

Answer 3

이 접근 방식은 jQuery Mobile과 같은 일부 모바일 웹 프레임 워크에서 사용되며 웹 응용 프로그램의 기본 느낌을 높이기위한 것입니다. 이것은 웹 사이트 2.0 또는 웹 사이트의 각 페이지 전환 서버와 관련된 웹 응용 프로그램보다 전통적인 웹 사이트입니다.

나는 장점을 이미 알고 있으므로 단점을 계속 해결해 보겠습니다.

약간 큰 초기 대기 시간 :

이 방법의 가장 큰 단점은 때문에 당신이 서버에서 HTML을 모두 얻고 있다는 사실에 페이지 내용을로드 약간 더 오래 걸릴 것입니다 단 한 번의 여행. 따라서 초기로드 시간에는 기존의 Web 1.0 응용 프로그램보다 지연 시간이 더 길 수 있습니다. 그러나 몇 페이지 만 있으면 내 경험에 비추어 볼 때 대기 시간이 문제가되기에 충분하지 않습니다. 돌아 가기 버튼의

손실 - 유지 보수 역사에 더 많은 복잡성 :

또 다른 잠재적 인 단점은 개발자로서, 당신은 다른 사이트의 개발을 접근해야한다는 것입니다. 하나의 DIV 블록을 숨기고 다른 블록을 숨김으로써 페이지를 전환하기 때문에 원래의 뒤로 버튼 기능이 손실됩니다. 이는 URL의 해시를 사용하여 페이지 전환 기록을 기록함으로써 완화 할 수 있습니다. 그런 다음 사용자가 뒤로 탐색 할 때 해시를보고 이전 내용을 다시로드하기 위해 이벤트를 등록해야합니다. 또한 자바 객체와 변수의 상태를 변경하여 이전 상태를 변경해야하므로 앱이 복잡해질 수 있습니다. 물론 구현하기 쉽고 유지 보수가 잘되는 코드를 작성하는 데 도움이되는 API와 라이브러리가 있습니다.

마지막으로, 당신은 각 페이지의 범위는 각 전환 후 다시하지 않는다는 것을 기억해야합니다 :

더 스테이트 범위는 다시 생각 접근 가능한 학습 곡선을 포함한다. 앱이 더 많은 정보를 제공한다는 점에서 실제로 이점이 될 수 있지만,로드 된 각 페이지가 JavaScript 변수와 데이터를 모두 지우는 것으로 생각하는 방식으로 자신을 속박해야합니다.

는

요약 :이 경로를 이동하는 거라면

나의 제안은, 라이브러리를 사용하는 것입니다. 정당한 이유가없는 한 바퀴를 재발 명하지 마십시오. jQuery 모바일과 같은 라이브러리를 사용하면 구형 브라우저의 대체 기능을 사용할 수 있으며 일부는 JavaScript가 비활성화 된 경우에도 웹 1.0 기술을 사용하여 사이트가 계속로드되는지 확인합니다.