南城FE-CSDN博客

原创 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

联系信息是个人身份信息，我们必须以敏感数据所需的所有谨慎和安全性来处理它。尊重人们的隐私。不要强迫他们分享他们不想分享的信息。以安全的方式小心处理数据。如果您正在处理的数据是您自己的数据，您会感到舒适吗？如果不需要，请不要存储数据。读它，用它，忘记它。不要存储你不使用的数据。只获取您需要的数据。获得建立信誉和信任所需的一切。假设一个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

Git 操作教程完整资源

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

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

空空如也