프런트엔드 라우팅 구현 및 기본 원칙 소개(예제 포함)

이 글은 프론트엔드 라우팅 구현과 그 기본 원칙(예제 포함)을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 프런트엔드 라우팅

현대 프런트엔드 개발에서 가장 인기 있는 페이지 모델은 SPA 단일 페이지 애플리케이션 아키텍처입니다. 단일 페이지 애플리케이션은 메인 페이지가 하나만 있는 애플리케이션을 말합니다. DOM 콘텐츠를 동적으로 교체하고 동시에 URL 주소를 수정하여 다중 페이지 애플리케이션의 효과를 시뮬레이션합니다. 페이지 전환 기능은 전면에서 직접 완료됩니다. -end 스크립트는 렌더링 후 백엔드가 아닌 디스플레이만 담당합니다. 프런트엔드 트로이카 Angular, Vue 및 React는 모두 이 모델을 기반으로 실행됩니다. SPA는 프런트엔드 라우팅 메커니즘 덕분에 다중 페이지 애플리케이션의 효과를 시뮬레이션할 수 있습니다.

프런트 엔드 라우팅은 이름에서 알 수 있듯이 다양한 프런트 엔드 페이지에 대한 상태 관리자입니다. 백그라운드로 요청을 보내지 않고도 프런트 엔드 기술을 통해 여러 페이지의 효과를 직접 얻을 수 있습니다. Anglejs의 ui-router, vue의 vue-router 및 React의 React-router는 모두 이 함수의 특정 구현입니다.

前端路由 정말 대단하기 때문에 주의 깊게 공부해야 합니다.

2. 두 가지 구현 방법과 그 원리

두 방법 모두 공통 라우팅 플러그인에서 지원되고 전환 가능합니다. 예를 들어,angularjs1.x에서는 다음 코드를 통해 Hash 모드에서 H5 모드로 전환할 수 있습니다. .html5Mode(true);
HTML5 라우팅 모드로 전환합니다. 주로 URL 주소에 포함된 #으로 인해 발생하는 문제를 방지하는 데 사용됩니다.

1.HashChange

1.1 원리

HTML 페이지는 앵커 포인트 위치 지정 원리를 통해 새로 고침 없이 리디렉션될 수 있습니다. 트리거 후에는 URL 주소에 # +가 더 많이 있게 됩니다. 'XXX' 부분과 동시에 전역 창 개체에 대한 hashChange 이벤트를 트리거합니다. 이런 방식으로 페이지 앵커 해시가 특정 미리 설정된 값으로 변경되면 해당 페이지 DOM 변경이 코드 및 기본 라우팅을 통해 트리거됩니다. , 앵커 포인트 해시 기반 라우팅은 비교적 직관적이며 일반적인 프런트엔드 라우팅 플러그인에서 가장 일반적으로 사용되는 방법이기도 합니다.

1.2 Application

예제를 살펴보겠습니다. anglejs 연결을 클릭하면 해당 정보가 콘솔에 출력되는 것을 볼 수 있습니다.

2.HTML5 HistoryAPI

2.1 원리

HTML5 History API는 브라우저 확장용입니다. 글로벌 히스토리 객체에 메소드가 추가되었습니다. 일반적으로 Ajax 요청이 뒤로 버튼을 통해 요청 전 상태로 돌아갈 수 없는 문제를 해결하는 데 사용됩니다.

HTML4에서는 페이지 기록 점프를 제어하기 위해 window.history 개체가 이미 지원됩니다. 일반적으로 사용되는 방법은 다음과 같습니다.

• #🎜🎜 history.forward(); //역사에서 한걸음 더 나아갑니다. 역사에서 한 단계 뒤로 가기

• history.go(n): //역사에서 n 단계로 이동, n =0은 이 페이지를 새로 고치면 n=-1은 한 페이지 뒤로 이동합니다.

• HTML5에서는 window.history 개체가 확장되었으며 새 API에는 다음이 포함됩니다.

  # 🎜🎜#

  history.pushState(data[,title][,url])
;//기록 레코드에 레코드 추가

#🎜🎜 #window.history对象得到了扩展，新增的API包括：

• history.pushState(data[,title][,url]);//向历史记录中追加一条记录

• history.replaceState(data[,title][,url]);//替换当前页在历史记录中的信息。

• history.state;//是一个属性，可以得到当前页的state信息。

• window.onpopstate;//是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()方法传入的data参数。

2.2 应用

浏览器访问一个页面时，当前地址的状态信息会被压入历史栈,当调用history.pushState()方法向历史栈中压入一个新的state后，历史栈顶部的指针是指向新的state的。可以将其作用简单理解为 假装已经修改了url地址并进行了跳转 ,除非用户点击了浏览器的前进,回退,或是显式调用HTML4中的操作历史栈的方法，否则不会触发全局的popstate事件。

