一月内热门-前端技术文章-Golang学习网

分类:

最新
热门

一月内

三天内一周内一月内三月内

JS中mapKeys修改对象数组键名方法

最直接的方法是使用Array.prototype.map()结合对象重构。1.对于固定键名转换，可直接在map中返回新对象，手动映射每个键值；2.对于动态或大量键名转换，可定义keyMapping表，遍历对象属性并根据映射表生成新键名；3.处理嵌套对象时，可编写递归函数深度转换所有层级的键名，结合键名处理逻辑如下划线转驼峰；4.性能方面，在大型数据集上应避免不必要的属性拷贝，只提取所需键以减少开销，确保操作不会成为性能瓶颈；JavaScript没有内置mapKeys方法，因其设计哲学倾向于提供基础工具让开

文章 · 前端 | 2星期前 | 366浏览收藏
textContent的作用及使用场景解析

textContent属性用于获取或设置节点及其后代的文本内容，忽略HTML标签。1.获取内容：element.textContent；2.设置内容：element.textContent="新内容"。textContent与innerText区别在于其不考虑CSS样式，且为W3C标准；与innerHTML区别在于其不解析HTML标签，更安全。避免XSS的方法是优先使用textContent，对用户输入进行验证和HTML编码。高效使用方式包括一次性设置、使用DocumentFragment和模板引擎。兼容

文章 · 前端 | 1星期前 | 366浏览收藏
Vue中三元运算符多层嵌套技巧

本文旨在解决Vue模板中多重三元运算符的语法错误问题，并提供一种更清晰、可维护的解决方案。通过使用计算属性和Map数据结构，我们可以避免复杂的嵌套三元表达式，提高代码的可读性和可扩展性。本文将详细介绍如何实现这一方案，并提供完整的代码示例。

文章 · 前端 | 1星期前 | 366浏览收藏
JavaScript非空数字验证技巧

本教程详细介绍了如何在JavaScript中使用prompt函数获取用户输入时，实现有效的输入验证。内容涵盖了如何确保用户输入非空值，以及如何验证输入是否为有效的数字类型。通过示例代码，本文将展示如何结合使用Number()、一元加号操作符、isNaN()以及循环结构，构建健壮的用户输入处理逻辑，从而提升程序的稳定性和用户体验。

文章 · 前端 | 1星期前 | 366浏览收藏
HTML表单接入WebAuthn完整教程

是的，HTML表单可通过JavaScript与WebAuthnAPI交互实现认证流程，用户可使用硬件安全密钥如YubiKey进行身份验证以增强安全性；WebAuthn利用公钥密码学将私钥安全存储于硬件或设备安全区域，公钥则注册至服务器；HTML表单用于发起注册或登录请求并接收响应，前端JavaScript通过fetch向后端获取注册或认证选项，调用navigator.credentials.create()或get()触发浏览器提示用户使用安全密钥完成验证，随后将返回的Credential对象通过AJAX

文章 · 前端 | 1星期前 | JavaScript HTML表单 WebAuthn 公钥密码学硬件安全密钥 366浏览收藏
CSS多行省略技巧：line-clamp属性使用解析

实现多行文本省略的核心答案是使用-webkit-line-clamp属性配合必要样式；1.必须设置overflow:hidden、text-overflow:ellipsis、display:-webkit-box、-webkit-box-orient:vertical才能使-webkit-line-clamp生效；2.text-overflow:ellipsis单独无效，需与white-space:nowrap和overflow:hidden配合，仅适用于单行省略；3.兼容性处理可通过JavaScrip

文章 · 前端 | 1星期前 | CSS 兼容性 line-clamp 多行文本省略 text-overflow:ellipsis 366浏览收藏
HTML中设置占位文本样式方法

要设置HTML占位文本样式，需使用CSS的::placeholder伪元素；1.使用input::placeholder或textarea::placeholder选择器定义颜色、字体、字号等文本样式；2.注意该伪元素仅支持文本相关CSS属性，不支持背景、边框、内边距等盒模型属性；3.为确保兼容性，现代项目通常无需添加-webkit-、-moz-等旧前缀，但需考虑老旧浏览器时可保留；4.避免将占位符用作唯一提示信息，应配合label标签提升可访问性；5.保持占位符文本简洁、对比度足够，并避免复杂动画或过度

文章 · 前端 | 5天前 | 366浏览收藏
JavaScript贪吃蛇游戏开发教程

游戏的核心循环通过setInterval驱动，分为更新和绘制两个阶段。1.更新阶段处理蛇的移动、碰撞检测和食物逻辑；2.绘制阶段将最新状态渲染到canvas上。蛇的移动通过计算新头部位置并更新数组实现，使用unshift添加头部和pop移除尾部模拟移动效果。碰撞检测包含三种情况：撞墙（超出画布边界）、撞自己（头部与身体坐标重合）和撞食物（得分并增长蛇身）。生成食物时通过随机坐标并检查是否与蛇身重叠，若重叠则递归重新生成，确保食物出现在空闲位置。

文章 · 前端 | 4天前 | 366浏览收藏
GraphQL是什么？怎么使用查询？

GraphQL是一种更高效、灵活的API设计方式，核心是客户端按需精确请求数据，解决REST的过度和不足获取问题。它通过单一端点和强类型Schema，支持声明式查询、变动（Mutation）修改数据、订阅（Subscription）实现实时通信，提升前后端协作与开发效率，适合复杂、多变的前端需求场景。

