分类
工具

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

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

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

经过一些研究,我大概得到以下线索:

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

那么,大概方案就出来了:

  1. 添加脚本,等待 `after_post_render` 钩子。这个钩子触发的时候,博文已经从 markdown 渲染成 html。
  2. 使用 cheerio,找到所有图片,检查图片大小,略过不太大的图片(我的标准是 500K)
  3. 对大图生成缩略图,替换 `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。如果写入的是绝对路径,那么就是简单的写入;如果是相对路径,就是向博文环境内写入,接下来的复制过程也会复制到最终代码里。

分类
js

JavaScript 异步开发全攻略

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

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

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

JavaScript 异步开发全攻略

分类
js

使用 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 方法,还有几个事件钩子,其中 onerroronload 很明显可以作为判断任务是否完成的依据。加载成功的话,就需要用到文件内容,所以将文件或文件内容传递到下一步也十分必要。

最后完成的代码如下:

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 对象