Today I Learnt

简单的记录我某一天学到了什么

无用的,反工程化的和有害的知识

2017.03.27 HTML 事件中有一个叫 dblclick

2017.03.28 为 flex item 随便设个 height 值它就可以 overflow

2017.03.30 fetch 因为缺乏适当的超时机制而比 XMLHttpRequest 要弱,可以使用 Promise.race()来完成这一机制

2017.03.31 在 js 中可以使用如下的代码来退出函数

js
function foo() {
  return
}

2017.04.03 js 中 NaN 是 falsy 的

2017.04.09 可以通过用克隆节点替换原节点的方法移除节点的所有监听器

2017.04.18 css 颜色中 gray 比 darkgray 颜色更深

2017.04.20 有个 html 标签叫 output,可以在 form 中使用

2017.04.23 可以使用 css 属性 column-count 来把内容分成几栏,IE10 开始支持

2017.04.24 HTML 中带有 id 属性的元素,可以在 JS 用 id 直接访问它们

2017.05.07 可以通过减小 Array length 属性的方式来截掉数组尾部元素

2017.05.13 可以通过设置:before 的 content 为 counter(foo)的形式来完成自定义列表编号形式的效果

2017.05.28 Chrome 中如果把一个对象在 console 里打印出来,它就不会被 GC

2017.06.12 reduce 和 reduceRight 作用的数组,如果为空且 initialValue 没有提供,则会抛出 TypError 如果为单元素数组且 initialValue 没有提供,则会不执行回调,直接返回该元素的值 如果有两个或以上元素且 initialValue 没有提供,则从数组的第二个元素开始执行

2017.06.20 PM2 的许可证是 AGPL

2017.06.29 Typescript 的函数可以在参数里指定 this 的类型

2017.07.11 semver 中~表示固定主版本号和次版本号,^表示固定主版本号(默认值)

2017.09.16 string 有 localeCompare 方法,会按照各语言的字典序比较(虽然不是很准)

2017.10.09 for...in 里的循环变量类型一定是 string

2017.10.15 class Foo extends Object 和 class Bar 的区别除了使用上的以外还有 Bar 上没有 Objetc 的静态方法

2017.10.16 es6 中提供参数默认值无法通过 arguments 来访问

2017.10.26 在构建完 CSSOM 之前 JS 无法执行

2017.12.12 canvas 的两个方法,toDataUrl 和 toBlob,前者是同步的,后者是异步的

2017.12.14 ES6 module 的引用是静态的,因此允许循环引用,虽然打包器未必正确的实现了这一点

2017.12.15 Commonjs 导出的是值,ES6 module 导出的是引用

2017.12.20 Python2 中的 True 和 False 是可写的

2018.01.14 JS 中的函数都会被提升到最顶部, 如果出现重复则在语法分析阶段后面的就会覆盖前面的

2018.02.17 () => { x: 1 }返回数字 1, 此处 x 为 label

2018.03.16 在 JS 中,判断 B 是 A 的子类的方法是 B.prototype instanceof A

2018.03.19 居然真有框架使用轮询的方式来 diff 数据

2019.03.26 JS 的 class 中的 getter 和 setter 定义在 prototype 上

2018.04.05 而这个框架的计算属性的依赖收集靠的是手动标注,使用方式如下

js
@computedFrom('firstName', 'lastName')

2018.05.02 JS 中 Array.prototype 还是个 Array

2018.05.13 Python 的 finally 一定会执行,因此如果在函数中 early return 的话 finally 会覆盖掉之前 return 的值,JS 里也是如此

2018.05.23 可以对 string 使用 Obejct.assign,不影响正常使用且可以访问子值,这是 string 被转化为了包装类的缘故

2018.05.28 Angular Router 只会 redirect 一次

2018.06.12 JavaScript 中可以使用 void 替代行首的;来避免二义性

2018.06.20 parserInt 的第二个参数是 falsy 值时将被忽略,将从第一个参数中猜测 radix

