pushState, popState 및 location.hash 메소드를 사용하여 작은 경로를 직접 구현하세요.

본 글은 HTML5의 히스토리에서 제공하는 pushState와 replacementStateAPI를 주로 기록하고 있습니다. 마지막으로 이러한 API를 통해 소규모 라우팅을 직접 구현하세요.

window.history에서 제공하는 API는 Mozilla 문서를 참고하세요.

history에서 제공하는 pushState, replacementState API는 브라우저 히스토리 스택을 동작시키기 위한 메소드를 제공합니다.

pushState:

history.pushState(data, null, '#/page=1');
    
    pushState接收3个参数，第一个参数为一个obj,表示浏览器
    
    第二个参数是document.title的值，一般设定为`null`
    
    第三个参数string，用以改变 当前url

pushState 메소드는 URL을 변경하는 동안 새 기록 레코드를 브라우저 기록 스택에 푸시합니다.

URL을 받는 매개변수는 문자열 형식으로 현재 주소 표시줄의 URL을 변경하는 데 사용됩니다. 주의할 점은 이 매개변수가 크로스 도메인과 동일할 수 없다는 점입니다. 프로토콜, 도메인 이름 및 포트는 동일해야 합니다. 교차 도메인이 있는 경우 도메인의 경우

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://www.baidu.com/' cannot be created in a document with origin 'http://commanderXL.com' and URL

예:

打开www.baidu.com

    history.pushState(null, null, '?page=1')    //地址栏变成 www.baidu.com/?page=1
    
    history.pushState(null, null, '#page=2');    //地址栏变成 www.baidu.com/#page=2

<🎜 메시지가 표시됩니다. >replaceState:

history.replaceState(null, null, '#page=2');

replaceState는 동일한 매개변수 pushState를 받지만 최종 효과는 다음과 같습니다. 주소 표시줄 URL은 받은 매개변수에 따라 변경되지만 브라우저는 브라우저 기록을 현재 검색 기록 스택이지만 현재 브라우저 기록을 대체합니다.

pushState 및 replacementState를 통해 URL을 변경할 수 있지만 브라우저 새로고침을 적극적으로 실행하지는 않습니다.

window 개체는 popstate 메서드도 제공합니다.

window.addEventListener('popstate', function() {
        
    });

이 메서드는 브라우저가 서로 다른 기록 레코드 간에 전환하고 해당 이벤트를 트리거하도록 수신 대기하는 데 사용됩니다.

브라우저에서 제공하는 기록 개체에는 사용자가 브라우저의 앞으로 및 뒤로 버튼을 클릭하는 것을 시뮬레이션하기 위한 이동 및 뒤로 메소드도 있습니다. 예를 들어 특정 웹 애플리케이션에서는 태그를 클릭하면 페이지 이동이 발생합니다. 이때,history.back(); 메소드를 호출한 후 페이지가 돌아가고 동시에 페이지가 새로 고쳐집니다. 이때 window.onpopstate에서는 이 이벤트를 모니터링할 수 없습니다. 그러나 브라우저 새로 고침 없이 pushState 또는 replacementState를 통해 URL이 변경된 경우 popstate 이벤트가 트리거되도록 History.back() 또는 History.go()를 사용하십시오.

history.pushState({page: 1}, null, '?page=1');
    history.pushState({page: 2}, null, '?page=2');

    history.back(); //浏览器后退

    window.addEventListener('popstate', function(e) {        //在popstate事件触发后,事件对象event保存了当前浏览器历史记录的状态.
        //e.state保存了pushState添加的state的引用
        console.log(e.state);  //输出 {page: 1}
    });

PS: pushState를 통해 URL에 ?page=1을 추가하면 location.search를 통해 검색 콘텐츠를 얻을 수 있습니다. 그러나 location.search를 통해 URL을 변경하면 브라우저가 적극적으로 다시 로드됩니다. 이 기능은 아래의 해싱에 대한 내용과 비교할 수 있습니다.

이제 API에 대한 전반적인 이해를 마쳤으니 이러한 방법을 어디에 적용할 수 있을까요? 보다 일반적인 시나리오는 단일 페이지 애플리케이션에서 이러한 API를 통해 프런트엔드 라우팅 설계를 완료하는 것입니다. 브라우저를 새로 고치지 않고 URL을 변경하려면 pushState 및 replacementState를 사용하고, 일련의 비동기 작업을 완료하려면 popstate를 사용하세요. 행위.

addRoute('/login', function() {
        //do something
    })
    
    
    //路由处理
    const routeHandle = (path) => {
        Router.forEach((item, index) => {
            if(item.path === path) {
                item.handle.apply(null, [path]);
                return true;
            }
        })
        return false;
    }
    
    
    //拦截默认的a标签行为
    document.addEventListener('click', function(e) {
        let dataset = e.target.dataset;
        if(dataset) {
            if(routeHandle(dataset.href)) {
                //阻止默认行为
                e.preventDefault();
            }
        }
    })

일반적인 아이디어는 를 통해 라우팅 정보를 추가한 다음 태그의 기본 동작을 가로채서 등록된 라우팅 정보와 일치시키는 것입니다. 일치에 성공하면 해당 핸들 메소드가 호출됩니다.

그러나 pushState 및 replacementState 메소드는 하위 버전의 IE 브라우저와 잘 호환되지 않습니다. 따라서 라우팅 설계를 위해 다운그레이드하고 해시를 사용할 수 있습니다.

해시? 찔러주세요.

location.hash를 통해 URL의 첫 번째 #(fragment)과 다음 콘텐츠를 얻을 수 있습니다. 동시에 브라우저를 다시 로드하지 않고도 location.hash를 통해 콘텐츠를 다시 작성할 수 있습니다. 일부 기능은 pushState 및 replacementState와 동일합니까? 따라서 하위 버전의 브라우저와도 호환이 가능하도록 # 변경 사항을 모니터링하여 라우팅 설계를 수행할 수 있습니다.

그럼 어떻게 모니터링하나요? 좀 더 조잡한 방법 중 하나는 여론 조사입니다.

var oldHash = location.hash;
    setTimeInterval(function() {        if(oldHash !== location.hash) {            
            //do something
        
            oldHash = location.hash;
        }
    }, 100);

그러나 H5는 hashchange라는 API도 제공합니다. 위의 폴링 방법을 직접 대체하여 #의 변경 사항을 모니터링할 수 있습니다.

window.addEventListener('hashchange', function() {
        routeHandle(locaiton.hash);
    });

이 작은 라우팅 디자인은 제 github에서 보실 수 있습니다.

조금 요약하자면:

위에서는 주로 관련 지식과 역사에서 제공하는 API 몇 가지를 소개합니다. 해싱. 평소에는 SPA에서 사용할 수 있습니다. Gmail은 라우팅 설계에 해시를 사용합니다. 페이지 점프와 비교:

페이지는 한 번만 로드하면 됩니다. 이후 페이지 전환은 ajax를 통해 데이터를 요청할 수 있습니다. 페이지 경험이 더 매끄러워졌습니다.

은 로컬 캐시를 사용하여 페이지 경험을 최적화할 수 있습니다.

요청 시 로드할 수 있으며...

기타 실질적인 이점도 있습니다.