teal-front

/**
 * 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";

teal-front

// 容器内动态数量的item，
// 每行展示固定数量的item，下面的例子是每行4个
// 需设置flex-grow: 1、flow-basis: 21%
.gift-list--image {
    display: flex;
    flex-direction: row;
    // important!
    flex-wrap: wrap;

    .gift-list--item {

teal-front

import React from 'react';
import classNames from 'classnames';


/**
 * 点菜单，滚动到内容区的固定位置
 */
export function ScrollToView() {
  const header = React.useRef(null);
  const anchor1 = React.useRef(null);

teal-front

Vuejs

1. 虚拟 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/

2. Object.freeze可用于中断数据双向绑定

teal-front

/// 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 => {

teal-front

// 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) {

teal-front

// https://devtrium.com/posts/async-functions-useeffect

/**
 * 当依赖改变导致useEffect再次执行时，两次async函数的到达时间顺序并不能保证
 * 所以在cleanup函数里，去掉前一次请求的状态码，即使前一次请求后到达，也不能执行`setData(json)`
 */
useEffect(() => {
  // flag
  let isSubscribed = true;

teal-front

/**
 * rpc mini impl
 * @author 神说要有光
 */
let id = 0
function getId() {
  return id++
}

const callMap = new Map()

teal-front

// https://brunoscopelliti.com/blog/lets-write-a-promise-polyfill/

function isEmptyIterable(iterable) {
    for(const _ of iterable) {
        return false
    }
    return true
}

Promise.all = function (iterable) {

teal-front

• bubble
• merge 归并
• quick

https://www.geeksforgeeks.org/merge-sort/?ref=lbp

各种排序：http://blog.csdn.net/han_xiaoyang/article/details/12163251 排序动画：http://jsdo.it/norahiko/oxIy/fullscreen