2018.06.28 TypeScript 中的类也是 structural type

2018.07.08 可以使用 num.toString().replace(/\B(?=(?=\d*.)(\d{3})+(?!\d))/g, ",")来给数字加上分隔符,当然最佳的做法是 Number.prototype.toLocaleString()

2018.07.09 IE7 和之前的 getElementById 会去匹配 name 属性,而 IE8 的 quirk mode 下也会发生同样的事情(这条真是特别没用)

2018.07.12 JavaScript 中新建一个内容为 1..n 的数组可以

js
new Array(n - 1).fill(0).map((_, i) => i + 1)
Array.from(new Array(n - 1), (_, i) => i + 1)
Array.from({ length: n - 1 }, (_, i) => i + 1)
// magic!
Array.apply(null, { length: n - 1 }).map((_, i) => i + 1)

因为 new Array(10)得到是 10 个 empty slot 的数组,而 empty slot 在迭代时会被忽略

2018.07.15 TypeScript 的 moduleResolution 默认值居然是 classic,这意味着它不会去 node_modules 里去找

2018.07.18 在 Array.from 出现之前,可以用 Array.prototype.slice.call 来把类数组对象(arguments, HTMLCollection)转化为数组

2018.07.28 javascript 的 new 操作符可以不用参数(即 new Foo)

2018.08.06 [].concat[1,2,3] 返回 undefined

2018.08.10 typeof 未声明的变量 会返回 undefined,即使在严格模式下也不会报错,但是访问了处于 temporal dead zone 的变量一定会报错

2018.08.15 在 ES6 中,可以使用如下方式的 object literal

js
const a = 'a'
const b = { [a]: 123 }

2018.08.16 isNaN(undefined)返回 true,而 Number.isNaN(undefined)返回 false

2018.08.17 js 中 array index 也会沿原型链上溯

2018.08.18 ES5 之前 undefined 是可写的

2018.09.03 当代 js 可以通过 varible.constructor.name 来判断变量类型,古代则只能使用 Object.prototype.toString.call 来判断

2018.09.13 arr.slice(0)比 arr.slice()更快,是最快的数组拷贝方式

2018.09.18 es6 里有

js
const a = 'test'
const b = { [a + 1]: () => {} }[a + 1]
b.name // "test1"

2018.09.23 string.prototype.toUpperCase 并不保证长度不变, 比如德语字母'ß'

2018.09.25 IE9 中 addEventListener 的第三个参数(useCapture)不是可选的

2018.10.01 new operator 作用的函数如果返回的是原始值,则会被忽略

2018.10.06 Typescript 可以把 2**7 转译成 Math.pow(2, 7)

2018.10.13 Reflect.getPrototypeOf 在当前标准中作用于原始值会报错,这是它和 Object.getPrototypeOf 的区别

2018.10.21 通过 childNodes 得到的 NodeList 是活的,其他时候不是.HTMLCollection 一定是活的

2018.11.02 JSON.stringify 接受三个参数,而 toJSON 则可以接受一个参数

2018.11.05 N+1 问题指的是数据库中出现 1 对 N 的关系时, 如果同时需要两边的信息, ORM 常常需要进行 N+1 次查询. 可以使用 eager load 解决

2018.11.14 最好使用 Object.prototype.hasOwnProperty.call 来判断一个 object 是否有特定的 key,因为由 Object.create(null)创建出来的 object 没有这个方法

2018.11.15 JS 不能 catch syntax error,除非是通过 eval 执行的代码

2018.11.16 JS 中函数的 length 是函数的直到第一个有默认值的参数或剩余参数前的参数的个数

2018.12.08 对于仅引用了类型的代码文件(即使是 class as type), typescript 在编译时不会打包进去

2018.12.15 可以用_ => foo 来代替 () => foo,也能通过 tslint

2018.12.16 fetch 会在拿到完整的 http 报文头之后立刻进入 fulfiled 状态

