JavaScript
文章平均质量分 56
椰卤工程师
这个作者很懒,什么都没留下…
展开
-
提升 Web 应用程序的性能:如何使用 JavaScript 编写缓存服务
在本文中,我们将探索如何使用简单的数据结构在 JavaScript 中编写缓存服务。在此示例中,我们创建了缓存服务的新实例并从缓存中检索值。如果在缓存中找不到该值或已过期,我们会从服务器检索该值并将其存储在缓存中,有效期为 5 分钟,还可以使用 方法清除缓存clear()。该get()方法检索与给定键关联的值,set()设置与键关联的值,并clear()从缓存中删除所有值。在此步骤中,我们将为缓存项添加过期时间,并在它们过期时将其从缓存中移除。编码缓存服务的第一步是定义将用于访问缓存的接口。原创 2023-03-03 14:25:13 · 809 阅读 · 0 评论 -
深受1px的困扰,如今终于解决了
移动端适配主要就分为两方面,一方面要适配不同机型的屏幕尺寸,一方面是对细节像素的处理过程。如果你在项目中直接写了 1px ,由于 dpr 的存在展示导致渲染偏粗,其实是不符合设计稿的要求。...原创 2022-08-31 10:36:34 · 968 阅读 · 0 评论 -
通俗易懂,一文学会前端缓存
主要分为:浏览器缓存、http缓存其中http缓存是web缓存的核心,最难懂也是最重要的一部分。浏览器缓存,如localStorage,sessionStorage,cookie等等。这些功能主要用于缓存一些必要的数据,比如用户信息,需要携带给后端的参数。(一般只能保存5M左右的数据,多了不行)所以接下来,我们的重点将围绕http缓存展开。http缓存可以减少带宽流量,加快响应速度。...原创 2022-08-30 16:24:33 · 258 阅读 · 0 评论 -
又到了battle EventLoop的季节
Event Loop ,“事件循环”浏览器 or Node的一种解决JavaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理。执行一个宏任务(栈中没有就从事件队列中获取)执行过程遇到微任务,添加到微任务队列中宏任务执行完毕后,立即执行微任务队列的所有微任务当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取)...原创 2022-08-29 16:40:45 · 209 阅读 · 0 评论 -
从源码层解读react渲染原理
对于生命周期我们只需关注比较重要的几个生命周期的运行点即可,比如render的作用、使用在挂载完真实DOM后做一些副作用操作、以及性能优化点、还有卸载时利用清除副作用。对于首次挂载阶段,我们需要了解react的渲染流程是:通过我们书写的初始元素和一些其他可以生成虚拟节点的东西来生成虚拟节点。然后针对不同的节点类型去做不同的事情,最终将真实DOM挂载到页面上。然后执行渲染期间加入到队列的一些生命周期。然后组件进入到活跃状态。对于更新卸载阶段,需要注意的是有几个更新的场景。以及key的作用到底是什么。原创 2022-08-23 15:13:24 · 501 阅读 · 0 评论 -
虚拟dom比真实dom还快吗?90%回答掉坑里了
虚拟DOM不一定会比操作原生DOM更快。虚拟DOM的优势在于节点进行改动的时候尽量减少开销React从来没说过虚拟DOM会比原生更快。框架的本质是提升开发效率,让我们的注意力更集中于数据。原创 2022-08-23 14:02:07 · 1630 阅读 · 0 评论 -
【知识总结】开发提效50%的Javascript常用函数
slice 也并不会修改原来的数组。原创 2022-08-23 10:20:57 · 341 阅读 · 0 评论 -
antv L7地图报错:context lost at Funciton
某天疯狂渲染地图组件,大概17次来回切换,屏幕重新渲染地图,最终它还是没能扛下所有,不幸崩塌。分析可能的原因:1、由于L7地图画布一直累加在页面上,old context 无法回溯更新,“新的来了,旧的依旧不去”,最后导致画布丢失。解决方案:重新渲染新的地图画布之前,将上一次画布销毁,直接用的destroy()方法。结果:重新渲染的时候看着是很丝滑,看上去旧的画布已经销毁不复还,再次试验发现10余次渲染之后又爆红报错了。2、查看dom节点,发现地图组件是销毁了,它的底图(图上白色背景的)依旧保留,无数个ca原创 2022-07-07 11:38:53 · 1388 阅读 · 4 评论 -
使用评估工具进行前端性能优化大赏
众所周知,Google一直关注web性能。早在2010年,Google就在一篇博文中指出,性能是影响网站自然搜索结果排名的一个重要因素。如果你运行的网站由内容驱动,且大部分流量来自搜索引擎,这就会让你停下来。好在Google有一个评估工具。Google PageSpeed Insights 会分析网站,并就如何改进其性能和用户体验给出提示。当PageSpeed Insights呈现分析时,它会执行两次:第一次使用移动用户代理,第二次使用桌面用户代理。它分析性能时考虑两个关键因素:内容加载所需时间,以及整个页原创 2022-06-14 19:56:14 · 217 阅读 · 1 评论 -
如何做好前端代码规范,让你的代码更丝滑
如何做好前端代码规范,让我的开发效率倍增,代码更丝滑~原创 2022-06-13 09:32:43 · 672 阅读 · 0 评论 -
无敌版可配置的查询构建器React Query Builder
基于上一篇《自定义一个玩出花来的查询构建器React Query Builder》在此基础上又做了一次升级改造,让我来看看升级后的查询构建器长什么样吧!左、右两侧支持Cascader级联菜单选择支持级联菜单Tooltip悬浮提示右侧可通过Switch开关控制:输入框input/Cascader级联菜单核心功能代码实现1、左右两侧均为自定义组件1)修改QueryBuilder组件的配置信息<QueryBuilder disabled={disabled}原创 2022-03-18 17:54:06 · 1453 阅读 · 0 评论 -
【知识总结】JavaScript核心问题汇总
数据类型1、JavaScript有哪些数据类型,区别是什么?undefined、null、boolean、number、string、object、symbol、bigint其中 Symbol 和 BigInt 是ES6 中新增的数据类型:Symbol 代表创建后独一无二且不可变的数据类型,它主要是为了解决可能出现的全局变量冲突的问题。BigInt 是一种数字类型的数据,它可以表示任意精度格式的整数,使用 BigInt 可以安全地存储和操作大整数,即使这个数已经超出了 Number 能够表示的安原创 2021-09-17 17:37:27 · 281 阅读 · 0 评论 -
通过tracking.js、陀螺仪 和 three.js 实现裸眼3d效果
体验地址:https://threejs-3d.vercel.app/github地址:https://github.com/lqq-code/threejs-3dthree.js是一款webGL框架以简单、直观的方式封装了3D图形编程中常用的对象是一个跨浏览器的脚本,使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形。1、创建场景三要素:场景 + 相机 + 渲染器构造函数PerspectiveCamera(fov, aspect, ne原创 2021-09-13 17:54:35 · 1441 阅读 · 0 评论 -
【避坑指“难”】js通过输入身份证号,自动填充出生年月和性别信息
<Form form={form} name="validate_other" onFinish={onFinish} style={{ position: 'relative' }} initialValues={{ applyType: 1, }} > <Form.Item name="applyName" label="代理人" rules=原创 2021-08-26 10:41:34 · 812 阅读 · 0 评论 -
【避坑指“难”】JS原生document.execCommand(“Copy“)实现复制功能
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)<div style={{ width: 220 }}> <input id="copy-url" readOnly="readonly" style={{ position: "absolute", zIndex: -99, opacity: 0 }} /> .原创 2021-06-08 14:25:13 · 362 阅读 · 0 评论 -
【避坑指“难”】DatePicker只能选择过去时间和当前时间,禁用将来时间
import moment from 'moment';import 'moment/locale/zh-cn';function disabledDate(current) { // Can not select days before today and today return current && current > moment().endOf('day');} <RangePicker style={{ width: 240,原创 2021-06-08 10:59:13 · 267 阅读 · 0 评论 -
【避坑指“难”】页面Top置顶(返回顶部)小图标实现逻辑
窗口大小在不同浏览器中确定浏览器窗口大小没有想象中那么容易。所有现代浏览器都支持 4 个属性:innerWidthinnerHeightouterWidthouterHeightouterWidth 和 outerHeight 返回浏览器窗口自身的大小(不管是在最外层 window 上使用,还是在窗格中使用)。innerWidth和 innerHeight 返回浏览器窗口中页面视口的大小(不包含浏览器边框和工具栏)。document.documentElement.clientWidth原创 2021-06-05 12:14:37 · 499 阅读 · 0 评论 -
【避坑指“难”】scrollTop滚动条兼容各浏览器
所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。IE 8 及 更早 IE 版本不支持该属性,但可以使用 document.documentElement.scrollLeft 和 document.documentElement.scrollTop 属性。let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;let oldT原创 2021-06-05 11:46:04 · 218 阅读 · 0 评论 -
客户端检测把不同浏览器之间存在的差异都摸清楚了
跨平台的浏览器尽管版本相同,但总会存在不同的问题,作为一名合格的前端开发,我们需要面向最大公约数来设计,就得使用各种方法来检测客户端,以克服或避免这些缺陷。我们的宗旨是:第一,绝对不意气用事;第二,绝对不漏过任何一个浏览器;第三,绝对保证浏览器公正漂亮。任何时候,只要有更普适的方案可选,都应该毫不犹豫地选择。首先要设计最常用的方案,然后再考虑为特定的浏览器进行补救。能力检测能力检测(又称特性检测)即在 JavaScript 运行时中使用一套简单的检测逻辑,测试浏览器是否支持某种特性。if原创 2021-05-24 16:08:05 · 596 阅读 · 0 评论 -
【算法与数据结构】0基础都能学会的二叉树
二叉树定义:每个节点最多有两个子树的树结构,通常子树被称作“左子树”和“右子树”。平衡二叉树定义:二叉树中,每一个节点的左右子树的高度相差不能大于 1,称为平衡二叉树。满二叉树:除了叶结点外每一个结点都有左右子叶且叶子结点都处在最底层的二叉树完全二叉树:深度为h,除第 h 层外,其它各层 (1~h-1) 的结点数都达到最大个数,第h 层所有的结点都连续集中在最左边二叉树的遍历1、前序遍历(先根遍历)根节点 -> 左子树 -> 右子树举个????:给定一个二原创 2021-05-19 16:48:09 · 177 阅读 · 2 评论 -
【LeeCode算法】有关树的题目合集(持续更新)
题目描述解法1:JSON骚操作var isSameTree = function(p, q) { return JSON.stringify(p) == JSON.stringify(q)};解法2:递归判断var isSameTree = function(p, q) { if(!q && !p) return true; if(q && p && q.val && p.val &&原创 2021-05-08 16:36:48 · 218 阅读 · 0 评论 -
setTimeout不准时?你大意了
随着时间的推移, setTimeout 实际执行的时间和理想的时间差值会越来越大,这就不是我们预期的样子。类比真实的场景,对于一些倒计时以及动画来说都会造成时间的偏差都是不理想的。为什么 setTimeout 会不准时呢?因为我们的代码往往并不是只有一个 setTimeout,大多数会遇到以下情况:总结来说,因为浏览器页面是有消息队列和事件循环来驱动的,创建一个 setTimeout 的时候是将它推进了一个队列,并没有立即执行,只有本轮宏任务执行完,才会去检查当前的消息队列是否有有到期的任务。方法原创 2021-05-07 14:31:25 · 2174 阅读 · 1 评论 -
【避坑指“难”】JS获取滚动条位置document.documentElement.scrollTop
const [isScroll, setScroll] = useState(false); const onScroll = () => { let scrolled = document.documentElement.scrollTop || document.body.scrollTop; setScroll(scrolled); //滚动条位置 }; useEffect(() => { document.addEventLis..原创 2021-04-25 11:47:28 · 271 阅读 · 0 评论 -
只要思想不滑坡,总有一种方法可以将instanceof用于原始JavaScript值
JavaScript提供了两种用于类型检查的运算符:typeof 用于类型检查原始值instanceof 用于对类实例进行类型检查遗憾的是,原始值无法利用instanceof运算符。而且Javascript的内置对象(如Boolean、String、Number只能搭配instanceof来检查使用相应的构造函数创建的实例),而typeof呢,它又有一些比较奇葩的点,比如说typeof null 是object类型。怎么办呢?只要思想不滑坡,办法总比困难多Symbol.hasInstance原创 2021-03-29 16:43:57 · 104 阅读 · 0 评论 -
异曲同工之妙的reload() 和 replace()
reload()可以重新装载当前文档。replace()可以装载一个新文档而无需为它创建一个新的历史记录。也就是说,在浏览器的历史列表中,新文档将替换当前文档。这样的话,就不能通过【返回】按钮返回当前文档。使用场景对于那些使用了框架并且显示多个临时页的网站来说,replace() 比较有用,这样临时页面都不会被储存在历史列表中。注意:window.location与document.location不同,前者引用location对象,后者只是一个只读字符串,与document.URL同义。但原创 2021-03-21 23:23:29 · 201 阅读 · 3 评论 -
如何通过location对象获取当前页面(URL)相关信息
location对象定义了8个属性,其中7个属性分别指向当前URL的各部分信息,另1个属性href包含了完整的URL信息。????举个栗子看下面这条URL信息:http://www.mysite.com:80/news/index.asp?id=123&name=location#topHref:当前文档的完整URLProtocal:URL的协议部分,包含后缀的冒号。例如,“http:”Host:URL的主机名和端口部分。例如,“www.mysite.com:80”Hostname原创 2021-03-21 23:12:35 · 774 阅读 · 0 评论 -
【避坑指“难”】前端获取图形验证码
在获取图形验证码的时候,是通过请求后端接口,返回文件流格式,Buffer转成ArrayBuffer后再转成Blob,最后展示成了下图的样子。const { setCodeParams, imgStyle, setImgCode } = propsconst [codeImgUrl, setCodeImgUrl] = useState('')const handleImgCode = () => { request('/XXX/code', { method: 'get',原创 2021-03-19 17:33:49 · 559 阅读 · 0 评论 -
【避坑指“难”】JS将JSON格式日期数据转化为时间YYYY-mm-dd HH:MM:SS格式
JSON格式日期长什么样?create_time: "2021-03-11T10:11:05+08:00"封装formatDate方法export function formatDate(date: Date, fmt: string) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }原创 2021-03-11 15:10:37 · 406 阅读 · 0 评论 -
都2021年了,JavaScript最新手机号码、电话号码正则表达式你还没更新吗?
一般表单页面都需要填写手机号,校验用户输入的手机号码是否正确,就要用到正则表达式,用正则表达式来匹配手机号段,如在运营商号段内,则号码正确。因此,我们就需要知道运营商最新的号段,来了来了,终于来了。各大运营商手机号码段(新)中国电信号段133、153、173、177、180、181、189、190、191、193、199中国联通号段130、131、132、145、155、156、166、167、171、175、176、185、186、196中国移动号段134(0-8)、135、136、13原创 2021-03-05 14:40:51 · 2553 阅读 · 1 评论 -
【避坑指“难”】JS将unix格式时间戳转化为正常时间格式(YYYY/MM/DD)
unix时间戳转正常时间格式formatDate(time) { let unixtime = time; let unixTimestamp = new Date(unixtime * 1000); let Y = unixTimestamp.getFullYear(), M = unixTimestamp.getMonth() + 1 > 10 ? unixTimestamp.getMonth() +原创 2021-01-21 14:55:42 · 280 阅读 · 0 评论 -
【每日卤一题】如何用 css 或 js 实现多行文本溢出省略效果,考虑兼容性
单行:overflow: hidden;text-overflow:ellipsis;white-space: nowrap;多行:display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; //行数overflow: hidden;兼容:p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}p::a原创 2020-12-23 16:23:38 · 132 阅读 · 0 评论 -
前端通过node.js实现16进制转utf-8
Buffer.from(buffer)buffer <Buffer> | <Uint8Array> 要拷贝数据的 Buffer 或 Uint8Array。具体实现代码:Buffer.from(text.toString().slice(2), 'hex').toString('utf8')原创 2020-12-20 12:50:06 · 1016 阅读 · 0 评论 -
css li修改小圆点的颜色
<ul> <li>{item.tip1}</li> <li>{item.tip2}</li> <li>{item.tip3}</li></ul> ul li::marker { color: #3860f4; }效果如下:原创 2020-11-16 09:53:52 · 6266 阅读 · 0 评论 -
基于vue+element-ui实现Cascader级联选择器+Table树形数据
开发进度提前50%,啊,真香。下面,看图说话Table树形数据Cascader级联选择器功能实现+详细代码Cascader级联选择器options属性指定选项数组即可渲染出一个级联选择器,所以后端接口返回的数据结构要保持一一致性,这样处理起来会省很多事。element官网给出的options需要的数据格式:options: [{ value: 'zhinan', label: '指南', children: [{原创 2020-11-13 13:09:14 · 2109 阅读 · 1 评论 -
玩转JS对象,吊打面试官,请给我来一打对象
对象是一系列属性的集合,一个属性包含一个键和一个值,也叫键值对。1、创建对象创建方法1:let obj = new Object(); // 声明一个空对象创建方法2:let obj = {}; // 声明一个空对象上面的name是对象obj中的一个属性,对应的值为"leo"。2、设置对象属性和访问属性直接设置:let obj = {};obj.name = "leo"; // 为对象添加属性和值创建时设置:let obj = {name原创 2020-11-05 17:41:05 · 76 阅读 · 0 评论 -
JavaScript常用的字符串方法总结
charAt作用:查找字符串中指定位置的内容。str.charAt(index)index : 查找的字符的下标(大于等于0,若小于0则返回空字符串),若没传则表示0。let a = "hello leo!"a.charAt(); // "h"a.charAt(1); // "e"a.charAt(-1);// ""indexOf和lastIndexOf作用:查找指定字符串的位置。indexOf和lastIndexOf相同点:两者接收的参数一致,没有查到内容,返回-1。in原创 2020-11-05 16:25:43 · 71 阅读 · 0 评论 -
React高阶组件三部曲
一、高阶组件介绍函数可以作为参数被传递(例如setTimeout())函数可以作为返回值被输出function foo(x){ return function(){ return x; }}举个栗子:时间函数的应用1、setTimeout:隔一段时间执行一段js代码的函数(只执行一次)2、setInterval:每隔一段时间就执行一次(多次执行)举个栗子2:ajax请求$.get('/api/getTime',function(){ console.l原创 2020-11-01 11:31:12 · 110 阅读 · 0 评论 -
搞点JavaScript豪华套餐778
恭喜您喜提豪华套餐一份,包含去除对象空值+深拷贝+防抖+转驼峰+生成随机数+生成随机哈希+生成验证码+…据说饿着肚子来的最后都扶着墙回去了。开胃酒:生成随机数export function random(num) { return Math.round(Math.random() * num)}Math.round()方法可把一个数字四舍五入为最接近的整数。前菜:生成随机哈希export function createHash(hashLength){ hashLength = Num原创 2020-08-18 17:50:59 · 113 阅读 · 0 评论 -
JavaScript深入之变量提升
什么是变量提升?在当前上下文中(全局/私有/块级),js代码自上而下执行之前,浏览器会提前处理一些事情。浏览器会把当前上下文中所有带 var 和 function 关键字进行提前的声明或者定义。javascript中创建一个变量有六种方式:var let const class function import。其中只有var 和 function 才能触发变量提升。声明 declare: var a;定义 defined: a = 10;1. 带var的会提前声明console.log原创 2020-08-07 16:18:15 · 88 阅读 · 0 评论 -
【避坑指“难”】前端JS解码Unicode,显示emoji成功
未解码前获取的数据是这样的完全不能理解作者此时此刻的表情解码Unicode后,如下如何实现?unescape(str.replace(/\\u/g, "%u")) //str为需要解码的Unicode内容原创 2020-07-29 14:30:43 · 678 阅读 · 0 评论