作者：meathill

爱编程，爱旅游，爱吐槽。 今年的目标是完成并运营至少一个 Side Project。 《Electron + Vue 实战开发》龟速创作中……

使用 <input type=”file”> 上传 ZIP/RAR 文件

上传文件要用到 <input type="file">，这个元素有个 accept 属性，可以用来筛选文件类型，方便用户选择。按照 MDN 的说法，这个属性的值支持以下几种形式：

  1. 合法的文件扩展名，大小写不敏感，以 . 作为开头，比如 .jpg，.pdf
  2. 合法的 MIME type，不需要扩展名
  3. 媒体文件，audio/* 适配任意声音文件，video/* 适配任意视频，image/* 适配任意图片

同时，属性值可以使用 , 连接，表示“或”的意思。注意，这里只能是单独的 ,，不能有空格，不然有空格的部分会失效。所以，比如，一个上传图片、以及 PDF 的元素就可以写成：

<input type="file" accept="image/*,.pdf">

使用扩展名比较方便，但是扩展名太多不方便管理，比如 .jpg 和 .jpeg，容易漏掉，所以我更喜欢 MIME type。那么压缩文件的 MIME type 是什么呢？经过一番搜索和尝试，是：.zip,.rar,application/x-rar-compressed,application/zip,application/x-zip-compressed,application/octet-stream。

Nuxt.js 支持 core-js 3

Vue CLI 升级到 v4 之后，将内部的 core-js 依赖升级到 v3，关于 core-js v3 和 core-js v2 之间的区别，我在 最近折腾 @babel/preset-env 的一些小心得 里简单介绍过。

升级完 Vue CLI 之后，在调用 nuxt generate 生成静态页，就会报错，因为 Nuxt.js 默认使用 core-js 2。这个时候，如果 Nuxt.js 版本在 2.6.0 之后，就只需要修改 nuxt.config.js 里的配置，指定 core-js 的版本：

module.exports = {
  build: {
    babel: {
      presets({ isServer }) {
        return [
          [
            require.resolve('@nuxt/babel-preset-app'),
            // require.resolve('@nuxt/babel-preset-app-edge'), // For nuxt-edge users
            {
              buildTarget: isServer ? 'server' : 'client',
              corejs: { version: 3 }
            }
          ]
        ]
      }
    }
  }
}

参考文档：https://nuxtjs.org/guide/release-notes#v2.6.0

说起来 Nuxt.js，用它发布静态页比想象中复杂，如果你想快速掌握这个技能，不妨看下我的这本小书：

解决 Firefox 下的 race 问题

我厂有几个产品，需要从后端获取大量的信息，为了让用户能够近乎实时的看到这些信息，大部分数据都是通过 WebSocket 发给前端。这些产品在 Chrome 下表现正常，但是在 Firefox 下经常把数据格式搞乱，最终渲染失败。

因为 Firefox DevTools 没法解析 WebSocket 数据，而且市场占有率比较低，所以我一直没有解决这个问题。前几天终于把最小可复现实例搞出来，正准备研究，结果同事已经修好了。

预览版的 Firefox 终于可以在 DevTools 里查看 WebSocket 每一帧的数据，所以她尝试看了一下，发现从解析二进制数据的角度来看，Firefox 应该没问题。于是又回到代码，发现了一个可能产生 race 的点：

if (data instanceof Blob) {
  data = await new Response(data).arrayBuffer();
}

因为服务器返回的数据是二进制，所以我需要进行一次转换，把它变成 ArrayBuffer，然后再通过 TextDecoder 转换成文本，然后处理。Response.arrayBuffer 返回的是 Promise，所以我就很自然的用 await，并且在 Chrome 上运行良好。

但是在 Firefox 里，某些帧会后发先完成转换，a b c 变成 a c b，于是数据格式错乱，无法正常解析。我怀疑 Chrome 并没有真的把这一步保留到用户，而是同时存了两份数据，这样转换的时候直接给出数据就好，所以是微任务，不走 Event loop，不会产生 race。而 Firefox 则是实时转换，所以是宏任务，所以出问题。

我尝试去翻了一下源码，无奈平时没看过，所以没能找到证据。如果有哪位同学刚好知道，可以在评论里告诉我。

代友招聘：每日优鲜 BI 部门招前端技术经理

有个关系很好的朋友近期加盟每日优鲜，负责 BI 系统，据他描述，组内有三名初级前端，需要一个高级前端做技术经理，负责带团队。

薪资范围：30K~40K，16个月

工作地点：北京望京

继续阅读“代友招聘：每日优鲜 BI 部门招前端技术经理”

ZOL 惠州总部招聘

据说老东家在惠州得到当地政府扶持，准备把总部搬过去。友情转发招聘启示，详情见此：ZOL中关村在线 北京&惠州总部 2019年秋季校招火热开启！

招聘对象：前端、PHP

我那会儿的同事应该走的差不多了，不过应该还有几个能说上话，所以珠三角地区的同学感兴趣的话可以联系我。

继续阅读“ZOL 惠州总部招聘”

面试题：如何理解加班

前阵子参加 SF 的征文活动 一起分享你的故事，我的文章 我的编程职业生涯 有幸得到大家的支持，最终得奖：汤青松老师的《PHP Web 安全开发实战》。书前两天寄到了，还没来得及细看，也没法写书评，所以想了想，再分享一段职场经验吧。

继续阅读“面试题：如何理解加班”

使用 Webpack 动态打包文件夹

各式各样功能强大的小语言是我厂机器编程的特色，为了让更多的同学提前感受到 DSL 的威力，我们开发了 demo 应用：https://demo.openresty.com.cn/。

Demo 里面，需要添加一些范例代码，方便用户直接体验。这些代码，可以通过后端 API 获取，也可以直接编译到前端代码里。目前范例很少，直接打包到一起应该是最简单的做法。

但是如何打包是个问题。经过一些研究，我觉得这样做好：

  1. 负责小语言的同事直接把范例写在项目仓库里，Edgelang 就用 .edge 扩展名，Navlang 就用 .nav 扩展名
  2. 前端在 webpack 里实现一个 requireAll 的功能，把所有代码当成纯文本用 raw-loader 加载进来
  3. 这样添加了代码后，重新 build 一下就好。范例文件可以用 lazy-load 的方式加载

Webpack 提供了一个方法叫 require.context，可以深度遍历一个目录，返回一个 context module，用这个 API 我们就可以动态的加载这个目录下的文件——具体的讲解和参数说明大家看下文档吧，这个部分中文资料不太多，我不太确定译名。我们可以在范例代码的目录下放一个 index.js，负责加载所有代码范例：

function requireAll(r) {
  r.keys().forEach(r);
}

const Languages = [
  'edgelang',
  'navlang',
];

let context = require.context('./edgelang', true, /\.(edge|css)$/);
requireAll(context);
context = require.context('./navlang', true, /\.(nav|css)$/);
requireAll(context);

export default Languages;

然后我们改一下 webpack.config.js 就可以了。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(nav|edge|fan)$/,
        use: 'raw-loader',
      },
    ],
  },
};