快速迭代是一種不錯的開發方式,因此我們在第一次迭代時先實現服務器的基本功能。
## 設計
簡單分析了需求之后,我們大致會得到以下的設計方案。
~~~
+---------+ +-----------+ +----------+
request -->| parse |-->| combine |-->| output |--> response
+---------+ +-----------+ +----------+
~~~
也就是說,服務器會首先分析URL,得到請求的文件的路徑和類型(MIME)。然后,服務器會讀取請求的文件,并按順序合并文件內容。最后,服務器返回響應,完成對一次請求的處理。
另外,服務器在讀取文件時需要有個根目錄,并且服務器監聽的HTTP端口最好也不要寫死在代碼里,因此服務器需要是可配置的。
## 實現
根據以上設計,我們寫出了第一版代碼如下。
~~~
var fs = require('fs'),
path = require('path'),
http = require('http');
var MIME = {
'.css': 'text/css',
'.js': 'application/javascript'
};
function combineFiles(pathnames, callback) {
var output = [];
(function next(i, len) {
if (i < len) {
fs.readFile(pathnames[i], function (err, data) {
if (err) {
callback(err);
} else {
output.push(data);
next(i + 1, len);
}
});
} else {
callback(null, Buffer.concat(output));
}
}(0, pathnames.length));
}
function main(argv) {
var config = JSON.parse(fs.readFileSync(argv[0], 'utf-8')),
root = config.root || '.',
port = config.port || 80;
http.createServer(function (request, response) {
var urlInfo = parseURL(root, request.url);
combineFiles(urlInfo.pathnames, function (err, data) {
if (err) {
response.writeHead(404);
response.end(err.message);
} else {
response.writeHead(200, {
'Content-Type': urlInfo.mime
});
response.end(data);
}
});
}).listen(port);
}
function parseURL(root, url) {
var base, pathnames, parts;
if (url.indexOf('??') === -1) {
url = url.replace('/', '/??');
}
parts = url.split('??');
base = parts[0];
pathnames = parts[1].split(',').map(function (value) {
return path.join(root, base, value);
});
return {
mime: MIME[path.extname(pathnames[0])] || 'text/plain',
pathnames: pathnames
};
}
main(process.argv.slice(2));
~~~
以上代碼完整實現了服務器所需的功能,并且有以下幾點值得注意:
1. 使用命令行參數傳遞JSON配置文件路徑,入口函數負責讀取配置并創建服務器。
2. 入口函數完整描述了程序的運行邏輯,其中解析URL和合并文件的具體實現封裝在其它兩個函數里。
3. 解析URL時先將普通URL轉換為了文件合并URL,使得兩種URL的處理方式可以一致。
4. 合并文件時使用異步API讀取文件,避免服務器因等待磁盤IO而發生阻塞。
我們可以把以上代碼保存為`server.js`,之后就可以通過`node server.js config.json`命令啟動程序,于是我們的第一版靜態文件合并服務器就順利完工了。
另外,以上代碼存在一個不那么明顯的邏輯缺陷。例如,使用以下URL請求服務器時會有驚喜。
~~~
http://assets.example.com/foo/bar.js,foo/baz.js
~~~
經過分析之后我們會發現問題出在`/`被自動替換`/??`這個行為上,而這個問題我們可以到第二次迭代時再解決。