Partial

Partial 工具类型可以将接口中的所有属性转换为可选属性。

1
2
3
4
5
6
7
8
9

interface User {
  id: number;
  name: string;
  age: number;
}

type PartialUser = Partial<User>;

const partialUser: PartialUser = { id: 1 };

遇到的问题如下，需要构建一个 SuperTask 这么一个类，来实现并发任务控制。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

class SuperTask {
  // todo
}

function sleep(time) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve()
    }, time)
  })
}

const superTask = new SuperTask()
function addTask(time, name) {
  superTask
    .add(() => sleep(time))
    .then(() => {
      console.log(`任务${name}完成`)
  })
}

addTask(10000, 1)
addTask(5000, 2)
addTask(3000, 3)
addTask(4000, 4)
addTask(5000, 5)

如何将下面的代码转换为普通构造函数的写法？

1
2
3
4
5
6
7
8

class Animal {
  constructor(name) {
    this.name = name
  }
  run() {
    console.log(this.name + ' is running!')
  }
}

最近刷视频刷到一个分享，发现是一个很棒的 css 效果：通过使用background相关属性来实现一段文本的多彩下划线样式，并且在鼠标悬浮时进行显示。

先思考一下自己可以有哪些手段来实现，然后再来了解一下这里的实现手段吧：

路径命令是对要绘制的路径的说明。每一个命令由代表命令的字母和代表参数的数字组成。

SVG 定义了六种路径命令类型，一共 20 条命令：

• MoveTo(移动到)：M、m
• LineTo(画线至)：L、l、H、h、V、`v
• BezierCurve(贝塞尔曲线)
  • 二次贝塞尔曲线：Q、q、T、t
  • 三次贝塞尔曲线：C、c、S、s
• 椭圆曲线：A、a
• ClosePath(封闭路径)：Z、z

本文主要是针对以上命令，进行整理

作用不同

• Loader 用于转换某些类型的模块，为其他模块提供加载支持。

  提供给 webpack 加载和解析非 JavaScript 文件的一个能力

• Plugin 用于改变 webpack 的打包行为。

  扩展 webpack 的功能，使 webpack 拥有更多的灵活性

Webpack的构建流程，包括初始化参数、开始编译、确定入口、编译模块、完成模块编译、输出资源和输出完成等7个步骤。

自从入了 Vue 的坑，都快忘记了 React

最近突然想起来 React，这么久没有接触，想试着玩一玩。

回想起大学时，学长们的分享，总是说 Vue 更易上手，所以就入了 Vue 的坑，但是仔细想想，自己却从来没有亲自去认真了解过 React，真是罪过…

趁此机会了解一下 React，试着把 Vue 和 React 进行一下比较。在网上找到一篇大佬的分享，觉得非常棒，文章内容很详细，链接我放到后文中。

我看完之后想简单总结性的记一下

⚠️后代选择器和子代选择器比较常用，还有两个选择器需要记住

1
2
3
4
5
6
7
8

/* 后代选择器——典型用单个空格（" "）字符——组合两个选择器 */
body article p
/* 子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配 */
article > p
/* 邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件，只能是邻接 */
p + img
/* 通用兄弟选择器（~）用来选中，一个元素后的兄弟元素，即使它们不直接相邻，在前面选不到 */
p ~ img

event-bus 在vue中使用时，为了避免在vue组件未实际生效时，event-bus就进行事件的监听。因此需要结合vue的生命周期进行代理实现。