在下面的示例中，点击导航按钮，可以看到url地址栏发生了变化，且控制台打印出了响应的信息。

3.hash 和 history API对比

history.replaceState(data[,title][,url])history.statewindow.onpopstate브라우저가 페이지에 액세스하면 현재 주소의 상태 정보가 기록 스택에 푸시됩니다. .pushState가 호출됩니다. () 메서드가 새 상태를 기록 스택에 푸시한 후 기록 스택 상단에 있는 포인터가 새 상태를 가리킵니다. 그 기능은 단순히 URL 주소가 수정되어 점프된 것처럼 이해될 수 있습니다. 사용자가 브라우저의 앞으로, 뒤로 클릭하거나 HTML4에서 기록 스택을 작동하는 방법을 명시적으로 호출하지 않으면 전역 popstate 이벤트가 트리거되지 않습니다. . 3.해시 및 히스토리 API 비교url stringuglynormal#🎜🎜 #

对比	hash路由	History API 路由
url字符串	丑	正常
命名限制	通常只能在同一个document	;//기록 레코드에서 현재 페이지의 정보를 바꿉니다.
	// 현재 페이지의 상태 정보를 얻을 수 있는 속성입니다.
// 이벤트입니다. 브라우저의 뒤로 버튼을 클릭하거나 js가 전달(), 뒤로( ) , go() 시 트리거됩니다. 이벤트 객체는 청취 함수에 전달될 수 있으며, event.state는 pushState() 또는 replacementState() 메소드를 통해 전달되는 데이터 매개변수입니다.		2.2 Application
아래 예시에서 탐색 버튼을 클릭하면 URL 주소 표시줄이 변경되고 콘솔에 응답 정보가 출력되는 것을 확인할 수 있습니다.
비교	해시 라우팅	기록 API 라우팅
이름 지정 제한	일반적으로 변경은 동일한 문서	url 주소에서만 가능합니다. 직접 정의할 수 있습니다. 동일한 도메인 이름에 있는 한 자유도가 더 높습니다.

url 주소 변경#🎜🎜##🎜🎜# 변경#🎜🎜 ##🎜🎜#변경 가능 여부 #🎜🎜##🎜🎜##🎜🎜##🎜🎜#상태 저장#🎜🎜##🎜🎜#내장된 메소드가 없으므로 저장해야 함 페이지의 상태 정보를 별도로# 🎜🎜##🎜🎜#페이지 정보를 기록 스택에 푸시할 때 맞춤 정보를 첨부할 수 있습니다#🎜🎜##🎜🎜##🎜🎜##🎜🎜#매개변수 전달 능력#🎜🎜 ##🎜🎜#URL로 수신 총 길이 제한 #🎜🎜##🎜🎜#은 페이지 정보를 기록 스택에 푸시할 때 맞춤 정보를 동반할 수 있습니다 #🎜🎜##🎜🎜##🎜🎜##🎜🎜 #실용성#🎜🎜## 🎜🎜#직접 사용 가능#🎜🎜##🎜🎜#일반적으로 서버는 구현에 맞게 코드를 수정해야 합니다#🎜🎜##🎜🎜##🎜🎜##🎜🎜# 호환성#🎜🎜##🎜🎜#IE8 이상#🎜🎜##🎜🎜#IE10 이상#🎜🎜##🎜🎜##🎜🎜##🎜🎜#

3. 간단한 프런트엔드 라우팅 플러그인을 직접 만들어 보세요

바퀴를 만드는 것은 자동차에 설치하는 것이 아니라 황야에서 운전할 때 바퀴에 문제가 있을 때 추가 옵션을 갖기 위함입니다.

다음은 직접 프런트엔드 라우팅 플러그인을 구현해보겠습니다~

3.1 해시 기반 프런트엔드 라우팅 플러그인 myHashRouter.js

myHashRouter.js

我们希望实现的功能是:

1.引入MyHashRouter.js库

2.通过when()方法来定义若干不同的路由状态

3.通过init()方法启动路由功能

4.通过点击导航实现前端路由切换

首先编写js骨架，如图所示:

