2022-7-1-前端快报

ES2022 Features!

这篇文章介绍ES2022的Features。

Stop The Screen Going To Sleep With JavaScript

这篇文章介绍WakeLock api的使用方法。WakeLock用于防止用户屏幕变暗或者锁屏。NoSleep.js就是封装了WakeLock的能力来实现对应的功能.

NoSleep功能实现:

在支持wakeLock的设备上使用wakeLock
在老的ios设备上通过设置当前href和window.stop的定时器来激活页面
其他情况通过设置一个循环播放的video标签来实现

工具

react-flow

react绘制图表和流程图的工具库

想法

关于前端页面设计

作为前端开发似乎很容易直接从页面的角度去考虑实现，因为接触的UI就是最直观的图形输入。但是页面不光是简单的UI展示，后面还承载着数据的流动。从数据流去思考业务的逻辑和设计实现页面和业务逻辑的分离。数据承接逻辑，页面承接UI渲染组合能更好的服务于页面的扩展。

react hooks的理解

hooks是react暴露给外部的接口。这个是react增加hooks提供的一个比较重要的能力。比如react query通过hooks的能力桥接了queryClient.

源码解读

react-archer源码分析

react-archer通过箭头线绘制React节点之间的关联关系。它的实现主要:

维护全局的节点关联关系(逻辑抽象封装)
解耦节点渲染和箭头线渲染(解耦)

节点关系处理逻辑

// 子节点注册逻辑
const registerTransitions = (newRelations: Array<RelationType>) => {
    // 格式化节点配置
    const newSourceToTarget = generateSourceToTarget(id, newRelations);
    assertContextExists(context);
    // 更新全局节点配置
    context.registerTransitions(id, newSourceToTarget);
}

// 根节点更新逻辑
const _registerTransitions = useCallback(
    (elementId: string, newSourceToTargets: SourceToTargetType[]): void => {
        // 节点关系在根节点中通过useState进行更新维护 触发组件更新
        setSourceToTargetsMap((previousValue) => ({
            ...previousValue,
            [elementId]: newSourceToTargets,
        }));
    },
    [],
);

箭头渲染逻辑

在根组件中通过SvgArrows渲染节点连接逻辑

    // 遍历节点关系数据 依次渲染
    {getSourceToTargets(props.sourceToTargetsMap).map((currentRelation) => (
        <AdaptedArrow
          key={JSON.stringify({
            source: currentRelation.source,
            target: currentRelation.target,
          })}
          source={currentRelation.source}
          target={currentRelation.target}
          label={currentRelation.label}
          style={currentRelation.style || {}}
          startMarker={props.startMarker}
          endMarker={props.endMarker}
          endShape={props.endShape}
          strokeColor={props.strokeColor}
          strokeWidth={props.strokeWidth}
          strokeDasharray={props.strokeDasharray}
          noCurves={props.noCurves}
          lineStyle={props.lineStyle}
          offset={props.offset}
          parentCoordinates={parentCoordinates}
          refs={props.refs}
          uniqueId={props.uniqueId}
        />
    ))}

    // 使用getBoundingClientRect和配置项计算绘制箭头的位置 最后使用svg进行关联线的绘制
    export const getPointCoordinatesFromAnchorPosition = (
        position: AnchorPositionType,
        index: string,
        parentCoordinates: Vector2,
        refs: Record<string, HTMLElement>,
    ): Vector2 => {
        const rect = getRectFromElement(refs[index]);

        if (!rect) {
            return new Vector2(0, 0);
        }

        const absolutePosition = computeCoordinatesFromAnchorPosition(position, rect);
        return absolutePosition.substract(parentCoordinates);
    };