- 博客(25)
- 收藏
- 关注
RSS订阅原创 前端工程化提升团队开发效率
自动化流水线涵盖整个研发流程，结合通知/告警机器人、工作群、需求单系统、Bug系统、代码管理系统、发布系统和监控系统，实现全流程自动化，释放开发精力，专注于功能开发。总之，前端工程化不仅仅是工具和流程的使用，更是一种项目管理和团队协作的理念，有助于应对项目中常见的问题，提高整个项目的质量和效率。随着系统功能的增加和复杂性的提高，模块之间的耦合和复杂性增加，如果不能深入理解整个系统，可能会导致意想不到的Bug。程的自动化，可以有效降低系统复杂性，提高开发效率，降低Bug风险，保持项目的健康和稳定。
2023-11-01 16:52:40
105
原创 7个简单但棘手的JavaScript面试问题
这个问题涉及到JavaScript中的闭包和作用域。尽管我们可能期望输出是。之间存在换行符，JavaScript会自动插入分号，将函数的返回值视为。这个问题涉及到JavaScript中浮点数的精度问题。这个问题涉及到JavaScript中的变量提升和临时死区。这个问题涉及到JavaScript中自动分号插入的行为。这个问题涉及到JavaScript中数组的。这个问题涉及到JavaScript中常见的。时，实际上是在删除数组的所有元素。在下面的代码中，我们想要分别输出变量。的最终值，而不是在每次迭代中的值。
2023-11-01 16:47:27
226
原创 前端面试怎么总问watch和computed区别
当你访问数据时，Vue会建立一个依赖关系，然后在数据发生变化时通知相关的依赖项，从而更新视图。的内部，依赖项追踪和回调触发是通过Vue的响应式系统实现的。计算函数的执行和结果的缓存是通过Vue的响应式系统实现的。在现代前端的面试中，vue和react是面试过程中基本必问的技术栈，其中在聊到Vue响应式话题时，在获取属性值时，Vue会清除先前的依赖项，然后重新追踪新的依赖项。的核心，它建立了对监视数据的依赖，并在数据变化时触发回调函数。用于派生出一个新的计算属性，它的值会根据依赖项的变化而变化。
2023-10-23 19:37:11
304
原创 前端常用的20个JavaScript函数
函数接受两个参数，一个是字符串，另一个是要计算的字符，然后返回该字符在字符串中出现的次数。函数柯里化是一种有用的技术，可以将一个接受多个参数的函数转化为一系列接受单个参数的函数。函数接受一个数组和一个要查找的元素作为参数，然后返回一个布尔值，指示数组是否包含该元素。函数接受一个字符串作为参数，并返回一个新字符串，其中首字母大写。函数接受一个年份作为参数，并返回布尔值，指示该年份是否为闰年。函数接受一个值作为参数，并返回布尔值，指示该值是否为整数。函数接受一个字符串作为参数，并返回该字符串的反转版本。
2023-10-20 10:23:00
336
原创 浅析requestAnimationFrame的用法与优化
的回调函数执行时间超过一帧（通常是 16.67 毫秒，因为浏览器通常以每秒约 60 帧的速度刷新），则可能会导致动画性能下降，可能出现掉帧的情况，最终影响用户体验。这是因为浏览器每帧的时间是有限的，如果回调函数执行时间过长，就会导致下一帧的准备和绘制时间受到压缩，导致动画卡顿。可用于更新动画状态,实现复杂动画逻辑,而CSS动画用于声明式定义动画的样式变化,两者可配合实现更丰富的动画效果。的回调会在一个高优先级的线程中被同步执行,如果回调函数中有大量计算,会导致此线程被阻塞,从而引起页面卡顿。
2023-10-18 14:00:08
340
原创 前端如何优雅处理大数运算
虽然这个算法有效解决我们的问题，但在处理非常大的数字时，性能问题是一个绕不开的话题。这些仅仅是大数字相加的一些应用场景示例，实际上，几乎在所有需要处理大数值的领域都会涉及到这种操作。大数字相加的应用场景比较广泛，特别是在需要处理非常大的整数或浮点数时。：在工程领域，建模和仿真通常需要处理大数字，以执行复杂的计算，如结构分析、流体力学和电路模拟。：在大数据领域，处理大量数据通常涉及到大数字的操作，例如对数据的聚合、统计和计算总和。：在电信和通信领域，大数字相加用于处理大量的通信数据，例如信号处理和传输控制。
2023-10-16 14:13:04
231
2
原创 前端开发实践：如何快速提取字体文件中的文字？
前端日常开发过程中，是否经常遇到这种痛点，交互设计使用了新的字体，新的字体文件往往几M或者几十兆，这对于前端包体积优化是不可接受的。我们指定了要处理的字体文件路径，并添加了一些有趣的 Fontmin 插件，用于处理字体文件。这里我们可以使用一些有趣的命令行工具，比如“cmatrix”工具，让我们的字体文件更加有趣。Fontmin 是一个用于字体压缩和提取的 Node.js 模块，可以帮助我们从字体文件中提取指定的文字。执行完这个命令后，就会在指定的新路径下生成一个新的字体文件，其中只包含了我们指定的文字。
2023-10-13 19:19:44
232
原创 超简单发布订阅模式讲解
发布订阅模式更加灵活，支持多对多关系，适用于更多的场景，而观察者模式是一对多关系，明确定义了观察者的接口。发布订阅模式更加灵活，允许多个发布者和订阅者之间的多对多关系，发布者不需要了解订阅者的存在。在我们上面的介绍中，发布订阅模式使用了中介者来处理事件的发布和订阅，而观察者模式是一对多的关系，主题对象直接通知观察者。如果事件列表中不存在特定事件，我们会创建一个新的事件数组，然后将传入的监听器添加到该数组中。在第四步中，我们引入了事件缓存，允许查看已经订阅的事件。方法，分别用于订阅事件、卸载事件和发布事件。
2023-10-12 20:42:05
111
原创 纯CSS实现骚气红丝带
在上面的动画中，当鼠标悬停在形状上时，可以看到漂亮的展开收起动画。本文介绍两种丝带：左侧的丝带称为“折叠丝带”，右侧的丝带称为“旋转丝带”。我们从一个简单的多边形开始，然后逐步添加更多点和计算，最终得到这个复杂的多边形。来切割多边形的四个新点，其中三个点位于元素的外部区域。因为我们要切割的部分在外部，但是它是不可见的，这里我们添加了大的。现在如果我们将元素旋转相反的方向，就会得到旋转的 CSS 丝带形状。对于这种形状，我们将使用新的三角函数以及 CSS 变量和。中，我们使用这个高度来切割等腰三角形的形状。
2023-10-10 22:10:38
199
原创 Bun.js入门简介
我怀疑我们正走向一个同构的服务器端 JavaScript 时代，在这个时代，模块开发人员试图编写与所有运行时兼容的代码：Node.js、Deno、Bun、无服务器、边缘、嵌入式等等。如果您从项目的开始使用 Bun，它是可靠的。速度比 Node.js 更快，尽管除非您的应用程序执行特定的密集任务，如大量的 SQLite 处理或 WebSocket 消息传递，否则不太可能看到显著的性能提升。选择 Node.js 的人很少会因此而被解雇，但 Bun 避免了一些 Deno 的错误，并迅速成为一个吸引人的选择。
2023-10-07 16:23:22
1511
1
原创 前端实现水印效果的多种方案
本文介绍了几种前端水印方案，大家可以根据具体项目选择适合的方法来实现水印效果。在这个示例中，我们创建了一个Canvas元素，并使用JavaScript来绘制水印。你可以根据需要配置水印的文本、字体、颜色等属性，并使用库提供的方法进行初始化和加载。这种方法适用于需要在整个页面或特定元素上添加水印的情况，且不需要通过Canvas来绘制水印。在这个示例中，我们使用SVG（可缩放矢量图形）来创建水印。使用CSS来添加重复水印的方法是将水印图片作为背景图片，并使用。在这个示例中，我们创建了一个包含水印的容器元素。
2023-10-07 14:38:21
3389
1
原创 超高频面试题之JS单线程与事件循环，看这篇就够了
事件循环的核心思想是：JS引擎首先执行当前的同步任务，然后检查任务队列（Task Queue）中是否有待处理的异步任务。在这个过程中，宏任务和微任务是两种不同类型的异步任务，它们在事件循环中的处理方式有所不同。换句话说，当一个宏任务执行完毕后，JS引擎会检查微任务队列，并在执行下一个宏任务之前执行所有的微任务。在当前事件循环周期结束时，JS引擎会检查宏任务队列，并将队列中的任务依次执行。在当前事件循环周期结束之前，JS引擎会先执行微任务队列中的所有任务，然后再执行宏任务队列中的任务。
2023-09-28 23:25:50
233
原创 揭秘前端滑块验证技术
滑块验证作为一种反机器人的工具，也会不断发展和演进，以适应不断变化的威胁。前端验证可以提供用户友好的反馈，但最终的验证应该由后端来完成，防止攻击者绕过前端验证，采用后端验证可以确保只有经过验证的请求才能被处理。业内有一些常用的方案和最佳实践，以下是一些业内常用的方案，我在后续的文章中详细讨论，可以关注我及时了解后续。为了增加滑块验证的难度，滑块的位置和缺口的位置应该是随机的，不能是固定的。下面我们实现一个简单的滑块验证示例，通过简单的HTML、CSS和JavaScript来实现一个完整的拼图验证码。
2023-09-27 12:21:20
1152
1
原创 解析es6中let和const并模拟实现私有变量
模块模式利用了函数作用域和闭包的特性，将私有变量和方法封装在一个函数内部，并返回一个包含公有方法的对象。作用域是一个决定变量可见性和访问性的概念。我们可以创建一个函数，该函数包含了需要保护的变量，并返回用于访问和修改这些变量的方法。闭包是 js 中的一个概念，它允许函数访问其外部作用域的变量，即使外部作用域已经执行完毕。但需要注意的是，对于引用类型的变量，虽然变量本身不可重新赋值，但其属性仍然可以修改。然后，通过返回一个包含公有方法的对象，我们可以访问和操作私有变量，同时将其封装起来，不会受到外部的干扰。
2023-09-26 13:14:45
192
1
原创 有人说前端已死？请不要再制造焦虑
新的技术和方向不断涌现，例如WebAssembly、Serverless、低代码平台等，这些都需要前端从业者不断学习，以适应技术和市场的变化。然而需要注意的是，为了在竞争激烈的市场中脱颖而出，可能需要更多的技能和经验，这也可以做为一个契机，迫使前端开发者积极提升自己的技能和知识。前端仍然是数字时代的核心，对于那些愿意不断学习和适应变化的人来说，前途一片光明。根据智联招聘的薪资数据，2022年国内前端开发者的平均月薪为15000元，与2021年基本持平，但增长率低于2020和2021年的两位数增长。
2023-09-25 11:14:50
178
1
原创 你真的会使用ES6模版字符串？
模板字符串（template strings）是JS一个非常有用并且强大的特性。模板字符串不仅可以让字符串拼接更加简洁，还支持一些高级的用法，本文和大家深入探讨模板字符串的高级用法，分享如何利用它实现更加优雅和强大的字符串操作。
2023-09-24 00:11:58
218
1
原创 一文彻底搞懂JS作用域
JavaScript的作用域是一个非常基础且重要的概念，对于初学者来说，经常会觉得有些混乱搞不清楚。本文会详细介绍JavaScript作用域，包括全局作用域、函数作用域和块级作用域，以及ES6+新增的。在JavaScript中，作用域是指在代码中定义变量的区域。在函数内部定义的变量只能在函数内部访问，这就是函数作用域。这意味着，如果你在一个函数内部定义了一个变量，那么这个变量在函数外部是不可见的。当一个函数能够记住并访问所在的词法作用域，即使该函数在词法作用域外部执行，这就产生了闭包。
2023-09-22 23:07:59
123
1
原创 前端性能优化必杀技：骨架屏让你快人一步
本文将深入探讨骨架屏的最佳实践，结合代码案例，介绍如何实现和优化骨架屏。骨架屏能够在内容加载完全之前快速展示页面结构，让用户感受到页面加载的进度，从而提高了用户体验。基于预渲染的骨架屏技术通过服务器端渲染（SSR）或静态站点生成（SSG）提前生成页面的骨架，然后在客户端加载时填充内容，从而提高性能和SEO。无论你是在开发单页应用、多页应用，还是移动应用，都可以考虑将骨架屏技术融入你的项目中，为用户带来更快速、更流畅的体验。为了确保用户不会感知到内容的“跳动”，骨架屏的结构和样式应该与最终加载的内容一致。
2023-09-21 23:00:23
480
原创 一文彻底搞懂JS函数柯里化
函数柯里化（Currying）是在函数式编程中常用的技术，它的基本思想是将一个带有多个参数的函数转化为一系列使用一个参数的函数。函数柯里化是一种强大的函数式编程技术，它使我们能够预设函数的参数，创建新的函数，并在需要的时候执行这些函数。：柯里化可以使我们在定义函数时设置一些通用的参数，然后生成一个新的函数，我们在调用这个新的函数时只需要提供剩下的参数。：柯里化的函数在接收到足够的参数之前不会执行，而是返回一个新的函数，等待剩余的参数。：通过柯里化，我们可以创建更具描述性的函数，提高代码的可读性和可维护性。
2023-09-20 22:09:05
57
1
原创 【揭秘】一文彻底搞懂JSONP！
JSONP是一种很远古用来解决跨域问题的技术，当然现在实际工作当中很少用到该技术了，但是很多同学在找工作面试过程中还是经常被问到，本文将带您深入了解JSONP的工作原理、使用场景及安全注意事项，让您轻松掌握JSONP。随着技术的发展，JSONP已不再是首选跨域解决方案，但了解它的工作原理仍然有助于我们更深入地理解跨域数据交互的基本原理。：服务器收到请求后，将JSON数据包装在指定的回调函数中，并将其返回给客户端。：JSONP未经过滤的数据可能会引起XSS攻击，因此需要对返回的数据进行过滤和验证。
2023-09-19 20:00:39
276
原创 震惊！对话就能生成网页，前端er又药丸了？
前两天，Vercel突然推出了v0.dev，用户通过语言描述就能生成精美UI页面，小伙伴们惊掉了下巴。。V0是何方神圣带着期待的心情对官网https://v0.dev一番摸索的探索，了解到v0是通过AI模型技术生成交互页面，当前官网的交互是基于Shadcn UI和Tailwind CSS，最终生成基于React的代码，可以直接复制到项目中使用，当然也可以直接把代码部署到Vercel上面，官方有计划后续对vue、Svelte等前端框架支持；
2023-09-18 22:37:29
436
1
原创 JS防抖和节流
当事件被触发时，启动一个定时器，在指定的延迟时间后执行函数。如果在一段时间内多次触发同一事件，只有最后一次触发后，函数才会执行。当然在实际开发中，要根据具体的应用场景选择合适的防抖或节流策略，以确保代码的最佳性能。在处理用户输入、滚动事件、表单提交以及其他频繁触发的操作时，防抖和节流是两个常用的技术，用来减少不必要的资源消耗和提高用户体验。节流的原理与防抖类似，但有一个关键区别：无论事件频率多高，函数都会按照指定的时间间隔执行。无论事件触发多频繁，都会按照设定的时间间隔执行函数。
2023-09-17 18:17:11
162
原创 ES14新特性揭秘，对前端开发有哪些影响？
ECMAScript 2023也就是ES14已经发布3个月了，还有好多小伙伴没有关注到ES14有哪些变化，本文将为大家梳理下ES14最新规范新增功能：对数组的新增功能，对shebang的支持，对弱引用集合的符号键的扩展。toSpliced() 方法是 splice() 的复制版本，splice()是js中数组操作常用的方法；因此，如果您知道索引和新值，这个方法非常方便。toSorted() 与 Array.prototype.sort() 具有相同的签名，但它创建一个新的数组，而不是对原数组进行操作。
2023-09-17 18:16:01
109
原创 手写Promise
Promise是一种用于处理异步操作的对象，表示一个异步操作的最终完成或失败。Promise有三种状态：Pending（进行中）、Fulfilled（已成功）、Rejected（已失败）。一旦Promise的状态从Pending变为Fulfilled或Rejected，它就不会再改变。Promise是一项强大的工具，它使异步编程更加清晰和可控。通过理解Promise状态和回调的概念，并掌握示例代码中的使用方式，我们可以更好地运用Promise来提升代码的可读性和性能。快来试试吧！
2023-09-17 14:12:57
19
原创 git的基本概念
远程仓库（remote）：远程仓库是位于远程服务器上的代码仓库。Git支持将本地代码仓库与远程仓库进行同步。使用git remote add命令添加一个新的远程仓库，并使用git push命令将本地代码推送到远程仓库中。使用git branch命令创建一个新的分支，并使用git checkout命令切换到该分支。代码仓库：代码仓库是Git用于存储代码的地方。使用Git创建新的代码仓库，可以使用git init命令。提交（commit）：提交是保存代码更改的过程，它会创建一个新的版本并将其保存到代码仓库中。
2023-09-17 13:24:05
30
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人