首页> javascript

大文件切片上传

分类:前端开发2023-06-19阅读:(2193)标签:javascript, nodejs
大文件上传我们在开发过程中遇到上传文件的时候,如果文件比较大,就发现上传很慢,还经常上传失败,失败的原因是超时。因为我们的请求有设置超时时长,超过这个时间如果接口还没有返回结果,这次请求就会因超时失败。解决思路将文件切片,分割成多个小文件上传,前端都上传完后通知服务端,在服务端再把所有切片合并成一个文件。服务端接收到的切片文件那么多,要怎么区分并把同一个文件的所有切片合并起来呢?通过文件命名...

React 18 新特性

分类:前端开发2023-06-19阅读:(2525)标签:javascript, react
React 18 新特性React 18是React框架的最新版本,引入了一些新的特性和改进。以下是一些主要的特性:渐进式升级:React 18采取了渐进式升级的方式,允许开发者逐步采用新特性而不需要一次性重写整个应用程序。这种灵活性使得在现有项目中引入React 18变得更加容易。React Server Components(服务器组件):这是React 18最引人注目的新特性之一。服务...

React useEffect的使用

分类:前端开发2023-06-19阅读:(1920)标签:javascript, react
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。熟悉Class类组件的生命周期的话,我们可以理解为useEffect就是componentDidMount, componentDidUpdate和componentWillUnMount这三个生命周期函数的组合;useEffect是组件第一次渲染和每次更新...

踩坑React Hooks闭包问题

分类:前端开发2023-06-19阅读:(2028)标签:javascript
情景回顾:订单列表统计数量的展示是通过websocket推送的数据来展示的。将随送的数量经过计算后用redux存到store里。问题出现在第一次推送订单数量后不会展示,刷新一下页面才展示。经过打断点排查,发现每次从props里拿的计算好的订单数量都是0。似乎props里订单数量没有更新。但store里明明是更新了的。看了下代码,感觉问题估计出在闭包问题上。useEffect(()=>{...

PC端canvas绘制签名

分类:前端开发2023-06-19阅读:(1770)标签:javascript, canvas
在PC端用canvas绘制签名,主要就是用鼠标绘制笔迹,生成图片上传,用到mouse事件和File对象。笔迹的绘制,我们需要考虑的点就是线条的粗细,锯齿问题。如果对PS熟悉,我们就知道,圆角放大到像素点后,就会看到还是有很多的小锯齿,只是这些小锯齿有的透明,有的半透明。缩小后看起来就是比较圆润流畅的。对此,我们可以通过对canvas线条添加少量的阴影来模拟处理边缘的半透明锯齿,以此达到笔迹路...

js实现本地图片预览

分类:前端开发2022-11-10阅读:(2474)标签:javascript
在上传图片的时候,通常想在本地先预览一下,看看选择的图片有没有问题,没问题再上传到服务器,避免服务器上产生冗余的文件,浪费资源。本地图片预览,可以通过window.URL.createObjectURL(file) 或者 FileReader来实现 ,随着浏览器的不断升级及标准更新,各主流浏览器也都支持这两个API了。URL.createObjectURL()URL.createObject...

react额外的Hooks: useMemo和useCallback

分类:前端开发2022-09-02阅读:(2853)标签:javascript, react
平时在用Hooks写react组件时,最常用的就是 useSate, useEffect, useRef。还有一些不常用的Hooks也需要熟悉,在优化提高渲染效率的时候有用。useMemoconst memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);返回一个 memoized 值。把“创建”函数和依赖项...

js位运算符<<、>>、>>>

分类:前端开发2020-04-21阅读:(1840)标签:javascript
JavaScript 使用 32 位按位运算数。JavaScript 将数字存储为 64 位浮点数,但所有按位运算都以 32 位二进制数执行。在执行位运算之前,JavaScript 将数字转换为 32 位有符号整数。执行按位操作后,结果将转换回 64 位 JavaScript 数。<< 零填充左位移 通过从右推入零向左位移,并使最左边的位脱落。 >> ...

js深拷贝

分类:前端开发2018-12-21阅读:(1769)标签:javascript
javascript中数据类型有8种,其中有7种原始类型:Boolean,Null,Undefined,Number,BigInt,String,Symbol和 Object。我们通常也说基础类型和引用类型。内存中,基础数据类型在栈中直接存储值,引用类型则是在堆中存储,然后把其在堆中的地址存储在栈里。js浅拷贝,只是拷贝栈中的数据,js深拷贝,就是要完全拷贝,包括堆里数据。举例说明:let ...

新闻单行间歇滚动效果

分类:前端开发2018-12-11阅读:(1789)标签:javascript
现在很多网页在首页都会放一个头条新闻的地方,有一两条新闻间歇滚动。网上方法有很多,这里记录两种自己用的方法。用到的有setTimeout, requestAnimationFrame。方法一:通过srollTop来实现:e.g.<style type="text/css"> .box{ width: 100%; height: 40px; ...
前端开发