通过写测试用例来学习是一种高效的学习方法。
学习的过程,是了解输入输出的过程。学习语法,就是学习支持怎样的写法(即输入),能达到怎样的效果(即输出)。学习 API,就是学习 API 支持哪些输入,会有怎样的对应的输出。
写测试用例,就是给定输入,判断输出和预期是否一致。这个过程和学习的过程是一致的。比如:学习数组的 unshift
的方法,可以写如下的测试用例:
describe('unshift:添加一个或多个元素到开头', () => {
test('添加一个元素到开头', () => {
const arr = [1, 2]
arr.unshift(0)
expect(arr).toEqual([0, 1, 2])
})
test('添加多个元素到开头', () => {
const arr = [1, 2]
arr.unshift(-2, -1, 0)
expect(arr).toEqual([-2, -1, 0, 1, 2])
})
test('返回值是添加后的数组长度', () => {
const arr = ['a', 'b']
const res = arr.unshift('c')
expect(res).toBe(3)
})
})
在学习中的过程中,付出的努力越多,学习效果越好。
普林斯顿大学的 Pam A. Mueller 学者和 UCLA 的 Daniel Oppenheimer 联合做了一项实验,他们让两组大学生分别用电脑和手写做笔记,然后对他们观看的讲座内容进行测试,看看到底如何记笔记效果更好。 实验的结果是:手写笔记好。用电脑记笔记的人,由于打字速度快,只是无脑的记。手写的,由于他们不能快速记录,必须提炼记录的内容。这是个思考的过程。
用测试来学,需要设计测试用例。设计测试用例的过程,是一个思考,加深印象的过程。比如,学习 Flex 布局,有个特性是:主轴是行的的 Flex 容器下,子项在一行。我设计了这样如下的用例:
const posYArr = await page.evaluate(() => {
const items = document.querySelectorAll('.ly>.item')
return [
items[0].getBoundingClientRect().top,
items[1].getBoundingClientRect().top,
items[2].getBoundingClientRect().top,
]
})
expect(posYArr[0]).toBe(posYArr[1])
expect(posYArr[1]).toBe(posYArr[2])
- 基础: if,循环。
- 数据类型: 数字,字符串,正则,数组,对象,函数,枚举,Set。
- this 还有 这里
- ES6+: Promise,async/await,解构赋值,JavaScript Modules,可选链操作符(?.),空值合并运算符(??) 和 逻辑空赋值(??=)。
- DOM
- 最佳实践:去重,最大值,求和,删除元素
- 工具函数
适配器模式,桥接模式,组合模式,装饰器模式,外观模式,享元模式,代理模式。
责任链模式,命令模式,解释器模式,迭代器模式,中介者模式,备忘录模式,观察者模式,状态模式,策略模式 ,模板模式 ,访问者模式。
- React
- Vue3
- 基础库工具库: Lodash,immutability-helper(不可变数据的改动工具库),moment,时间操作封装,query-string,路径匹配库: micromatch,mockjs。
- 类名: tailwind-merge,classNames cva。
- 测试库: Jest,Puppeteer。
- 数据管理: 状态机:XState
- 其他:任务队列管理库:queue
- fs
- path
- EventEmitter
- 第三方库