![](https://img-blog.csdnimg.cn/direct/ac37ae660f0240bcb165abd5d41feeeb.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
javascript
文章平均质量分 84
JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。
邹荣乐
拥有多年开发经验的前端工程师,曾经参与过多个大型项目的开发,积累了丰富的项目经验。希望能结交更多志同道合的朋友。
展开
-
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
在 Web浏览器中存储数据以改善用户体验和提升Web应用程序性能是非常常见的。在大多数情况下,可供我们使用就是LocalStorage和SessionStorage。本文中,我们将会从安全性和用户体验两个方面对SessionStorage和LocalStorage进行评估。然后我们将讨论如何根据您的要求挑选合适使用的对象。原创 2024-01-01 15:21:05 · 783 阅读 · 0 评论 -
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
在使用SpeechSynthesisUtterance时,需要先检查浏览器是否支持Web Speech API,然后创建一个新的SpeechSynthesisUtterance对象,并设置要转换为语音的文本以及其他配置项,最后调用speechSynthesis.speak()方法将文本转换为语音。使用百度文字转语音开放API的方法需要调用其提供的接口,传入要转换的文字,并设置语言、语速等参数。使用iSpeech TTS引擎则需要引入相应的JavaScript库,并使用其提供的API将文字转换为语音。原创 2024-02-26 09:24:53 · 4261 阅读 · 1 评论 -
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
基于 BroadcastChannel,就可以实现每个 Tab 内的核心信息互传, 再基于这些信息去完成我们想要的动画、交互等效果。Broadcast Channel 与 window.postMessage 都能进行跨页面通信Broadcast Channel 只能用于同源页面之间进行通信,而window.postMessage可以任何页面之间通信基于 Broadcast Channel 的同源策略,它无法完成跨域的数据传输;跨域的情况,我们只能使用window.postMessage 来处理。原创 2024-02-20 10:14:00 · 2261 阅读 · 0 评论 -
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
它会将回调函数加入到浏览器下一次重绘之前要执行的队列中。setInterval:与 setTimeout 类似,setInterval 也会将要执行的代码或函数放入事件循环队列中,但它在指定的时间间隔后会一直重复执行,直到 clearInterval 被调用或窗口被关闭。函数节流:在高频率事件(resize,scroll等)中,为了防止在一个刷新间隔内发生多次函数执行,使用requestAnimationFrame可保证每个刷新间隔内,函数只被执行一次,这样既能保证流畅性,也能更好的节省函数执行的开销。原创 2024-06-21 08:42:30 · 3127 阅读 · 2 评论 -
前端开发者必备:HTTP状态码含义与用途解析,常见错误码产生原因及解决策略
首先,HTTP 301状态码表示永久重定向,这意味着服务器将请求重定向到新的URL,并且这个重定向是永久的,即客户端的后续请求都会被重定向到新的URL。而HTTP 302状态码表示临时重定向,这意味着服务器将请求重定向到新的URL,但这个重定向是临时的,即客户端的后续请求可能不会被重定向到新的URL。HTTP 302状态码表示临时重定向,当一个客户端发起请求后,服务器返回302状态码,表示请求成功,但需要客户端进行重定向,即需要将请求重定向到另一个URL上去。如果URL不存在,需要修改客户端的请求URL。原创 2024-03-05 14:13:20 · 2025 阅读 · 0 评论 -
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
在做项目时有这么一个需求,需要将当前页面指定区域的内容导出pdf到本地。使用过程中遇到的问题及解决方法。需要一个支持中文的字体ttf文件,可以在网上下载,也可以使用本地window/font/路径下的文件。选择你本地的ttf文件,点击“Create”按钮,会生成一个js文件。上面乱码解决了,但是发现中文字不会自动换行。这个还需要进一步解决。如果是直接使用jsPDF生成pdf文件,中文是乱码。在导出多页的时候,希望在页面尾部添加页码。里面有个fontconverter目录。在页面中引入js文件。原创 2023-11-13 09:22:28 · 5357 阅读 · 16 评论 -
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript经历了不同标本的迭代,在不断完善中会添加不同的新特性来解决前一个阶段的瑕疵,让我们开发更加便捷与写法更加简洁!原创 2023-11-03 14:10:55 · 485 阅读 · 0 评论 -
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
toString()为Object的原型方法,而Array,function等类型作为Object的实例,都重写了toString方法。不同的对象类型调用toString方法时,根据原型链的知识,调用的是对应的重写之后的toString方法。在 JavaScript 里使用 typeof 来判断数据类型,只能区分基本类型,即 “number”,”string”,”undefined”,”boolean”,”object” 五种。如果对象的 toString() 方法未被重写,就会返回如上面形式的字符串。原创 2024-03-07 09:21:12 · 2410 阅读 · 1 评论 -
在JavaScript中异步任务里的微任务和宏任务的特点和生命周期
在JavaScript中,微任务和宏任务是异步任务的两种类型,它们都存在于事件循环中,但有着不同的特点和生命周期。原创 2023-08-14 10:42:52 · 207 阅读 · 0 评论 -
前端必备知识:闭包的概念、作用与应用
闭包就是能够读取其他函数内部变量的函数。例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。原创 2023-08-02 10:28:29 · 424 阅读 · 0 评论 -
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
Object.freeze()可以提高性能,如果你有一个对象,里面的内容特别特别多,而且都是一些静态数据,你确保不会修改它们,那你其实可以用Object.freeze()冻结起来,这样可以让性能大幅度提升,提升的效果随着数据量的递增而递增。一般什么时候用呢?对于纯展示的大数据,都可以使用Object.freeze提升性能。原创 2024-01-13 10:56:49 · 1385 阅读 · 0 评论 -
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
防抖就像王者里的英雄回城,点一下回城,会倒计时,如果中途被打断,则会重新开始。节流就像王者里的大招,点一下大招释放完,会倒计时,中途不受任何影响,倒计时结束,大招接着使用。原创 2023-07-20 15:07:43 · 172 阅读 · 0 评论 -
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于iframe优雅实现全新的微前端方案,继承iframe的优点,补足 iframe 的缺点,让 iframe 焕发新生。原创 2023-07-17 14:16:11 · 4756 阅读 · 4 评论 -
养成良好的书写习惯,让你的代码变优雅的一些小技巧
箭头函数是ES6中引入的一种语法,它可以缩短函数的代码长度,同时提高代码的可读性。// 传统函数定义// 箭头函数简化// 传统对象创建age: 30,// 对象字面量简化。原创 2023-07-14 17:14:43 · 134 阅读 · 0 评论 -
前端常用算法全解:特征梳理、复杂度比较、分类解读与示例展示
算法可以理解为有基本运算及规定的运算顺序所构成的完整的解题步骤,或者看成按照要求设计好的有限的确切的计算序列,并且这样的步骤和序列可以解决一类问题。算法代表着用系统的方法描述解决问题的策略机制,它能够对一定规范的输入在有限时间内获得所要求的输出。如果一个算法有缺陷,或不适合于某个问题,执行这个算法将不会解决这个问题。不同的算法可能用不同的时间、空间或效率来完成同样的任务。一个算法的优劣可以用空间复杂度与时间复杂度来衡量。原创 2024-01-05 10:50:45 · 1603 阅读 · 0 评论 -
JavaScript中数组、对象等循环遍历的常用方法介绍
方法是否改变原数组特点forEach()否没有返回值map()否有返回值,可链式调用for of否for…of遍历具有Iterator迭代器的对象的属性,返回的是数组的元素、对象的属性值,不能遍历普通的obj对象,将异步循环变成同步循环filter()否过滤数组,返回包含符合条件的元素的数组,可链式调用否some()只要有一个是true,便返回true;而every()只要有一个是false,便返回false.否find()返回的是第一个符合条件的值;原创 2023-05-29 10:54:23 · 4418 阅读 · 0 评论 -
JS浮点数精度问题及高精度小数运算:BigNumber解决方案
它的实现遵循IEEE 754标准,使用64位固定长度来表示,也就是标准的double双精度浮点数。它的优点是可以归一化处理整数和小数,节省储存空间。而实际计算的时候会转换成二进制计算再转成十进制。进制转换之后会很长,舍去一部分,计算再转回来,就有了精度误差。JavaScript存在计算的精度问题,所以直接计算就可能会导致各种各样的bug,像一些加减乘除的前端计算。不多哔哔,直接教你们怎么用bigNumber.js进行加减乘除,取余,取整取小数点等操作…解决js计算精度问题BigNumber.js。原创 2023-12-16 14:02:54 · 2654 阅读 · 0 评论 -
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
简单的说,当用户最小化网页或移动到另一个标签时,API会发送 visibilitychange 有关该网页的可见性的事件。以前看到过一些网页,在标签切换到其它地址时,网页上的标题上会发生变化,一直不知道这个是怎么做的,最近查了一些资料才发现有一个 visibilitychange 事件就可以搞定,这里将介绍一下页面可见性(Page Visibility)API的简单应用。hidden : 页面内容是对用户不可见。实际上,这意味着该文档是后台标签页或最小化窗口的一部分,或者系统锁屏是时的状态。原创 2024-04-13 15:50:45 · 2888 阅读 · 0 评论 -
轻松上手Web Worker:多线程解决方案的使用方法与实战指南
通过使用 Web Workers,Web 应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是 UI 线程)不会因此被阻塞/放慢。使用构造函数(例如,Worker())创建一个 worker 对象,构造函数接受一个 JavaScript 文件 URL — 这个文件包含了将在 worker 线程中运行的代码。原创 2023-12-31 13:38:36 · 1607 阅读 · 0 评论 -
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
事件委托是一种利用事件冒泡的特性,在父节点上响应事件,而不是在子节点上响应事件的技术。它能够改善性能,因为只需要在父元素上设置一次事件监听器,就可以管理同一类型的所有子元素的事件。在日常开发中,很经常我们会遇到个问题,就是在长列表数据较多的时候,而又需要对子元素注册一些事件(如onClick),就会造成比较大的内存开支,很耗费性能,也可能会造成页面卡顿等等;例如,可以在父元素上设置一个click事件监听器,然后在子元素上绑定一个click事件,通过事件委托实现父元素对子元素事件的响应。原创 2024-02-28 10:26:11 · 4272 阅读 · 0 评论 -
页面手写签名实现:利用Canvas技术将签名保存为图片
Canvas 是 HTML5 中新增的一个元素,它是一个画布,可以用 JavaScript 在网页上绘图。与 SVG 不同,Canvas 是基于位图的,不能直接在上面进行复杂的几何运算,而 SVG 则是基于矢量的,可以绘制复杂的几何图形。Canvas 的坐标系与 SVG 不同,它的原点在左上角,x 轴向右延伸,y 轴向下延伸。这样就可以在页面中使用canvas实现手写签名了。Canvas 是 HTML5 中新增的一个重要功能,它提供了一个在网页上绘图的方法,可以用于创建各种图形、动画和游戏等。原创 2023-05-23 14:34:36 · 865 阅读 · 0 评论