透析Express.js

時間 2019-11-06

標籤透析 express.js express 欄目 JavaScript 简体版

原文原文鏈接

前言

最近，本屌在試用Node.js，在尋找靠譜web框架時發現了Express.js。Express.js在Node.js社區中是比較出名web框架，而它的定位是「minimal and flexible（簡潔、靈活）」。html

進擊的Express.js

1. 底層的Http module

Node有Http module，本質上，咱們能夠直接經過他寫Web應用。Http module使用很簡單：node

////////////////
// app.js
////////////////

// 加載所需模塊
var http = require("http");

// 建立Server
var app = http.createServer(function(request, response) {
  response.writeHead(200, {
    "Content-Type": "text/plain"
  });
  response.end("Hello hyddd!\n");
});

// 啓動Server
app.listen(1984, "localhost");

運行node app.js。訪問http://localhost:1984，便可看到「Hello hyddd!」。web

如今問題來了，Web須要經過不一樣uri區分功能，如：/user/profile 表示用戶信息，/about 表示網站簡介……，而Http module並無直接提供dispatch功能，固然，本身實現也不難：express

////////////////
// app1.js
////////////////

// 加載所需模塊
var http = require("http");

// 建立Server
var app = http.createServer(function(request, response) {
  if(request.url == '/'){
    response.writeHead(200, { "Content-Type": "text/plain" });
    response.end("Home Page!\n");
  } else if(request.url == '/about'){
    response.writeHead(200, { "Content-Type": "text/plain" });
    response.end("About Page!\n");
  } else{
    response.writeHead(404, { "Content-Type": "text/plain" });
    response.end("404 Not Found!\n");
  }
});

// 啓動Server
app.listen(1984, "localhost");

若是要區別對待Http method，能夠根據 request.method 判斷。至此，Http module在此場景下的短板顯露無疑。編程

2. 中間層：Middleware

什麼是middleware？根據牛文《A short guide to Connect Middleware》裏定義，middleware就是一大坨handle requests的funcions。api

這裏說明下，middleware是一個概念；而上面的Connect，是一個Http Server Framework，基於Http module擴展，能夠說它是Express.js的前身。因此能夠把Connect等價看做Express.js。先看個Demo:app

////////////////
// app2.js
////////////////

// 加載所需模塊
var express = require("express");
var http = require("http");

// 建立server
var app = express();

// 增長一些middleware
app.use(function(request, response, next) {
  console.log("step1, url:" + request.url);
  next();
});
app.use(function(request, response, next) {
  console.log("step2");
  if(request.url == '/'){
    response.writeHead(200, { "Content-Type": "text/plain" });
    response.end("Main Page!\n");
  }
  next();
});
app.use(function(request, response, next) {  console.log("step2:");
  console.log("step3");
  if(request.url == '/about'){
      response.writeHead(200, { "Content-Type": "text/plain" });
      response.end("About Page!\n");
  }
});


// 啓動server
http.createServer(app).listen(1984);

運行node app.js，訪問：http://localhost:1984/，console結果是：框架

step1，url:/編程語言

step2ide

Express經過 app.use 註冊middleware，middlewares至關於request的handlers，在處理request時，順序執行每個handler（function），handler業務完成後，經過調用next();，決定是否調用下一個handler，說白了就是鏈處理。

Middleware是Express.js很是重要的特性，沒有之一。基於這個特性，Express.js繼續實現了routing-dispatch（讓你能夠優雅地寫request處理函數）, 公共的error處理（404，500處理），提供機制給開發者實施權限校驗機制等等。而在各類Express.js文檔中，這塊的篇幅是最長的，Express.js不少的變化和淫蕩技巧會在middleware獲得體現。

3.1 頂層：Routing

app2.js的裏，雖然經過middleware方式，把「/」和「/about」獨立出來，但和優雅的高可讀代碼還沒半毛錢關係。Routing是基於Middleware特性，它其實就是匹配不一樣的request到不一樣的handler上：

////////////////
// app3.js
////////////////

var express = require("express");
var http = require("http");
var app = express();

app.all("*", function(request, response, next) {
  console.log("step1");
  next();
});

app.get("/", function(request, response) {
  response.end("Home Page!");
});

app.get("/about", function(request, response) {
  response.end("About Page!");
});

app.get("*", function(request, response) {
  response.end("404!");
});

http.createServer(app).listen(1984);

這樣確實優雅了許多，至於更多的奇淫技巧能夠參看各類文檔。

3.2 頂層：Views

額，Express加入了View處理機制，一塊兒看看：

var express = require("express");
var app = express();

// 模板目錄：./views
app.set("views", __dirname + "/views");

// 使用jade引擎
app.set("view engine", "jade");
 
// 尋址views/index，提交jade渲染，並返回結果
app.get("/", function(request, response) { response.render("index", { message: "I'm hyddd" }); });

Express的View機制仍是簡單的。