這篇文章是一個系列的文章的第二篇，這一篇會對上一篇實現的簡易框架進行功能擴充，並將路由與應用分離，便於程式碼的維護和功能擴充。為了提升路由匹配的效率，也對路由模組進行了進一步的設計。github地址歡迎拍磚。
確認需求
- 將路由與應用分離，便於程式碼的維護和功能擴充
- 優化路由模組，提升匹配效率
Router 與 Application 分離
為了將路由與應用分離，這裡我們新增一個 Router.js 檔案，用來封裝一個路由管理的類 Router，程式碼如下。
// 路由管理類
function Application() {
// 用來儲存路由的陣列
this.stack = [
{
path: '*',
method: '*',
handle: function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('404');
}
}
];
}
Router.prototype.get = function(path, handle) {
// 將請求路由壓入棧內
this.stack.push({
path,
method: 'GET',
handle
});
};
Router.prototype.handle = function() {
// 迴圈請求過來放入router陣列的物件，當請求方法和路勁與物件一致時，執行回撥handler方法
for (var i = 1, len = this.stack.length; i < len; i++) {
if (
(req.url === this.stack[i].path || this.stack[i].path === '*') &&
(req.method === this.stack[i].method || this.stack[i].method === '*')
) {
return this.stack[i].handle && this.stack[i].handle(req, res);
}
}
return this.stack[0].handle && this.stack[0].handle(req, res);
};
複製程式碼修改原有的 application.js 檔案內容
var Router = require('./router');
var http = require('http');
function Application() {}
Application.prototype = {
router: new Router(),
get: function(path, fn) {
return this.stack.get(path, fn);
},
listen: function(port, cb) {
var self = this;
var server = http.createServer(function(req, res) {
if (!res.send) {
res.send = function(body) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end(body);
};
}
return self.router.handle(req, res);
});
return server.listen.apply(server, arguments);
}
};
exports = module.exports = Application;
複製程式碼經過上面的修改，路由方面的操作只會與 Router 類本身有關，達到了與 Application 分離的目的，程式碼結構更加清晰，便於後續功能的擴充。
優化路由模組，提升匹配效率
經過上面的實現，路由系統已經可以正常執行了。但是我們深入分析一下，可以發現我們的路由匹配實現是會存在效能問題的，當路由不斷增多時，this.stack 陣列會不斷的增大，匹配的效率會不斷降低，為了解決匹配的效率問題，需要仔細分析路由的組成部分。 可以看出，一個路由是由：路徑（path)、請求方式（method）和處理函式（handle)組成的。path 和 method 的關係並不是簡單的一對一的關係，而是一對多的關係。如下圖，所示，對於同一個請求連結，按照RestFul API 規範 可以實現如下類似的功能。
- path，表示路由的請求路徑
- handle，代表路由的處理函式(只匹配路徑，請求路徑一致時的處理函式)
- route，代表真正的路由，包括 method 和 handle 整體結構如下圖所示
--------------------------------------
| 0 | 1 |
--------------------------------------
| Layer | Layer |
| |- path | |- path |
| |- handle | |- handle |
| |- route | |- route |
| |- method | |- method |
| |- handle | |- method |
--------------------------------------
router 內部
複製程式碼建立Layer類，匹配path
function Layer(path, fn) {
this.handle = fn;
this.name = fn.name || '<anonumous>';
this.path = path;
}
/**
* Handle the request for the layer.
*
* @param {Request} req
* @param {Response} res
*/
Layer.prototype.handle_request = function(req, res) {
var fn = this.handle;
if (fn) {
fn(req, res);
}
};
/**
* Check if this route matches `path`
*
* @param {String} path
* @return {Boolean}
*/
Layer.prototype.match = function(path) {
if (path === this.path || path === '*') {
return true;
}
return false;
};
module.exports = Layer;
複製程式碼修改 Router 類，讓路由經過 Layer 層包裝
var Layer = require('./layer');
// 路由管理類
function Router() {
// 用來儲存路由的陣列
this.stack = [
new Layer('*', function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('404');
})
];
}
Router.prototype.get = function(path, handle) {
// 將請求路由壓入棧內
this.stack.push(new Layer(path, handle));
};
Router.prototype.handle = function(req, res) {
var self = this;
for (var i = 1, len = self.stack.length; i < len; i++) {
if (self.stack[i].match(req.url)) {
return self.stack[i].handle_request(req, res);
}
}
return self.stack[0].handle_request(req, res);
};
module.exports = Router;
複製程式碼建立Route類，匹配method
建立Route類，該類主要是在Layer層中匹配請求方式（method），執行對應的回撥函式。這裡只實現了get請求方式，後續版本會對這一塊進行擴充套件。
var Layer = require('./layer');
function Route (path) {
this.path = path;
this.stack = []; // 用於記錄相同路徑不同method的路由
this.methods = {}; // 用於記錄是否存在該請求方式
}
/**
* Determine if the route handles a given method.
* @private
*/
Route.prototype._handles_method = function (method) {
var name = method.toLowerCase();
return Boolean(this.methods[name]);
}
// 這裡只實現了get方法
Route.prototype.get = function (fn) {
var layer = new Layer('/', fn);
layer.method = 'get';
this.methods['get'] = true;
this.stack.push(layer);
return this;
}
Route.prototype.dispatch = function(req, res) {
var self = this,
method = req.method.toLowerCase();
for(var i = 0, len = self.stack.length; i < len; i++) {
if(method === self.stack[i].method) {
return self.stack[i].handle_request(req, res);
}
}
}
module.exports = Route;
複製程式碼修改Router類，將route整合其中。
var Layer = require('./layer');
var Route = require('./route');
// 路由管理類
function Router() {
// 用來儲存路由的陣列
this.stack = [
new Layer('*', function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/plain'
});
res.end('404');
})
];
}
Router.prototype.get = function(path, handle) {
var route = this.route(path);
route.get(handle);
return this;
};
Router.prototype.route = function route(path) {
var route = new Route(path);
var layer = new Layer(path, function(req, res) {
route.dispatch(req, res);
});
layer.route = route;
this.stack.push(layer);
return route;
};
Router.prototype.handle = function(req, res) {
var self = this,
method = req.method;
for (var i = 1, len = self.stack.length; i < len; i++) {
if (self.stack[i].match(req.url) && self.stack[i].route && self.stack[i].route._handles_method(method)) {
return self.stack[i].handle_request(req, res);
}
}
return self.stack[0].handle_request(req, res);
};
module.exports = Router;
複製程式碼總結
我們這裡主要是建立了一個完整的路由系統，並在原始程式碼基礎上引入了Layer和Route兩個概念。 目錄結構如下
express
|
|-- lib
| |
| |-- express.js //負責例項化application物件
| |-- application.js //包裹app層
| |-- router
| |
| |-- index.js //Router類
| |-- layer.js //Layer類
| |-- route.js //Route類
|
|-- test
| |
| |-- index.js #測試用例
|
|-- index.js //框架入口
複製程式碼application代表一個應用程式，express負責例項化application物件。Router代表路由元件，負責應用程式的整個路由系統。元件內部由一個Layer陣列構成，每個Layer代表一組路徑相同的路由資訊，具體資訊儲存在Route內部，每個Route內部也是Layer物件，但是Route內部的Layer和Router內部的Layer是存在一定的差異性。
- Router內部的Layer，主要包含path、route屬性
- Route內部的Layer，主要包含method、handle屬性 當發起一個請求時，會先掃描router內部的每一層，而處理每層的時候會先對比URI，相同則掃描route的每一項，匹配成功則返回具體的資訊，沒有任何匹配則返回未找到。