用 Express 和 AbsurdJS 做 Node.js 應用

作者：Jaward華仔翻譯 2014-07-11 14:16:15

在本教程中，我將會教你結合 Express 去使用 AbsurdJS。Express 是流行的 Node.js 框架，而 AbsurdJS 則比較新鮮，希望你看完后會發(fā)現(xiàn)它很有用。

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

本文中出現(xiàn)的源碼都可以從這里下載。

簡介

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

AbsurdJS 一開始是一個 CSS 預處理器。目的是為 CSS 開發(fā)者帶來更好的靈活性。它接受純 JavaScript 代碼并轉(zhuǎn)換為 CSS。大家對它的反饋都比較積極，我也在努力繼續(xù)完善它。現(xiàn)在它不僅能預處理 CSS，還可以處理 HTML。它接受 JSON 和 YAML 并成功導出作客戶端使用。

步驟

為了使***做出的項目能跑起來，我們需要安裝 Node.js。只需打開 nodejs.org 并點擊大大的綠色“INSTALL”按鈕。下載并安裝完成后你就可以調(diào)用 Node.js 腳本，用npm（Node 的包管理器）安裝依賴包。

為你的項目新建一個文件夾，里面再新建一個空的“package.json”文件。包管理器會以這個文件為起點去安裝我們需要的包。我們只需兩個包，所以 json 文件應該是這個樣子：

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

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

npm install

會在當前目錄生成 node_modules 文件夾，并自動下載 Express 和 AbsurdJS。

運行服務器

有了 Express 你只需要簡單幾行代碼就可以運行一個 http 服務器。

var express = require('express'),  
    app = express();  
   
app.listen(3303);  
console.log('Listening on port 3303');

保存以上代碼為 app.js 并運行：

node app.js

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

Cannot GET /

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

添加路由

Express 提供了友好的 API 去定義 URL 路由。我們在這里簡單地添加一個，把下面的代碼貼到 app.js 中。

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

這里做了幾件事。.get 方法的***個參數(shù)定義了路徑；第二個參數(shù)是個方法，用來處理請求，它接受三個參數(shù) – request、response、next。這里的好處是我們可以傳入多個函數(shù)，它們會一個接一個的被調(diào)用。我們需要做的只是執(zhí)行 next()，否者 next 方法不會被調(diào)用。比如：

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");  
});

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

提供 HTML

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

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

注意返回的函數(shù)接受 AbsurdJS API 的引用。這正是我們所要的。現(xiàn)在再加點 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: {}  
        }  
    });  
}

“_” 屬性添加的字符串在編譯成HTML時不會被轉(zhuǎn)換；其它的屬性各定義了一個標簽。還可以用其它方法去定義標簽屬性，但我認為用上面的方式更好。這個想法是從 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>

本次教程只有一個頁面，而在現(xiàn)實中你可能會在多個頁面中使用相同的HTML。此時更合理的做法是將這部分代碼移到外部的文件中，在需要的時候引用進來。當然，這里還可以使用可重復模板。創(chuàng)建文件 /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: {}  
        }  
    };  
};

這里其實就是一個返回對象的函數(shù)。所以，之前的 landing.js 可以修改為：

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

可以看到，layout 模板接受 title 變量。這樣就可以動態(tài)地生成一部分內(nèi)容。

#p#

接下來是向 body 標簽添加內(nèi)容。非常簡單，因為所有內(nèi)容都是純 JavaScript 對象。

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>

本文的代碼看起來都很短、不完整，是因為全寫的話文章就太長了。接下來我只會介紹一下建立無序列表的思想，因為這里比較有意思。剩余的部分跟 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;  
}

這里只用了一個 ul 屬性定義一個對象。ul 其實就是一個數(shù)組，裝滿列表中的項。

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 }  
    }  
}

組合起來后就會生成：

<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>

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

***，當 HTML 已經(jīng)完成后，我們只需編譯并發(fā)送給用戶。于是，對 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);

提供 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);

使用 JavaScript 定義 CSS。任何東西都可以放在分好的 Node.js 模塊中。讓我們創(chuàng)建 /styles/styles.js 并加入代碼：

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

一個簡單的 <body> 樣式控制。注意帶有破折號的屬性被改寫成駝峰式大小寫風格。否則不能創(chuàng)建有效對象，會得警告。

現(xiàn)在假設要控制 <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" }  
    ]  
});

輸出結果：

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

預處理器會收集只定義了一次的相同樣式，并為不同的樣式創(chuàng)建新的定義。

結論

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

資源

Express 官網(wǎng) – http://expressjs.com/

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

AbsurdJS 官網(wǎng)與在線編譯器 – http://absurdjs.com

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

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

原文鏈接： Krasimir Tsonev 翻譯：伯樂在線 - Jaward華仔

譯文鏈接： http://blog.jobbole.com/73031/

責任編輯：林師授來源：伯樂在線

AbsurdJS Express