JavaScript Backbone.js 프레임워크의 라우터 라우팅에 대한 종합 분석

백본의 라우터는 경로 역할을 하며 URL의 방향을 제어합니다. URL에 # 태그가 사용될 때 적용됩니다.
라우터를 정의하려면 적어도 하나의 라우터와 특정 URL을 매핑하는 기능이 필요하며 백본에서는 # 태그 뒤의 모든 문자가 라우터에서 수신되고 해석된다는 점을 기억해야 합니다.
라우터를 정의해 봅시다:

<script>
 var AppRouter = Backbone.Router.extend({
  routes: {
   "*actions": "defaultRoute" // 匹配 http://example.com/#anything-here
  }
 });
 // 实例化 Router
 var app_router = new AppRouter;
 
 app_router.on(&#39;route:defaultRoute&#39;, function(actions) {
  alert(actions);
 })
 
 // 打开 Backbone 的历史记录
 Backbone.history.start();
</script>

이제 라우터를 정의했지만, 이때 라우터는 특정 URL과 일치하지 않습니다. 다음으로 라우터의 작동 방식을 자세히 설명하겠습니다. .

동적 라우팅
백본을 사용하면 특정 매개변수로 라우터를 정의할 수 있습니다. 예를 들어, "http://example.com/#/posts/12"라는 URL과 같은 특정 ID를 가진 게시물을 받고 싶을 수 있습니다. 라우터가 활성화되면 ID 12를 가진 게시물을 받을 수 있습니다. . 우편. 다음으로 이 라우터를 정의해 보겠습니다.

<script>
 var AppRouter = Backbone.Router.extend({
  routes: {
   "posts/:id": "getPost",
   "*actions": "defaultRoute" //Backbone 会根据顺序匹配路由
  }
 });
 // 实例化 Router
 var app_router = new AppRouter;
 app_router.on(&#39;route:getPost&#39;, function (id) {
  // 注意，参数通过这里进行传递
  alert( "Get post number " + id ); 
 });
 app_router.on(&#39;route:defaultRoute&#39;, function (actions) {
  alert( actions ); 
 });
 // 打开 Backbone 的历史记录
 Backbone.history.start();
</script>

일치 규칙
백본은 두 가지 형태의 변수를 사용하여 라우터의 일치 규칙을 설정합니다. 첫 번째는 URL의 슬래시 사이에 있는 모든 매개변수와 일치하는 :이고, 다른 하나는 슬래시 뒤의 모든 매개변수와 일치하는 *입니다. 두 번째 형식은 첫 번째 형식보다 더 퍼지하기 때문에 일치 우선순위가 가장 낮습니다.
모든 형태의 일치 결과는 매개변수 형태로 해당 함수에 전달됩니다. 첫 번째 규칙은 하나 이상의 매개변수를 반환할 수 있으며, 두 번째 규칙은 전체 일치 결과를 하나의 매개변수로 반환합니다.
다음으로 예를 들어 설명합니다.

routes:{
 
 "posts/:id": "getPost",
 // <a href="http://example.com/#/posts/121">Example</a>
 
 "download/*path": "downloadFile",
 // <a href="http://example.com/#/download/user/images/hey.gif">Download</a>
 
 ":route/:action": "loadView",
 // <a href="http://example.com/#/dashboard/graph">Load Route/Action View</a>
 
},
 
app_router.on(&#39;route:getPost&#39;, function( id ){ 
 alert(id); // 匹配后，传递过来的参数为 12
});
app_router.on(&#39;route:downloadFile&#39;, function( path ){ 
 alert(path); // 匹配后，整个匹配结果作为一个参数返回，路径为 user/images/hey.gif 
});
app_router.on(&#39;route:loadView&#39;, function( route, action ){ 
 alert(route + "_" + action); // 匹配后，传递过来两个参数，此时会弹出 dashboard_graph 
});

"라우터"라는 단어를 자주 듣게 되지만 이는 네트워크 연결 및 데이터 전송과 허브에 사용되는 네트워크 장치를 가리키는 경우가 많습니다. Backbone의 "라우터" 기능은 이와 유사합니다. 위의 예에서 볼 수 있듯이 해당 Action 메서드에 대한 다양한 URL 앵커를 탐색할 수 있습니다.
(많은 서버측 웹 프레임워크도 이러한 메커니즘을 제공하지만 Backbone.Router는 프런트엔드 단일 페이지 애플리케이션의 탐색에 더 중점을 둡니다.)

Backbone의 라우팅 탐색은 Backbone.Router로 구성됩니다. 및 Backbone.History 두 클래스가 함께 작동합니다.

라우터 클래스는 라우팅 규칙을 정의 및 구문 분석하고 URL을 액션에 매핑하는 데 사용됩니다.

History 클래스는 URL 변경을 모니터링하고 Action 메소드를 트리거하는 데 사용됩니다.

