溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何用Express和AbsurdJS做Node.js 應用，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
當今有許多新技術吸引著越來越多的開發者，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": "*" } }
當然，這里還有許多其它的參數可以配置，但為了方便舉例我們就先按上面的配置吧。打開終端，定位包含到 Package.json 的目錄，執行：
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 方法的***個參數定義了路徑；第二個參數是個方法，用來處理請求，它接受三個參數 – 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"); } );
路由定義中通用的做法是添加一些可重用的任務作為中間件。比如說，我們有兩種 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 對象。我們先從實現著陸頁開始。新建文件夾 pages，在里面新建 landing.js 文件。我們在用 Node.js 所以文件里應該包含：
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: {} } }); }
“_” 屬性添加的字符串在編譯成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>
本次教程只有一個頁面，而在現實中你可能會在多個頁面中使用相同的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: {} } }; };
這里其實就是一個返回對象的函數。所以，之前的 landing.js 可以修改為：
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 = { h2: "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> <h2>Page content</h2> </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 其實就是一個數組，裝滿列表中的項。
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>
現在，想象我們有一堆可以使用的片段。如果它們編寫得足夠靈活，只需創建一次就可以在項目之間傳遞了。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);
提供 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 模塊中。讓我們創建 /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> 樣式控制。注意帶有破折號的屬性被改寫成駝峰式大小寫風格。否則不能創建有效對象，會得警告。
現在假設要控制 <h2> 和 <h3> 標簽的樣式。它們都是標題，顏色和字體相同；但是大小不一樣。通過下面的方法，AbsurdJS會智能地輸出正確的樣式。
var title = function() { return { color: "#2C6125", fontWeight: "normal", fontSize: "40px", fontFamily: "Georgia", padding: "20px 10px" } } api.add({ h2: title(), h3: [ title(), { fontSize: "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和AbsurdJS做Node.js 應用問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
