自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

南城

前端知识分享

  • 博客(180)
  • 资源 (1)
  • 收藏
  • 关注

原创 CSS Clip-Path:重塑元素边界的艺术

在Web设计中,创造独特而富有吸引力的视觉效果一直是设计师和开发者们追求的目标。CSS的clip-path属性为此提供了一个强大的工具,它允许我们定义元素的可见区域,从而以非矩形的方式裁剪图像或容器。这一特性不仅限于简单的形状裁剪,还能创造出复杂的几何图形乃至SVG路径裁剪,极大地丰富了网页设计的可能性。

2024-09-10 09:31:35 527

原创 纯CSS实现海浪文字效果

这是一个很炫酷的文字波动效果,文字呈现出一个海浪波动的效果,这样的动画效果可以显著加强文案本身的含义。本文将解析如何使用纯CSS实现这个特效

2024-09-10 09:26:27 699

原创 在 eggjs 中忽略 CSRF

通过以上方法,你可以在 Egg.js 中根据需要忽略 CSRF 保护。选择合适的方法来处理 CSRF 令牌问题,确保在禁用 CSRF 保护时考虑到安全性。

2024-09-02 10:04:47 430

原创 使用JavaScript读取手机联系人列表

联系信息是个人身份信息,我们必须以敏感数据所需的所有谨慎和安全性来处理它。尊重人们的隐私。不要强迫他们分享他们不想分享的信息。以安全的方式小心处理数据。如果您正在处理的数据是您自己的数据,您会感到舒适吗?如果不需要,请不要存储数据。读它,用它,忘记它。不要存储你不使用的数据。只获取您需要的数据。获得建立信誉和信任所需的一切。假设一个Web应用程序试图在选择电话号码时读取地址、姓名或电子邮件。如果这种情况发生在我身上,我会拒绝授权并离开这个网站。

2024-09-02 09:33:48 1328

原创 JavaScript Set 即将支持并集、交集、差集等

JavaScriptSet在 ES2015 规范中引入,但一直感觉不完整。Set是一种值的集合,其中每个值只能出现一次。在 ES2015 版本的Set中,可用的功能围绕创建、添加、移除以及检查Set的成员资格。如果你想操作或比较多个集合,需要自己实现相关逻辑。幸运的是,负责处理 ECMAScript 规范的 TC39 委员会和浏览器一直在努力解决这个问题。我们现在在 JavaScript 实现中看到了union和difference等函数。

2024-08-29 14:06:00 792

原创 CSS 终于在 2024 年增加了垂直居中功能

CSS 的新特性提供了一个简单且直接的方式来实现垂直居中,无需使用额外的div包装或复杂的布局模式即可完成垂直居中。但注意这个属性还存在一定的浏览器兼容性,在线上使用需谨慎。专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

2024-08-29 13:58:39 883

原创 不使用 JS 纯 CSS 获取屏幕宽高

CSS 自定义属性(也称为 CSS 变量)允许开发者在 CSS 中定义可重用的值。通过使用 var() 函数,可以在样式表的任何地方引用这些变量。自定义属性的定义通常在:root选择器中进行,以便在整个文档中使用。通过使用 CSS 的@property规则和数学函数,我们可以在不使用 JavaScript 的情况下获取屏幕的宽度和高度。随着 CSS 规范的不断发展,未来可能会有更多类似的功能,使得前端开发更加灵活和高效。

2024-08-27 10:49:57 908

原创 Vue中解析换行展示

替换换行符: 使用计算属性将 \n 替换为标签。CSS 处理: 使用 white-space: pre-line 来保留换行符。按行渲染: 将文本按行分割并使用 v-for 渲染。选择适合你需求的方法来处理换行符。

2024-08-19 09:38:27 482

原创 CSS炫酷光晕按钮特效

一个旋转光晕的按钮。该效果不仅提升了视觉吸引力,也增强了用户的交互体验。利用 CSS 的强大功能,我们可以轻松实现复杂的动画效果,有兴趣的可以尝试使用起来~专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

2024-08-19 09:33:22 996

原创 CSS萤火虫按钮特效

通过以上步骤,结合现代 CSS 的强大功能,我们实现了一个发光的萤火虫圆点悬停按钮效果。这样的效果不仅提升了视觉吸引力,还增强了用户的交互体验。利用 CSS 变量和动画,设计师可以灵活地控制每个元素的表现,使得网页更加生动和引人注目。有兴趣的可以调整相关参数体验其他的视觉效果。专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

2024-08-12 09:41:22 285

原创 Vue中输入框仅支持数字输入

通过监听 @input 事件并使用正则表达式来验证输入,只允许输入数字。

2024-07-31 09:38:11 1706

