标签： async

给 Hexo 增加替换大图并生成缩略图的功能

我厂的官方博客使用 Hexo 搭建，静态页比较符合我厂的技术风格。

我厂博客可能会用到一些很大的火焰图 SVG，厂长担心打开速度会受拖累，所以让我想办法把大图替换成缩略图，单击再打开原图。

经过一些研究，我大概得到以下线索：

Hexo 会加载 `/scripts` 下面的脚本
Hexo 是用钩子机制，跟 WordPress 非常像
Hexo 的钩子函数可以使用 Promise

那么，大概方案就出来了：

添加脚本，等待 `after_post_render` 钩子。这个钩子触发的时候，博文已经从 markdown 渲染成 html。
使用 cheerio，找到所有图片，检查图片大小，略过不太大的图片（我的标准是 500K）
对大图生成缩略图，替换 `src`。

因为目标是 SVG => PNG/JPG，在 npm 里搜了一圈，发现大家不是 phantom.js 就是 puppeteer，那我就不需要用库了，自己直接写好了。

经过反复的尝试，最终完成的代码如下：

hexo.extend.filter.register('after_post_render', async function (data) {
  /** 摘录、详情、内容 */
  const dispose = ['excerpt', 'more', 'content'];
  for (const key of dispose) {
    const $ = cheerio.load(data[key], {
      ignoreWhitespace: false,
      xmlMode: false,
      lowerCaseTags: false,
      decodeEntities: false
    });

    // 获取所有需要调整大小的图片路径
    let images = $('img').map(async function () {
      let src = $(this).attr('src');
      if (!src) {
        if (config.log) {
          console.info("no src attr, skipped...");
          console.info($(this));
        }
        return;
      }

      // 顺便加上 `loading="lazy"`
      $(this).attr('loading', 'lazy');

      // take snapshot fo big SVGs
      const originalSrc = src;
      if (/\.svg$/.test(src)) {
        const img = resolve(__dirname, '../source', originalSrc);
        const {size} = await stat(img);
        if (size <= config.limit) {
          return;
        }
        $(this)
          .attr('data-src', src)
          .attr('src', `${src}.png`);
        return img;
      }
    }).get();
    images = await Promise.all(images);
    images = images.filter(image => !!image);
    // 只启动一次 pupppeteer，希望减少系统消耗
    if (images.length > 0) {
      const browser = await puppeteer.launch({
        defaultViewport: config,
      });
      const page = await browser.newPage();
      for (const image of images) {
        await page.goto(`file://${image}`);
        const buffer = await page.screenshot();
        const name = basename(image);
        console.log('screenshot for svg: ' + name);
        // 这一步很重要，因为 `after_post_render` 的时候图片还没有复制，所以要利用 hexo 自身的复制功能复制图片
        route.set(`images/${name}.png`, buffer);
      }
      await browser.close();
    }
    data[key] = $.html();
  }
  return data;
});

这段代码里，搞清楚应该用 route.set() 稍微花了些时间，Hexo 的文档写的真是差强人意。这个方法可以向指定位置写入内容，写入的可以是文本，也可以是二进制 buffer。如果写入的是绝对路径，那么就是简单的写入；如果是相对路径，就是向博文环境内写入，接下来的复制过程也会复制到最终代码里。

2020年2月22日

JavaScript 异步开发全攻略

之前在 GitChat 做过一次分享：《JavaScript 异步开发全攻略》。在我看来，原始内容可能不够完美，但通过后来的维护，可以把它打磨得越来越好。昨天在 SF 上回答了一个 Vuex 的 action 里使用 Promise 的问题，然后就想去补充一下这方面的内容。结果发现 GitChat 竟然不支持编辑文章，只能把内容发给运营人工修改。

索性把内容放到 Gitbook 上好了，反正 GitChat SEO 也不做，文章也自然移动到第二页了。试了试，没有被墙，很好。于是简单整理了一下，上传。

欢迎阅读，欢迎分享，因为我会不时更新新内容，请关注 star：

JavaScript 异步开发全攻略

2017年7月16日
使用 Promise 封装 FileReader
Promise 在处理异步的时候是个很好的选择，可以减少嵌套层次，让代码更好读，逻辑更清晰。ES6 将其加入规范，jQuery 3.0 也修改实现向规范靠拢（3.0 发布公告）。一些新增元素比如 .fetch() 原生就 “thenable”，不过大多数以往的 API 还要依赖回调，这个时候，我们只要将它们重新封装，就能避开嵌套陷阱，享受 Promise 带来的愉悦体验。

