本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。
thinkjs的中间件是其重要的组成部分。在本篇文章中,苏南大叔将继续以thinkjs的默认demo为例,利用htmltidy来格式化html代码输出。代码的基础部分是这篇文章:https://newsn.net/say/thinkjs-middleware-html-minifier.html 。
效果展示
下图中,1号是正常的html输出,2号是本文中的tidy输出,3号是上篇文章中的压缩结果。
利用htmltidy编写thinkjs中间件,格式化html代码输出(图2-1)
安装htmltidy依赖
tidy在nodejs的实现源码,苏南大叔没有找到太好的。这个htmltidy在github上面的start数量也不是太多,试了一下,还是可以用的。如果大家有兴趣,可以去fork一个,增加些功能。https://github.com/vavere/htmltidy
利用htmltidy编写thinkjs中间件,格式化html代码输出(图2-2)
在这里,我们需要安装htmltidy这个扩展库,所以请记得执行下列语句。npm install htmltidy --save
关键代码module.exports = (options, app) => {
return async (ctx, next) => {
await next();
try{
ctx.body = await (function(html){
return new Promise(function (resolve, reject) {
var tidy = require('htmltidy').tidy;
var opts = {
doctype: 'html5',
indent: true,
bare: true,
breakBeforeBr: true,
hideComments: true,
fixUri: true,
wrap: 0
};
tidy(html, opts, function(err, html) {
if (err) {
console.log(err);
reject(err);
}
// reject("未知错误");
resolve(html);
});
})
})(ctx.body);
}
catch(ex){
//console.log(ex);
ctx.body += "";
}
}
};
用await去等待一个promise,promise里面去等待htmldity的callback返还结果。这段node代码看起来和php的代码,差别较大。主要体现在promise等语句,其中resovle函数是负责从一个promise里面返还数据的,而reject是用于返还失败的。最终用try{}catch(ex){}来获取reject里面的错误信息。
结论
这个htmltidy是不是我们最好的选择?不是太确定。在github的主页里面的examples里面,还有更多的例子。苏南大叔个人认为代码不错,不过似乎很久没有人维护了,star数也不是太多。难道tidy的功能,需求不是太大?另外,这段代码也不会是最终版,还有改进的空间,聪明的读者,您说是么?
在这个代码里面,我们可以体会到await和promise的关系,在接下来的文字中,苏南大叔还会继续讲述await相关的代码。欢迎继续关注苏南大叔的后续thinkjs文章,https://newsn.net/tag/thinkjs/ 。
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。