原创 螺旋文字滚动特效源码解析

通过结合 JavaScript 和 CSS,我们成功实现了一个动态的螺旋文字滚动特效。该特效不仅展示了字符的动态变化,还通过延迟时间结合动画效果增强了视觉吸引力。本质实现这个效果是不需要 JavaScript,为了兼容火狐和动态创建文案DOM才使用了相关 JavaScript。有兴趣的可以尝试使用纯CSS实现这个炫酷的螺旋文字滚动特效。专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

2024-07-31 09:33:13 578

原创 优化JavaScript代码:减小复杂度的策略

本文介绍了减小JavaScript代码复杂度的多种策略,包括使用函数抽象、模块化、减少作用域链查找、利用ES6+新特性、避免全局变量以及代码重构。每种策略都配有代码示例,以帮助开发者理解并应用这些优化技巧。这篇文章可以作为开发者在进行JavaScript代码优化时的参考指南,帮助他们写出更简洁、高效和可维护的代码。

2024-07-28 18:20:10 286

原创 国内程序员远程工作平台合集,灵活工作新选择

这些平台覆盖了从技术开发到设计、运营等多个领域的远程工作机会,为不同需求的专业人士提供了灵活多样的选择。不仅提供了更多的工作选择,也为推动国内远程工作的发展做出了贡献。远程工作不仅改变了传统的工作方式,也为全球范围内的人才流动提供了更多可能性。远程工作平台的发展前景广阔,它们将继续推动工作方式的变革,为程序员和其他专业人士提供更多灵活、自由的工作机会。祝大家都能找到心仪的远程工作!专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

2024-07-28 17:32:09 623

原创 数据更新后Ant Design Table组件界面未刷新怎么解决?

在使用Ant Design的Table组件时,我们时常需要动态更新表格数据以满足应用需求。然而,有时即使数据已经更新,界面却没有进行相应的刷新。它确保当数据更新时,React能够准确判断哪些行发生了变化,并据此进行最小化的DOM操作。属性是确保Ant Design Table组件在数据更新后能够正确进行界面刷新的关键。如果确实需要使用索引作为临时解决方案,请确保这些操作不会影响到最终展示给用户的数据顺序。通过避免常见问题并采用合适的方法,我们可以提高Table组件的渲染性能和稳定性,为用户提供更好的体验。

2024-06-01 10:54:36 872

原创 如何在 JS 中快速读取文件

本文翻译自,作者:Daniel Lemire, 略有删改。假设你需要在服务器上使用JavaScript读取多个文件。在像Node.js这样的运行时环境中,JavaScript有多种读取文件的方式。哪一种是最好的呢?让我们来看看各种方法的测试结果。

2024-06-01 10:30:43 671

原创 纯CSS丝滑边框线条动画

纯CSS基于两个元素的1像素间距透出边框线条,配合使用`backdrop-filter`设置纯背景模糊效果,实现炫酷边框线条动画

2024-05-27 12:37:30 1275

原创 5个改善用户体验的HTML属性

希望对这些特性的探讨能激发你的兴趣。当你开始下一个项目时,请记住优先考虑可用性、可访问性和简洁性的重要性。专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

2024-05-22 09:40:03 377

原创 实时消息获取技术方案对比

长轮询是第一个支持服务器->客户端传递消息的方法,该方法可用于HTTP浏览器。该技术模拟服务器推送通信与正常的XHR请求。与传统轮询不同,在传统轮询中,客户端以固定的时间间隔重复地向服务器请求数据,长轮询建立到服务器的连接,该连接保持打开状态,直到有新的数据可用。一旦服务器有了新的信息,它就将响应发送给客户端,连接就关闭了。在收到服务器的响应后,客户端立即发起新的请求,然后重复该过程。这种方法可以更及时地更新数据,减少不必要的网络流量和服务器负载。但是它仍然会在通信中引入延迟,并且比WebSockets。

2024-05-20 19:00:03 715

原创 为什么删除node_modules文件夹很慢

在处理Node.js项目时,删除文件夹常常是一个非常缓慢的过程。

2024-04-22 09:42:06 861

原创 前端代码规范 - JavaScript 部分规范

遵循这些JavaScript编码规范不仅可以提高代码的可维护性和可读性,还可以减少潜在的错误和性能问题。清晰的命名、强类型使用、合理的函数设计和避免不良实践是构建健壯、可维护和高效的前端代码的关键,以帮助开发者编写更优质的代码。专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

2024-04-22 09:30:24 382

原创 使用WebSocket在前端发送消息

WebSocket API 定义了一个全双工通信通道,使用ws://(非加密)和wss://(加密)协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务器主动向客户端发送消息。

2024-04-21 12:22:22 1477

