【NodeJS】浅析前端路由的运行机制

喜欢ヅ旅行 2022-06-02 10:40 188阅读 0赞

### 一、路由器 ###

路由器组件是前端用来监听并响应路由变化的工具。这样就可以更少地依赖于后端服务器来解析 URI 并返回对应内容。现在大多数网站仍然使用这种方法，但是这种方法在构建应用时有一些缺点。

最主要的问题是我们希望用户界面是可移植的。也就是说不管后端是用什么技术开发的，前端应用都可以正常地部署和工作。既然我们不是为后端的 URI 组装页面，那么也就不需要让后端来解析路由。

--------------------

### 二、如何响应路由的变化 ###

通常有两种方法。第一种方法是声明一个路由并绑定回调函数。当然当路由比较多时这种方法就不大理想了。第二种方法是路由被激活时触发事件。这就意味着没有什么事件直接与路由绑定，而是由一些组件监听这些事件。当路由很多时这种方法就非常有用。因为路由器对这些组件一无所知，而只知道路由。

--------------------

### 三、实现路由的方法 ###

在 JavaScript 里实现路由有两种方法。第一种是利用基于 hash 的 URI，这些 URI 以 \# 字符开头，这种方法更为常见一些。另一种不太常用的方法是利用浏览器的 history API 生成更多传统的 URI，也就是 Web 应用上常见的 URI。这项技术更复杂，而且最近才得到足够的浏览器支持来实现该方法。

--------------------

### 四、用依赖注入较松散地添加路由模块 ###

我们的服务器应当知道路由的存在并加以有效利用。我们当然可以通过硬编码的方式将这一依赖项绑定到服务器上，但是其它语言的编程经验告诉我们这会是一件非常痛苦的事，因此我们将使用依赖注入的方式较松散地添加路由模块。

// file server.js
    
    var http = require("http");
    var url = require("url");
    
    function start(route) { 
        http.createServer(function (request, response) { 
            var pathname = url.parse(request.url).pathname;
            console.log("Request for " + pathname + " received.");
    
            route(pathname);
    
            response.writeHead(200, {
       "Content-Type": "text/plain"});
            response.write("Hello World");
            response.end();
        }).listen(8888);
        console.log("Server has started.");
    }
    
    exports.start = start;

// file router.js
    
    function route(pathname) { 
        console.log("About to route a request for " + pathname);
    }
    
    exports.route = route;

// file index.js
    
    var server = require("./server");
    var router = require("./router");
    
    server.start(router.route);         // 将路由函数注入到服务器中
    
    /* 简单介绍下依赖注入：假设你有个A方法和C方法，有个B配置文件，B配置文件里面用XML或者任意的定义语言来说明：“当A方法调用前，要先调用C方法”。 当整个程序跑起来的时候，你执行了A方法，那么就会顺便先执行了C方法了。依赖指的是C对A的依赖，注入指的是C注入到A的过程中，原本来说，A和C是没有关系的，但是通过B，就可以产生依赖关系。 */

注：以上server.js、router.js、index.js三个文件处于同一级目录

--------------------

### 五、在架构方面如何设计路由 ###

在架构方面关于路由需要考虑的是，我们希望设计一个全局单一路由，还是每个模块一个路由，或是其他组件。

全局单一路由的问题是当不断地增加功能和路由时，应用会变得越来越大，它会变得越来越难以扩展。它的优点是所有路由都声明在同一个地方，单一路由还可以触发所有组件都可以监听到的事件。

在第二种方案中每个模块都有一个路由器实例。比如，如果应用中有五个组件，那么每个组件都有它们自己的路由器。这样的好处是每个模块都是自包含的，使用者不需要查找对应路由。另外，这种方案中路由定义和响应函数之间耦合更紧，这意味着代码会更简洁。这种方案的缺点是路由声明分散在各个模块，而不是集中存放。