;(function() {
    function Router() {
        //记录路由的跳转历史
        this.historyStack = [];
        //记录已注册的路由信息
        this.registeredRouter = [];
        //路由匹配失败时跳转项
        this.otherwiseRouter = {
            path: '/',
            content: 'home page'
        }
    }

    /*
     * 启动路由功能
     */
    Router.prototype.init = function() {

    }

     /*
     * 绑定window.onhashchange事件的回调函数
     */
    Router.prototype._bindEvents = function() {

    }

    /**
     * 路由注册方法
     */
    Router.prototype.when = function(path, content) {

    }

    /**
     * 判断新添加的路由是否已存在
     */
    Router.prototype._hasThisRouter = function(path) {

    }

    /**
     * 路由不存在时的指定地址
     */
    Router.prototype.otherwise = function(path, content) {

    }

    /**
     * 路由跳转方法，主动调用时可用于跳转路由
     */
    Router.prototype.go = function(topath) {

    }

    /**
     * 用于将对应路由信息渲染至页面,实现路由切换
     */
    Router.prototype.render = function (content) {
     
    }

    var router = new Router();

    //将接口暴露至全局
    window.$router = router;
})();

完成了路由插件的编写后，我们在demo中引入该库，然后使用when()方法注册几个路由地址，再使用init()方法启动路由，脚本部分代码如下：

效果：
运行附件中的router-demo-hash.html,点击导航按钮，即可看到url地址栏以及内容区域同步更改。

3.2基于History API的前端路由插件myHistoryRouter.js

由于History API不支持低于IE10以下版本的浏览器（其他大多数现代浏览器基本都支持）,所以我们在init()方法启动时先进行可用性判断，基本代码框架与基于Hash的路由插件一致。每个方法的实现并不难写，这里不再赘述，笔者自己的代码实现放在附件myHashRouter.js中，水平有限，仅供参考。

3.3集成说明

为方便理解，本例中将两种模式分开编写，如果是插件库的开发，可以模仿ui-router增加一个html5mode()的方法,在init()方法启动路由时，根据所传的参数生成不同的路由插件的单例，也就是我们常说的工厂模式来实现即可。

四.后记

• 造车轮우리가 바라는 기능은

1. MyHashRouter.js 라이브러리를 소개합니다

• 2. when() 메서드를 통해 여러 가지 라우팅 상태를 정의합니다3. init() 메서드를 통해 라우팅 기능을 시작합니다4. 탐색을 클릭하여 라우팅 전환먼저 그림과 같이 js 스켈레톤을 작성합니다. rrreee라우팅 플러그인 작성을 완료한 후 데모에서 라이브러리를 도입한 다음 when()을 사용했습니다. 메소드를 사용하여 여러 라우팅 주소를 등록한 후 init() 메소드를 사용하여 라우팅을 시작합니다. 스크립트 부분 코드는 다음과 같습니다.
  효과:
  첨부 파일에서 router-demo-hash.html를 실행하세요. 탐색 버튼을 클릭하면 URL 주소 표시줄과 콘텐츠 영역이 동시에 변경되는 것을 볼 수 있습니다.
  

3.2 기록 기반 프런트엔드 라우팅 플러그인 API myHistoryRouter.js

History API는 IE10 이하의 브라우저를 지원하지 않으므로(대부분의 최신 브라우저는 기본적으로 지원함) init() 메서드가 시작될 때 먼저 가용성을 판단합니다. . 기본 코드 프레임워크는 해시 기반 라우팅 플러그인과 일치합니다. 각 메소드의 구현은 작성하기 어렵지 않으므로 여기서는 자세히 설명하지 않겠습니다. 작성자가 직접 구현한 코드는 첨부 파일 myHashRouter.js에 포함되어 있습니다. 레벨이 제한되어 있어 참고용으로만 사용하세요. 🎜🎜🎜🎜3.3 통합 지침🎜이해의 편의를 위해 , 이 섹션 예제에서는 두 가지 모드가 별도로 작성되었습니다. 플러그인 라이브러리를 개발하는 경우 🎜ui-router🎜를 모방하고 html5mode() 메서드를 추가할 수 있습니다. init() 메소드 라우팅을 시작할 때 전달된 매개변수를 기반으로 다양한 라우팅 플러그인의 단일 인스턴스를 생성하여 구현할 수 있습니다. 이를 흔히 🎜팩토리 모드🎜라고 부릅니다. 🎜🎜4. Postscript🎜

🎜🎜바퀴 만들기는 비록 스스로 만드는 바퀴가 매우 투박하지만 매우 중요한 학습 방법입니다. 하지만 기본 원칙은 도움이 됩니다. 🎜🎜🎜🎜이 예는 라우팅 도구의 기본 골격을 작성하는 것뿐입니다. 실제 라우팅 도구에는 여전히 많은 기능 확장이 필요하며 🎜정기적인 경로 일치🎜, 🎜lazy와 같은 개별 기능의 복잡성이 매우 높습니다. loading🎜, 🎜Combined view🎜, 🎜Nested view🎜, 🎜Routing animation🎜 등 관심 있는 친구들은 이 예제에서 제공하는 프레임워크를 배우고 확장할 수 있습니다. 🎜🎜🎜

위 내용은 프런트엔드 라우팅 구현 및 기본 원칙 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!