原创 提升用户体验的UUID设计策略

本文讨论了在应用程序中使用唯一标识符(UUID)时通过以下方式提升用户体验。简化复制:通过去除UUID中的连字符,可以让用户更容易地通过双击复制整个标识符。添加前缀:使用有意义的前缀可以帮助用户区分不同环境或资源,例如Stripe使用特定的前缀来区分生产环境密钥和客户标识符。高效编码:考虑使用如base58这样的编码方式,它使用更大的字符集并避免使用易混淆的字符,从而生成更短且可读性强的标识符字符串。改变长度:根据应用的具体需求,可以通过减少标识符的长度来生成更短的ID,同时保持足够的唯一性。

2024-04-21 12:14:43 931

原创 处理JavaScript中浮点数精度丢失的问题

在使用JavaScript进行数学计算时,尤其是涉及浮点数时,经常会遇到精度丢失的问题。浮点数的精度问题是编程中常见的问题,尤其在使用JavaScript这种语言时更加显著。通过上述的方法,可以有效地减少和控制因浮点数运算引入的误差,提高程序的准确性和可靠性。例如可以将所有的数乘以一个因子(如1000),使其变为整数,然后再进行计算,最后再除以同样的因子转回浮点数。在编写代码时,考虑减少不必要的运算步骤,尽量在最后一步再进行四舍五入和转换类型的操作。,它支持任意精度的整数。可以通过在整数后面加。

2024-04-19 10:06:37 326

原创 前端代码规范 - 编辑器&代码风格

在本文我们探讨了如何通过现代前端开发中的各种配置文件来标准化和优化开发流程。这些工具和文件包括PrettierESLintstylelint、忽略文件(如.gitignore和)以及和VS Code的,为我们提供了实现代码一致性、可读性和自动化的强大支持。虽然文中提供了基于实践的建议配置,但最终的实现应根据具体的项目需求和团队习惯进行灵活调整。正确利用这些工具和配置可以显著提高前端开发的效率和质量,帮助团队维护一个清晰且高效的开发环境。

2024-04-19 09:36:28 1212

原创 在Vue中使用Immutable.js

Immutable.js提供了持久的不可变数据结构,这有助于防止意外的数据变更,并可以提升应用的性能,特别是在处理大规模数据或复杂的状态管理时。虽然Vue的响应式系统本身并不需要Immutable.js,但在处理复杂的数据交互和大规模数据时,引入Immutable.js可以显著提高应用的性能和稳定性。如果项目中使用了依赖于不可变数据的第三方库,比如某些数据可视化库,使用Immutable.js可以提供兼容性和更优的性能。首先,你需要在你的Vue项目中安装Immutable.js。方法返回一个新的列表。

2024-04-18 11:18:34 546

原创 JavaScript中处理回调与状态更新

在JavaScript编程中,处理高速执行的回调函数时常会遇到状态管理的问题,尤其是在处理数组或其他共享数据结构时。这些问题通常因为JavaScript的异步执行特性以及共享状态的可变性引起。下面将分析此类问题的原因,并提供一些有效的解决方案。当在JavaScript中的回调函数快速执行时,如果多个回调函数试图修改同一个数组或对象,可能会出现一个回调的修改被另一个回调覆盖的情况。,并且有多个异步操作尝试更新数组中的同一个元素,最终的结果可能并不是预期的,因为最后一个完成的操作可能会覆盖之前所有的操作。

2024-04-18 11:17:20 499

原创 程序员如何搞副业

在技术迅速发展的今天,程序员不仅仅是编码机器,更是创新和创业的前线战士。很多程序员在日常工作之余,通过开展副业不仅能实现个人价值的最大化,还能增加额外收入。

2024-04-12 11:51:54 310

原创 前端代码规范 - 图片相关

前端项目中合理地使用图片是提升用户体验的关键。上述图片使用规范对于网站的性能和可访问性有一定的提升,除此之前也还有其他的优化手段,有兴趣的可以留言交流。在实际开发中,还是要根据项目需求和目标用户群体,灵活选择适合的图片格式和优化策略。专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

2024-04-12 11:41:25 1514

原创 常用MySql下载安装使用教程

安装MySQL是开始数据库工作的第一步。熟练掌握SQL命令对于进行有效的数据操作至关重要。本文介绍的只是冰山一角,MySQL还支持更复杂的查询、事务处理、存储过程等高级功能。随着您对MySQL的深入学习,您将能够利用这些强大的功能来构建复杂且高效的数据库解决方案。专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

2024-04-11 10:43:57 383

原创 前端代码规范 - 代码注释

良好的注释规范有助于提高代码质量,促进团队协作,加快新成员的项目熟悉速度,不仅能帮助自己和他人快速理解代码,还能提高代码的可维护性。

