- 博客(156)
- 资源 (14)
- 收藏
- 关注
RSS订阅原创 TypeScript（十五）配置相关（命令行配置）
由于typescript配置涉及面相对复杂，所以放在较后的文章中，并不是它不重要，实际上配置项才是最重要的知识点，因为在开发中会遇到与逻辑无关的配置问题，如果熟悉配置或许用不了多久就可以解决。
2024-04-15 09:05:59
721
原创 前端如何优雅的使用定时器？
前言在前端开发中，使用定时器可以处理一些循环操作或者延时操作，比如使用setinterval可以在指定的时间间隔重复执行函数，setTimeout则是用于在指定时间后执行一次函数，还有之前提到的requestAnimationFrame动画帧函数，在使用全局定时器时，可能不会关注其启用数量及优化操作，导致实际开发中遇到一些性能问题。借助本篇文章，与大家分享一个定时器的管理工具，希望各位看完后能有所收获。
2024-04-08 09:58:02
676
原创 iframe动态操作标签分享
和webpack有些不同，webpack可以通过CopyWebpackPlugin或者IgnorePlugin等方式加载或排查文件，但是使用vite时遇到了。第一步是将静态资源打包进正式包中，这里可以使用rollup的插件rollup-plugin-copy来达到复制静态资源的目的。第二步是动态修改iframe中的link标签的href地址，达到资源替换的效果。
2024-03-20 18:12:58
791
原创 不是Jenkins玩不起，而是脚本更有性价比，在1Panel中使用Node搭建前端自动化
公司测试环境的运维管理面板是1Panel，由于近期有新项目的开发，部署功能并不完善，每次版本的发布需要开发人员在自己电脑上build并通过压缩包手动进行操作发布，这么做既降低了效率，还会导致操作的不一致性，并且难以扩展和维护。于是我计划在面板中搭建一套流水线来维护前端包的自动构建与代码发布。
2024-03-14 09:15:52
694
原创 Web Components详解-HTML Templates
在前面Web Components系列文章的插槽中，我们使用直接在body中写入html标签的形式来承载shadowDOM中的元素，这么做会使标签在DOM多渲染一次，不仅降低了性能，还使标签直接暴露在页面中，遵循组件的可重用性、隔离性和封装性，Web Components提供了一种模板标签：template。它可以在DOM文档中定义模板，然后可以通过JavaScript动态地填充和显示这些模板，达到html组件封装的效果。
2024-02-18 10:51:59
814
2
原创 再见2023，你好2024
这是我第一次写技术文章以外的博客，做个自我介绍吧，我叫阿宇的编程之旅，对前端方向比较感兴趣，为人内向，却善言辞，毕业快6年了，前后换了两家企业，目前在江西发展。我是一个喜欢计划的人，什么事情都喜欢有一套周密的计划，想好了再做，这样的习惯也使我缺乏临危不乱的特点，来做个年度复盘吧。我的技术方面的学习和产出计划喜欢在有道云笔记里记录，从2021年开始（也就是我的第二家公司入职以来）我的每一个学习计划都会维护到笔记中，去年一年在技术方面我在云笔记中产出150多个计划，其中包括21年的30多个和22年的50多个就像
2024-01-04 16:34:13
619
19
原创 Web Components详解-组件通信
我们常说到程序的运行和代码的实现遵循高内聚和低耦合，理解一下这句话，模块中的功能在逻辑上是有关联的，模块之间依赖关系较弱。前端的组件同样遵循这套原则，单个组件的功能逻辑是完整的，组件与组件之间也没有强关联，那么如何保证组件之间的联系呢？在Vue和React中一般使用props响应式通信、bus事件总线、Pinia，Vuex，Mobx全局状态等等方式进行数据传递，类似的本篇文章也将介绍Web组件的通信方式
2023-10-24 10:45:53
742
45
原创 Web Components详解-Shadow DOM样式控制
前言本文继续Web Components系列文章，介绍一下Shadow DOM的样式及选择器。Shadow DOM的样式与外界是隔离的，即自定义元素的样式只会影响到Shadow DOM内部，不会影响到外部的页面元素，这点在之前有说到过。那么有什么办法可以在Shadow DOM中使用全局样式？样式选择器又有什么异同呢？请跟着本篇文章一起探究:host伪类作为伪类使用
2023-10-07 11:22:51
510
31
原创 浏览器事件机制详解
浏览器的事件机制是web前端面试及开发过程中绕不开的话题，可以说一切用户操作或者浏览器的行为都离不了事件，它允许开发者通过JS处理用户的操作，并处理操作逻辑，将结果反馈给用户。本篇文章将深入浏览器事件的运行机制，和大家一起探讨其强大的功能及广泛的用法浏览器的事件可以分为以下几类：鼠标事件键盘事件表单事件窗口事件DOM事件
2023-09-18 10:22:18
755
42
原创 Web Components详解-Shadow DOM插槽
前言插槽实际上也属于组件通信的一种方式，但是由于其强大的api和实用性，我将其单独拆开来介绍。定义Slot（插槽）是Web Components中一个重要的特性，它允许在组件内部定义占位符，以便父组件可以向其中插入内容。换句话说就是将子组件或者标签传入父组件中，最终达到在父组件外部实现子组件的效果
2023-09-11 10:16:22
994
28
原创 Web Components详解-Shadow DOM基础
上篇文章的自定义标签中，我们使用customElements对象对原生标签进行拓展，达到组件的拓展性与复用性的效果，那么如何保证组件的属性、结构及样式的封装隔离便是本篇文章将要分享的内容，本篇文章不仅仅会介绍Shadow DOM，还会对前面说到的Custom Elements做一个使用场景的拓展及深入探究在JS作用域一文中，我们提到全局作用域和局部作用域的概念，如果全局作用域没有处理好可能会导致作用域污染，出现问题。如果单纯的使用Custom Elements实现自定义组件的功能可能会存在样式冲突，Dom干
2023-09-04 10:20:18
1576
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
928
28
原创 手摸手带你实现一个开箱即用的Node邮件推送服务
由于邮箱账号和手机号的唯一性，通常实现验证码的校验时比较常用的两种方式是手机短信推送和邮箱推送，此外，邮件推送服务还可以达到推送关键信息和消息通知的诉求。为了方便快捷的使用邮件推送api，我基于Node和相关库快速搭建了一个简易的开箱即用的邮件推送服务。本文与大家做个分享准备工作云函数，服务器或第三方内网穿透（提供api调用）Node环境及后续的依赖包个人邮箱邮箱配置
2023-08-21 10:25:57
431
36
原创 AutoxJS脚本保姆级教程
之前我分享了一个自动化脚本的文章，介绍了使用Tasker+Autojs实现自动化操作。现在公司更换了新的考勤软件，脚本也做了许多期迭代，所以更新了一版脚本分享的文章，并记录一些遇到的问题
2023-08-14 09:46:47
5271
51
原创 只会用插件可不行，这些前端动画技术同样值得收藏-JavaScript篇（下）
接着上文往下介绍，上篇文章我们对JS原生动画和贝塞尔曲线有了一个详细的认识，基于定时器或动画帧，我们可以实现元素的动画缓动，本文将分享浏览器中功能强大的Animations API，有兴趣的话就接着往下看吧Web Animations API于2016年成为Web标准的一部分，它的功能比之前提到的动画要丰富的多，它的核心理念是时间轴和动画效果。它提供了一组功能强大的方法和属性，用于定义、操作和管理动画效果。时间轴（Timeline）是Web Animations API中的核心概念之一。
2023-08-07 09:45:14
416
24
原创 JavaScript作用域详解
作用域是JavaScript中一个重要的概念，它决定了变量和函数在代码中的可访问性和可见性。了解JavaScript的作用域对于编写高效、可维护的代码至关重要。本文将深入介绍JavaScript作用域的不同类型、作用域链以及闭包等相关内容。
2023-07-31 09:31:55
1002
30
原创 JS案例：在浏览器实现自定义菜单
分享一下之前公司实现自定义菜单的思路，禁用浏览器右键菜单，使用自定义的菜单将其代替，主要功能有：鼠标右键调出菜单，双击选中/取消选中标签，新建标签，删除标签，调整位置，调整大小，取消拖拽，关闭菜单
2023-07-24 10:50:41
1394
40
原创 只会用插件可不行，这些前端动画技术同样值得收藏-JavaScript篇（上）
上篇文章我们详细的讲述了CSS中的原生动画技术，了解了过渡与动画属性。那么本文将与大家分享原生JS中的动画方案，有兴趣的同学请接着往下看JS实现动画的形式有定时器，动画帧以及动画API技术早期的JS中动画帧和动画API的概念尚不存在，开发者通常使用定时器生成对应动画我使用上面的代码实现了一个简单的匀速运动，其中按钮一控制运动和暂停，按钮二控制运动的方向，其中speed用于控制速度，frame控制帧数，下面是动画效果
2023-07-17 09:42:07
916
40
原创 Win10或Win11更新补丁后导致360随身wifi提示USB设备驱动异常，创建Wifi网络失败
运行环境：Windows11更新补丁版本：2023-适用于 Windows 11 的 07 累积更新，适合基于 x64 的系统 (KB5028182)硬件版本：360随身wifi-3错误提示：USB设备驱动异常，创建Wifi网络失败采取措施：更新/重装驱动，重启，重置网络，修改ApSetting.ini设备管理器异常：上述措施均无效，初步断定是更新系统补丁（KB5028182）导致的解决方案（Win11）：卸载KB5028182补丁后恢复正常虽然这样可以暂时解决问题，但是指标不治本。
2023-07-15 00:04:38
23454
29
原创 你真的了解JS垃圾回收机制吗？
垃圾回收是JavaScript中内存管理的重要组成部分。开发人员不需要手动分配和释放内存。垃圾回收机制可以自动处理内存的分配和释放，减轻了开发人员的负担，并且降低了内存泄漏的风险，它的主要目的是自动地检测和释放不再使用的内存，以便程序能够更高效地利用系统资源。它通过标记不再需要的对象，并回收它们所占用的内存空间，以便其他对象可以使用。本篇文章将与大家分享，介绍一下JavaScript垃圾回收的重要性和定义，并深入探讨内存管理的概念、JS垃圾回收机制的分类，以及如何避免内存泄漏以及性能优化。
2023-07-10 10:00:55
828
26
原创 只会用插件可不行，这些前端动画技术同样值得收藏-CSS篇
实现动画效果是前端提升用户体验的重要一环，从CSS动画到JS动画帧，每种技术都有其独特的优势和适用场景，本篇文章将与大家分享浏览器的原生动画技术
2023-07-03 10:25:22
576
31
原创 如何在CSS中写变量？一文带你了解前端样式利器
引言前端的变量写法大致可以分为三大类，分别是CSS-in-JS，CSS预处理器，和CSS原生变量。作为前端开发人员，我们应该了解并善用它们，以便实现更加灵活、可维护的样式。本篇文章将与大家分享一下原生CSS的变量写法概念CSS变量也叫自定义属性，在它出现之前，CSS中使用的值通常是硬编码的（静态编写），这导致了样式代码的重复和冗余，在管理和维护大型项目时存在一些困扰和隐患
2023-06-27 10:01:47
4016
19
原创 在？聊聊浏览器事件循环机制
JS是单线程语言，在某个时间段只能执行一段代码。这种单线程模型的好处是不会出现多线程的竞态条件和死锁等问题：在多线程中，某个资源同时被其他线程调度时可能会出现执行顺序不确定导致错误，或者资源占用等待这一类的问题。因此JS无法同时处理多任务，为了处理这类任务，JavaScript运行时使用了一种叫事件循环机制的异步编程模型JS的事件循环机制是一种异步编程模型，其特点是异步非堵塞，它决定了JavaScript的异步执行顺序和运行机制。JS的事件循环机制由调用栈（Call Stack）、任务队列（Task Que
2023-06-20 18:02:30
1549
20
原创 作为前端开发，你了解MutationObserver吗？
MutationObserver在开发中或许不常使用，但是特殊情况下确实可以解决某些问题。和addEventListener有些类似，当用户触发了某些事件操作时会调用对应的回调我也是前些天在需求迭代中第一次使用MutationObserver，由于Antd早期版本的弹窗没有做响应功能，以及代码中的弹窗许多没有进行二次封装，导致无法得知弹窗何时出现及消失，于是我使用前端Hack的方式取个巧，监听元素变化解决了此类问题，这里也是做个知识点分享
2023-06-12 10:51:29
1755
18
原创 JS的迭代器是啥？精读JS迭代器
在ES6中引入了迭代器的概念，它是一种遍历数据集合的机制，并且提供了一种简单而一致的方式来访问集合中的每个元素，在集合与映射这篇文章中，我们就已经初步认识了Symbol.iterator这个概念。迭代器是通过迭代协议实现的，每一个拥有该协议的对象都可以称作是可迭代的对象，这个协议的标识就是Symbol.iterator，它是ES6中引入的一个新的Symbol值，表示一个对象是否有可迭代性。可迭代对象的Symbol.iterator属性是一个函数，我们称为迭代器对象
2023-05-29 10:04:16
1250
11
原创 浅谈JS的映射和集合
Map（映射）和Set（集合）是ES6引入的数据结构，它们提供了更灵活、高效的方式来存储和访问数据。本文将介绍一下这两种数据结构以及WeakMap和WeakSet这两种新的数据结构的概念及使用。
2023-05-22 09:50:11
570
10
原创 TypeScript（十四）变体（协变与逆变）
第一次接触到变体这个概念是在深入理解TypeScript中，类型之间的转换称为变体或者变型，在TS中，类型之间能否互相赋值，会不会报错，安不安全这些都与变体有关。本文将带大家了解ts中的变体在Java中，每一个类都是一个个体，比如，我们定义了一个Dog和Cat两个类，这二者的结构相同。在Java中，每一个类都是一个个体，比如，我们定义了一个Dog和Cat两个类，这二者的结构相同。
2023-05-15 18:08:38
447
4
原创 JS案例：前端Iframe及Worker通信解决思路
在前端开发中，经常会使用iframe来实现一些特殊的需求，比如将第三方的页面嵌入到自己的页面中，或者在同一页面中显示多个不同的内容。然而，由于iframe具有独立的文档结构和执行环境，所以在多个iframe之间进行数据交互和通信变得十分困难。此时iframe之间的通信就非常重要，为了让iframe与父级或其他页面共享数据和状态或使页面间达到联动的目的，我用JS实现了一个插件包，这里做个分享首先我们需要熟悉iframe的通信方式window对象提供了postMessage函数，使用postMessage给子页
2023-05-09 15:44:07
1131
4
原创 TypeScript（十三）声明合并
相信读过上篇文章TS模块后，大家对TS的模块机制有了一定的了解，那么本篇文章将给大家介绍重名模块或者类型的声明合并以及使用方式我们第一次接触到类似的概念是来源于函数这篇文章，其中函数的重载就是声明合并TS中的声明合并包含接口，类型别名，函数重载，命名空间，枚举，命名空间和类，类的合并。接下来我会深入介绍这几种合并方式
2023-05-01 08:11:24
2205
4
原创 Node实现CSDN博客导出（后续）
在2021年我实现了一个Node导出博客的功能：爬取接口及博客页面并导出为md文件格式。中途有许多迭代及优化以及解决了一些关键问题，写篇文章做个记录和review博客更新功能在原有的导出功能上增加了博客更新的功能，避免了每次都全部导出，是否消耗时间。在命令中新增-update命令进行升级操作，如使用node server -type:csdn -id:time_____ -update更新时会对比博客名称是否存在，如果没有则会单独导出这篇文章。核心代码是
2023-04-24 10:09:37
470
14
原创 TypeScript（十二）模块
将体量大的程序拆分成多个小的，功能独立的模块是开发中不可或缺的一环，开发复杂程序的核心之一就是让其变得不复杂。模块化开发可以提高代码的可维护性、可重用性、可扩展性和可测试性，从而提高了开发效率和代码质量，TypeScript沿用了JS的模块概念，在之前文章中我介绍过Node环境下的两种类型兼容，顺带提了一下目前常用的模块导入导出方式：Commonjs和ES Module，这两种方式在TS中被称为是外部模块，除此之外TS还包含了内部模块和全局模块，本文将一一介绍参考文章命名空间和模块 - TypeScript
2023-04-18 16:54:42
8092
6
原创 在Node终端实现NewBing对话功能
ChatGPT在当下已然成为炙手可热的话题了，随着GPT-4的推出，网上关于其接口的文章也越来越多。但是今天，我们不聊GPT，说说它的老朋友：newbing之前我发布了几篇关于对接openAI以及chatGPT的文章：Node搭建GPT接口，Node机器人，语音识别及合成，大家对此类文章的兴趣度还是挺高的，于是我决定深入探索一下NewBing的接口及对话方式，如果有兴趣的话就继续往下看吧
2023-04-13 11:31:51
1676
16
原创 TypeScript（十一）泛型工具类型
前面的文章我们对泛型的用法有了大概的认识，也通过泛型实现了一些常用的类型，那么这篇文章将深入了解一下泛型的工具类型的使用及实现，那么话不多说，我们直接开始。
2023-04-09 19:39:11
701
8
原创 TypeScript（十）泛型进阶
前言上篇文章我们领略了泛型的灵活及强大；了解了泛型的基本使用以及常见用法。本文将针对泛型的其他用法做一些进阶拓展，其中有许多知识点可以防在前面的文章介绍，但是与泛型放在一起可能更好理解，那么话不多说，直接开始
2023-04-03 13:18:02
585
9
原创 TypeScript（九）泛型基础
代码复用是开发人员老生常谈的问题了，我们通过定义变量，使用函数或类减少代码重复编写。在TS中我们可以把编写一个类型看成是新建一个函数，参数便是今天的主角：泛型；通过传入不同的参数（类型）控制类型的走向，达到类型复用的目的
2023-03-30 19:33:33
366
2
原创 使用TS+rollup打造一个npm工具库
说到Rollup，大家可能并不陌生，它是一款JS的模块打包器，适合对工具库和组件进行打包，将多个模块合并成单个文件，与Webpack，Browserify等不太一样，其对更小更快的库比较友好。此外，他可以生成ESM、CommonJS、AMD 和 UMD等输出格式，并且支持TS输入，可以检查TS类型及代码
2023-03-29 22:15:49
1694
2
原创 TypeScript（八）装饰器
在TS中，装饰器是一种特殊类型的声明。可以附加到类、方法、属性或参数上用于修改类的行为或属性。在面向对象编程中，有时需要对类的行为和功能做出修改，直接修改类的内部可能会使成本升高，或出现其他问题；此时可以使用装饰器来修改类，在保证类内部结构与功能不变的前提下对数据或行为进行迭代TS中装饰器可以分为类装饰器、方法装饰器、属性装饰器和参数装饰器。
2023-03-27 16:25:30
1469
8
原创 TypeScript（七）类
在早期的JavaScript中，我们使用函数来模拟类，使用原型链实现继承行为。在ES6以后JS也引入类的概念，虽然其本质还是使用原型继承和构造函数的语法糖实现的，但是类的写法依旧使得开发人员得心应手；相比JS的类，TS的类可以说是有过之无不及。在TypeScript中，类可以包含属性和方法，支持继承和接口实现，也可以使用修饰符来控制访问权限。类的定义使用class关键字，并可以在其中声明构造函数、属性、方法等。
2023-03-21 22:55:52
1248
2
javascript面向对象编程
2020-10-26
从零开始，搭建一个简单的购物平台
2020-09-08
Echarts案例：整一个炫酷一点的仪表盘
2020-03-21
Echarts案例：使用象形柱状图（PictorialBar）实现电池效果柱状图
2020-03-20
Echarts案例：使用极坐标加柱状图实现类似Apple Watch上的运动环形效果
2020-03-20
使用JS+socket.io+WebRTC+nodejs+express搭建一个简易版远程视频聊天
2020-03-12
用购物车理解前端MVC架构
2020-03-05
原生JS实现高大上的购物车
2020-02-24
收集前端常用框架包，及UI库
2018-11-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人