![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 86
阿宇的编程之旅
本人擅长Ai、Fw、Fl、Br、Ae、Pr、Id、Ps等软件的安装与卸载,精通CSS、JavaScript、PHP、ASP、C、C++、C#、Java、Ruby、Perl、Lisp、python、Objective-C、ActionScript、Pascal、spss、sas等单词的拼写,熟悉Windows、Linux、Mac、Android、IOS、WP等系统的开关机
展开
-
控制台居然可以这么玩?五分钟带你上手ANSI指令,实现一个log工具包
或者直接使用setinterval实现一个向上滑动滚动条的效果,每500毫秒打印一次行数。光标移动与上述的光标指令相同,只不过在指令中传入了移动距离。原创 2024-04-23 16:00:51 · 965 阅读 · 0 评论 -
前端如何优雅的使用定时器?
前言在前端开发中,使用定时器可以处理一些循环操作或者延时操作,比如使用setinterval可以在指定的时间间隔重复执行函数,setTimeout则是用于在指定时间后执行一次函数,还有之前提到的requestAnimationFrame动画帧函数,在使用全局定时器时,可能不会关注其启用数量及优化操作,导致实际开发中遇到一些性能问题。借助本篇文章,与大家分享一个定时器的管理工具,希望各位看完后能有所收获。原创 2024-04-08 09:58:02 · 1154 阅读 · 0 评论 -
iframe动态操作标签分享
和webpack有些不同,webpack可以通过CopyWebpackPlugin或者IgnorePlugin等方式加载或排查文件,但是使用vite时遇到了。第一步是将静态资源打包进正式包中,这里可以使用rollup的插件rollup-plugin-copy来达到复制静态资源的目的。第二步是动态修改iframe中的link标签的href地址,达到资源替换的效果。原创 2024-03-20 18:12:58 · 889 阅读 · 0 评论 -
不是Jenkins玩不起,而是脚本更有性价比,在1Panel中使用Node搭建前端自动化
公司测试环境的运维管理面板是1Panel,由于近期有新项目的开发,部署功能并不完善,每次版本的发布需要开发人员在自己电脑上build并通过压缩包手动进行操作发布,这么做既降低了效率,还会导致操作的不一致性,并且难以扩展和维护。于是我计划在面板中搭建一套流水线来维护前端包的自动构建与代码发布。原创 2024-03-14 09:15:52 · 1232 阅读 · 0 评论 -
Web Components详解-HTML Templates
在前面Web Components系列文章的插槽中,我们使用直接在body中写入html标签的形式来承载shadowDOM中的元素,这么做会使标签在DOM多渲染一次,不仅降低了性能,还使标签直接暴露在页面中,遵循组件的可重用性、隔离性和封装性,Web Components提供了一种模板标签:template。它可以在DOM文档中定义模板,然后可以通过JavaScript动态地填充和显示这些模板,达到html组件封装的效果。原创 2024-02-18 10:51:59 · 913 阅读 · 2 评论 -
Web Components详解-Shadow DOM插槽
前言插槽实际上也属于组件通信的一种方式,但是由于其强大的api和实用性,我将其单独拆开来介绍。定义Slot(插槽)是Web Components中一个重要的特性,它允许在组件内部定义占位符,以便父组件可以向其中插入内容。换句话说就是将子组件或者标签传入父组件中,最终达到在父组件外部实现子组件的效果原创 2023-09-11 10:16:22 · 1123 阅读 · 28 评论 -
浏览器事件机制详解
浏览器的事件机制是web前端面试及开发过程中绕不开的话题,可以说一切用户操作或者浏览器的行为都离不了事件,它允许开发者通过JS处理用户的操作,并处理操作逻辑,将结果反馈给用户。本篇文章将深入浏览器事件的运行机制,和大家一起探讨其强大的功能及广泛的用法浏览器的事件可以分为以下几类:鼠标事件键盘事件表单事件窗口事件DOM事件原创 2023-09-18 10:22:18 · 1017 阅读 · 42 评论 -
Web Components详解-组件通信
我们常说到程序的运行和代码的实现遵循高内聚和低耦合,理解一下这句话,模块中的功能在逻辑上是有关联的,模块之间依赖关系较弱。前端的组件同样遵循这套原则,单个组件的功能逻辑是完整的,组件与组件之间也没有强关联,那么如何保证组件之间的联系呢?在Vue和React中一般使用props响应式通信、bus事件总线、Pinia,Vuex,Mobx全局状态等等方式进行数据传递,类似的本篇文章也将介绍Web组件的通信方式原创 2023-10-24 10:45:53 · 1027 阅读 · 45 评论 -
Web Components详解-Shadow DOM样式控制
前言本文继续Web Components系列文章,介绍一下Shadow DOM的样式及选择器。Shadow DOM的样式与外界是隔离的,即自定义元素的样式只会影响到Shadow DOM内部,不会影响到外部的页面元素,这点在之前有说到过。那么有什么办法可以在Shadow DOM中使用全局样式?样式选择器又有什么异同呢?请跟着本篇文章一起探究:host伪类作为伪类使用原创 2023-10-07 11:22:51 · 767 阅读 · 31 评论 -
Web Components详解-Shadow DOM基础
上篇文章的自定义标签中,我们使用customElements对象对原生标签进行拓展,达到组件的拓展性与复用性的效果,那么如何保证组件的属性、结构及样式的封装隔离便是本篇文章将要分享的内容,本篇文章不仅仅会介绍Shadow DOM,还会对前面说到的Custom Elements做一个使用场景的拓展及深入探究在JS作用域一文中,我们提到全局作用域和局部作用域的概念,如果全局作用域没有处理好可能会导致作用域污染,出现问题。如果单纯的使用Custom Elements实现自定义组件的功能可能会存在样式冲突,Dom干原创 2023-09-04 10:20:18 · 1915 阅读 · 30 评论 -
Web Components详解-Custom Elements
随着项目体量的增大,组件化和模块化的优势也愈发明显了,构建可重复使用、独立、可互操作的组件变得尤为重要,在JS中我们可以通过class和函数对代码解耦,使某段代码可以复用。在TS中我们也可以通过模块对代码进行模块化开发,在HTML页面中同样有一种技术可以实现独立的、可复用的组件,这便是本篇文章讲到的Web ComponentsWeb Components主要包括Custom Elements、Shadow DOM、HTML Templates和JavaScript这四部分,在后续的文章中我们会详细讲讲在熟悉原创 2023-08-28 14:20:34 · 1288 阅读 · 28 评论 -
AutoxJS脚本保姆级教程
之前我分享了一个自动化脚本的文章,介绍了使用Tasker+Autojs实现自动化操作。现在公司更换了新的考勤软件,脚本也做了许多期迭代,所以更新了一版脚本分享的文章,并记录一些遇到的问题原创 2023-08-14 09:46:47 · 6869 阅读 · 54 评论 -
JS案例:在浏览器实现自定义菜单
分享一下之前公司实现自定义菜单的思路,禁用浏览器右键菜单,使用自定义的菜单将其代替,主要功能有:鼠标右键调出菜单,双击选中/取消选中标签,新建标签,删除标签,调整位置,调整大小,取消拖拽,关闭菜单原创 2023-07-24 10:50:41 · 1606 阅读 · 40 评论 -
JavaScript作用域详解
作用域是JavaScript中一个重要的概念,它决定了变量和函数在代码中的可访问性和可见性。了解JavaScript的作用域对于编写高效、可维护的代码至关重要。本文将深入介绍JavaScript作用域的不同类型、作用域链以及闭包等相关内容。原创 2023-07-31 09:31:55 · 1316 阅读 · 30 评论 -
在?聊聊浏览器事件循环机制
JS是单线程语言,在某个时间段只能执行一段代码。这种单线程模型的好处是不会出现多线程的竞态条件和死锁等问题:在多线程中,某个资源同时被其他线程调度时可能会出现执行顺序不确定导致错误,或者资源占用等待这一类的问题。因此JS无法同时处理多任务,为了处理这类任务,JavaScript运行时使用了一种叫事件循环机制的异步编程模型JS的事件循环机制是一种异步编程模型,其特点是异步非堵塞,它决定了JavaScript的异步执行顺序和运行机制。JS的事件循环机制由调用栈(Call Stack)、任务队列(Task Que原创 2023-06-20 18:02:30 · 1610 阅读 · 20 评论 -
你真的了解JS垃圾回收机制吗?
垃圾回收是JavaScript中内存管理的重要组成部分。开发人员不需要手动分配和释放内存。垃圾回收机制可以自动处理内存的分配和释放,减轻了开发人员的负担,并且降低了内存泄漏的风险,它的主要目的是自动地检测和释放不再使用的内存,以便程序能够更高效地利用系统资源。它通过标记不再需要的对象,并回收它们所占用的内存空间,以便其他对象可以使用。本篇文章将与大家分享,介绍一下JavaScript垃圾回收的重要性和定义,并深入探讨内存管理的概念、JS垃圾回收机制的分类,以及如何避免内存泄漏以及性能优化。原创 2023-07-10 10:00:55 · 970 阅读 · 26 评论 -
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
接着上文往下介绍,上篇文章我们对JS原生动画和贝塞尔曲线有了一个详细的认识,基于定时器或动画帧,我们可以实现元素的动画缓动,本文将分享浏览器中功能强大的Animations API,有兴趣的话就接着往下看吧Web Animations API于2016年成为Web标准的一部分,它的功能比之前提到的动画要丰富的多,它的核心理念是时间轴和动画效果。它提供了一组功能强大的方法和属性,用于定义、操作和管理动画效果。时间轴(Timeline)是Web Animations API中的核心概念之一。原创 2023-08-07 09:45:14 · 481 阅读 · 24 评论 -
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(上)
上篇文章我们详细的讲述了CSS中的原生动画技术,了解了过渡与动画属性。那么本文将与大家分享原生JS中的动画方案,有兴趣的同学请接着往下看JS实现动画的形式有定时器,动画帧以及动画API技术早期的JS中动画帧和动画API的概念尚不存在,开发者通常使用定时器生成对应动画我使用上面的代码实现了一个简单的匀速运动,其中按钮一控制运动和暂停,按钮二控制运动的方向,其中speed用于控制速度,frame控制帧数,下面是动画效果原创 2023-07-17 09:42:07 · 962 阅读 · 40 评论 -
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
实现动画效果是前端提升用户体验的重要一环,从CSS动画到JS动画帧,每种技术都有其独特的优势和适用场景,本篇文章将与大家分享浏览器的原生动画技术原创 2023-07-03 10:25:22 · 658 阅读 · 31 评论 -
作为前端开发,你了解MutationObserver吗?
MutationObserver在开发中或许不常使用,但是特殊情况下确实可以解决某些问题。和addEventListener有些类似,当用户触发了某些事件操作时会调用对应的回调我也是前些天在需求迭代中第一次使用MutationObserver,由于Antd早期版本的弹窗没有做响应功能,以及代码中的弹窗许多没有进行二次封装,导致无法得知弹窗何时出现及消失,于是我使用前端Hack的方式取个巧,监听元素变化解决了此类问题,这里也是做个知识点分享原创 2023-06-12 10:51:29 · 2683 阅读 · 18 评论 -
JS的迭代器是啥?精读JS迭代器
在ES6中引入了迭代器的概念,它是一种遍历数据集合的机制,并且提供了一种简单而一致的方式来访问集合中的每个元素,在集合与映射这篇文章中,我们就已经初步认识了Symbol.iterator这个概念。迭代器是通过迭代协议实现的,每一个拥有该协议的对象都可以称作是可迭代的对象,这个协议的标识就是Symbol.iterator,它是ES6中引入的一个新的Symbol值,表示一个对象是否有可迭代性。可迭代对象的Symbol.iterator属性是一个函数,我们称为迭代器对象原创 2023-05-29 10:04:16 · 1301 阅读 · 11 评论 -
Node实现CSDN博客导出(后续)
在2021年我实现了一个Node导出博客的功能:爬取接口及博客页面并导出为md文件格式。中途有许多迭代及优化以及解决了一些关键问题,写篇文章做个记录和review博客更新功能在原有的导出功能上增加了博客更新的功能,避免了每次都全部导出,是否消耗时间。在命令中新增-update命令进行升级操作,如使用node server -type:csdn -id:time_____ -update更新时会对比博客名称是否存在,如果没有则会单独导出这篇文章。核心代码是原创 2023-04-24 10:09:37 · 487 阅读 · 14 评论 -
浅谈JS的映射和集合
Map(映射)和Set(集合)是ES6引入的数据结构,它们提供了更灵活、高效的方式来存储和访问数据。本文将介绍一下这两种数据结构以及WeakMap和WeakSet这两种新的数据结构的概念及使用。原创 2023-05-22 09:50:11 · 682 阅读 · 10 评论 -
JS案例:前端Iframe及Worker通信解决思路
在前端开发中,经常会使用iframe来实现一些特殊的需求,比如将第三方的页面嵌入到自己的页面中,或者在同一页面中显示多个不同的内容。然而,由于iframe具有独立的文档结构和执行环境,所以在多个iframe之间进行数据交互和通信变得十分困难。此时iframe之间的通信就非常重要,为了让iframe与父级或其他页面共享数据和状态或使页面间达到联动的目的,我用JS实现了一个插件包,这里做个分享首先我们需要熟悉iframe的通信方式window对象提供了postMessage函数,使用postMessage给子页原创 2023-05-09 15:44:07 · 1292 阅读 · 4 评论 -
在Node终端实现NewBing对话功能
ChatGPT在当下已然成为炙手可热的话题了,随着GPT-4的推出,网上关于其接口的文章也越来越多。但是今天,我们不聊GPT,说说它的老朋友:newbing之前我发布了几篇关于对接openAI以及chatGPT的文章:Node搭建GPT接口,Node机器人,语音识别及合成,大家对此类文章的兴趣度还是挺高的,于是我决定深入探索一下NewBing的接口及对话方式,如果有兴趣的话就继续往下看吧原创 2023-04-13 11:31:51 · 1750 阅读 · 16 评论 -
使用TS+rollup打造一个npm工具库
说到Rollup,大家可能并不陌生,它是一款JS的模块打包器,适合对工具库和组件进行打包,将多个模块合并成单个文件,与Webpack,Browserify等不太一样,其对更小更快的库比较友好。此外,他可以生成ESM、CommonJS、AMD 和 UMD等输出格式,并且支持TS输入,可以检查TS类型及代码原创 2023-03-29 22:15:49 · 1900 阅读 · 2 评论 -
基于Web Speech API给AI语言模型加上语音功能,距离MOSS又近了一步
前段时间我把微信小号接入了AI语言模型,同事们直呼过瘾,每天在群里聊得风生水起这不前段时间看了《流浪地球2》,在感叹国产科幻片如此优秀的同时,心中萌生出了一个想法,我是不是也能把语音技术结合到AI语言模型中,做个语音对话机器人玩玩?说干就干,参照之前的文章,我们使用nodejs实现了AI语言模型接口,现在只需在前端页面中实现语音识别以及语音合成就行了原创 2023-02-11 19:59:12 · 6923 阅读 · 21 评论 -
死磕Node模块兼容性,ESM和CJS我全都要!
在Node版本13.2.0(2019年)之前,我们一般使用CJS(CommonJS)模式在代码中引入包,它的加载是同步的,在整个模块加载完成后,才会执行后续代码。而ESM(ECMAScript Modules)最早在2015年就被使用在浏览器中,在script标签中增加type="module"这个属性,然后引入模块进行使用。在Node 13.2版本后,Node也支持使用ESM进行导入模块的操作,那么如何对其二者进行一个兼容?请接着往下看。原创 2023-02-22 14:27:33 · 2227 阅读 · 2 评论 -
面试官:JS中变量定义时内存有什么变化?
JavaScript引擎是使用堆内存和栈内存来管理内存的:栈内存用于存储程序的函数调用,变量声明以及一些占用小的变量值,如布尔,部分整数等,它们的生命周期受到函数的调用和退出以及变量的作用域的控制。当函数被调用或者变量创建时,相关的变量和函数调用会被压入栈内存,如果函数退出或者变量作用域销毁,相关的变量和函数就会从栈内存中弹出。堆内存的作用是存储变量值,如字符串,对象,数组及函数,它们的生命周期受到JavaScript垃圾回收机制的控制,当不再需要这些变量时,垃圾回收机制会将它们销毁。原创 2023-02-06 10:23:46 · 718 阅读 · 2 评论 -
精读JavaScript中的代理(Proxy)与反射(Reflect)
JavaScript中的Proxy与Reflect是ES6中引入的新特性,它们可以帮助我们更高效地操作对象。代理(Proxy)是一种设计模式,它允许我们在访问对象的同时,添加一些额外的操作。代理对象与被代理对象实现相同的接口,代理对象会接受并处理所有对被代理对象的访问请求。反射(Reflection)是指程序可以在运行时获取、操作、修改它本身的状态或行为。反射是一种动态获取类型信息和操作类型的能力,可以在运行时动态调用类中的方法或属性。原创 2023-02-01 09:43:09 · 1418 阅读 · 6 评论 -
为了方便项目打包,我用Node写了个git-tag工具
在使用git执行打包操作时,我们常常会根据场景在tag中增加一些标识。以基准版本为1.0.0为例:软件开发初期可以定义1.0.0-alpha.0,开发阶段是1.0.0-beta.0,上预发布环境时可以打成1.0.0-release.0,最终上线可以打v1.0.0。也许每个公司都有一套标准,是否能做一个工具适配这样的场景?于是就有了这篇文章,我想借这篇文章与大家分享一下最近整的一个git标签工具git-tag-sh原创 2023-01-24 18:07:39 · 2632 阅读 · 4 评论 -
JS案例:接口加解密与防重放
在网络通信中,如果数据包是明文传输,并且包含敏感信息,那么就很容易被抓包窃取,因此加密手段也成了开发者耳熟能详的知识技能;常见的加密方法有对称加密和非对称加密。对称加密使用同一个密钥进行加密和解密,而非对称加密使用公钥和私钥分别进行加密和解密。另一个需要知识点是防重放措施,防重放攻击是指攻击者会拦截请求并重新发送,从而导致重复处理。常见的防重放攻击方法有使用令牌桶算法和使用 Nonce 值(随机数)。原创 2023-01-12 15:06:34 · 1080 阅读 · 2 评论 -
JS进阶篇(前端面试题整合)(三)
最近刷面试题遇到了一些比较有意思的题目,做个记录(题目均来源于牛客网,解析均是本人的理解,有任何问题欢迎在评论区指出)Q:请问以下两次检测对象constructor是否拥有属性名1的结果分别是什么?Q:以下哪些对象是Javascript内置的可迭代对象?A:抛出ReferenceError。Q:下面这段程序的显示结果是?原创 2022-12-25 18:51:19 · 1065 阅读 · 2 评论 -
使用Node+Wechaty做一个机器人
这篇文章会结合Wechaty去实现一个机器人在开始编码之前,我们先了解一下wechaty;Wechaty是一个聊天机器人,只需6行代码即可实现一个机器人,其跨平台性,多编程语言支持,使其在众多开源的bot项目中大放光彩。原创 2023-02-17 09:47:37 · 8646 阅读 · 35 评论 -
站在巨人的肩膀上,用Node+ChatGPT模块实现一个接口
蹭一下最近比较火的人工智能ChatGPT的热度,最近看到许多小伙伴都在调戏ChatGPT,看到这我就坐不住了,这种事怎么能少了我,于是闲(划)暇(水)之余用node做了个api原创 2022-12-07 22:34:23 · 12922 阅读 · 31 评论 -
JS如何实现书签导入导出?我是这么做的
使用Node做过爬虫的人应该都知道Cheerio.js模块,其快速灵活的机制,使我们只需要了解JQ就可以轻松上手,是在使用node抓取网页数据的过程中不可或缺的一员。了解了cheerio后,我突发奇想:干脆拿cheerio实现个书签的导入吧,正好可以熟悉一下它的用法,于是早些时候我使用cheerio+node实现了初版的书签导入功能,将浏览器导出的书签通过前端页面上传到服务端,服务端使用cheerio将html解析成JSON文件,通过接口将数据传递到前端。然而原创 2022-12-06 15:18:05 · 978 阅读 · 0 评论 -
JS案例:实现一个简易版axios
axios是一个的前端请求工具,其优秀的场景复用性使它可以运行在node环境和浏览器环境,在浏览器环境中使用的是xhr,在node中则是使用http模块,最近在封装一些工具函数,恰好接触到了这一块,于是想分享一下心得,希望对大家有帮助。文章中有一些类型和函数未给出可以在这个工具包中找到功能特性:浏览器环境下,我使用的是fetch而摒弃了xhr的封装,这会使低版本浏览器兼容上有一定缺陷,后续有时间的话可能会加上,node环境下依旧使用的http模块。原创 2022-09-09 17:09:51 · 871 阅读 · 10 评论 -
JS案例:实现一个简单的任务队列-TaskQueue
针对一些大型的秒杀活动,抢票业务,高并发是一个经常遇到的问题,后端人员时常会接触到消息队列这个中间件。对于前端人员而言,使用node开发业务,或者使用浏览器单线程异步渲染时也会遇到堵塞,页面卡死的现象,如何处理大量的数据同时加载或者数据同时请求便成为了老生常谈的话题。此时一个异步的任务队列或许可以帮助我们缓解这些问题。任务队列的特点:异步,解耦,削峰异步是多个任务并发进行,互不依赖;解耦是将业务隔离开,保证任务的运行结果不会影响到其他任务,从而产生堵塞;削峰是指在系统请求量或者负载达到一定峰值时使用缓存原创 2022-06-01 14:25:45 · 1885 阅读 · 41 评论 -
JS案例:基于发布订阅实现的事件消息中心-MessageCenter
参考node中的 events事件触发器 我总结归类出了以下函数on :注册事件emit:触发事件un:事件销毁once:注册事件,执行后即销毁clear:重置事件列表(消息中心)has:判断事件是否被订阅handlerLength:返回某个事件的监听函数数量watch:与on一样,不同点是可以将结果返回至发布者invoke:与emit一样,配合watch使用,当watch中存在异步操作时接收其结果原创 2022-04-27 21:24:43 · 1238 阅读 · 24 评论 -
基于内网穿透+Fiddler的私有化项目调试前端解决方案
前言分享一下这段时间的一个工作经历:对接第三方平台时,对方只会提供一台跳板机,以及只有跳板机能访问的内网ip(通过内网ip可以访问前端页面,后端接口,数据库,最重要的是第三方平台的api),此时该方案比较适用准备工作toDesk(控制跳板机)内网穿透工具(部署本地前端项目)Fiddler(更改远程请求接口)可以本地部署的前端项目意义我们使用反证法,如果不这么做,在对接第三方的时候有以下缺点:代码更新需要发版解决,每次调试需要重新打包部署,十分耗时间控制台无法直接调试源码,只能查看原创 2022-01-19 11:00:44 · 4908 阅读 · 50 评论