2024-04-11 10:35:31 1429

原创 mysql 如何查看一条SQL被回滚

事务回滚是事务管理中的一个关键概念,指的是在事务处理过程中,当遇到错误或其他中断时,系统会撤销事务中已经执行的所有操作,将数据库状态回退到事务开始之前的状态。回滚确保了数据库的完整性和一致性。虽然MySQL没有直接提供查询SQL语句是否被回滚的命令,但通过上述方法,我们可以有效地诊断和分析事务回滚的情况。合理使用这些工具和策略,可以帮助开发人员和数据库管理员更好地管理和优化数据库事务。南城大前端(ID: nanchengfe)

2024-04-09 19:27:43 501

原创 你应该知道的21个html小技巧

21个html小技巧希望对你有帮助,欢迎留言你知道的更多优化小技巧~专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

2024-04-09 19:26:49 955

原创 前端项目体积优化策略

前端项目体积优化是一个持续的过程,需要不断地评估、分析和实施最佳实践。通过上述策略的实施,可以显著地减少应用的加载时间,提高用户体验,并可能降低服务器带宽的消耗。这些策略不是孤立使用的,而应该结合项目的具体情况,综合考虑并实施。随着技术的发展,新的优化技术和工具会不断出现。作为开发者,我们应该保持好奇心,不断探索和尝试,以便为用户提供更快、更流畅的应用体验。

2024-04-08 19:19:18 1022

原创 前端代码规范 - 日志打印规范

在前端开发中,随着项目迭代升级,日志打印逐渐风格不一,合理的日志输出是监控应用状态、调试代码和跟踪用户行为的重要手段。一个好的日志系统能够帮助开发者快速定位问题,提高开发效率。

2024-04-08 19:02:27 691

原创 npm常用命令技巧

NPM 是 JavaScript 开发中不可或缺的工具,熟练掌握 NPM 命令可以大大提升开发效率。以上介绍的命令只是 NPM 功能的一部分,但它们是日常开发中最常用的。希望这篇文章能帮助你更好地理解和使用 NPM。

2024-03-31 13:29:36 767

原创 减少样式计算的范围和复杂度

JavaScript通常用来改变页面的视觉效果。比如通过改变style样式或者通过计算后改变页面布局,比如搜索或排序数据。长时间运行的JavaScript可能是导致性能问题的常见原因,应该尽可能地减少它的影响。

2024-03-31 13:18:19 843

原创 PostCSS:前端开发的强大助手

PostCSS是一个非常强大的工具,它通过插件系统提供了无限的可能性。除了autoprefixer,还有许多其他的插件,如cssnano(用于压缩CSS)、postcss-preset-env(允许你使用未来的CSS特性)等等。通过灵活使用这些工具,你可以大大提高前端开发的效率和质量。现在你已经了解了PostCSS的基本安装和使用方法,不妨在你的项目中尝试使用它,相信它会成为你前端工具箱中的强大助手。专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

2024-03-28 09:36:59 387

原创 提升JavaScript代码质量的最佳实践

通过以上案例,我们可以看到通过一些简单的技巧和最佳实践,我们可以大大简化我们的JavaScript代码,使其更加优雅。这只是冰山一角,还有许多其他的技巧和最佳实践可以帮助我们优化代码的复杂度。如果你有其他的优化写法欢迎留言交流~希望本文能够为你的JavaScript编程提供一些启发。专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

2024-03-28 09:27:06 1017

原创 Node.js 常用 API 操作全解

Node.js 提供了丰富的 API 来处理各种服务器端任务,从创建 HTTP 服务器到文件系统操作,再到事件处理和异步编程。掌握这些 API 将帮助你更有效地使用 Node.js 进行开发。希望本文的介绍能够帮助你更好地理解和使用 Node.js 的核心功能。专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

2024-03-22 10:27:56 741

Git 操作教程完整资源

这是一份详尽而系统的Git操作教程资源,专为希望深入掌握Git版本控制系统的开发者、软件工程师及IT专业人士设计。本教程从Git的基础概念讲起,逐步引导学习者理解Git的分布式架构、工作流程以及核心命令。

2024-08-19

基于Python实现二叉树的创建与遍历

二叉树的创建与遍历

2023-11-23

特效多卡片跟随鼠标方向3D转动

多个大小不同的卡片跟随鼠标的坐标转动,适用于PC网站首页特效交互,可以提升用户体验效果,增强与用户的反馈。对网站设计感较强的网站较为适用。 卡片设计基于SVG标签实现,设计感很强,无需加载图片,加载性能及动画交互的性能体验都很好。

2022-05-22

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除