前言

如果你的项目没有引入 jquery，但是又想方便地控制滚动条，这时候，react-smooth-scroll-hoook可能会帮上忙。

useSmoothScroll

用法

useSmoothScroll 核心在于 scrollTo 方法，可传入目标节点或者滚动距离，以自定义的速度滚动到该节点。

前言

微前端是什么

一种将独立的前端应用组成一个更大的整体的架构风格

微前端是一种架构，将一个页面切分成若干个『微应用』，各个『微应用』可以独立部署，而且每个『微应用』可以供多个页面引入，达到复用的目的。

微前端有哪些形态

微前端并不是一种新的东西，它只是一种架构风格，在很早的一些 web 实践中，其实已经有它的身影：

• 通过后端模板集成：即通过后端配置路由，将一个 web 应用分割成若干个子应用
• 通过 iframe 集成：使用 iframe 分隔页面的多个部分。

需求

需求效果： 获取数据，渲染到页面的指定位置上，并且支持将该区域的图片高清保存。

需求细节：

1. 图片局部元素有灰色滤镜的状态。
2. 图片根据不同分类 id 动态获取，尺寸不一。
3. 页面展示区域固定，等比例缩放，输出图片为高清图。

html2canvas

经过调研，不再重复造轮子，确定采用 html2canvas 库去实现。

原理

1. foreignObject 到 canvas 模式

对应 html2canvas 的foreignObjectRendering选项

1. 把要截图的 dom 克隆一份，过程中把 getComputedStyle 附上 style

2. 放到 svg 的 foreignObject 中

3. 把 svg 序列化成 img 的 src（SVG 直接内联）：

1

img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(new XMLSerializer().serializeToString(svg));

4. ctx.drawImage(img, ….)

背景

最近用 TS 重写了部分工具函数，其中用到了泛型，在这里做一个分享，帮助大家快速熟悉泛型。

泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。