[ Web前端工程师编程能力飞升之路 ]
本文将web前端研发编程能力划分了八个等级，每个等级都列举出了对应的特征及破级提升之方法，希望每位在看本文的同学先准确定位自己的等级(不要以你目前能力的最高点，而是以你当前能力的中档与之等级作对比，以免多走弯路)，参考突破之法破之。
-
div在contenteditable可编辑状态下去掉粘贴内容样式
分类：前端开发时间：2023-02-02阅读：(613)标签：none - HTML里除了input，textarea可以输入内容外，div在添加了 contenteditable="true" 后也具有编辑功能，而且还支持样式渲染。也正是由于div可编辑状态下也支持样式的渲染，当我们复制了一段文本内容要粘贴到div编辑框里的时候，会发现粘贴的内容会带样式，检查元素也会看到div里有多余的带样式的标签。即使看似复制的是纯文本，粘贴进去的内容也会有...
-
js实现本地图片预览
分类：前端开发时间：2022-11-10阅读：(425)标签：javascript - 在上传图片的时候，通常想在本地先预览一下，看看选择的图片有没有问题，没问题再上传到服务器，避免服务器上产生冗余的文件，浪费资源。本地图片预览，可以通过window.URL.createObjectURL(file) 或者 FileReader来实现 ，随着浏览器的不断升级及标准更新，各主流浏览器也都支持这两个API了。URL.createObjectURL()URL.createObject...
-
react额外的Hooks: useMemo和useCallback
分类：前端开发时间：2022-09-02阅读：(601)标签：javascript, react - 平时在用Hooks写react组件时，最常用的就是 useSate, useEffect, useRef。还有一些不常用的Hooks也需要熟悉，在优化提高渲染效率的时候有用。useMemoconst memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);返回一个 memoized 值。把“创建”函数和依赖项...
-
js九宫格抽奖
分类：前端开发时间：2022-08-10阅读：(611)标签：js - H5营销活动常用抽奖功能，通常为转盘或九宫格的方式。可以通过配置来设置奖品及奖品中奖概率。流程为前端展示动效交互，在点击开始抽奖后，转盘开始转起来，同时请求后端接口获取奖品结果，再根据结果调整转盘转动到具体位置。示例为简单H5九宫格抽奖。 <div class="container"> <p>九宫格抽奖</p> ...
-
高德地图电子围栏 - 矢量图形覆盖物绘制编辑
分类：前端开发时间：2022-06-23阅读：(840)标签：none - 地图电子围栏，也就是在地图上圈出一个区域，高德地图上对应的方案就是矢量图形覆盖物。如果仅仅是在地图上绘制矢量图形覆盖物，mouseTool这个插件就满足了，利用它可以在地图上绘制点线面（圆形、矩形、多边形）。通过监听绘制完成事件，可以拿到对应绘制图形的相关属性信息。代码示例：<div id="container"></div> // 地图以及插件...
-
JSON Web Token
分类：前端开发时间：2022-06-07阅读：(602)标签：鉴权, token - JSON Web Token在现在的前后端分离的开发方式中，通常都是用token的方式来进行鉴权，校验用户登录状态。这个就是JSON Web Token (JWT) ，它是一个基于JSON的开放标准 (RFC 7519)，它定义了一种紧凑且自包含的方式，使用 JSON 对象在各方之间安全地传输信息。此信息可以验证和信任，因为它是数字签名的。 JWT 可以使用密钥（使用 HMAC 算法）或使用...
-
HTTP设置自定义header属性字段大小写问题
分类：前端开发时间：2022-02-07阅读：(1140)标签：http - 问题回顾：起因是在H5项目的一个迭代版本测试过程中，发现在vivo手机自带浏览器里，登录状态一直报错无法正常登录，在其他浏览器，其他设备都正常。这个问题目前只是在vivo手机浏览器里发现的。通过排查发现是token的问题。前端排查没发现问题，token正常传递给后端的，后端排查发现没有接收到token。最后通过打印日志记录发现token字段的大小写不一致，通过vivo手机浏览器传递过去的to...
-
浏览器自动播放音频
分类：前端开发时间：2021-12-31阅读：(929)标签：none - html的video,audio标签有autoplay属性，autoplay 属性规定一旦音频就绪马上开始播放。如果设置了该属性，音频将自动播放。但是，目前各主流浏览器为了用户体验，都禁止默认自动播放音视频了。需要有交互操作才能播放。没有交互操作，浏览器会报错，给出如下提示：Uncaught (in promise) DOMException: play() failed because t...
-
移动端canvas手写签名
分类：前端开发时间：2021-11-08阅读：(953)标签：js, canvas - 移动端用canvas手写签名，实现思路不难，主要就是绘制笔迹，生成图片上传。笔迹的绘制，我们需要考虑的点就是线条的粗细，锯齿问题。如果对PS熟悉，我们就知道，圆角放大到像素点后，就会看到还是有很多的小锯齿，只是这些小锯齿有的透明，有的半透明。缩小后看起来就是比较圆润流畅的。对此，我们可以通过对canvas线条添加少量的阴影来模拟处理边缘的半透明锯齿，以此达到笔迹路劲看起来圆润流畅无锯齿。线条...
-
js位运算符<<、>>、>>>
分类：前端开发时间：2020-04-21阅读：(1272)标签：javascript - JavaScript 使用 32 位按位运算数。JavaScript 将数字存储为 64 位浮点数，但所有按位运算都以 32 位二进制数执行。在执行位运算之前，JavaScript 将数字转换为 32 位有符号整数。执行按位操作后，结果将转换回 64 位 JavaScript 数。<< 零填充左位移 通过从右推入零向左位移，并使最左边的位脱落。 >> ...