用 Express 和 AbsurdJS 做 Node.js 應用

Mxt發表於2014-07-10

當今有許多新技術吸引著越來越多的開發者，Node.js 便是其中之一。主要因為它是 JavaScript 驅動的，許多人都很感興趣。在本教程中，我將會教你結合 Express 去使用 AbsurdJS。Express 是流行的 Node.js 框架，而 AbsurdJS 則比較新鮮，希望你看完後會發現它很有用。

本文中出現的原始碼都可以從這裡下載。

簡介

正如我提到的，Express 很流行。因為它是最早的 Node.js 框架之一。它把所有瑣碎的事情都包辦了，比如路由選擇、引數解析、模板、向瀏覽器傳送響應。它的庫基於 Connect 提供的中介軟體架構對原生的 Node.js 進行了較好的封裝。

AbsurdJS 一開始是一個 CSS 前處理器。目的是為 CSS 開發者帶來更好的靈活性。它接受純 JavaScript 程式碼並轉換為 CSS。大家對它的反饋都比較積極，我也在努力繼續完善它。現在它不僅能預處理 CSS，還可以處理 HTML。它接受 JSON 和 YAML 併成功匯出作客戶端使用。

步驟

為了使最後做出的專案能跑起來，我們需要安裝 Node.js。只需開啟 nodejs.org 並點選大大的綠色“INSTALL”按鈕。下載並安裝完成後你就可以呼叫 Node.js 指令碼，用npm（Node 的包管理器）安裝依賴包。

為你的專案新建一個資料夾，裡面再新建一個空的“package.json”檔案。包管理器會以這個檔案為起點去安裝我們需要的包。我們只需兩個包，所以 json 檔案應該是這個樣子：

{
    "name": "AbsurdJSAndExpress",
    "description": "AbsurdJS + Express app",
    "version": "0.0.1",
    "dependencies": {
        "express": "3.4.4",
        "absurd": "*"
    }
}

