Backbone.js 路由器的用途是什么

Backbone.js 是一个紧凑的库，用于组织JavaScript代码。它另外被视为一个MVC/MV*框架。如果你不熟悉，MVC本质上是一种用于设计用户界面的架构范例。它允许你通过实现JavaScript函数来更容易地开发应用的前端。Backbone.js提供了许多构建客户端Web应用程序的组件，包括模型、视图、事件、路由器和集合。

为什么要使用Backbone.js的Router？

路由器是Backbone提供的非常有用的组件之一。路由器定义应用程序对象的URL表示形式，用于路由客户端应用程序。当在线应用程序为程序中的关键点提供可链接和可共享的URL时，需要使用路由器。我们可以使用函数执行操作或视图显示，当URL中使用了指定的关键词时。它用于创建单页面应用程序。只需要一个页面的Web应用程序称为单页面应用程序。它提供了类似桌面程序的丰富用户体验和相对较快的性能。

如何在Backbone.js中使用路由器？

我们需要使用下面给出的语法扩展Router类：

var VariableName = Backbone.Router
.extend({properties, classProperties},);

然后我们需要添加要添加到URL的关键字，并且我们需要定义将在添加这些关键字时调用的函数。

routes: {  
    'keyword_1': 'exampleFunc_1',  
    'keyword_2': 'exampleFunc_2'  
    ...
},

接下来，我们需要定义将根据关键词触发和声明的函数。

exampleFunc_1: function(){  
    ... 
},  
exampleFunc_2: function(){  
    ...  
}, 
...

最后，我们需要创建一个Router类的对象，并且需要添加history.start方法，这样Router才能操作历史记录。

var ObjectName=new Router;     
Backbone.history.start();

示例 1： 下面的示例演示了我们如何在Backbone.js中使用路由器。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>What is the use of Backbone.js router?</title> 
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"
        type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
        type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
        type="text/javascript"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>What is the use of Backbone.js router?</h3> 
  
    <script type="text/javascript"> 
  
        var Router = Backbone.Router.extend({ 
            routes: { 
                'first_link': 'first_route', 
                'second_link': 'second_route' 
            }, 
            first_route: function () { 
                document.write( 
                    "First Route has been called."); 
            }, 
  
            second_route: function () { 
                document.write( 
                    "Second Route has been called."); 
            }, 
        }); 
        var router = new Router; 
  
        Backbone.history.start(); 
    </script> 
</body> 
  
</html>

输出：

Backbone.js 路由器的用途是什么