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

最新推荐文章于 2023-12-29 23:16:32 发布

abloume

最新推荐文章于 2023-12-29 23:16:32 发布

阅读量1.3k

点赞数

分类专栏： Node 文章标签：路由 node

本文链接：https://blog.csdn.net/u013451157/article/details/79029704

版权

Node 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一、路由器

　　路由器组件是前端用来监听并响应路由变化的工具。这样就可以更少地依赖于后端服务器来解析 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三个文件处于同一级目录