This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* fetch api | |
* 1. 确保返回 fulfilled promise,没有rejected promise,所以也不用处理错误 | |
* 带错误的Promise<[null, data]> | |
* 正常结果的Promise<[{code: number, msg: string}]> | |
* 2. 使用了signal来处理超时情况 | |
*/ | |
// 如果是sdk项目,使用ponyfill,如果是自己的项目,使用polyfill(isomorphic-fetch) | |
import fetchPonyfill from "fetch-ponyfill"; | |
import pickBy from "lodash/pickBy"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// https://brunoscopelliti.com/blog/lets-write-a-promise-polyfill/ | |
function isEmptyIterable(iterable) { | |
for(const _ of iterable) { | |
return false | |
} | |
return true | |
} | |
Promise.all = function (iterable) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 容器内动态数量的item, | |
// 每行展示固定数量的item,下面的例子是每行4个 | |
// 需设置flex-grow: 1、flow-basis: 21% | |
.gift-list--image { | |
display: flex; | |
flex-direction: row; | |
// important! | |
flex-wrap: wrap; | |
.gift-list--item { |
- 虚拟 DOM,用 Js 对象来创建虚拟 DOM,操作虚拟 DOM 比实际 DOM 要快。更快的比较数据变化,更小改变实际 DOM 的改变。
https://segmentfault.com/a/1190000008291645 剖析 Vue.js 内部运行机制: https://juejin.im/book/5a36661851882538e2259c0f 2-way binding: https://juejin.im/entry/589ff26486b599006b3dea9b
diff 算法:DFS(深度优先搜索),https://foio.github.io/virtual-dom/
Object.freeze
可用于中断数据双向绑定
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/// flatten array | |
// 1. absolute flatten, no depth param | |
// [[1,[2,[[3]]]],4,[5,[[[6]]]]] => [1,2,3,4,5,6] | |
const flatten = list => list.reduce( | |
(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), [] | |
) | |
// recursive | |
function flatten(arr, result = []) { | |
arr.forEach(item => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import classNames from 'classnames'; | |
/** | |
* 点菜单,滚动到内容区的固定位置 | |
*/ | |
export function ScrollToView() { | |
const header = React.useRef(null); | |
const anchor1 = React.useRef(null); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// region Unknown vs. any | |
// unknown: unknown provide safer typing, | |
// you should use type assertion or narrow to a special type | |
// if you want to perform operations on unknown. | |
function f1(a: any) { | |
a(); // OK | |
} | |
function invokeAnything(callback: unknown) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// https://devtrium.com/posts/async-functions-useeffect | |
/** | |
* 当依赖改变导致useEffect再次执行时,两次async函数的到达时间顺序并不能保证 | |
* 所以在cleanup函数里,去掉前一次请求的状态码,即使前一次请求后到达,也不能执行`setData(json)` | |
*/ | |
useEffect(() => { | |
// flag | |
let isSubscribed = true; |
NewerOlder