머리말
프론트 엔드 라우팅은 AngularJS, 백본, Reactjs 등과 같은 많은 오픈 소스 JS 라이브러리 프레임 워크에서 지원됩니다. 프론트 엔드 라우팅의 원리는 백엔드 라우팅과 동일합니다. 모든 상호 작용을 허용하고 한 페이지에이를 표시하여 서버 요청을 줄이고 고객 경험을 향상시킵니다. 점점 더 많은 웹 사이트, 특히 웹 응용 프로그램은 프론트 엔드 라우팅을 사용합니다.
HTML
페이지에는 탐색 메뉴 UL이 있으며 DIV#결과는 결과를 표시하는 데 사용됩니다. 탐색 메뉴를 클릭하면 #Result에 다른 결과 내용이 표시됩니다.
<ul> <li> <a href = "#/"> home </a> </li> <li> <a href = "#/product"> product </a> </li> <li> <a href = "#/server"> service </a> </li> </li> </ul> <div id = "result">
자바 스크립트
프론트 엔드 라우팅 구현의 간단한 원리에 대해 이야기 해 봅시다. URL의 해시가 변경되면 해시 양식을 사용하여 해시 형식을 변경하면 해시 랜지 등록 콜백이 트리거되고 콜백에서 다른 작업이 수행되고 다른 내용이 표시됩니다.
함수 라우터 () {this.routes = {}; this.cururl = ''; this.route = 함수 (경로, 콜백) {this.routes [path] = 콜백 || 기능(){}; }; this.refresh = function () {this.cururl = location.hash.slice (1) || '/'; this.routes [this.cururl] (); }; this.init = function () {window.adeventListener ( 'load', this.refresh.bind (this), false); window.addeventListener ( 'hashchange', this.refresh.bind (this), false); }}위의 코드에서 라우팅 시스템 라우터 객체 구현은 주로 세 가지 방법을 제공합니다.
Init는 브라우저 URL HASH 업데이트 이벤트에 리턴트합니다.
경로는 경로 업데이트 중 콜백 배열 경로에 대한 콜백을 저장하며 콜백 함수는 페이지를 업데이트 할 책임이 있습니다.
새로 고침은 현재 URL에 해당하는 콜백 함수를 실행하고 페이지를 업데이트합니다.
라우터 호출 방법은 다음과 같습니다.
클릭하여 URL의 해시 변경을 트리거하고 그에 따라 콘텐츠를 업데이트하십시오. 실행 후 메뉴를 클릭 할 때마다 #Result에서 배경색과 콘텐츠가 변경됩니다.
var r = new Router (); r.init (); var res = document.getElementById ( 'result'); r.route ( '/', function () {res.style.background = 'blue'; res.innerhtml = '이것은 홈페이지';}); r.route ( '/product', function () {res.style.background = 'Orange'; res.innerhtml = '이것은 제품 페이지';}); r.route ( '/server', function () {res.style.background = 'black'; res.innerhtml = '이것은 서비스 페이지';});요약
위는 프론트 엔드 라우팅의 간단한 구현입니다. 실제 응용 분야에서 해시는 많은 수의 URL의 적용을 충족시키기 위해 정기적으로 처리되어야하며 동시에 AJAX 비동기 요청 페이지 컨텐츠의 기능이 추가됩니다. 이 예제는 실제로 매우 간단하지만 많은 라우팅 시스템의 기초는이를 기반으로하며 다른 라우팅 시스템은 주로 사용하는 프레임 워크 메커니즘을 지원하고 최적화합니다. 좋아,이 기사의 내용은 여기에 있습니다. 나는 그것이 당신이 공부하거나 일하는 데 도움이되기를 바랍니다. 궁금한 점이 있으면 의사 소통을 위해 메시지를 남길 수 있습니다.