백본의 라우터는 라우팅 함수 역할을하여 URL 방향을 제어하며 URL에서 # 태그를 사용할 때 적용됩니다.
라우터를 정의하려면 특정 URL을 매핑하기 위해 최소한 하나의 라우터와 함수가 필요하며, 백본에서는 # 태그 후 모든 문자가 라우터에 의해 수신되고 해석 될 것임을 기억해야합니다.
라우터를 정의하자 :
<cript> var approuter = backbone.router.extend ({lourtes : { "*action": "defaultroute"// 일치 http://example.com/#anything-here}}); // 인스턴트 라우터 var app_router = 새로운 ayprouter; app_router.on ( 'route : defaultroute', function (actions) {alert (actions (actions);}) // 백본의 history backbone.start.start (); </script> 열기이제 라우터를 정의했지만 현재 라우터는 특정 URL과 일치하지 않습니다. 다음으로, 우리는 라우터가 어떻게 작동하는지 자세히 설명하기 시작할 것입니다.
동적 라우팅
백본을 사용하면 특정 매개 변수로 라우터를 정의 할 수 있습니다. 예를 들어, URL과 같은 특정 ID를 통해 "http://example.com/#/posts/12"와 같은 특정 ID를 통해 게시물을 수신 할 수 있습니다. 이 라우터가 활성화되면 ID가 12의 게시물을 얻을 수 있습니다. 다음 으로이 라우터를 정의해 봅시다.
<cript> var aprouter = backbone.router.extend ({lour : { "posts/: id": "getpost", "*action": "defaultroute"// 백본은 Order}}); // 인스턴트 라우터 var app_router = 새로운 ayprouter; app_router.on ( 'Route : getPost', function (id) {// 매개 변수가 여기에 전달됩니다 ( "post number" + id);}); app_router.on ( 'Route : defaultroute', function (actions) {alert (action);}); // 백본의 history backbone.history.start (); </script>를 열어줍니다일치하는 규칙
백본은 두 가지 형태의 변수를 사용하여 라우터의 일치하는 규칙을 설정합니다. 첫 번째는 다음과 같습니다. URL의 슬래시 사이의 매개 변수와 다른 하나는 *이며 슬래시 뒤의 모든 부품과 일치하는 데 사용됩니다. 두 번째 형태는 첫 번째 형식보다 모호성이 더 크기 때문에 우선 순위가 가장 낮습니다.
모든 형태의 일치 결과는 매개 변수로서 관련 함수로 전달됩니다. 첫 번째 규칙은 하나 이상의 매개 변수를 반환 할 수 있고 두 번째 규칙은 전체 일치 결과를 매개 변수로 반환합니다.
다음으로 예제를 사용하여 다음을 설명하겠습니다.
경로 : { "posts/: id": "getpost", // <a href = "http://example.com/#/posts/121"> exames </a> "download/*path": "downloadfile", // <a href = "http://example.com/#/download/user/images/hey.hey.hey.hey. "loadview", // <a href = "http://example.com/#/dashboard/graph">로드 경로/액션보기 </a>}, app_router.on ( 'Route : getPost', function (id); 일치 한 후, 통과 된 매개 변수는 12}); app_router.on (pater : function :) ALERT (PATH); // 일치 한 후 전체 일치 결과는 매개 변수로 리턴되며, 경로는 사용자/이미지/Hey.gif}); App_Router.on ( 'Route : LoadView', Function (Route, Action) {route + "_" + ACTION); // 두 매개 변수가 전달됩니다.종종 "라우터"라는 단어를들을 수 있지만 종종 네트워크 연결 용 내비게이션 및 허브 인 데이터 전송이라는 네트워크 장치를 나타냅니다. 백본의 "라우터"기능은 그것과 유사합니다. 위의 예에서 볼 수 있듯이 다른 URL 앵커를 해당 조치 방법으로 탐색 할 수 있습니다.
(이 메커니즘은 많은 서버 측 웹 프레임 워크에서도 제공되지만 백본. 루터는 프론트 엔드 단일 페이지 응용 프로그램의 탐색에 더 중점을 둡니다.)
백본의 라우팅 내비게이션은 두 가지 클래스 Backbone.router 및 Backbone.history로 수행됩니다.
우리는 일반적으로 역사를 직접 인스턴스화하지 않습니다. 처음으로 라우터 인스턴스를 생성 할 때, 역사의 싱글 톤 객체를 자동으로 생성하여 백본을 통해 액세스 할 수 있기 때문입니다.
라우팅 기능을 사용하려면 먼저 경청 해야하는 URL 규칙 및 조치를 선언하려면 라우터 클래스를 정의해야합니다. 예제에서, 우리는 정의 할 때 경로 속성을 통해들을 URL 목록을 정의합니다.
해시 규칙
URL 규칙은 현재 URL의 해시 (앵커 포인트) 조각을 나타냅니다. 규칙에 일반 문자열을 지정할 수있을뿐만 아니라 두 가지 특수 동적 규칙에주의를 기울여야합니다.
규칙에서 / (슬래시)로 분리 된 문자열은 라우터 클래스 내에서 표현식 ([^//]+)로 변환되며 / (슬래시)로 시작하는 여러 문자를 나타냅니다. if : (콜론)이 규칙에 설정되어 있으므로 URL 의이 문자열이 매개 변수로 동작으로 전달됨을 의미합니다.
예를 들어 규칙 주제/: id를 설정합니다. 앵커 포인트가 #Topic/1023, 1023은 매개 변수 ID로 동작으로 전달됩니다. 규칙의 매개 변수 이름 (: id)은 일반적으로 동작 메소드의 공식 매개 변수 이름과 동일합니다. 라우터에는 그러한 제한이 없지만 동일한 매개 변수 이름을 사용하여 이해하기가 더 쉽습니다.
* 규칙의 (별표)는 라우터 내부의 표현식 (.*?)으로 변환되어 0 이상의 임의의 문자를 나타냅니다. (콜론) 규칙, * (별표) 위의 예제에서 정의한 * 오류 규칙과 마찬가지로 / (슬래시) 분리 제한이 없습니다.
라우터의 * (별표) 규칙은 정규 표현식으로 변환 한 후에 비가비 패턴을 사용하므로 다음과 같은 조합 규칙을 사용할 수 있습니다. * type/: id, #hot/1023과 일치 할 수 있으며 핫 및 1023은 액션 메소드에 매개 변수로 전달됩니다.
위의 규칙은 규칙이 정의되는 방법을 소개합니다. 이 규칙은 동작 메소드 이름에 해당하며 라우터 객체에 있어야합니다.
라우터 클래스를 정의한 후 라우터 객체를 인스턴스화하고 백본의 start () 메소드를 호출해야합니다. 히스토리 개체 내부에서 OnhashChange 이벤트는 URL의 해시 (앵커 포인트)의 변경 사항을 듣는 데 사용됩니다. OnhashChange 이벤트 (예 : IE6)를 지원하지 않는 브라우저의 경우 역사는 SetInterval 하트 비트를들을 것입니다.
푸시 스테이트 규칙
Backbone.history는 또한 Pushstate URL을 지원합니다. Pushstate는 HTML5에서 제공하는 새로운 기능입니다. 현재 브라우저의 URL을 작동 할 수 있으며 (앵커 포인트를 변경하지 않고) 페이지 새로 고침이 발생하지 않으므로 단일 페이지 응용 프로그램이 완전한 프로세스와 비슷합니다.
PushState 기능을 사용하려면이 기능에 대해 HTML5가 제공 한 일부 방법 및 이벤트를 먼저 이해해야합니다 (이 메소드는 Window.History Object에 정의되어 있음) :
1.PushState () :이 방법은 지정된 URL에 브라우저 기록에 새로운 히스토리 엔티티를 추가 할 수 있습니다.
2. replacestate () :이 메소드는 현재 이력 엔티티를 지정된 URL로 대체 할 수 있습니다.
PushState () 및 replacestate () 메소드를 호출하는 것은 현재 페이지의 URL을 교체하는 것입니다. 실제로이 URL 주소로 이동하지 않습니다 (후면 또는 전진 버튼을 사용할 때 URL로 이동하지 않음). OnPopState 이벤트를 통해이 두 가지 방법으로 인한 URL 변경 사항을들을 수 있습니다.
라우팅 관련 방법
1. route () 메소드
라우팅 규칙을 설정 한 후 동적 조정이 필요한 경우 라우터 .route () 메소드를 호출하여 라우팅 규칙 및 작업 방법을 동적으로 추가 할 수 있습니다.
router.route ( 'topic/: pageno/: pagesize', 'page', function (pageno, pagesize) {// todo}); 우리가 Route () 메소드를 호출 할 때 주어진 규칙은 문자열 일뿐 만 아니라 정규 표현식 일 수 있습니다. router.route (/^topic /(.*?)/ (.* :)$/, 'page', function (pageno, pagesize) {// todo});2.navigate () 메소드
이전 예에서는 URL 규칙이 수동 입력에 의해 트리거됩니다. 실제 응용 분야에서는 때때로 수동으로 점프 및 내비게이션이 필요할 수 있으며 호출 할 수 있습니다.
router.navigate () 메소드는 제어에 사용됩니다 (예 : router.navigate)
이 코드는 URL을 http : //localhost/index.html#topic/1000으로 변경하고 RenderDetail 메소드를 트리거합니다. 두 번째 매개 변수에서 트리거 구성을 전달하는데, 이는 URL을 변경하는 동안 해당 조치 방법이 트리거되는지 여부를 나타내는 데 사용됩니다.
3.Stop () 메소드
Backbone.history.start () 메소드를 통해 청취를 라우팅하기 시작했습니다. 예를 들어 다음과 같이 언제든지 backbone.history.stop () 메소드를 호출 할 수도 있습니다.
router.route ( 'topic/: pageno/: pagesize', 'page', function (pageno, pagesize) {backbone.history.stop ();});이 코드를 실행하고 http : //localhost/index.html#topic/5/20에 액세스하십시오. 이 조치가 실행 된 후에는 청취가 더 이상 적용되지 않음을 알 수 있습니다.