{

"name": "AbsurdJSAndExpress",

"description": "AbsurdJS + Express app",

"version": "0.0.1",

"dependencies": {

"express": "3.4.4",

"absurd": "*"

}

當然，這裡還有許多其它的引數可以配置，但為了方便舉例我們就先按上面的配置吧。開啟終端，定位包含到 Package.json 的目錄，執行：

npm install

1	npm install

會在當前目錄生成 node_modules 資料夾，並自動下載 Express 和 AbsurdJS。

執行伺服器

有了 Express 你只需要簡單幾行程式碼就可以執行一個 http 伺服器。

var express = require('express'),
    app = express();

app.listen(3303);
console.log('Listening on port 3303');

var express = require('express'),

app = express();

app.listen(3303);

console.log('Listening on port 3303');

儲存以上程式碼為 app.js 並執行：

node app.js

1	node app.js

這時控制檯應該顯示 “Listening on port 3303”。瀏覽器開啟 http://localhost:3303/ 會看到：

Cannot GET /

1	Cannot GET /

不用擔心，這很正常，因為我們還沒有新增路由。

新增路由

Express 提供了友好的 API 去定義 URL 路由。我們在這裡簡單地新增一個，把下面的程式碼貼到 app.js 中。

app.get('/', function(req, res, next) {
    res.setHeader('Content-Type', 'text/html');
    res.send("application");
});

app.get('/', function(req, res, next) {

res.setHeader('Content-Type', 'text/html');

res.send("application");

});

這裡做了幾件事。.get 方法的第一個引數定義了路徑；第二個引數是個方法，用來處理請求，它接受三個引數 – request、response、next。這裡的好處是我們可以傳入多個函式，它們會一個接一個的被呼叫。我們需要做的只是執行 next()，否者 next 方法不會被呼叫。比如：

app.get(
    '/', 
    function(req, res, next) {
        console.log("do some other stuff here");
        next();
    },
    function(req, res, next) {
        res.send("application");
    }
);

app.get(

'/',

function(req, res, next) {

console.log("do some other stuff here");

next();

function(req, res, next) {

res.send("application");

}

);

路由定義中通用的做法是新增一些可重用的任務作為中介軟體。比如說，我們有兩種 Content-Type, HTML 和 CSS。用下面的方法就顯得更加靈活。

var setContentType = function(type) {
    return function(req, res, next) {
        res.setHeader('Content-Type', 'text/' + type);
        next();
    }
}
app.get('/', setContentType("html"), function(req, res, next) {
    res.send("application");
});

var setContentType = function(type) {

return function(req, res, next) {

res.setHeader('Content-Type', 'text/' + type);

next();

}

app.get('/', setContentType("html"), function(req, res, next) {

res.send("application");

});

如果我們需要提供 CSS，只要用 setContentType(“css”) 即可。

提供 HTML

很多 Express 的教程和文章都會介紹一些模板引擎。通常是 Jade、Hogan 或者 Mustache。然而，如果用 AbsurdJS 我們不需要模板引擎。我們可以用純 JavaScript 編寫 HTML。更具體的說，是用 JavaScript 物件。我們先從實現著陸頁開始。新建資料夾 pages，在裡面新建 landing.js 檔案。我們在用 Node.js 所以檔案裡應該包含：

module.exports = function(api) {
    // ...
}

module.exports = function(api) {

// ...

}

注意返回的函式接受 AbsurdJS API 的引用。這正是我們所要的。現在再加點 HTML：

module.exports = function(api) {
    api.add({
        _:"<!DOCTYPE html>",
        html: {
            head: {
                'meta[http-equiv="Content-Type" content="text/html; charset=utf-8"]': {},
                'link[rel="stylesheet" type="text/css" href="styles.css"]': {}
            },
            body: {}
        }
    });
}

module.exports = function(api) {

api.add({

_:"<!DOCTYPE html>",

html: {

head: {

'meta[http-equiv="Content-Type" content="text/html; charset=utf-8"]': {},

'link[rel="stylesheet" type="text/css" href="styles.css"]': {}

body: {}

}

});

}

“_” 屬性新增的字串在編譯成HTML時不會被轉換；其它的屬性各定義了一個標籤。還可以用其它方法去定義標籤屬性，但我認為用上面的方式更好。這個想法是從 Sublime 的 Emmet 外掛中獲得的。編譯完成後會生成：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
    </head>
    <body/>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body/>

</html>

本次教程只有一個頁面，而在現實中你可能會在多個頁面中使用相同的HTML。此時更合理的做法是將這部分程式碼移到外部的檔案中，在需要的時候引用進來。當然，這裡還可以使用可重複模板。建立檔案 /pages/partials/layout.js ：

module.exports = function(title) {
    return {
        _:"<!DOCTYPE html>",
        html: {
            head: {
                'meta[http-equiv="Content-Type" content="text/html; charset=utf-8"]': {},
                'link[rel="stylesheet" type="text/css" href="styles.css"]': {},
                title: title
            },
            body: {}
        }
    };
};

module.exports = function(title) {

return {

_:"<!DOCTYPE html>",

html: {

head: {

'meta[http-equiv="Content-Type" content="text/html; charset=utf-8"]': {},

'link[rel="stylesheet" type="text/css" href="styles.css"]': {},

title: title

body: {}

}

};

這裡其實就是一個返回物件的函式。所以，之前的 landing.js 可以修改為：

module.exports = function(api) {
    var layout = require("./partials/layout.js")("Home page");
    api.add(layout);
}

module.exports = function(api) {

var layout = require("./partials/layout.js")("Home page");

api.add(layout);

}

可以看到，layout 模板接受 title 變數。這樣就可以動態地生成一部分內容。

接下來是向 body 標籤新增內容。非常簡單，因為所有內容都是純 JavaScript 物件。

module.exports = function(api) {
    var layout = require("./partials/layout.js")("Home page");
    layout.html.body = {
        h1: "Page content"
    }
    api.add(layout);
}

module.exports = function(api) {

var layout = require("./partials/layout.js")("Home page");

layout.html.body = {

h1: "Page content"

}

api.add(layout);

}

生成的結果：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <title>Home page</title>
    </head>
    <body>
        <h1>Page content</h1>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Page content</h1>

</body>

</html>

本文的程式碼看起來都很短、不完整，是因為全寫的話文章就太長了。接下來我只會介紹一下建立無序列表的思想，因為這裡比較有意思。剩餘的部分跟 layout 類似，就不再敖述。

下面就是生成無序列表的片段。<ul></ul>標籤：

module.exports = function(data) {
    var html = { ul: [] };
    for(var i=0; item=data[i]; i++) {
        html.ul.push({ li: item });
    }
    return html;
}

module.exports = function(data) {

var html = { ul: [] };

for(var i=0; item=data[i]; i++) {

html.ul.push({ li: item });

}

return html;

}

這裡只用了一個 ul 屬性定義一個物件。ul 其實就是一個陣列，裝滿列表中的項。

var list = require("./partials/list.js");
var link = require("./partials/link.js");
list([
    link("http://krasimir.github.io/absurd", "Official library site"),
    link("https://github.com/krasimir/absurd", "Official repository")
]);

var list = require("./partials/list.js");

var link = require("./partials/link.js");

list([

link("http://krasimir.github.io/absurd", "Official library site"),

link("https://github.com/krasimir/absurd", "Official repository")

]);

link 也是片段，類似這樣子：

module.exports = function(href, label) {
    return { 
        a: { _attrs: { href: href }, _: label }
    }
}

module.exports = function(href, label) {

return {

a: { _attrs: { href: href }, _: label }

}

組合起來後就會生成：

<ul>
    <li>
        <a href="http://krasimir.github.io/absurd">
            Official library site
        </a>
    </li>
    <li>
        <a href="https://github.com/krasimir/absurd">
            Official repository
        </a>
    </li>
</ul>

<ul>

<li>

Official library site

</a>

</li>

<li>

Official repository

</a>

</li>

</ul>

現在，想象我們有一堆可以使用的片段。如果它們編寫得足夠靈活，只需建立一次就可以在專案之間傳遞了。AbsurdJS 是如此強大，只要我們擁有一堆足夠好的預定義集合，就可以快速、更具描述性地編寫 HTNL 標記。

最後，當 HTML 已經完成後，我們只需編譯併傳送給使用者。於是，對 app.js 做小小的變動使得我們的應用響應正確的標記：

var absurd = require("absurd");
var homePage = function(req, res, next) {
    absurd().morph("html").import(__dirname + "/pages/landing.js").compile(function(err, html) {
        res.send(html);
    });
}
app.get('/', setContentType("html"), homePage);

var absurd = require("absurd");

var homePage = function(req, res, next) {

absurd().morph("html").import(__dirname + "/pages/landing.js").compile(function(err, html) {

res.send(html);

});

}

app.get('/', setContentType("html"), homePage);

提供 CSS

與 HTML 型別，先在 app.js 為 style.css 新增路由。

var styles = function(req, res, next) {
    absurd().import(__dirname + "/styles/styles.js").compile(function(err, css) {
        res.send(css);
    });
}
app.get('/styles.css', setContentType("css"), styles);

var styles = function(req, res, next) {

absurd().import(__dirname + "/styles/styles.js").compile(function(err, css) {

res.send(css);

});

}

app.get('/styles.css', setContentType("css"), styles);

使用 JavaScript 定義 CSS。任何東西都可以放在分好的 Node.js 模組中。讓我們建立 /styles/styles.js 並加入程式碼：

module.exports = function(api) {
    api.add({
        body: {
            width: "100%",
            height: "100%",
            margin: 0,
            padding: 0,
            fontSize: "16px",
            fontFamily: "Arial",
            lineHeight: "30px"
        }
    })
}

module.exports = function(api) {

api.add({

body: {

width: "100%",

height: "100%",

margin: 0,

padding: 0,

fontSize: "16px",

fontFamily: "Arial",

lineHeight: "30px"

}

})

}

一個簡單的 <body> 樣式控制。注意帶有破折號的屬性被改寫成駝峰式大小寫風格。否則不能建立有效物件，會得警告。

現在假設要控制 <h1> 和 <h2> 標籤的樣式。它們都是標題，顏色和字型相同；但是大小不一樣。通過下面的方法，AbsurdJS會智慧地輸出正確的樣式。

var title = function() {
    return {
        color: "#2C6125",
        fontWeight: "normal",
        fontSize: "40px",
        fontFamily: "Georgia",
        padding: "20px 10px"
    }
} 
api.add({
    h1: title(),
    h2: [
        title(), 
        { fontSize: "30px" }
    ]
});

var title = function() {

return {

color: "#2C6125",

fontWeight: "normal",

fontSize: "40px",

fontFamily: "Georgia",

padding: "20px 10px"

}

api.add({

h1: title(),

h2: [

title(),

{ fontSize: "30px" }

]

});

輸出結果：

h1, h2 {
    color: #2C6125;
    font-weight: normal;
    font-family: Georgia;
    padding: 20px 10px;
}
h1 {
    font-size: 40px;
}
h2 {
    font-size: 30px;
}

h1, h2 {

color: #2C6125;

font-weight: normal;

font-family: Georgia;

padding: 20px 10px;

}

h1 {

font-size: 40px;

}

h2 {

font-size: 30px;

}

前處理器會收集只定義了一次的相同樣式，併為不同的樣式建立新的定義。

結論

如果打算使用 Node.js，Express 會是最好的起點之一。它雖然不是超級強大，但依然很好用。它具備了開發 web 應用所需的基本要素。然後去擴充套件它，使用 AbsurdJS 會為開發帶來不少趣味性，因為整個應用都是用純 JavaScript 編寫的。

資源

Express 官網 – http://expressjs.com/

Express GitHub 倉庫 – https://github.com/visionmedia/express

AbsurdJS 官網與線上編譯器 – http://absurdjs.com

AbsurdJS GitHub 倉庫 – https://github.com/krasimir/absurd

socket.io+angular.js+express.js做個聊天應用(一)
2014-05-29
AngularJSExpress
socket.io+angular.js+express.js做個聊天應用(二)
2014-05-29
AngularJSExpress
socket.io+angular.js+express.js做個聊天應用(三)
2014-05-30
AngularJSExpress
socket.io+angular.js+express.js做個聊天應用(四)
2014-06-02
AngularJSExpress
SQL Server Express和SQL Server Compact的應用
2009-02-25
SQLServerExpress
Node.js 配合 express 框架、ejs 、mongodb 實現應用 && [使用 TypeScript 重構]
2019-03-21
Node.jsExpress框架MongoDBTypeScript
heX：用HTML5和Node.JS開發桌面應用
2013-09-19
HTMLNode.js
node.js應用Redis
2019-01-23
Node.jsRedis
Yeoman官方教程：用Yeoman和AngularJS做Web應用
2014-04-24
AngularJSWeb
用node.js做程式設計題
2019-02-16
Node.js程式設計
從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（七）
2020-03-10
VueExpress全棧
從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（五）
2020-02-10
VueExpress全棧
從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（一）
2020-04-11
VueExpress全棧
從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（三）
2020-04-28
VueExpress全棧
從零到部署：用 Vue 和 Express 實現迷你全棧電商應用（四）
2020-05-10
VueExpress全棧
帶你用 Vue 全家桶和 Node.js 完成一個聚合應用
2019-03-04
VueNode.js
使用socket.io和node.js搭建websocket應用
2019-05-11
Node.jsWeb
使用Meteor和Node.js構建實時應用
2013-03-27
Node.js
react + express 擼一個圖床應用
2018-05-17
ReactExpress圖床
Node.js 系列：構建原生 Node.js 應用
2019-02-27
Node.js
在 Node.js 上執行 Flutter Web 應用和 API
2019-11-01
Node.jsFlutterWebAPI
Node.js Express 框架
2019-06-27
Node.jsExpress框架
Node.js和express系列學習資料
2018-06-27
Node.jsExpress
Electrode: 沃爾瑪React和Node.js開源應用框架
2016-10-07
ReactNode.js框架
Node.js 應用 peer dependency 的用法
2022-08-19
Node.js
使用 HTTP/2 加速 Node.js 應用
2023-05-08
HTTPNode.js
［譯］擴充套件 Node.js 應用
2017-08-24
套件Node.js
2、Node.js 第一個應用
2018-05-21
Node.js
我是如何找到 Express 應用延遲原因的
2017-03-31
Express
使用React做同構應用
2017-04-28
React
如何將本地 SAP UI5 應用通過 Node.js Express 部署到公網上試讀版
2022-03-25
UINode.jsExpress
Node.js框架之express
2015-10-12
Node.js框架Express
【譯】使用 MongoDB，React，Node 和 Express（MERN）構建一個全棧應用
2019-08-16
MongoDBReactExpress全棧
Node.js Web應用程式碼熱更新
2019-10-21
Node.jsWeb
Node.js 子程式與應用場景
2019-03-01
Node.js
使用 NestJS 開發 Node.js 應用
2018-12-02
Node.js
如何用node.js建立一個應用
2018-07-30
Node.js
伸縮擴充套件Node.JS應用
2014-04-15
套件Node.js

用 Express 和 AbsurdJS 做 Node.js 應用

簡介

步驟

執行伺服器

新增路由

提供 HTML

提供 CSS

結論

資源

相關文章