前端修罗场 level
获赞
15
粉丝
4
关注
3
看过 TA
11
男
四川大学
2020
前端工程师
IP属地：未知
微信公众号关注我，前端工程师的进阶之路。
私信
关注
发布(65) 评论 刷题 收藏
2022-05-21 11:17
四川大学 前端工程师
14 行 CSS 代码实现明暗模式
最近我打算对我的个人网站添加明暗模式的自动检测。这个解决方案不使用 JavaScript。相反，它通过CSS 媒体查询来检测用户的系统设置，并使用两个自定义CSS属性来确定一个基本的配色方案。 定义 2 个自定义的 CSS 属性 CSS 自定义属性也被称为 CSS变量或级联变量。你可以在 CSS 文件的任何地方定义 CSS 自定义属性，它们遵循与其他 CSS 规则相同的级联和特定模式。例如，您可以在 document root 中定义 CSS 变量，并在更具体的 CSS类 中覆盖它们。您还可以检查和调试浏览器开发工具中声明的CSS变量，这些变量显示在样式表规则下面。 CSS自定义属性由前缀为...
0 点赞 评论 收藏
分享
2022-05-21 11:10
四川大学 前端工程师
【React】将 useReducer 应用于 Web Worker，擦出奇妙的火花
有这么一个场景，当加载一个网页时，它突然变得无响应，直到所有的资源完全加载完毕才响应。但是，当资源加载时，用户可能无法执行页面上的某些功能，比如单击、选择或拖动元素。这个时候你可能会想到使用 Web workers帮助我们解决这个问题。 在本文中，我们将学习如何在 React 应用程序中使用web workers。我们还将学习通过 useWorkerizedReducer 在web worker 中使用 useReducer Hook。 web worker web worker 是一个JavaScript脚本，它在后台运行，不会干扰其他脚本的执行。 因为JavaScript是单线程语言，它不...
0 点赞 评论 收藏
分享
2022-05-14 09:46
四川大学 前端工程师
高级 React 具备的核心习惯
如果你是一名中级React开发人员，希望成为一名高级React开发人员，这篇文章就是为你准备的! 几年来，我每天都在检查初级和中级开发人员编写的React代码，这篇文章涵盖了我所看到的最常见的错误。我假设你已经知道React的基础知识，因此不会涉及“不要改变道具或状态”这样的陷阱。 坏习惯 本节中的每个标题都是你应该避免的坏习惯! 我将使用一个典型的待办事项列表应用程序示例来说明我的一些观点。 重复的 State 每个 state 都应该有一个单一来源。如果同一信息以 state 存储两次，那么这两个state可能会不同步。你可以尝试编写同步两个state 的代码，但这是一个容易出错的地方，而...
0 点赞 评论 收藏
分享
2022-05-14 09:46
四川大学 前端工程师
0 点赞 评论 收藏
分享
2022-05-14 09:45
四川大学 前端工程师
这几种 VSCode 扩展是我最喜欢的
CodeSnap 通过在项目中突出显示相应的代码片段，您可以快速创建代码的截图。它是那么容易!不再打开一个新的标签，复制的代码，并保存照片。图像将与剪切、复制和粘贴选项一起生成。 Colorize Colorize通过突出显示颜色值来可视化颜色变量。这对于转换十六进制代码和变量名来说是一个方便的省时方法。 Beautify Beautify将很容易地帮助您解决任何类型的问题，可读性你的代码等等。你所需要的一切是:按F1并选择“美化文件”。它会自动修复你想要的。 Live Server 当你写你的HTML, CSS，或JavaScript文件，你可以按下“Go Live”在你的VSCode窗口的...
0 点赞 评论 收藏
分享
2022-05-14 09:44
四川大学 前端工程师
Javascript 中你最应该知道的 33 个概念
你觉得自己对JavaScript了解多少?你可能知道如何编写函数，理解简单的算法，甚至可以编写类。但是你知道类型化数组是什么吗? 你现在不需要知道所有这些概念，但你最终会在以后的职业生涯中需要它们。这就是为什么我建议把这个列表收藏起来，因为你可能会遇到其中一个，然后你会需要一个教程来完全理解它。 我们归纳了 33 个前端开发者需要知道的 Javascript 核心概念。希望当你不理解这些概念的时候能去看看它们详细的介绍(我们也在每个概念的末尾给出了详细的介绍地址)。 1. 调用堆栈 调用栈是一种解释器机制(就像网页浏览器中的JavaScript解释器)，用来跟踪它在调用多个函数的脚本中的位置—...
0 点赞 评论 收藏
分享
2022-05-14 09:43
四川大学 前端工程师
20 种高效的工作方式，助力你更有效率的编码
每个人都想变得更有效率，但是如何才能变得更有效率呢?在本文中，我找到了20种简单、经过试验和测试的方法，以提高开发人员的工作效率! 1. 时间限制 把你的时间像下列方式分成如下几部分: 9:30 --> 10:00 处理邮件 10:00 --> 12:00 计划新的页面设计和功能 12:00 --> 13:00 午饭与午休 13:00 --> 15:00 编辑文档 15:00 --> 17:30 重新设计页面 2. 深度工作 深度工作是一种提高效率的方法，它能让你进入状态。这个想法是你试着长时间不间断地工作(2到3小时)，这样你就进入了一种流状态。然后，...
0 点赞 评论 收藏
分享
2022-05-14 09:42
四川大学 前端工程师
0 点赞 评论 收藏
分享
2022-05-14 09:42
四川大学 前端工程师
用动画的方式理解Javascript的运行机制后，发现豁然开朗
JavaScript是世界上最受欢迎和最令人讨厌的语言之一。人们爱它是因为它有效力。只需要学习JavaScript而不学习其他任何东西，就可以创建一个完整的堆栈应用程序。它令人讨厌的另一个原因是，它的行为出乎意料，令人心烦意乱，如果您不了解这种语言，可能会让您讨厌它💔。 本问将通过动画的方式解释JavaScript如何在浏览器中执行代码😆。读完本文，你离成为Rockstar开发者又近了一步🎸😎！ 执行上下文 “JavaScript中的一切都发生在执行上下文中。” 我希望每个人都记住这句话，因为它很重要。你可以假设这个执行上下文是一个大容器，当浏览器想要运行一些JavaScript代...
0 点赞 评论 收藏
分享
2022-05-14 09:41
四川大学 前端工程师
【实战】用CSS实现文本打字机效果
之前，我们的文章中已经有通过 JS 的方式实现文本打字机的效果了，具体可以看这篇文章： 【前端三分钟】利用Javascript实现打字效果 在本文中，你将学习如何使用纯CSS实现打字机效果，使网站的文本更加动态和迷人。 打字机的效果是文字逐渐显露出来，就好像是在你眼前打字一样。在你的文本中添加打字机的效果可以帮助吸引你网站的访问者，并保持他们进一步阅读的兴趣。打字机效果可以用于许多目的，例如制作引人入胜的登录页面、标语、代码演示。 打字机效果很容易创建 打字机效果很容易制作，要理解本文，你需要掌握CSS和CSS动画的基本知识。 首先我们来解释一下打字机效果的实现方式: 打字机动画将通过使...
0 点赞 评论 收藏
分享
2022-05-14 09:40
四川大学 前端工程师
【原理】理解JavaScript中的上下文-对象字面量
在JavaScript中，“context”指的是一个对象。在一个对象中，关键字“this”指向该对象，并提供了一个指向作为该对象成员的属性和方法的接口。当函数被执行时，关键字“this”指向函数被执行的对象。 通常有这些场景来说明 this 的指向： 当函数在全局上下文中执行时，“this”指的是全局或“window”对象 当一个函数是一个对象的方法时，“this”指的是那个对象(除非它是在另一个对象的上下文中手动执行的) 当一个函数在另一个函数内部执行时(无论嵌套有多深)，“this”指的是执行该函数的上下文所在的对象 在实例对象内部实例化构造函数时，“this”指的是实例对象 所以，...
0 点赞 评论 收藏
分享
2022-05-14 09:39
四川大学 前端工程师
JS 到底是在干嘛：一文搞懂JS 执行上下文
所有JavaScript代码都需要在某种环境中托管和运行。在大多数情况下，这种环境是一个web浏览器。 对于在web浏览器中执行的任何一段JavaScript代码，很多过程都发生在后台。在本文中，我们将看一看JavaScript代码在web浏览器中运行的幕后发生了什么。 在开始之前，你需要先熟悉一些概念，因为我们将在本文中经常用到它们： 解析器: 语法解析器是一个逐行读取代码的程序。它理解代码如何符合编程语言定义的语法，以及代码应该做什么。 JavaScript引擎: JavaScript引擎是一个简单的计算机程序，它接收JavaScript源代码并将其编译成CPU可以理解的二进制指令(机器...
0 点赞 评论 收藏
分享
2022-05-14 09:37
四川大学 前端工程师
0 点赞 评论 收藏
分享
2022-05-14 09:36
四川大学 前端工程师
如何在TypeScript中使用类型保护
类型保护是一种TypeScript技术，用于获取变量类型信息，通常使用在条件块语句中。类型守卫是返回布尔值的常规函数，接受一个类型并告诉TypeScript是否可以缩小到更具体的类型。类型保护具有唯一的属性，可以确保测试的值是根据返回的布尔值设置的类型。 TypeScript使用了一些内置的JavaScript操作符，比如typeof、instanceof和in操作符，这些操作符用于确定一个对象是否包含属性。类型保护可以让你指导TypeScript编译器在特定的上下文中推断出变量的特定类型，确保参数的类型与你所说的一致。 类型保护通常用于缩小类型，它非常类似于特征检测，允许您检测值的正确方法、...
0 点赞 评论 收藏
分享

创作者周榜

更多
关注他的用户也关注了：
牛客网
牛客企业服务