點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
如何用Express和AbsurdJS做Node.js 應(yīng)用，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。
當(dāng)今有許多新技術(shù)吸引著越來越多的開發(fā)者，Node.js 便是其中之一。主要因?yàn)樗?JavaScript 驅(qū)動(dòng)的，許多人都很感興趣。在本教程中，我將會(huì)教你結(jié)合 Express 去使用 AbsurdJS。Express 是流行的 Node.js 框架，而 AbsurdJS 則比較新鮮，希望你看完后會(huì)發(fā)現(xiàn)它很有用。
簡(jiǎn)介
正如我提到的，Express 很流行。因?yàn)樗亲钤绲?Node.js 框架之一。它把所有瑣碎的事情都包辦了，比如路由選擇、參數(shù)解析、模板、向?yàn)g覽器發(fā)送響應(yīng)。它的庫基于 Connect 提供的中間件架構(gòu)對(duì)原生的 Node.js 進(jìn)行了較好的封裝。
AbsurdJS 一開始是一個(gè) CSS 預(yù)處理器。目的是為 CSS 開發(fā)者帶來更好的靈活性。它接受純 JavaScript 代碼并轉(zhuǎn)換為 CSS。大家對(duì)它的反饋都比較積極，我也在努力繼續(xù)完善它?，F(xiàn)在它不僅能預(yù)處理 CSS，還可以處理 HTML。它接受 JSON 和 YAML 并成功導(dǎo)出作客戶端使用。
步驟
為了使***做出的項(xiàng)目能跑起來，我們需要安裝 Node.js。只需打開 nodejs.org 并點(diǎn)擊大大的綠色“INSTALL”按鈕。下載并安裝完成后你就可以調(diào)用 Node.js 腳本，用npm（Node 的包管理器）安裝依賴包。
為你的項(xiàng)目新建一個(gè)文件夾，里面再新建一個(gè)空的“package.json”文件。包管理器會(huì)以這個(gè)文件為起點(diǎn)去安裝我們需要的包。我們只需兩個(gè)包，所以 json 文件應(yīng)該是這個(gè)樣子：
{ "name": "AbsurdJSAndExpress", "description": "AbsurdJS + Express app", "version": "0.0.1", "dependencies": { "express": "3.4.4", "absurd": "*" } }
當(dāng)然，這里還有許多其它的參數(shù)可以配置，但為了方便舉例我們就先按上面的配置吧。打開終端，定位包含到 Package.json 的目錄，執(zhí)行：
npm install
會(huì)在當(dāng)前目錄生成 node_modules 文件夾，并自動(dòng)下載 Express 和 AbsurdJS。
運(yùn)行服務(wù)器
有了 Express 你只需要簡(jiǎn)單幾行代碼就可以運(yùn)行一個(gè) http 服務(wù)器。
var express = require('express'), app = express(); app.listen(3303); console.log('Listening on port 3303');
保存以上代碼為 app.js 并運(yùn)行：
node app.js
這時(shí)控制臺(tái)應(yīng)該顯示 “Listening on port 3303”。瀏覽器打開 http://localhost:3303/ 會(huì)看到：
Cannot GET /
不用擔(dān)心，這很正常，因?yàn)槲覀冞€沒有添加路由。
添加路由
Express 提供了友好的 API 去定義 URL 路由。我們?cè)谶@里簡(jiǎn)單地添加一個(gè)，把下面的代碼貼到 app.js 中。
app.get('/', function(req, res, next) { res.setHeader('Content-Type', 'text/html'); res.send("application"); });
這里做了幾件事。.get 方法的***個(gè)參數(shù)定義了路徑；第二個(gè)參數(shù)是個(gè)方法，用來處理請(qǐng)求，它接受三個(gè)參數(shù) – request、response、next。這里的好處是我們可以傳入多個(gè)函數(shù)，它們會(huì)一個(gè)接一個(gè)的被調(diào)用。我們需要做的只是執(zhí)行 next()，否者 next 方法不會(huì)被調(diào)用。比如：
app.get( '/', function(req, res, next) { console.log("do some other stuff here"); next(); }, function(req, res, next) { res.send("application"); } );
路由定義中通用的做法是添加一些可重用的任務(wù)作為中間件。比如說，我們有兩種 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 的教程和文章都會(huì)介紹一些模板引擎。通常是 Jade、Hogan 或者 Mustache。然而，如果用 AbsurdJS 我們不需要模板引擎。我們可以用純 JavaScript 編寫 HTML。更具體的說，是用 JavaScript 對(duì)象。我們先從實(shí)現(xiàn)著陸頁開始。新建文件夾 pages，在里面新建 landing.js 文件。我們?cè)谟?Node.js 所以文件里應(yīng)該包含：
module.exports = function(api) { // ... }
注意返回的函數(shù)接受 AbsurdJS API 的引用。這正是我們所要的。現(xiàn)在再加點(diǎ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時(shí)不會(huì)被轉(zhuǎn)換；其它的屬性各定義了一個(gè)標(biāo)簽。還可以用其它方法去定義標(biāo)簽屬性，但我認(rèn)為用上面的方式更好。這個(gè)想法是從 Sublime 的 Emmet 插件中獲得的。編譯完成后會(huì)生成：
<!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>
本次教程只有一個(gè)頁面，而在現(xiàn)實(shí)中你可能會(huì)在多個(gè)頁面中使用相同的HTML。此時(shí)更合理的做法是將這部分代碼移到外部的文件中，在需要的時(shí)候引用進(jìn)來。當(dāng)然，這里還可以使用可重復(fù)模板。創(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í)就是一個(gè)返回對(duì)象的函數(shù)。所以，之前的 landing.js 可以修改為：
module.exports = function(api) { var layout = require("./partials/layout.js")("Home page"); api.add(layout); }
可以看到，layout 模板接受 title 變量。這樣就可以動(dòng)態(tài)地生成一部分內(nèi)容。
接下來是向 body 標(biāo)簽添加內(nèi)容。非常簡(jiǎn)單，因?yàn)樗袃?nèi)容都是純 JavaScript 對(duì)象。
module.exports = function(api) { var layout = require("./partials/layout.js")("Home page"); layout.html.body = { h2: "Page content" } api.add(layout); }
生成的結(jié)果：
<!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> <h2>Page content</h2> </body> </html>
本文的代碼看起來都很短、不完整，是因?yàn)槿珜懙脑捨恼戮吞L(zhǎng)了。接下來我只會(huì)介紹一下建立無序列表的思想，因?yàn)檫@里比較有意思。剩余的部分跟 layout 類似，就不再敖述。
下面就是生成無序列表的片段。<ul></ul>標(biāo)簽：
module.exports = function(data) { var html = { ul: [] }; for(var i=0; item=data[i]; i++) { html.ul.push({ li: item }); } return html; }
這里只用了一個(gè) ul 屬性定義一個(gè)對(duì)象。ul 其實(shí)就是一個(gè)數(shù)組，裝滿列表中的項(xiàng)。
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 } } }
組合起來后就會(huì)生成：
<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)建一次就可以在項(xiàng)目之間傳遞了。AbsurdJS 是如此強(qiáng)大，只要我們擁有一堆足夠好的預(yù)定義集合，就可以快速、更具描述性地編寫 HTNL 標(biāo)記。
***，當(dāng) HTML 已經(jīng)完成后，我們只需編譯并發(fā)送給用戶。于是，對(duì) app.js 做小小的變動(dòng)使得我們的應(yīng)用響應(yīng)正確的標(biāo)記：
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" } }) }
一個(gè)簡(jiǎn)單的 <body> 樣式控制。注意帶有破折號(hào)的屬性被改寫成駝峰式大小寫風(fēng)格。否則不能創(chuàng)建有效對(duì)象，會(huì)得警告。
現(xiàn)在假設(shè)要控制 <h2> 和 <h3> 標(biāo)簽的樣式。它們都是標(biāo)題，顏色和字體相同；但是大小不一樣。通過下面的方法，AbsurdJS會(huì)智能地輸出正確的樣式。
var title = function() { return { color: "#2C6125", fontWeight: "normal", fontSize: "40px", fontFamily: "Georgia", padding: "20px 10px" } } api.add({ h2: title(), h3: [ title(), { fontSize: "30px" } ] });
輸出結(jié)果：
h1, h2 { color: #2C6125; font-weight: normal; font-family: Georgia; padding: 20px 10px; } h1 { font-size: 40px; } h2 { font-size: 30px; }
預(yù)處理器會(huì)收集只定義了一次的相同樣式，并為不同的樣式創(chuàng)建新的定義。
如果打算使用 Node.js，Express 會(huì)是***的起點(diǎn)之一。它雖然不是超級(jí)強(qiáng)大，但依然很好用。它具備了開發(fā) web 應(yīng)用所需的基本要素。然后去擴(kuò)展它，使用 AbsurdJS 會(huì)為開發(fā)帶來不少趣味性，因?yàn)檎麄€(gè)應(yīng)用都是用純 JavaScript 編寫的。
關(guān)于如何用Express和AbsurdJS做Node.js 應(yīng)用問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
