최근에 나는 백본을 배우고 있습니다. 백본을 이해하는 법을 배울 때는 먼저 스파를 이해해야합니다. SPA를 이해할 때 먼저 단일 페이지 응용 프로그램이 페이지를 새로 고치지 않고 URL을 변경하는 방법을 이해해야합니다.
Ajax는 다른 페이지로의 점프와 비교하여 사용자의 탐색 경험을 크게 향상 시켰다고 말할 수 있습니다. 페이지 전환 사이에 흰색 화면을 보지 않는 것은 매우 즐겁습니다. 그러나 많은 초기 AJAX 응용 프로그램은 브라우저의 전진 및 후진 이동을 지원하지 않았으므로 사용자는 웹 사이트에서 찾는 곳에 관계없이 원래 위치로 즉시 돌아갈 수 있었으며 사용자는 브라우저의 전진 및 후진 이동 버튼을 통해 브라우징 기록을 전환 할 수 없었습니다.
첫 번째 문제는 해결하기가 매우 쉽습니다. 쿠키 또는 로컬 스토리지를 사용하여 응용 프로그램 상태를 기록하십시오. 페이지를 새로 고칠 때이 상태를 읽은 다음 해당 AJAX 요청을 보내 페이지 변경하십시오. 그러나 두 번째 문제는 매우 번거 롭습니다. 먼저 현대식 브라우저의 솔루션에 대해 이야기합시다.
HTML5 솔루션
HTML5가 어떻게 진행되고 뒤로 향할 수 있는지 이해하려면 먼저 기록 객체와 위치 개체를 이해해야합니다.
역사 대상
역사 객체 속성
1. 길이 : 브라우저 기록 목록에서 URL 수를 반환합니다. 사용자가 현재 태그를 방문하는 각 페이지에 대해이 번호는 1으로 추가됩니다. 개인 정보 보호 이유로 인해 특정 URL 컨텐츠가 표시되지 않습니다.
2. 상태 : 현재 URL과 관련된 객체는 PushState 및 Replacestate를 통해서만 추가하거나 수정할 수 있습니다. URL과 관련된 정보를 저장하는 데 사용할 수 있습니다.
역사 객체 방법
1. History.back ()
이 방법에는 매개 변수가 없습니다. 트리거 후에는 브라우저의 뒤로 버튼을 클릭하는 것과 같습니다.
2. history.forward ()
이 방법에는 매개 변수가 없습니다. 트리거 후에는 브라우저의 전달 버튼을 클릭하는 것과 동일합니다.
3. History.go (번호)
이 메소드는 형성 변수 매개 변수, history.go (-1)가 페이지를 뒷받침하는 것과 동일합니다. history.go (1)는 페이지를 전진하는 것과 같습니다.
4. History.pushstate (State, Title, URL)
URL을 변경하고 페이지를 새로 고치지 않는 핵심은 그것입니다. 이 방법은 현재 페이지의 위치를 변경하고 현재 이력을 수정합니다. 실행 후 히스토리. 길이는 1 씩 증가합니다.이 방법은 세 가지 매개 변수를 허용합니다.
1. 상태 : 현재 URL과 관련된 객체.
2. 테이틀 : 페이지 제목이지만 모든 브라우저는이를 무시합니다. 제목을 변경하려면 여전히 Document.title을 사용해야합니다.
3.URL : 현재 페이지와 동일한 도메인을 가진 URL, location.href 가이 값이됩니다.
5. History.replacestate (상태, 제목, URL)
이 방법은 위와 동일하지만 히스토리가 변경되지는 않지만 히스토리와 위치 만 수정합니다.
세 번째 매개 변수 Pushstate 및 Relegestate는 도메인을 가로 지르지 못하고 브라우저의 Popstate 이벤트 및 OnhashChange 이벤트 (Chrome33에 따라 테스트)를 트리거하지 않습니다.
위치 개체
포워드/백 버튼 및 히스토리 이벤트를 클릭하는 것 외에도 위치 방법을 통해 URL을 변경하고 위치 특성을 수정할 수도 있습니다.
위치 개체의 속성 (읽기 및 쓰기) :
1. Host:Domain 이름 + 포트 번호
2. HostName : 도메인 이름
3. 포트 : 포트 번호
4. 보호대 : 프로토콜
5. href : 전체 경로
6. Origin : 프로토콜 + 도메인 이름 + 포트
7. Hash : 파운드 부호 (#)부터 시작하는 URL (해시)
8. PathName : 문서 경로 + 문서 이름
9. 검색 :(?) 다음 내용
위치를 변경하여 새로 고침의 목적을 달성 할 수 있습니다 .href 또는 location.hash.
위치 개체의 방법 :
1. 변호사 : URL 값을 변경하고 현재 URL을 히스토리에 추가합니다. 길이는 1. Location.Assig ( '#' + X)가 URL을 변경하지만 페이지를 새로 고치지 않습니다.
2. Reload : 페이지를 새로 고칩니다.
3. 다시 시작하십시오 : URL의 값을 변경하지만 히스토리. 길이는 변경되지 않습니다. 동일한 사용 방법이 할당됩니다.
팝 스테이트 이벤트
예를 들어 URL이 변경되면 사용자가 전진/뒤로 버튼을 클릭하면 histor.go (n) (n) (0), location.hash = x (x는 현재 위치와 같지 않습니다. 해시)는이 이벤트가 트리거됩니다. 이를 사용하여 URL을 모니터링하여 다양한 기능을 구현할 수 있습니다.
코드 사본은 다음과 같습니다.
Window.onPopState = function () {
// STH를 수행합니다
}
Onhashchange 이벤트
해시 값을 변경하면 PopState 이벤트가 트리거되며 PopSTATE 이벤트를 트리거하면 반드시 OnhashChange 이벤트가 트리거되는 것은 아닙니다. 테스트 후 :
1. 해시가 변경되지만 location.pathname은 변경되지 않은 상태로 유지됩니다.
2. 해시와 location.pathname이 함께 변경되면 history.pushstate ( ",", 'a#abc')와 같은 트리거되지 않습니다.
오래된 브라우저를 작성하는 방법
이전 브라우저는 PushSTATE 및 REPLACESTATE를 지원하지 않으므로 POPSTATE를 통해 URL 변경을 모니터링하는 방법 (실제로이 방법을 지원하지 않습니다). 그런 다음 URL# 뒤에있는 컨텐츠 만 변경하여 새로 고침을 달성하지 못하지만 OnhashChange를 지원하지 않으므로 URL 변경에 무관심합니다 (페이지가 페이지의 해당 ID 위치로 스크롤 함을 제외하고). 그런 다음 URL의 가치를 들으려면 궁극적 인 움직임과 SetInterval 만 사용할 수 있습니다. 이와 같이:
코드 사본은 다음과 같습니다.
var prevhash = window.location.hash;
var callback = function () {...}
window.setInterVal (function () {
if (window.location.hash! = prevhash) {
prevhash = window.location.hash;
콜백 (prevhash);
}
}, 100);
물론,이 글은 매우 실망 스럽습니다. 해시를 변경하기 위해 페이지에 ID가있는 A 태그를 클릭하는 것을 고려하지 않으면 설계 패턴을 사용하여 모니터링 URL을 우아하게 구현할 수 있습니다. 예를 들어, 클래식 옵저버 패턴은 클래스를 사용하여 해시 변경 기능을 구현 한 다음 URL의 변경 사항을 듣고이 (관찰자) 클래스를 구독하려는 모든 클래스 (관찰자)를 구현합니다.
코드 사본은 다음과 같습니다.
// URL 클래스를 변경합니다
함수 urlchanger () {
var _this = this;
this.observers = [];
// 관찰자를 추가합니다
this.addobserver = function (obj) {...}
// 옵저버를 삭제합니다
this.deleteobserver = function (obj) {...}
// 관찰자에게 알립니다
this._NotifyObservers = function () {
var 길이 = _this.observers.length;
Console.log (길이)
for (var i = 0; i <길이; i ++) {
_this.observers [i] .update ();
}
}
// URL을 변경합니다
this.changeurl = function (hash) {
Window.location.hash = 해시;
_this._NotifyObservers ();
}
}
// 청취 클래스
One OneofObservers () {
var _this = this;
this.update = function () {...}
}
//성취하다
var O1 = New UrlChanger ();
var o2 = 새로운 OneofObservers ();
o1.addobserver (O2);
O1.CHANGEURL ( 'fun/arg1/arg2/');
// O2는 STH ...