우리는 일반적으로 History를 직접 인스턴스화하지 않습니다. 왜냐하면 처음 Router 인스턴스를 생성할 때 자동으로 History 싱글턴 객체를 생성하기 때문입니다. Backbone.history를 통해 이 객체에 액세스할 수 있습니다.

라우팅 기능을 사용하려면 먼저 모니터링해야 하는 URL 규칙과 작업을 선언하는 라우터 클래스를 정의해야 합니다. 지금 예시에서는 모니터링해야 하는 URL 목록을 정의합니다. 여기서 Key는 URL 규칙을 나타내고 Value는 URL이 규칙에 있을 때 실행되는 Action 메서드를 나타냅니다.

해시 규칙
URL 규칙은 현재 URL의 해시(앵커) 조각을 나타냅니다. 규칙에 일반 문자열을 지정하는 것 외에도 두 가지 특수 동적 규칙에 주의해야 합니다.
규칙에서 /(슬래시)로 구분된 문자열은 Router 클래스 내에서 표현식([^/]+)으로 변환됩니다. 이는 /(슬래시)로 시작하는 여러 문자를 의미합니다. If:(콜론)이 설정되어 있습니다. 규칙은 URL의 이 문자열이 매개변수로 작업에 전달된다는 의미입니다.
예를 들어 규칙 topic/:id를 설정합니다. 앵커 포인트가 #topic/1023인 경우 1023이 매개변수 ID로 작업에 전달됩니다. 규칙의 매개변수 이름(:id)은 다음과 같습니다. Action 메소드의 형식 매개변수와 동일합니다. Router에는 이러한 제한이 없지만 동일한 매개변수 이름을 사용하는 것이 더 쉽습니다.
규칙의 *(별표)는 라우터 내부에서 0개 이상의 임의 문자를 나타내는 표현식(.*?)으로 변환됩니다. :(콜론) 규칙과 비교하여 *(별표)는 / (슬래시)로 구분된 제한은 위의 예에서 정의한 *error 규칙과 같습니다.
라우터의 *(별표) 규칙은 정규식으로 변환된 후 non-greedy 모드를 사용하므로 #hot/1023과 일치하는 *type/:id와 Hot 및 Hot과 같은 결합된 규칙을 사용할 수 있습니다. 1023은 Action 메서드에 매개변수로 전달됩니다.

위에서는 규칙을 정의하는 방법을 설명합니다. 이러한 규칙은 Router 개체에 있어야 하는 Action 메서드 이름에 해당합니다.
Router 클래스를 정의한 후 Router 객체를 인스턴스화하고 URL 모니터링을 시작하는 Backbone.history 객체의 start() 메서드를 호출해야 합니다. History 객체 내에서 URL의 해시(앵커) 변경 사항은 기본적으로 onhashchange 이벤트를 통해 모니터링됩니다(예: IE6). History는 setInterval 하트비트를 통해 수신합니다.

pushState 규칙
Backbone.History는 pushState URL도 지원합니다. pushState는 앵커를 변경하지 않고 현재 브라우저의 URL을 작동할 수 있습니다. 페이지가 새로 고쳐져 단일 페이지 애플리케이션이 완전한 프로세스처럼 느껴집니다.
pushState 기능을 사용하려면 먼저 이 기능을 위해 HTML5에서 제공하는 일부 메서드와 이벤트를 이해해야 합니다(이러한 메서드는 window.history 개체에 정의되어 있음).

1.pushState()：该方法可以将指定的URL添加一个新的history实体到浏览器历史里
2.replaceState()：该方法可以将当前的history实体替换为指定的URL

调用pushState()和replaceState()方法，仅仅是替换当前页面的URL，而并不会真正转到这个URL地址（当使用后退或前进按钮时，也不会跳转到该URL），我们可以通过onpopstate事件来监听这两个方法引起的URL变化。

路由相关方法

1.route()方法
在设定好路由规则之后，如果需要动态调整，可以调用Router.route()方法来动态添加路由规则及Action方法，例如：

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('topic/1000', {
 trigger: true
});

这段代码将URL更改为http://localhost/index.html#topic/1000，并触发了renderDetail方法。需要注意的是，我们在第二个参数传入了trigger配置，该配置用于表示更改URL的同时是否触发相应的Action方法。

3.stop()方法
还记得我们是通过Backbone.history.start()方法来启动路由监听的，你也可以随时调用Backbone.history.stop()方法来停止监听，例如：

router.route('topic/:pageno/:pagesize', 'page', function(pageno, pagesize) {
 Backbone.history.stop();
});

运行这段代码，并访问URL：http://localhost/index.html#topic/5/20，你会发现这个Action被执行之后，监听已经不再生效了。

更多全面解析JavaScript的Backbone.js框架中的Router路由相关文章请关注PHP中文网！