2018.12.18 超酷炫的 autocurry

js
const curry =
  (f, arr = []) =>
  (...args) =>
    (a => (a.length === f.length ? f(...a) : curry(f, a)))([...arr, ...args])

2018.12.19 在 js 中可以通过把 Set/Map 转化成数组的方式按下标获取元素

2018.12.20 在 js 中如果想把可能包含 undefined 的变量转换成数字而不得到 NaN,可以使用 var >>> 0

2019.01.26 es6 中的 WeakSet 可以通过在原 object 上附加属性的方法被 polyfill 到 es5

2019.02.03 js 中, parseInt("Infinity", 19) === 18

2019.02.20 在当代浏览器中, 如下代码就足够完成重设浏览器样式的任务

css
body,
body * {
  all: initial;
}

2019.03.02 css 新提供的 font-display 属性可以配置字体回落行为, 有 auto block swap fallback optional 五个可选值

2019.03.05 tsc 用的是 ts 团队自己写的 parser 来读 tsconfig.json, 基本上是 JSON with comment

2019.03.09 js 中 sort 会把 undefined 排到数组的最后(不要在数组里塞 undefined!)

2019.03.10 ES2019 不要求强制在 catch 捕获 error, ts 能正确 polyfill 这一特性

2019.03.19 可以通过改变 box-shadow 的 spread-radius 来实现从中心向外扩散的效果

2019.03.31 textContent 和 innerText 的区别在于 textContent 只显示会显示在屏幕上的内容. 无论改写它们中的哪一个, 都会生成一个新的 Text 节点

2019.04.03 JS 中的默认参数可以引用在之前的参数的值

2019.04.04 webpack 中资源文件使用 [name].[ext]?[hash] 的原因是让下载后的文件名中没有 hash

2019.04.05 base tag 的用途是指定文档里相对 url 的基础 url, 也可以指定超链接或是表单的导航方式

2019.04.06 JS 中可以用 Object(value) === value 判断一个值是否是对象

2019.04.07 可以把 webpack html loader 的 interpolate 选项设置为 true, 这样就可以在 html 中导入其他的 html

2019.04.11 可以 script 的 nomodule 属性实现按需装载 polyfill(尽管这么做的正确性堪忧)

2019.04.15 在严格模式下, eval 不能修改词法作用域

2019.04.16 JS 中 Function.prototype 可以被用作空函数使用, 尽管性能很差

2019.04.18 ES5 及之前版本可以通过 with 或是 try catch 来创建块状作用域

2019.04.19 决定 this 默认值的并不是调用者是否处于严格模式, 而是函数定义时是否处于严格模式

2019.04.20 JS 中, arguments 也可以 for ... of

2019.04.25 JS 中数字转字符串最快的方法是加上一个空字符串和(ES6)模板字符串, 反过来最快的是字符串乘 1

2019.04.26 JS 中可以在非循环语句块中使用 label, 此时可以在语句块内使用 break

2019.05.03 tsc 可以正确转译 ES6 的新八进制字面量语法, 会被转译成十进制

2019.06.02 AngularJS 和 Angular 最大的区别之一是 AngularJS 并没有使用 zone.js 来代理所有异步, 而是不同的异步分别处理, 因此多处需要手动调用脏检查

2019.06.17 Webpack 会对 DefinePlugin 定义的变量做出编译期转换并对其所在的语句求值

2019.07.11 Java 中可以使用 try with resource 来实现 RAII

2019.07.18 React.creatElement 返回的对象都包含一个$$type 键, 其值为一个 Symbol. 这是为了防止对抗 XSS, 这样如果服务端出来的某个值本应是字符串却被传了个对象, 它就不会被渲染出来.

2019.07.22 Vue 中的 scoped slot 和 React 的 render props 功能和用法都很接近, 但是 Vue 的语法更加整洁

2019.08.15 zone 是来源于 dart 的 feature