文章 · 前端 | 3天前 | 366浏览收藏
CSS文字横向排列技巧全解析

答案：实现CSS文字横向排列需根据场景选择方法。若为多个独立文字块并排，推荐使用Flexbox，通过display:flex实现灵活对齐与响应式布局；也可用display:inline-block，但需处理元素间空白间隙；若仅控制文本在容器内的对齐方式，使用text-align即可；对于复杂二维布局，可选用CSSGrid。结合响应式设计时，可通过媒体查询切换布局方向或使用flex-wrap实现自动换行，确保不同屏幕下的良好显示效果。

文章 · 前端 | 14小时前 | 响应式设计 FLEXBOX inline-block text-align CSS文字横向排列 366浏览收藏
JavaScript随机数方法详解：Math.random()使用教程

<p>Math对象的常见属性和方法包括：1.Math.PI（圆周率）和Math.E（自然常数）；2.Math.abs(x)返回绝对值；3.Math.ceil(x)向上取整；4.Math.floor(x)向下取整；5.Math.round(x)四舍五入；6.Math.max()和Math.min()分别获取最大值和最小值；7.Math.pow(x,y)计算x的y次幂；8.Math.sqrt(x)求平方根；9.Math.random()生成0到1之间的伪随机数；生成指定范围的随机整数需使用公式Ma

文章 · 前端 | 4星期前 | 生成随机数常用方法伪随机数 Math.random() Math对象 365浏览收藏
HTML5WebComponents详解：自定义元素教程

WebComponents是一套浏览器原生的技术规范，用于创建可复用、封装良好的自定义HTML标签。它由三个核心规范组成：1.CustomElements（自定义元素），允许开发者定义新的HTML标签并赋予其行为和生命周期回调；2.ShadowDOM（影子DOM），提供独立的DOM子树与样式隔离，避免全局污染；3.HTMLTemplates（HTML模板），通过<template>和<slot>标签实现声明式UI结构与内容分发。使用WebComponents时，需创建继承HTMLE

文章 · 前端 | 4星期前 | 365浏览收藏
100vh是什么意思？CSS中vh单位详解

100vh在CSS中代表视口高度的100%，常用于创建全屏布局和确保元素高度与视口一致。100vh适应浏览器窗口大小变化，适用于响应式设计，但需注意移动设备上的视口计算问题。

文章 · 前端 | 3星期前 | 365浏览收藏
异步数据同步方法与实用技巧

异步函数的数据一致性问题主要通过五种方案解决：1.拥抱不可变性，数据创建后不能修改，仅生成新版本，如JavaScript的Redux；2.使用同步原语如锁、互斥量控制共享资源访问；3.采用乐观锁与版本控制，在写入前检查版本号以避免冲突；4.利用消息队列与事件溯源按顺序处理修改事件；5.应用原子操作与事务确保操作全成功或全失败。此外还涉及数据库事务、分布式锁、最终一致性、CQRS和Sagas等模式。选择策略时需结合业务需求、系统架构、性能要求及团队能力综合判断。

文章 · 前端 | 3星期前 | 365浏览收藏
BOM如何识别浏览器类型和版本？

要检测浏览器类型和版本，可通过解析navigator.userAgent字符串实现，但该方法存在不可靠、易伪造、维护成本高等问题；更推荐使用特性检测（如'serviceWorker'innavigator）、CSS.supports()、渐进增强等现代方法来判断功能支持情况，而非依赖浏览器类型；若必须获取浏览器信息，可使用较新的userAgentDataAPI，但其普及度仍有限。

文章 · 前端 | 3星期前 | 365浏览收藏

1 182 183 184 500

查看更多

课程推荐

前端进阶之JavaScript设计模式

设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。

542次学习
GO语言核心编程课程

本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。

511次学习
简单聊聊mysql8与网络通信

如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让

499次学习
JavaScript正则表达式基础与实战

在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。

487次学习
从零制作响应式网站—Grid布局

本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。

484次学习
Golang深入理解GPM模型

Golang深入理解GPM调度器模型及全场景分析，希望您看完这套视频有所收获；包括调度器的由来和分析、GMP模型简介、以及11个场景总结。

474次学习

查看更多

AI推荐

千音漫语

千音漫语，北京熠声科技倾力打造的智能声音创作助手，提供AI配音、音视频翻译、语音识别、声音克隆等强大功能，助力有声书制作、视频创作、教育培训等领域，官网：https://qianyin123.com

523次使用
MiniWork

MiniWork是一款智能高效的AI工具平台，专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具，提供精准智能解决方案，让复杂工作简单高效。

486次使用
NoCode

NoCode (nocode.cn)是领先的无代码开发平台，通过拖放、AI对话等简单操作，助您快速创建各类应用、网站与管理系统。无需编程知识，轻松实现个人生活、商业经营、企业管理多场景需求，大幅降低开发门槛，高效低成本。

512次使用
达医智影

达医智影，阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”，仅一次CT扫描即可高效识别多种癌症、急症及慢病，为疾病早期发现提供智能、精准的AI影像早筛解决方案。

532次使用
智慧芽Eureka

智慧芽Eureka，专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景，通过专家级AI Agent精准执行任务，智能化工作流解放70%生产力，让您专注核心创新。

514次使用