html编辑代码输出,利用htmltidy编写thinkjs中间件，格式化html代码输出

本博客不欢迎：各种镜像采集行为，请尊重知识产权法律法规。大家都是程序员，不要闹得不开心。

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/ 。

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。

本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。