[ Web前端工程师编程能力飞升之路 ]

本文将web前端研发编程能力划分了八个等级,每个等级都列举出了对应的特征及破级提升之方法,希望每位在看本文的同学先准确定位自己的等级(不要以你目前能力的最高点,而是以你当前能力的中档与之等级作对比,以免多走弯路),参考突破之法破之。

react额外的Hooks: useMemo和useCallback

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

js九宫格抽奖

分类:前端开发时间:2022-08-10阅读:(162)标签:js
H5营销活动常用抽奖功能,通常为转盘或九宫格的方式。可以通过配置来设置奖品及奖品中奖概率。流程为前端展示动效交互,在点击开始抽奖后,转盘开始转起来,同时请求后端接口获取奖品结果,再根据结果调整转盘转动到具体位置。示例为简单H5九宫格抽奖。 <div class="container"> <p>九宫格抽奖</p> ...

高德地图电子围栏 - 矢量图形覆盖物绘制编辑

分类:前端开发时间:2022-06-23阅读:(212)标签:none
地图电子围栏,也就是在地图上圈出一个区域,高德地图上对应的方案就是矢量图形覆盖物。如果仅仅是在地图上绘制矢量图形覆盖物,mouseTool这个插件就满足了,利用它可以在地图上绘制点线面(圆形、矩形、多边形)。通过监听绘制完成事件,可以拿到对应绘制图形的相关属性信息。代码示例:<div id="container"></div> // 地图以及插件...

JSON Web Token

分类:前端开发时间:2022-06-07阅读:(194)标签:鉴权, token
JSON Web Token在现在的前后端分离的开发方式中,通常都是用token的方式来进行鉴权,校验用户登录状态。这个就是JSON Web Token (JWT) ,它是一个基于JSON的开放标准 (RFC 7519),它定义了一种紧凑且自包含的方式,使用 JSON 对象在各方之间安全地传输信息。此信息可以验证和信任,因为它是数字签名的。 JWT 可以使用密钥(使用 HMAC 算法)或使用...

HTTP设置自定义header属性字段大小写问题

分类:前端开发时间:2022-02-07阅读:(293)标签:http
问题回顾:起因是在H5项目的一个迭代版本测试过程中,发现在vivo手机自带浏览器里,登录状态一直报错无法正常登录,在其他浏览器,其他设备都正常。这个问题目前只是在vivo手机浏览器里发现的。通过排查发现是token的问题。前端排查没发现问题,token正常传递给后端的,后端排查发现没有接收到token。最后通过打印日志记录发现token字段的大小写不一致,通过vivo手机浏览器传递过去的to...

浏览器自动播放音频

分类:前端开发时间:2021-12-31阅读:(414)标签:none
html的video,audio标签有autoplay属性,autoplay 属性规定一旦音频就绪马上开始播放。如果设置了该属性,音频将自动播放。但是,目前各主流浏览器为了用户体验,都禁止默认自动播放音视频了。需要有交互操作才能播放。没有交互操作,浏览器会报错,给出如下提示:Uncaught (in promise) DOMException: play() failed because t...

移动端canvas手写签名

分类:前端开发时间:2021-11-08阅读:(497)标签:js, canvas
移动端用canvas手写签名,实现思路不难,主要就是绘制笔迹,生成图片上传。笔迹的绘制,我们需要考虑的点就是线条的粗细,锯齿问题。如果对PS熟悉,我们就知道,圆角放大到像素点后,就会看到还是有很多的小锯齿,只是这些小锯齿有的透明,有的半透明。缩小后看起来就是比较圆润流畅的。对此,我们可以通过对canvas线条添加少量的阴影来模拟处理边缘的半透明锯齿,以此达到笔迹路劲看起来圆润流畅无锯齿。线条...

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

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

通过链接访问关注微信公众号

分类:笔记碎片时间:2020-04-07阅读:(721)标签:微信, 微信公众号
引导用户关注微信公众号,通常情况下是放置公众号二维码,让用户识别后关注。在一次开发微信营销活动的时候,产品经理希望通过点击链接来引导用户关注公众号。网上找了下,通过如下代码可以实现:https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI2MTE3NzIyMA==&scene=110#wechat_redire...

Android签名获取工具

分类:资源工具时间:2020-02-28阅读:(1584)标签:tool, Android
近期做app开发,开放平台中需要app的签名,网上有一些获取签名的工具但是对我来说不好用,后来中微信开发文档里下载了这个签名工具,还不错。留个记录,已备不时之需。下载这个apk,直接安装到Android设备上,输入包名获取签名,再到开放平台创建应用。下载地址:https://res.wx.qq.com/open/zh_CN/htmledition/res/dev/download/sdk/G...
首页