Promise 一般用法

先来看下 Promise 的一般用法。
```
// 声明 Promise 对象
var p = new Promise(function (resolve, reject) {
  // 不管啥时候，该执行then了，就调用 resolve
  setTimeout(function () { 
    resolve(1);
  }, 5000);

  // 或者不管啥问题，就调用 reject
  if (somethingWrong) {
    reject('2');
  }      
});

// 使用 Promise 对象
p.then(function (num) {
  // 对应上面的 resolve
  console.log(num); // 1
}, function (num) {
  // 对应上面的 reject
  console.log(num); // 2
});
```
Promise 的驱动模型并不复杂：任何操作，假定它只有两个结果，成功或者失败。那么只需要在合适的时间调用合适的程序，进入合适的后续步骤即可。.then() 顾名思义，就是下一步的意思，当前面的 Promise 有了结果——即调用 resolve 或者 reject——之后，就启动对应的处理函数。

Promise 实例创建后就会开始执行，判定结果需要我们自己来，比如加载成功，或者满足某个条件，等等。通过串联 .then() 则可以完成一系列操作。每次调用 .then() 都会创建一个新的 Promise 实例，它会静静等待前面的实例状态改变后再开始执行。

封装 FileReader

接下来开始封装。思路很简单，FileReader 除了提供各种 read 方法，还有几个事件钩子，其中 onerror 和 onload 很明显可以作为判断任务是否完成的依据。加载成功的话，就需要用到文件内容，所以将文件或文件内容传递到下一步也十分必要。

最后完成的代码如下：
```
function reader (file, options) {
  options = options || {};
  return new Promise(function (resolve, reject) {
    let reader = new FileReader();

    reader.onload = function () {
      resolve(reader);
    };
    reader.onerror = reject;

    if (options.accept && !new RegExp(options.accept).test(file.type)) {
      reject({
        code: 1,
        msg: 'wrong file type'
      });
    }

    if (!file.type || /^text\//i.test(file.type)) {
      reader.readAsText(file);
    } else {
      reader.readAsDataURL(file);
    }
  });
}
```
为了能真正派上用场，里面还有一些验证文件类型的操作，不过跟本文主旨无关，略过不表。这段代码的核心是创建一个 Promise 对象，等待 FileReader 读取完成后调用 resolve 方法，或者出现问题时调用 reject 方法。

Github Gist 里也放了一份。

使用刚才封装好的函数

接下来就可以在项目中使用了：
```
reader(file)
  .then(function (reader) {
    console.log(reader.result);
  })
  .catch(function (error) {
    console.log(error);
  });
```
.then() 支持两个参数，第一个在 Promise 成功时启动，第二个自然在失败时启动。用 .catch() 可以实现同样地效果。Promise 的好处除了可读性更佳以外，返回的 Promise 对象还可以任意传递，继续进行链式调用，有很大想象空间。

继续 .then()

于是我们不妨串联更多操作（本来想写个断点续传的，回头再说吧）：
```
reader(file)
  .then(function (reader) {
    return new Promise(function (resolve, reject) {
      // 就随便暂停个5秒吧……
      setTimeout(function () {
        resolve(reader.result); 
      }, 5000);
    });
  })
  .then(function (content) {
    console.log(content);
  });
```
总结

这其实是我第一次用 Promise，上次翻译 jQuery 发布公告的时候我它也只是一知半解，对它的解读也糊里糊涂。我很喜欢在业余项目中学习使用新技术，最近开发 Chrome 插件的时候就尝试了一把，感觉不错。使用过程比我想象的复杂也比我想象的简单，这套设计很棒，能解决不少实际问题，也给了我很大启发，将来我应该会把很多地方的实现都做这样的修改。

参考文献

除去第一段的各个链接，还有一些文章值得一看。

ECMAScript 6 入门：Promise 对象
2016年2月17日

标签： async

给 Hexo 增加替换大图并生成缩略图的功能

JavaScript 异步开发全攻略

使用 Promise 封装 FileReader

Promise 一般用法

封装 FileReader

使用刚才封装好的函数

继续 .then()

总结

参考文献

继续 `.then()`