标签： NodeJS
0
一个星期没更新了 = =
一直在忙着重构代码，以及解决重构后出现的各种bug
现在CSS也有一点了，是时候把遇到的各种坑盘点一下了
1 听歌排行 API 修复与重构
1.1 修复
在加载云音乐听歌排行的时候，有时会出现一个奇怪的bug：json数据无法被解析。如下图：
在刷新页面后，问题就会得到解决。此后无论怎么刷新，问题也不会出现。
过一段时间再次打开页面，会出现相同的问题，刷新之后也可以解决。此时换用其他各种浏览器，都不会出现问题；但一段时间之后仍会重现一次。。。
那肯定不是浏览器的锅了。把Response的内容复制出来看看。
粘贴，格式化。VSCode报出了4个警告和一个错误；再仔细看一眼，哎，怎么中途截断了？难道是收到的请求不全？
返回去看看接收请求收到的JSON文件：没错啊，是全的。当然了，因为接下来刷新几次之后就不会在遇到此问题了。在本地测试中也发现，只有服务器启动之后的第一次访问，才会出现这个问题。
找到输出的位置，在这里下断点，开始调试。
从server.js进来的时候，文件还没有被创建；到36行，建立请求；38行，绑定事件回调；49行，发送。
接收到数据，触发response事件，命中断点。
解压缩，输出，这时候检查一下输出的文件，0 KB。跑到下一步callback，传出文件名，这时候检查输出文件，0 KB。
等下！怎么会是0 KB！这时文件还没有写入完成，就已经把文件名传给回调函数，然后开始读取了？！
然后就进入了各种不明所以的内部库调用，跳出之后，检查输出文件，37KB。这里才刚刚写入完成！自然，浏览器那边还是没法解析，传出来的数据还是不完整，即使输出文件已经是完整的了。
有没有联想到一些东西？是IO效率的问题，或者说，文件操作也是异步的，需要等待一个事件？
好，马上去查一下Stream的API文档，找到了Stream.Writable的finish事件。这个事件在所有数据写入完成之后被触发。好，要的就是你。
将代码修改如下：
response.pipe(zlib.createGunzip()).pipe(output);
// wait for file operation
output.on('finish',() => {fs.readFile(outputFileName, (err, data) => {var buf = JSON.parse(data.toString())['/api/user/detail/76980626'].listenedSongs;bufJSON = new Array();buf.forEach((value, index) => {if (index > 9) return;bufJSON.push({ id: value.id, name: value.name, artistName: value.artists[0].name });});});
});在等待文件操作完成之后才读取数据，而且读到数据后，只取出自己需要用到的部分，存在全局数组bufJSON中当作缓存，顺便提高一下API响应速度。
1.2 重构
之前，API获取的听歌排行目标用户是写死在代码里的。可以写一个init()函数，初始化它的获取目标用户。
function init(id) {userId = id;outputFileName = `netease_music_record_${id}.json`;
}在写入请求body的时候，要把请求数据转化成QueryString的格式。Node.js提供的QueryString模块可以接受一个Obejct作为参数，输出字符串；不过可变值的多行字符串并不能作为对象的属性名。也就是说：
var postData = {`/api/user/detail/${id}`: '{\'all\':true}'
}是会报错的，对象属性名非法。这下我们就需要引入Map这个数据类型了，只要是合法的字符串，就可以当作数据的键和值。像这样：
var req = http.request(options);
var qString = new Map();
qString[`/api/user/detail/${userId}`] = '{\'all\':true}';
req.write(qs.stringify(qString));
嗯，API的优化就说到这里了，代码都在文章最下方的Git仓库里，我也会时不时进行一些抽风似的重构，不可能一一讲述了。
2 服务器端页面渲染
说到动态页面，直接用JS在浏览器里操作不就行了，还关服务器什么事？这样虽然很方便，不过有一个弊端：不利于搜索引擎爬虫的索引。自己博客里写了这么多文章，当然希望更多的人可以通过搜索引擎找到，而不是整天放在那里无人问津吧。
好，那就来动态的构建一个404页面，可以显示当然服务器正在运行的Node版本。
之前我们的404页面是这样的。可现在Node.js的current版本已经到6.4.0了，就先从这里下手吧。
通过Node.jsAPI文档，了解到，要获取当前node版本号，只需要使用porcess.version。如何吧这个版本号替换进404页面的html文件中去呢？我想到的方法是，把html中的版本号改成一段特殊的字符串，然后用正则表达式去唯一的匹配他。比如这样：
<p>Node.js - ${process.version}</p>然后我们建立正则表达式，去匹配那个字符串。但千万不要在html文档的其他地方使用这个“占位符”，它会被全部替换成版本号。也可以再在后面加一些其他无意义内容，反正要避免正常的代码或文字与它重复。
fs.readFile(path.join(root, '/page/404.html'), (err, data) => {var versionRegex = /\$\{process\.version\}/;var nodeVersion = process.version;var current404 = data.toString().replace(versionRegex, nodeVersion);var page404 = fs.createWriteStream(path.join(root, '/page/current404.html'));page404.end(current404, 'utf8');
});读取文件，转换字符串，然后生成了新的current404.html文件。之后发送404页面的响应也要改成发送刚刚生成的current404.html。
把这段代码放在server.js靠前的部分，相当于变量初始化的位置，然后运行测试吧：
好的，效果达到了。
3 使用 history.pushState()，改变 URL 并局部刷新页面
Ajax都很熟悉吧，Asynchronous Javascript And XML，再加上pushState，就变成了Pjax。
没什么神秘的，history.pushState()的作用就是，改变页面的URL，并将一个state对象储存起来。这个state对象是自己定义的。在事件window.onpopstate的回调函数中，传入的参数的state属性，是之前储存起来的state对象。
简单来说，使用history.pushState()，会改变当前页面的URL，但仅仅是改变，浏览器并不尝试去加载他，只是摆在那里；同时会将URL与传入的state对象一起压入历史纪录栈中。当用户操作浏览器前进或后退时，如果操作后当前页面的URL是由history.pushState()方法压入栈中的，那么页面将不会被重新加载，window.onpopstate的回调函数会被执行。
有关更详细的介绍，请看操纵浏览器的历史记录 - DOM | MDN。
我的目的是，在用户单击了首页的标题文章标题时，URL改变，但以Ajax的方法从服务器加载文章内容，显示在页面上。而当用户直接访问这个URL时，又能提供完整文章浏览的页面。
为此，先要在主页上动动手脚，使得点击文章之后让他看起来像一个浏览页面：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Rocka's Node Blog</title>
</head><body><h1>Rocka's Node Blog</h1><hr><h3 id="index-article-title" style="display:none;">Title should be shown here.</h3><blockquote id="index-article-content" style="display:none;">Article should be shown here.</blockquote><h3 id="index-article-header">Blog Archive</h3><ul id="index-article-list"></ul><h3>Rcecntly Listened</h3><ul id="index-music-record"></ul>
</body></html>新加入的元素被设置为了不显示，我们总不能在一个主页上就显示文章内容吧。在用户点击文章之后，再改变历史记录，同时变更页面的样式，让它看起来像一个文章浏览页面。于是，在loadArticleContent的success回调中，我们这样写：
function success(response) {history.pushState({originTitle: articleTitle,type: 'archive',originPathName: window.location.pathname},articleTitle,`/archive/${articleTitle}`);// switch element visibilityshowArticleContnet();document.getElementById('index-article-title').innerText = articleTitle;document.getElementById('index-article-content').innerText = response;
}showAtricleContent函数用来切换各种元素可见性，把#index-article-header和#index-article-list隐藏，#index-article-title和#index-article-contnet显示，这里就不展开写了。el.sytle.display='block'或者'none'就好。之后还会有一个showIndex函数，都懂这个意思，看看就好。
还有就是history.pushState()的三个参数，第一个是要压入的state对象，第二个是名称，可以传入空字符串，或者当前文章名称，因为这个属性在现在并没由什么用处（MDN是这么说的！）。第三个就是要变成的URL了，规定好自己的URL地址。我这里用的是与文章文件相同位置的地址。
然后，看看效果：
URL被改变了，内容也成功加载出来。可是如果现在后退的话，虽然URL会变回去，但却不会产生任何效果。这时要给window.onpopstate绑定回调函数：
window.onpopstate = (e) => {if (e.state) {loadArticleContent(e.state.originTitle);} else {showIndex();}
}这个e.state是我们之前pushState的时候压入历史记录栈中的，里面存储的是跳转到的标题。同样，如果没有state，应该是后退到了主页上，显示主页。
现在测试，点击，跳转了，后退，正常；前进，正常；后退，后退。。。。哎，不对啊，怎么退不回主页了？还记得loadArticleContent吗？我们调用它的时候，直接使用了pushState。但在window.onpopstate的回调函数中，也是调用了它。这也就意味着，当我们操作页面前进时，又会有一条历史记录被压入栈中；然后再后退，又多了一条，每次后退，又会多一条。虽然我们的位置后退了，但在我们前面又增加了一条记录，这样永远也回不到主页。
所以，在加载文章内容时做出判断：如果此次加载来自历史记录操作（加一个参数就好），那么不再增加历史记录：
function loadArticleContent(articleTitle, fromState) {function success(response) {if (!fromState) {history.pushState({originTitle: articleTitle,type: 'archive',originPathName: window.location.pathname},articleTitle,`/archive/${articleTitle}`);}showArticleContent();document.getElementById('index-article-title').innerText = articleTitle;document.getElementById('index-article-content').innerText = response;}// other more operations......// ......
}window.onpopstate = (e) => {if (!e.state) {showIndex();} else {loadArticleContent(e.state.originTitle, true);}
}至此，在不刷新的前提下主页的操作正常了。
4 动态构建文章阅读页面
借助pushState，我们时可以改变URL了，可是这个页面实际上是不存在的，一刷新就没了。如果别人想要收藏你的博客文章，不就很尴尬了。。。所以我们要动态的构建一个阅读页面出来。
刚才在处理首页的时候，把元素隐藏了一下就变成阅读界面了。这里先把首页复制一份，稍加改动，就变成了文章阅读页面view.html：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Rocka's Node Blog</title>
</head><body><h1>Rocka's Node Blog</h1><hr><h3 id="index-article-title">${article.title}</h3><blockquote id="index-article-content">${article.contnet}</blockquote><h3 id="index-article-header" style="display:none;">Blog Archive</h3><ul id="index-article-list" style="display:none;"></ul><h3>Rcecntly Listened</h3><ul id="index-music-record"></ul>
</body></html>这里我把对应元素的内容也都换成了“占位符”，方便匹配。接下来，当用户请求文章页面的时候，就像生成404页面一样，先读取模板，然后将占位符用相应的数据替换。唯一不同的一点是，不要把输出后的文件缓存到当前目录，否则加载文章列表要读取文件的时候，会多出一些奇怪的东西。
在服务器启动监听端口之前，先把原始的文章阅读页面存入全局变量，也是相当于变量初始化吧：
fs.readFile(path.join(root, '/page/view.html'), (err, data) => {// read origin page in advanceplainViewPage = data.toString();
});之后每次请求时，只要复制存在全局变量里的字符串，然后修改副本：
fs.stat(filePath, (err, stats) => {// no error occured, read fileif (!err && stats.isFile()) {if (pathName.indexOf('/archive/') >= 0) {var archiveRegex = /archive\/(.+)/;var titleRegex = /\$\{archive\.title\}/;var contentRegex = /\$\{archive\.content\}/;var title = archiveRegex.exec(pathName)[1];fs.readFile(path.join(root, pathName), (err, data) => {var page = plainViewPage;var page = page.replace(titleRegex, title);var page = page.replace(contentRegex, data.toString());response.end(page);});} else {// normal file read}} else {// file not found}
});现在问题来了：上一步pjax的时候，请求文章内容的URL已经是文章的“真实”URL了。如果再把这个URL分给文章页面，是否会产生冲突？
当然会了，不过我们有办法避免。在我们异步请求文章内容的时候是一个GET请求；浏览器刷新页面时也是。但在创建XMLHttpRequest的时候，可以给它设置一个特殊的请求头，比如pushstate-ajax之类的，用于区分动态加载和页面获取。值得注意的是，只有在请求open之后，send之前，才能设置请求头：
var request = new XMLHttpRequest();request.onreadystatechange = () => {if (request.readyState === 4) {if (request.status === 200) {// do sth with resopnse} else {// oops~~}}
}request.open('GET', `/archive/${articleTitle}`);
// set special request header
request.setRequestHeader('pushstate-ajax', true);
request.send();同样，在服务器端，也需要进行一些判断：
- 如果是正常的页面请求（没有特殊请求头），就要返回替换了文章内容的查看页面；
- 否则只需要返回文章内容：
if (request.method === 'GET') {if (pathName.indexOf('/api/') >= 0) {// api request} else if (request.headers['pushstate-ajax']) {// return article coontent only} else {fs.stat(filePath, (err, stats) => {if (!err && stats.isFile()) {if (pathName.indexOf('/archive/') >= 0) {// return mixed view.html} else {// normal file}} else if (!err && pathName == '/') {// goto index} else {// return currnet404.html}});}
}5
好了，今天就写到这里。其实我还落下了一次更新，现在的实际进度已经达到了，额，还是点开下面的App地址看一下吧，我也不好形容。我会抓紧把剩下的坑都填好的 ；）
仓库地址
GitHub仓库：BlogNode
主仓库，以后的代码都在这里更新。
HerokuApp：rocka-blog-node
上面GitHub仓库的实时构建结果。
