如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

thinkjs的中间件是其重要的组成部分。在本篇文章中,苏南大叔将继续以thinkjs的默认demo为例,利用htmltidy来格式化html代码输出。代码的基础部分是这篇文章:https://newsn.net/say/thinkjs-middleware-html-minifier.html

效果展示

下图中,1号是正常的html输出,2号是本文中的tidy输出,3号是上篇文章中的压缩结果。

利用htmltidy编写thinkjs中间件,格式化html代码输出 - 对比图
利用htmltidy编写thinkjs中间件,格式化html代码输出(图2-1)

安装htmltidy依赖

tidy在nodejs的实现源码,苏南大叔没有找到太好的。这个htmltidy在github上面的start数量也不是太多,试了一下,还是可以用的。如果大家有兴趣,可以去fork一个,增加些功能。https://github.com/vavere/htmltidy

利用htmltidy编写thinkjs中间件,格式化html代码输出 - 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 += "<!--error-->";
      }
  }
};

await去等待一个promisepromise里面去等待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/

 【源码】代码片段及相关软件点此获取

 【promise】秘籍文章入口,仅传授于有缘之人   promise    tidy

本站的忠实读者小伙伴,正在阅读下面这些文章:

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!