直播训练营

鸿蒙开发者社区

WOT技术大会

AIGC创新中国行

公众号矩阵

移动端

短视频免费课程课程排行直播课软考学堂

全部课程厂商认证 IT技术 2024年软考 PMP项目管理软考资讯

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO题库小程序

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

账号设置退出

前端

2.4w内容

关注

分享前端领域的前沿热点、技术实战、框架应用和使用案例，为开发者学习前端技术提供参考。

文章博文帖子课程

共 715 条

#yyds干货盘点# 前端歌谣的刷题之路-第一百五十九题-new

前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目请补全JavaScript代码，要求实现对象参数的深拷贝并返回拷贝之后的新对象。注意： 1. 参数对象和参数对象的

2022-11-10 21:10:29

html javascript 构造函数

vue入门知识总结

vue入门 1.插值表达式 {{}} 2.指令 2.1 v-if 、v-else、 v-show、v-else-if v-if：在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，开销较高，在运

2022-11-10 11:38:25

数据事件总线 html

浅谈性能优化之图片压缩、加载和格式选择

原文链接：浅谈性能优化之图片压缩、加载和格式选择(https://fe32.top/articles/we0523bs/)在认识图片优化前，我们先了解下【二进制位数】与【色彩呈现】的关系。二进制位数与色彩在计算机中，一般用二进制数来表示像素。在不同的图片格式中，像素与二进制位数之间对应的关系是不同的。一个像素对应的二进制位数越多，它能表示的颜色种类就丰富，成像效果也就越精致，图片所需的存储空

2022-11-10 11:12:12

服务器懒加载加载

利用snowfall.jquery.js实现满屏爱心表白代码

利用snowfall.jquery.js实现满屏爱心表白代码

2022-11-10 10:38:55

html chrome safari

基于vue-Ant实现图片上传

上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。如何使用Ant-design-vue中的 a-upload 上传组件进行图片或者视频的上传呢？

2022-11-07 08:51:56

图片上传 vue Ant-design

#yyds干货盘点# 前端歌谣的刷题之路-第一百五十一题-三列布局 - 圣杯布局

前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目不像Flexbox或Grid布局可以控制元素显示的次序，圣杯布局是通过浮动元素和外边距属性实现三列布局，但最重要

2022-11-06 15:56:51

vue中封装的常用方法（全部干货）

在我们要经常使用一些javascript工具函数的时候，如果每次用到都得定义或者引入是不是很麻烦，封装好一个全局的吧公共方法十分必要，这将会大大节省工作量，而且收集的多了以后也能用的到！

2022-11-04 09:25:24

时间格式 chrome 数组

【Web开发】Python实现Web图表功能（pyecharts，Flask）

@toc<fontcolor=purpleface=华文行楷size="5""柳丝榆荚自芳菲，不管桃飘与李飞；"1、简介APythonEchartsPlottingLibrary.ApacheEcharts是一个由百度开源的数据可视化，凭借着良好的交互性，精巧的图表设计，得到了众多开发者的认可。而Python是一门富有表达力的语言，很适合用于数据处理。当数据分析遇上数据可视化时，pyecharts

2022-11-04 06:15:17

flask html echarts

从柯里化讲起，一网打尽 JavaScript 重要的高阶函数

前情回顾我们在前篇《✨从历史讲起，JavaScript 基因里写着函数式编程》讲到了 JavaScript 的函数式基因最早可追溯到 1930 年的 lambda 运算，这个时间比第一台计算机诞生的时间都还要早十几年。JavaScript 闭包的概念也来源于 lambda 运算中变量的被绑定关系。因为在 lambda 演算的设定中，参数只能是一个，所以通过柯里化的天才想法来实现接收多个

2022-11-03 08:40:39

缓存 javascript 高阶函数

【Web开发】Python实现Web图表功能（pyecharts入门学习）

@toc<fontcolor=purpleface=华文行楷size="5""柳丝榆荚自芳菲，不管桃飘与李飞；"1、简介APythonEchartsPlottingLibrary.ApacheEcharts是一个由百度开源的数据可视化，凭借着良好的交互性，精巧的图表设计，得到了众多开发者的认可。而Python是一门富有表达力的语言，很适合用于数据处理。当数据分析遇上数据可视化时，pyecharts

2022-11-02 21:43:37

python echarts pyecharts

【原子样式实践】第12篇一次搞定微信开发者工具的原子样式扩展

原子样式虽好，在IDE中使用，有扩展辅助就更好。本文介绍如何开发微信开发者工具的原子样式扩展，支持原子样式的自动生成，支持特色功能组合样式，支持特色功能样式使用统计报告。

2022-11-02 12:04:42

原子CSS 原子样式小程序开发

如何用 JavaScript 编写你的第一个单元测试

测试代码是确保代码稳定的第一步。能做到这一点的最佳方法之一就是使用单元测试，确保应用程序中的每个较小的功能都按应有的方式运行——尤其是当应用程序接收到极端或无效输入，甚至可能有害的输入时。为什么要进行单元测试？进行单元测试有许多不同的方法，一些主要目的是：验证功能：单元测试确保代码做正确的事情并且不做任何不应该做的事情——大多数错误发生在这里。防止代码回归：当我们发现错误时，添加单元测试来检查场景

2022-11-01 08:15:23

单元测试应用程序 javascript

原生拖拽太拉跨了，纯JS自己手写一个拖拽效果，纵享丝滑

前言提到元素拖拽，通常都会先想到用HTML5的拖拽放置(Drag和Drop)来实现，它提供了一套完整的事件机制，看起来似乎是首选的解决方案，但实际却不是那么美好，主要是它的样式太过简陋，无法实现更高级的用户体验：!(https://s2.51cto.com/images/blog/202210/31111017_635f3c99d61825348.png?xossprocess=image/wat

2022-10-31 11:13:54

拖拽 css html

Vue开发历程---音乐播放器的继续

前言前面一篇文章Vue开发历程---音乐播放器，实现了播放音乐，以及基本的布局。但是进度条没有实现同步，本文即介绍进度条的实现。一、效果图二、心路历程1、elementUI 滑块的使用<div class="block" style="margin-top:5px"> <el-slider v-model="value" @change="updateSlideTime

2022-10-31 09:57:43

那些你不知道的炫酷导航交互效果

一个结构层次清晰的导航是网站必不可少的功能之一，它可以帮助用户快速轻松的找到想要的信息，本文整理分享了几款很不错的导航交互效果，希望可以给你的项目添砖加瓦。

2022-10-31 09:36:15

css 前端导航

【Vue】Vuex详解

【前言】本博客系统的讲诉了Vuex的安装、搭建。以及Actions、Mutations、State、Getters的使用，为什么使用mapState、mapGetters以及一些细节的解释Vuex原理讲解编辑Actions：词义是动作行为Mutations:词义是加工、维护State:词义是状态和数据Dispatch：词义是派遣、发出Commit：提交Render: 渲

2022-10-30 16:54:14

【原子样式实践】第10篇原子样式到原子设计的发展使用

在各种知名样式表或者组件库开箱即用的优势下，原子样式依然流行，说明了成品样式（半定制样式）存在升级、变更或者管理的需求，在维护时与发展或者规范形成了冲突。在大粒度上不能较好的解决问题时，势必下钻寻求更好的解决方式。通过页面的 CSS 定义来生成有效的样式，量体裁衣，避免了样式的臃肿或者浪费。那么原子样式的未来在哪里呢？

2022-10-27 17:10:12

原子设计原子样式静态编译

requestVideoFrameCallback() 简单实例

在文章《浏览器视频帧操作方法 requestVideoFrameCallback() 简介》中介绍了基本的使用情况，本文来体验一下其使用过程，后续将增加一些酷炫的实例。点击开始播放视频、暂停视频以读取元数据。在画布上绘制视频帧与实际视频帧速率同步的画面。GITHUB中包含整个代码实例，主要代码如下：<template> <div id="app">

2022-10-26 09:42:39

播放视频 requestVide video

【前端】总结一下前端css样式规范

@TOC(总结一下前端css样式规范)前端样式CSS规范通用规范css//badpaddingbottom:0px;margin:0em;//goodpaddingbottom:0;margin:0;如果CSS可以做到，就不要使用JS，建议并适当缩写值，提高可读性，特殊情况除外“建议并适当”是因为缩写总是会包含一系列的值，而有时候我们并不希望设置某一值，反而造成了麻烦，那么这时候你可以不缩写，而是

2022-10-24 15:20:15

css 选择器 ide

JavaScript 设计模式之策略模式

学习设计模式的目的是：为了代码可重用性、让代码更容易被他人理解、保证代码可靠性。设计模式使代码编写真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样。

2022-10-24 10:37:02

设计模式策略模式代码设计

vue中工作总结-持续更新

2022-10-21 16:44:13

数据 ios 深拷贝

【Web开发】Python实现Web服务器（Flask测试后台框架模板）

Flask是一个轻量级的可定制框架，使用Python语言编写，较其他同类型框架更为灵活、轻便、安全且容易上手。它可以很好地结合MVC模式进行开发，开发人员分工合作，小型团队在短时间内就可以完成功能丰富的中小型网站或Web服务的实现。另外，Flask还有很强的定制性，用户可以根据自己的需求来添加相应的功能，在保持核心功能简单的同时实现功能的丰富与扩展，其强大的插件库可以让用户实现个性化的网站定制，开发出功能强大的网站。

2022-10-21 06:46:01

flask python js

【Web开发】Python实现Web服务器（Flask测试统计图表）

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

2022-10-21 06:45:19

#yyds干货盘点#前端图片懒加载

前端性能优化里有图片的加载，有懒加载和预加载。那么什么是懒加载呢？懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。有的网站图片很多，而如果一上来就加载所有的图片，会导致网页加载很慢图片懒加载：等图片正式进入到可视区中时，才加载对应的图片，否则不请求图片预加载指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。通过预加载能

2022-10-19 16:55:48

懒加载加载预加载

【Vue】图片拉近、全屏背景实战经验总结

1 图片拉近缘起是看到了下面的图片，我发现当鼠标悬浮的时候，发现他是可以拉近的，也就是图片的宽高不变，但是图片被放大了起初我以为是有一个这样的方法，可以实现这个操作，但是查找了很多网站都没有找到。后来自己慢慢的摸索，才了解了其中的奥妙子盒子和父盒子的大小一样大，为了能体现出父子盒子，我让父盒子略大，并未黄色，子盒子为白色当鼠标悬浮到该子盒子的时候，子盒子被放大（scale），如下图同时，我设置子盒

2022-10-18 08:16:27

背景图片 html 图像缩放

提高编程效率的5大VS Code插件

前言作为一名开发人员，大家会一直寻找可以帮助改进日常工作流程的解决方案，VS Code 市场中就有很多优秀的扩展插件程序。正文一、GitLiveGitLive 是一个出色的扩展程序，它可以实时监控 IDE 内置 Git 的情况，例如团队成员的在线状态和即时合并冲突检测。团队成员的在线状态： IDE 插件添加了一个团队侧边栏/工具窗口，可以在其中查看团队中的谁在线、他们正在处理的问题和分支

2022-10-17 23:15:47

音视频 ide git

【Vue】Axios详解

@[toc]1 Axios简介1.1 什么是Axios?Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。1.2 Axios的

2022-10-17 13:07:57

vue 前端 axios

【Vue】悬浮窗和聚焦登录组件经验总结

前言本文整理了实现悬浮窗以及聚焦登录组件的功能。为的是方便大家和自己的学习。省流：可以只看1.2 和 2的代码即可1 悬浮窗现在各大流行视频网站的平台都在使用这种悬浮显示的效果，我就想这种东西是怎样搞出来的呢！几经尝试，终于找到了一个实现方式，记录一下自己的开发历程，方便以后的使用，也为了各C友提供便利。1.1 使用display尝试用display实现，利用display:none和blo

2022-10-17 13:05:58

ide css 悬浮窗

玩转BUI系列一--动画控制交互篇：bui.animate

常规的动画（上下左右旋转放大缩小）做法一般采用animate.css 控制样式的增加就可以，这种做法比较方便，但不好做一些复杂交互动画，BUI的animate利用通过transform 进行扩展，支持属性动画，延迟动画，特别适合做一些定制性的交互动画，可以快速解决H5营销类动画。

2022-10-12 15:26:05

animate 动画 bui

【GIS开发】OpenLayers入门学习（JavaScript库）

OpenLayers是一个高性能、功能丰富的库，用于在 Web 上创建交互式地图。它可以在任何网页上显示从任何来源加载的地图瓦片、矢量数据和标记。OpenLayers 的开发旨在进一步使用各种地理信息。它是完全免费的开源 JavaScript，在BSD 2-Clause License下发布。

2022-10-11 06:49:18

javascript html 大数据

【Web开发】Python实现Web服务器（Sanic）

@toc1、简介https://sanic.dev/zh/(https://sanic.dev/zh/)https://github.com/sanicorg/sanic(https://github.com/sanicorg/sanic)Sanic是Python3.7+Web服务器和Web框架，旨在提高性能。它允许使用Python3.5中添加的async/await语法，这使得您的代码有效的避免

2022-10-09 06:07:39

python 前端 web开发

Vue最佳实践和实用技巧

1.props限制和透传内自定义限制props: { size: { // 自定义验证函数 validator: (val) => { return ["small", "medium", "large"].includes(val); }, }}复制代码这个验证函数接受一个 prop值，验证并返回 true

2022-10-08 15:05:29

自定义封装数据

#yyds干货盘点# 前端歌谣的刷题之路-第一百零九题-双向数据绑定

前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网微信公众号前端小歌谣题目请补全JavaScript代码，要求如下： 1. 监听对象属性的变化 2. 当"person"对象属性发生变化时，页面中与该属性

2022-10-08 08:22:23

属性值 html 数据同步

【Web开发】Python实现Web服务器（web2py）

@toc1、简介官方地址：http://www.web2py.com(http://www.web2py.com)免费开源全栈框架，快速开发，可扩展，安全和可移植数据库驱动的基于Web的应用程序。编写和编程Python（版本3和2.7）。!在这里插入图片描述(https://s2.51cto.com/images/blog/202210/08060930_6340a39a3a7b398663.pn

2022-10-08 06:10:24

html web开发 web服务器

vue2面试常见面试题收集

## Virtual DOM的理解一、什么是vdom？ ``` Virtual DOM 用JS模拟DOM结构 ``` 二、为何要用vdom？ ``` 1. DOM操作非常非常“rang贵”，将DOM对比操作放在JS层，提高效率 2. DOM结构的对比，放在JS层来做（图灵...

2022-10-07 17:59:36

vue 面试题 vuex

教你开发一个JS代码加密工具

本文，教你开发一个JS代码加密工具。工具可实现：把正常的JS代码，转化为加密代码，并且加密后的JS代码能直接运行。

2022-10-07 15:54:56

js代码 js加密 js混淆

ES6+--》熟知JS中的async函数

async函数async函数的返回值为 promise 对象，promise对象的结果由async函数执行的返回值决定。async函数能使得异步操作变得更加方便，简而言之就是 Generator 的语法糖。定义async函数，特点是即便函数内部返回结果不是promise对象，调用函数其最后的返回结果依然是promise对象，代码如下：如果返回的结果不是 Promise 对象的情况下：<scr

2022-10-07 01:18:07

ajax 异步任务 JavaScript

【Web开发】Ubuntu系统手动搭建Node.js环境

Ubuntu是一个以桌面应用为主的Linux操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu"一词。

2022-10-06 08:42:40

linux nodejs 前端

【Web开发】Node.js实现Web服务器（express模块）

@toc1、简介1.1node.js官网地址：https://nodejs.org/(https://nodejs.org/)Node.js是一个开源和跨平台的JavaScript运行时环境。它是几乎任何类型的项目的流行工具！Node.js在浏览器之外运行GoogleChrome的核心V8JavaScript引擎。这使得Node.js非常高效。!在这里插入图片描述(https://s2.51cto

2022-10-06 08:38:09

nodejs 前端 web服务器

【nodejs开发】nodejs实现socket网络通信

@toc(本节内容如下：)1、简介在NodeJS中有三种socket：1.TCP，2.UDP，3.Unix域套接字。UDP/datagramsocketsjavascriptClass:dgram.SocketEvent:'close'Event:'connect'Event:'error'Event:'listening'Event:'message'socket.addMembership(m

2022-10-05 07:51:25

javascript nodejs socket

【CSS】能全部通关？那你这些知识点都巩固了（附上游戏攻略...）

欢度国庆，在游戏的同时，也能巩固知识点，一举两得！快来通关...

2022-10-01 11:45:44

css html 选择器

React+hook+ts+ant design封装一个input和select搜索的组件

前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷微信公众号前端小歌谣需求分析首先我们需要实现一个带有搜索功能的搜索框本次只实现两种框的搜索功能一种input 一种select功能思维第一步初始版本先写出一个in

2022-09-29 15:12:54

搜索 html 重置

ES6--》了解并应用迭代器与生成器

迭代器迭代器(Iterator)也叫遍历器，是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作；JS中原有表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6又新增了 Map 和 Set，这样就有了四种数据集合。如果用户组合使用四种不同的数据结构，比如数组的成员是对象或者对象的成员是Map，这样就需要一种统

2022-09-27 11:10:47

生成器数据结构代码块

基于Ant Design Pro开发管理系统的前端部分

一、概述Ant Design Pro是一种由阿里蚂蚁团队开发的中台前端设计解决方案，很适合作为后台管理系统的前端框架。框架提供了齐全的路由菜单、布局、UI、组件等开发管理系统前端需要的功能。也支持开发自定义组件来满足一些个性化需求。基础版的Ant Design Pro是免费的如果需求比较复杂也有付费的企业版Ant Design Pro官网我们今天要讲的是免费的基础班，demo预览如下图：二

2022-09-26 13:54:23

系统管理 AntDesignPr nodejs

C4D搭配椭圆动态及闪动控制动画效果

前言上一章讲述了利用 C4D 图切割制作闪光效果，本章将讲述如何在上一章描述的效果基础上，加入椭圆动态效果以及闪动控制。如下图所示，椭圆运动主要分成两部分：外圈运动、内圈运动。其中内圈运动看似一个椭圆，实际上是由两个椭圆不同角度组成的。红色指向的是运动的小球，绿箭头是小球运动的方向。下面将讲述如何展示圆球运动，主要是运用 canvas 画布制作，探测小球的运动轨迹，以及到点则控制对应块的闪烁。一、

2022-09-22 08:50:31

CAD 动画动态运动

数组Array.prototype原型方法学习-30分钟学完数组全部操作

之前总是使用数组的一些常用的方法，例如：push,slice,shift，unshift,pop...，根本没去观察数组原型上自带的方法都有哪些，今天无意中打印了一个空Array数组，发现其原型Array下面有将近35个方法和一个length属性。

2022-09-15 18:24:44

数组 array 操作数组

夯实基础，数据库的第1、2、3范式

承接前一篇，本篇来探讨下数据库的范式问题。数据库范式简单来说，数据库范式可以避免数据冗余，减少数据库的存储空间，并且减轻维护数据完整性的成本。它是关系数据库核心的技术之一。关系数据库有六种范式，各种范式的层次呈递增关系，越高的范式数据库冗余越小。这六种范式分别是：第一范式（1NF）、第二范式（2NF）、第三范式（3NF）、巴斯-科德范式（BCNF）、第四范式(4NF）和第五范式（5NF，又称完美范

2022-09-15 09:09:29

主键三范式第一范式

夯实基础，不能忽视的“数据库”

如果我们把数据比作“米”，数据库就是“米仓”。没错，从标准定义来讲，数据库就是按照数据结构来组织，存储和管理数据的仓库。数据库的设计初衷？就像米多了要修建米仓一样，在操作系统出现之后，随着计算机应用范围的扩大、需要处理的数据迅速膨胀。起初，数据与程序一样，以简单的文件作为主要存储形式。以这种方式组织的数据在逻辑上更简单，但可扩展性差，访问这种数据的程序需要了解数据的具体组织格式。当系统数据量大或者

2022-09-14 09:13:56

数据库数据关系型数据库

#yyds干货盘点#组件化漫谈

今天前端生态里面，React、Angular和Vue三分天下。虽然这三个框架的定位各有不同，但是它们有一个核心的共同点，那就是提供了组件化的能力。W3C也有Web Component的相关草案，也是为了提供组件化能力。今天我们就来聊聊组件化是什么，以及它为什么这么重要。其实组件化思想是一种前端技术非常自然的延伸，如果你使用过HTML，相信你一定

2022-09-13 22:08:07

html 组件化自定义

基于threejs中秋佳节之际带你遨游星空?

海上生明月，天涯共此时。又是一年中秋时，回想上一次赏月已是那遥远的童年时光，忙碌使我们忘却了假日应有的舒缓。今天在这假期即将开始的时候，让我们用代码来过个节。今天的主题是基于threejs画出月球环绕地球运动的效果，并增加飞跃星空的感觉，如封面图所示。球体绘制首先绘制出地球和月球，基于SphereBufferGeometry类绘制三维球体，参数如下：参数描述radius该属性定义球体的半径，默认值

2022-09-09 18:16:03

javascript 默认值最小值

上一页 1 2 3 4 5 6 ··· 15 下一页

51CTO技术栈公众号

业务
速览

媒体

51CTO CIOAge HC3i

社区

51CTO博客鸿蒙开发者社区

教育

51CTO学堂精培企业培训 CTO训练营