- 博客(172)
- 资源 (14)
- 收藏
- 关注
RSS订阅原创 重拾CSS，前端样式精读-函数（其他函数）
用于检索元素属性的值，并在CSS中使用。例如：attr(attribute-name type)。attribute-name是要检索的属性名称，type是一个可选的定义属性值数据类型的参数，如px、em或其他CSS单位。
2024-09-10 16:25:45
576
原创 重拾CSS，前端样式精读-函数（滤镜）
当遇到公祭日，哀悼日等重要日子时我们会看到有些网站页面全局转换成了灰白色的主题，如何实现该效果？使用css滤镜在body中加一行代码即可实现body { filter: grayscale(100%);}除此之外，css滤镜还有什么其他用法？本文将详细介绍css中的滤镜相关函数
2024-08-06 13:44:46
800
原创 重拾CSS，前端样式精读-函数（渐变）
上述代码中的10%只是控制了黑色什么时候开始，并没有控制结束，于是默认给渐变后面的颜色加上了黑色，重复渐变就是将这个默认的未指定的颜色修改成周期重复的渐变。可以参考背景图片的repeat属性来理解。下面我们使用这个重复渐变实现一个百叶窗，只需在上述代码中增加repeating-前缀即可。重复渐变的使用方式与普通渐变的色标相同，只不过是使用周期重复的渐变将默认的颜色覆盖了。
2024-07-30 10:44:02
892
原创 重拾CSS，前端样式精读-函数（颜色，计算，图像和图形）
它接收两个参数，第一个是变量值。第二个是默认值，当变量不存在时就会默认使用第二个值。图像集背景效果可以使用鼠标滚轮对页面缩放来观察效果。
2024-07-22 10:48:39
998
原创 学习资源整合
获取更多资源，请关注公众号：阿宇的编程之旅，回复‘书签’获取哔哩哔哩知识区网站名称：哔哩哔哩知识区网址：哔哩哔哩介绍：提供丰富的视频内容，覆盖广泛的知识领域，包括教育、科技、文化等。中国大学 MOOC网站名称：中国大学 MOOC网址：中国大学 MOOC介绍：国家精品课程在线学习平台，提供来自中国顶尖大学的课程资源。学堂在线网站名称：学堂在线网址：学堂在线介绍：由清华大学发起建立的慕课平台，提供高质量的在线课程。网易公开课网站名称：网易公开课网址：网易公开课介绍：
2024-07-01 08:51:43
500
原创 每日热榜资源
获取更多资源，请关注公众号：阿宇的编程之旅，回复‘书签’获取划水摸鱼官网网站名称：划水摸鱼官网网址：划水摸鱼官网介绍：提供休闲放松的内容，让你在忙碌之余享受片刻的宁静。鱼塘热榜网站名称：鱼塘热榜网址：鱼塘热榜介绍：集合了各种热门话题和信息的社区，让你随时掌握最新动态。沉迷摸鱼网站名称：沉迷摸鱼网址：沉迷摸鱼介绍：一个专注于分享有趣内容的平台，让你在工作间隙也能享受乐趣。抽屉新热榜网站名称：抽屉新热榜网址：抽屉新热榜介绍：提供各类新鲜、有趣资讯的聚合平台，满足你
2024-06-24 12:34:37
390
原创 电子书资源汇总
更多资源关注公众号：阿宇的编程之旅，回复‘书签’获取FreeMbook Search网站名称：FreeMbook Search网址：FreeMbook Search介绍：一个提供电子书搜索和下载服务的网站。超星书籍检索工具网站名称：超星书籍检索工具网址：超星书籍检索工具介绍：超星提供的图书检索工具，帮助用户找到所需的书籍资源。找书网网站名称：找书网网址：找书网介绍：一个致力于帮助用户找到各种电子书资源的网站。文渊阁网站名称：文渊阁网址：文渊阁介绍：提供丰富的电子
2024-06-11 09:11:28
2373
原创 游戏资源汇总
游戏平台资源汇总668 游戏仓库网站名称：668 游戏仓库网址：668 游戏仓库介绍：全球最大的游戏下载中心、游戏交流中心，提供单机游戏、Switch 游戏、PS4 游戏等资源。PC 游戏下载网站名称：PC 游戏下载网址：PC 游戏下载介绍：提供 PC 破解游戏资源下载。www.zzzz688.com网站名称：www.zzzz688.com网址：www.zzzz688.com介绍：游戏资源下载平台。游戏圣地网站名称：游戏圣地网址：游戏圣地介绍：整合您一辈子的游戏
2024-06-05 10:51:05
7115
原创 TypeScript（十六）配置相关（tsconfig配置）
上篇文章，我们对TS配置中的命令行配置做了介绍，本文将对tsconfig.json配置做个解析tsconfig.json是TypeScript中用于配置编译器选项的配置文件。该文件通常位于TypeScript项目的根目录下，并告诉TypeScript编译器如何处理项目中的TypeScript文件。下面我将分享一些常用的配置，以及截止v5.3.3版本官方提供的配置参考常用配置全部配置
2024-05-08 16:06:28
1495
1
原创 控制台居然可以这么玩？五分钟带你上手ANSI指令，实现一个log工具包
或者直接使用setinterval实现一个向上滑动滚动条的效果，每500毫秒打印一次行数。光标移动与上述的光标指令相同，只不过在指令中传入了移动距离。
2024-04-23 16:00:51
1041
原创 TypeScript（十五）配置相关（命令行配置）
由于typescript配置涉及面相对复杂，所以放在较后的文章中，并不是它不重要，实际上配置项才是最重要的知识点，因为在开发中会遇到与逻辑无关的配置问题，如果熟悉配置或许用不了多久就可以解决。
2024-04-15 09:05:59
1251
原创 前端如何优雅的使用定时器？
前言在前端开发中，使用定时器可以处理一些循环操作或者延时操作，比如使用setinterval可以在指定的时间间隔重复执行函数，setTimeout则是用于在指定时间后执行一次函数，还有之前提到的requestAnimationFrame动画帧函数，在使用全局定时器时，可能不会关注其启用数量及优化操作，导致实际开发中遇到一些性能问题。借助本篇文章，与大家分享一个定时器的管理工具，希望各位看完后能有所收获。
2024-04-08 09:58:02
1545
原创 iframe动态操作标签分享
和webpack有些不同，webpack可以通过CopyWebpackPlugin或者IgnorePlugin等方式加载或排查文件，但是使用vite时遇到了。第一步是将静态资源打包进正式包中，这里可以使用rollup的插件rollup-plugin-copy来达到复制静态资源的目的。第二步是动态修改iframe中的link标签的href地址，达到资源替换的效果。
2024-03-20 18:12:58
1006
原创 不是Jenkins玩不起，而是脚本更有性价比，在1Panel中使用Node搭建前端自动化
公司测试环境的运维管理面板是1Panel，由于近期有新项目的开发，部署功能并不完善，每次版本的发布需要开发人员在自己电脑上build并通过压缩包手动进行操作发布，这么做既降低了效率，还会导致操作的不一致性，并且难以扩展和维护。于是我计划在面板中搭建一套流水线来维护前端包的自动构建与代码发布。
2024-03-14 09:15:52
1639
原创 Web Components详解-HTML Templates
在前面Web Components系列文章的插槽中，我们使用直接在body中写入html标签的形式来承载shadowDOM中的元素，这么做会使标签在DOM多渲染一次，不仅降低了性能，还使标签直接暴露在页面中，遵循组件的可重用性、隔离性和封装性，Web Components提供了一种模板标签：template。它可以在DOM文档中定义模板，然后可以通过JavaScript动态地填充和显示这些模板，达到html组件封装的效果。
2024-02-18 10:51:59
970
2
原创 再见2023，你好2024
这是我第一次写技术文章以外的博客，做个自我介绍吧，我叫阿宇的编程之旅，对前端方向比较感兴趣，为人内向，却善言辞，毕业快6年了，前后换了两家企业，目前在江西发展。我是一个喜欢计划的人，什么事情都喜欢有一套周密的计划，想好了再做，这样的习惯也使我缺乏临危不乱的特点，来做个年度复盘吧。我的技术方面的学习和产出计划喜欢在有道云笔记里记录，从2021年开始（也就是我的第二家公司入职以来）我的每一个学习计划都会维护到笔记中，去年一年在技术方面我在云笔记中产出150多个计划，其中包括21年的30多个和22年的50多个就像
2024-01-04 16:34:13
666
19
原创 Web Components详解-组件通信
我们常说到程序的运行和代码的实现遵循高内聚和低耦合，理解一下这句话，模块中的功能在逻辑上是有关联的，模块之间依赖关系较弱。前端的组件同样遵循这套原则，单个组件的功能逻辑是完整的，组件与组件之间也没有强关联，那么如何保证组件之间的联系呢？在Vue和React中一般使用props响应式通信、bus事件总线、Pinia，Vuex，Mobx全局状态等等方式进行数据传递，类似的本篇文章也将介绍Web组件的通信方式
2023-10-24 10:45:53
1204
45
原创 Web Components详解-Shadow DOM样式控制
前言本文继续Web Components系列文章，介绍一下Shadow DOM的样式及选择器。Shadow DOM的样式与外界是隔离的，即自定义元素的样式只会影响到Shadow DOM内部，不会影响到外部的页面元素，这点在之前有说到过。那么有什么办法可以在Shadow DOM中使用全局样式？样式选择器又有什么异同呢？请跟着本篇文章一起探究:host伪类作为伪类使用
2023-10-07 11:22:51
944
31
原创 浏览器事件机制详解
浏览器的事件机制是web前端面试及开发过程中绕不开的话题，可以说一切用户操作或者浏览器的行为都离不了事件，它允许开发者通过JS处理用户的操作，并处理操作逻辑，将结果反馈给用户。本篇文章将深入浏览器事件的运行机制，和大家一起探讨其强大的功能及广泛的用法浏览器的事件可以分为以下几类：鼠标事件键盘事件表单事件窗口事件DOM事件
2023-09-18 10:22:18
1205
42
原创 Web Components详解-Shadow DOM插槽
前言插槽实际上也属于组件通信的一种方式，但是由于其强大的api和实用性，我将其单独拆开来介绍。定义Slot（插槽）是Web Components中一个重要的特性，它允许在组件内部定义占位符，以便父组件可以向其中插入内容。换句话说就是将子组件或者标签传入父组件中，最终达到在父组件外部实现子组件的效果
2023-09-11 10:16:22
1241
28
原创 Web Components详解-Shadow DOM基础
上篇文章的自定义标签中，我们使用customElements对象对原生标签进行拓展，达到组件的拓展性与复用性的效果，那么如何保证组件的属性、结构及样式的封装隔离便是本篇文章将要分享的内容，本篇文章不仅仅会介绍Shadow DOM，还会对前面说到的Custom Elements做一个使用场景的拓展及深入探究在JS作用域一文中，我们提到全局作用域和局部作用域的概念，如果全局作用域没有处理好可能会导致作用域污染，出现问题。如果单纯的使用Custom Elements实现自定义组件的功能可能会存在样式冲突，Dom干
2023-09-04 10:20:18
2010
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
1455
28
原创 手摸手带你实现一个开箱即用的Node邮件推送服务
由于邮箱账号和手机号的唯一性，通常实现验证码的校验时比较常用的两种方式是手机短信推送和邮箱推送，此外，邮件推送服务还可以达到推送关键信息和消息通知的诉求。为了方便快捷的使用邮件推送api，我基于Node和相关库快速搭建了一个简易的开箱即用的邮件推送服务。本文与大家做个分享准备工作云函数，服务器或第三方内网穿透（提供api调用）Node环境及后续的依赖包个人邮箱邮箱配置
2023-08-21 10:25:57
683
36
原创 AutoxJS脚本保姆级教程
之前我分享了一个自动化脚本的文章，介绍了使用Tasker+Autojs实现自动化操作。现在公司更换了新的考勤软件，脚本也做了许多期迭代，所以更新了一版脚本分享的文章，并记录一些遇到的问题
2023-08-14 09:46:47
7826
54
原创 只会用插件可不行，这些前端动画技术同样值得收藏-JavaScript篇（下）
接着上文往下介绍，上篇文章我们对JS原生动画和贝塞尔曲线有了一个详细的认识，基于定时器或动画帧，我们可以实现元素的动画缓动，本文将分享浏览器中功能强大的Animations API，有兴趣的话就接着往下看吧Web Animations API于2016年成为Web标准的一部分，它的功能比之前提到的动画要丰富的多，它的核心理念是时间轴和动画效果。它提供了一组功能强大的方法和属性，用于定义、操作和管理动画效果。时间轴（Timeline）是Web Animations API中的核心概念之一。
2023-08-07 09:45:14
733
24
原创 JavaScript作用域详解
作用域是JavaScript中一个重要的概念，它决定了变量和函数在代码中的可访问性和可见性。了解JavaScript的作用域对于编写高效、可维护的代码至关重要。本文将深入介绍JavaScript作用域的不同类型、作用域链以及闭包等相关内容。
2023-07-31 09:31:55
2064
30
原创 JS案例：在浏览器实现自定义菜单
分享一下之前公司实现自定义菜单的思路，禁用浏览器右键菜单，使用自定义的菜单将其代替，主要功能有：鼠标右键调出菜单，双击选中/取消选中标签，新建标签，删除标签，调整位置，调整大小，取消拖拽，关闭菜单
2023-07-24 10:50:41
1950
40
原创 只会用插件可不行，这些前端动画技术同样值得收藏-JavaScript篇（上）
上篇文章我们详细的讲述了CSS中的原生动画技术，了解了过渡与动画属性。那么本文将与大家分享原生JS中的动画方案，有兴趣的同学请接着往下看JS实现动画的形式有定时器，动画帧以及动画API技术早期的JS中动画帧和动画API的概念尚不存在，开发者通常使用定时器生成对应动画我使用上面的代码实现了一个简单的匀速运动，其中按钮一控制运动和暂停，按钮二控制运动的方向，其中speed用于控制速度，frame控制帧数，下面是动画效果
2023-07-17 09:42:07
1502
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
29197
29
原创 你真的了解JS垃圾回收机制吗？
垃圾回收是JavaScript中内存管理的重要组成部分。开发人员不需要手动分配和释放内存。垃圾回收机制可以自动处理内存的分配和释放，减轻了开发人员的负担，并且降低了内存泄漏的风险，它的主要目的是自动地检测和释放不再使用的内存，以便程序能够更高效地利用系统资源。它通过标记不再需要的对象，并回收它们所占用的内存空间，以便其他对象可以使用。本篇文章将与大家分享，介绍一下JavaScript垃圾回收的重要性和定义，并深入探讨内存管理的概念、JS垃圾回收机制的分类，以及如何避免内存泄漏以及性能优化。
2023-07-10 10:00:55
1663
26
原创 只会用插件可不行，这些前端动画技术同样值得收藏-CSS篇
实现动画效果是前端提升用户体验的重要一环，从CSS动画到JS动画帧，每种技术都有其独特的优势和适用场景，本篇文章将与大家分享浏览器的原生动画技术
2023-07-03 10:25:22
915
31
原创 如何在CSS中写变量？一文带你了解前端样式利器
引言前端的变量写法大致可以分为三大类，分别是CSS-in-JS，CSS预处理器，和CSS原生变量。作为前端开发人员，我们应该了解并善用它们，以便实现更加灵活、可维护的样式。本篇文章将与大家分享一下原生CSS的变量写法概念CSS变量也叫自定义属性，在它出现之前，CSS中使用的值通常是硬编码的（静态编写），这导致了样式代码的重复和冗余，在管理和维护大型项目时存在一些困扰和隐患
2023-06-27 10:01:47
5031
19
原创 在？聊聊浏览器事件循环机制
JS是单线程语言，在某个时间段只能执行一段代码。这种单线程模型的好处是不会出现多线程的竞态条件和死锁等问题：在多线程中，某个资源同时被其他线程调度时可能会出现执行顺序不确定导致错误，或者资源占用等待这一类的问题。因此JS无法同时处理多任务，为了处理这类任务，JavaScript运行时使用了一种叫事件循环机制的异步编程模型JS的事件循环机制是一种异步编程模型，其特点是异步非堵塞，它决定了JavaScript的异步执行顺序和运行机制。JS的事件循环机制由调用栈（Call Stack）、任务队列（Task Que
2023-06-20 18:02:30
1894
20
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关注的人