WolfBerry

# 笔记

# 2022 年 1 月 1 日

# linux 命令小记

  • sudo su - xxx 切换账号
  • vi 编辑器输入 i 进入编辑状态，esc 回退到命令状态，wq 保存

# 2022 年 1 月 2 日

# 在 vue 中使用 web-worker 的注意事项（1.12 补）

使用 worker-loader 后，引入文件时需要注意

// xx.vue
import Worker from "worker-loader!@/plugins/worker.js"

// vue.config.js，需要增加worker-loader配置。注意文件名要被test命中
config.module
  .rule("worker")
  .test(/\.worker\.js$/)
  .use("worker-loader")
  .loader("worker-loader")
  .options({
    inline: true,
    fallback: false
  })
config.module.rule("js").exclude.add(/\.worker\.js$/)

使用 worker-loader 后，注意 worker.js 已不再是 worker 类型文件，而是普通 js 文件，因此不能再使用 importScripts

需要注意一下 eslint，可以过滤掉不处理 worker 相关的格式问题

如果有使用 linted-staged，同样需要处理 spark-md5.min.js 的问题（不会被 .eslintignore 过滤）

# 2022 年 1 月 3 日

缺席...

# 2022 年 1 月 4 日

# 浏览器 tools

  • Coverage：可以查看当前页面引入的 css、js 文件的使用率和使用情况
  • Animations：可以捕获页面中的所有动画，同时还可以控制动画速度等
  • Network request blocking：可以用于阻止某些资源的请求
  • Replay XHR：此为功能，右键点击 XHR 可以重新发起请求
  • 请求的发起者或依赖项：按住 Shift 并将鼠标悬停在请求上，启动器着色为绿色，将依赖项着色为红色
  • Sensors：传感器，可以设置地理位置、模拟设备方向等，用于移动端测试

# 2022 年 1 月 5 日

# 原生 css 自定义属性（变量）

可以用 -- 声明一个 css 自定义属性，即变量，与 less/scss 中的变量一样，只是使用方式略有不同

需要注意，规则集所指定的选择器定义了自定义属性的可见作用域。通常定义在根伪类 :root 下，这样就可以全局访问

注意：自定义属性名是大小写敏感的，--my-color 和 --My-color 会被认为是两个不同的属性

/* 指定选择器 */
element {
  --main-bg-color: brown;
}

/* 全局 */
:root {
  --main-bg-color: brown;
}

MDN 文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties (opens new window)

# 2022 年 1 月 6 日

# ResizeObserver

这是一个实验中的属性，在未来版本的浏览器中该功能的语法和行为可能随之改变

触发条件：

  • 当 element 插入或者移除时触发
  • 当 element 的 display 从 block 设变为 none 时或相反过程时触发（指显示 -> 隐藏）
  • 当 element 正在被渲染，并且大小不为 0, 0

方法：

  • ResizeObserver.observe：开始观察指定的 element 或 SVGElement
  • ResizeObserver.unobserve：结束观察
  • ResizeObserver.disconnect：取消和结束目标对象上所有的观察

生命周期：

  • 没有对观察者的引用
  • 没有观察任何目标

与 window.resize 对比：

  • window.resize 监听整个 document 的 size 变化，而 ResizeObserver 可以针对指定的 element 进行监听
  • 通常 window.resize 容易导致性能问题
  • ResizeObserver 可用于兼容某个元素动态插入或删除

参考文档：

# 2022 年 1 月 7 日

# 创建一个包含 1-N 的数组

Array.from(Array(10).keys())

[...Array(10).keys()]

Array(N).fill().map((_, i) => i+1);

Array.from({length: 10}, (_, i) => i + 1)

[...Array(N+1).keys()].slice(1)

Array.apply(null, { length: N }).map(Number.call, Number)

为什么要使用麻烦的 Array.apply(null, {length: N})，而不是 Array(N) ？毕竟，这两个表达式都会产生一个包含未定义元素的 N 元素数组。

区别在于，在前一个表达式中，每个元素都显式设置为 undefined，而在后者中，每个元素都从未设置过。

callback 仅对已分配值的数组索引调用；不会为已删除或从未分配值的索引调用它。

参考文档：https://stackoverflow.com/questions/3746725/create-a-javascript-array-containing-1-n (opens new window)

# 2022 年 1 月 8 日

缺席...

# 2022 年 1 月 9 日

缺席...

# 2022 年 1 月 10 日

缺席...

# 2022 年 1 月 11 日

# 切片上传时需要注意的点以及思考

需要注意的点：

  • md5 的计算需要使用 FileReader 转换成 ArrayBuffer 格式再读取（也可以转换成 Binary 格式再读取，但没试过是否成功，spark-md5 文档上有这个方法）
  • 每次发起 xhr 请求，都需要重新定义一个 XHR 对象，否则前面的请求会被取消
  • xhr 发送 formData 格式数据时，不需要设置请求头；而当传输 JSON 格式数据时需要设置
  • 提交切片的文件类型是原生的 file 类型，不需要经过 FileReader 转换
  • 需要给每个切片增加文件名，可以直接拿源文件名，然后跟切片 chunk 一起 append 到 formData 中去：formData.append('file', slicedFile, name)
  • worker 可以直接放在 public 下，也可以考虑放在自定义路径下，但是需要 worker-loader 处理

思考：

  • 如果其中一个或多个切片上传失败，是否需要取消后续切片的上传
  • 如果切片数量过多，是否需要限制一下同时发起的请求数，毕竟最大的并行请求数也就六个

# 2022 年 1 月 12 日

# validateField 新用法

平常用 element-ui 写代码经常会用到表单功能，也就离不开对表单项的校验。validateField 可以针对指定表单项单独校验，同时也有回调函数用于校验结果的逻辑处理

// formRef为表单ref，tel为表单校验项
this.$refs.formRef.validateField("tel")

// 进阶用法
this.$refs.formRef.validateField("tel", err => {
  if (!err) {
    // 校验通过，err为空。常用于获取验证码时对手机号码进行校验
  }
})

# 2022 年 1 月 13 日

# img 标签的 srcset 属性

# 2022 年 1 月 14 日

缺席...

# 2022 年 1 月 15 日

缺席...

# 2022 年 1 月 16 日

缺席...

# 2022 年 1 月 17 日

缺席...

# 2022 年 1 月 18 日

缺席...

← 2022.2 →