2019.08.22 Symbol.for 和 Symbol 的区别是前者会在全局创建一个 Symbol, 如果此后再传入相同的字符串, 则返回那个 Symbol

2019.09.16 JVM 中使用 Class 作为 Vtable

2019.09.22 DocumentFragment 即使在现代也能提升一些性能

2019.11.01 Redux 因为单一 store, 读写分离带来的好处有很多, 比如方便的序列化, time travel 等

2019.11.23 GADT 指的是有范型参数且在不同参数时返回不同类型的 ADT

2019.12.09 Element#getAttribute 只会返回字符串或是 null

2019.12.28 JS 里非严格模式下, 函数参数名可以重复

2020.01.10 Opaque type 是只导出类型名称而不导出类型的具体实现和构造器, 可以防止外部依赖该类型的具体实现

2020.01.19 row polymorphism 和 strucal subtyping 的主要区别是前者总是会得到具体类型而不会得到父类型, 因此没有类型信息的损失

2020.01.21 react-hook-form 使用了 ref 回调, 设计非常精妙, 但是没做到类型安全

2020.01.25 JS 中, (+Infinity).toLocaleString()可以得到"∞"

2020.01.31 Anuglar AOT 模式下会对 metadata 部分做部分求值, 因为需要在编译期得知可以使用的指令

2020.02.01 Angular 中的 injector 层级最末端是 root(AppModule 创建)->platform injector(PlatformModule 提供, 可以在多个 App 之间共享)->null injector(见到 optional 就返回 null, 否则报错)

2020.02.02 Angular 中的 viewProvider 为该组件 view(模板) 内的组件提供依赖

2020.02.02 Angular 中的 Host 装饰器的作用是向上寻找依赖仅限到模板边界, 即是显式声明的父组件或是当前 view(模板)

2020.02.24 flexbox 的 start edge 不仅由 flex-direction 决定, 还与 write mode 有关

2020.03.28 onionify(@cycle/state) 相对于普通的 RxJS 的好处是可以传递 T 或者 T => T(就像 React 里的 setState 那样)

2020.05.26 React 中一种常见的性能优化方式是把 Provider 的直接子组件用 memo 或保持引用不变(这是 sCU 以外另一种避免重渲染的方式)包裹, 以免 context 更新时的不必要渲染

2020.05.31 http header 的合法值是9 | 32-255, 因此 uint8 数值不一定是合法的 header, 合法的 header 也不一定能用 utf-8 编码

2020.06.20 Existential Type 和 Universal Type 相反, 指的是被调用者可以往这里放入任何类型, 在普通语言里可以用控制反转实现

2020.06.27 Rescript 生成 option 时如果知道内容不是undefined可以把Some('a)生成'a, None生成undefined

2020.06.28 因为 Linux 的 pthread 缺乏 suspend, 所以 gc 语言在 STW 时可能因为某一个线程死循环而阻塞全部线程. JVM 在函数调用和循环跳转前插入 safepoint 检查来避免, go 则使用 signal

2021.01.05 React 中使用链表记录 hook 状态, 而 Preact 则使用数组

2021.01.16 React 旧版本对合成事件对象做了 pooling, 因此异步地消费它会出现 bug; 在 React 17 中取消了这一行为

2021.01.31 URLSearchParams 有 entries 的迭代器

2021.10.17 如果即要 forwardRef，又想在当前组件中使用该 ref，可以

js
const foo = forwardRef((props, ref) => {
  const ref = useRef()
  useImperativeHandle(ref, () => ref.current)
})

2021.10.23 在 JS 模块（module）中，顶层 this（函数之外的 this）也是 undefined

2021.10.25 JS 中不存在 arrow generator function

2021.10.26 JS 中 async generator 是随着 for await of 于 ES2018 引入的

2021.11.09 JS 的 tagged template literal 可以不是合法的 JS 字符串

2021.11.14 JS 中 eval?.() 是 indirect eval call

2021.11.17 JS 中 super 保留字可以用在 object shorthand method 中