鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

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

全部课程厂商认证 IT技术 24年11月软考 PMP项目管理免费题库

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

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

账号设置退出

前端

2.7w内容

关注

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

文章博文帖子课程

共 713 条

JavaScript 剪贴板 Clipboard 的那些事儿！

减轻阅读负担，启发创作心智，轻松学习 JavaScript 技巧，日拱一卒，jym，冲~本篇带来 —— JavaScript 剪贴板 Clipboard 的那些事儿！复制粘贴就是互联网最伟大的发明，无论是使用快捷键 ctrl c 、ctrl v，还是鼠标选中右键复制再粘贴，Copy 操作都是非常简单的。然而要注意的是，你的剪贴板 Clipboard 或许在被有些软件无时无刻的监听着，有时候在知乎上

2022-09-09 11:43:39

html 剪贴板数据

#yyds干货盘点#常见的JavaScript内存错误

JavaScript 不提供任何内存管理操作。相反，内存由 JavaScript VM 通过内存回收过程管理，该过程称为垃圾收集。既然我们不能强制的垃圾回收，那我们怎么知道它能正常工作？我们对它又了解多少呢？脚本执行在此过程中暂停它为不可访问的资源释放内存它是不确定的它不会一次检查整个内存，而是在多个周期中运行它是不可预测的，但它会在必要时执行这是否意味着无需担心资源和内存分配问题?当然不是。如

2022-09-08 22:22:50

内存泄漏垃圾收集 javascript

Node.js的多版本管理工具之nvm

nvm是Node.js版本管理的实用程序，通常有些项目必须依赖不同版的 NodeJS 运行环境，此时nvm应运而生，用于管理node的版本以及能很方便的进行node版本的切换。

2022-09-06 14:27:42

node.js javascript nvm

[教你做小游戏] 滑动选中！PC端+移动端适配！完美用户体验！斗地主手牌交互示范

如何让你的网页交互同时支持PC端DragEvent和移动端TouchEvent？里面有诸多难点和坑点，本文教你如何实现多端体验都很完美的滑动选中！

2022-09-05 07:13:49

前端 JavaScript js

[Go WebSocket] 你的第一个Go WebSocket服务: echo server

如果你想实现WebSocket，基于压测数据，强烈建议你用Go！本文手把手教你实现一个echo服务，很适合用于新手入门！每一行代码都有详细注释。

2022-09-02 07:23:26

后端 JavaScript js

开箱即用，这些 Vue3 后台管理系统模板绝对让你爽歪歪！

原文链接：Vue3 后台管理系统模板推荐。之前写了一篇关于 Vue2 的后台管理系统模板的推荐，Vue3 在今年2月份已成为新的默认版本，本文收集了一些 Vue3 的后台管理系统模板，分享给在座的仌。还是老规矩，按照 Github 星标数量来依次介绍。

2022-09-02 01:06:53

typescript vue3 管理后台模板

[JS入门到进阶] 手写解析uin8数组的工具：解析二进制字节，太快太方便了！

我常常需要处理二进制数据，他们通常用uin8数组来表示。我写了个工具，可以便捷的把uint8数组转换为二进制、十进制、十六进制、ASCII、整数。真的很方便！

2022-08-31 07:17:14

前端 JavaScript js

这些前端新技术你很难再忽视了 —— pnpm

?What什么是 pnpm？答：简单理解 pnpm 就是 npm、yarn 的同类竞争对手，是一款现代包管理器。?Why那为什么要选 pnpm ，而不是 npm 或 yarn 呢？给出理由答：我不但能给出理由，还能给出 3 大点！节省磁盘空间当使用 npm 或 Yarn 时，如果你有 100 个项目，并且所有项目都有一个相同的依赖包，那么，你在硬盘上就需要保存 100 份该相同依赖包的副本。然而

2022-08-30 09:30:16

ios 依赖包 json

[JS入门到进阶] 手写裁剪图片的工具，并部署。一键裁剪51CTO文章封面

裁剪图片，一个常用功能！但是无需下载APP、且安全、方便的工具还真不好找！今天，我们前端开发者用基础JS API手写一个裁剪图片工具！实现一键自动化裁剪！

2022-08-30 07:17:38

前端 JavaScript js

[JS入门到进阶] 手写解析URL参数的工具，并部署。用起来又快又爽！

工作中，要根据URL排查问题，需要解析它的参数才能去前端日志搜索；而我面试字节跳动、阿里巴巴时，都遇到了面试题：手写URL解析。所以，一起来手写实现解析URL的工具并部署吧！

2022-08-29 18:13:12

前端 JavaScript js

这些前端新技术你很难再忽视了 —— Tauri

新系列《这些前端新技术你很难再忽视了》，包括：SolidJS、Svelte、Tauri、Bun、Schema等。每一个都引领前端技术演变趋势，很有必要了解。咱们将采用 5W1H 分析法，即 What（何事）、Why（何因）、Where（何地）、When（何时）、何人（Who）、How（何法）6 个维度来解析这些“新玩意儿”。本篇带来 —— Tauri，新一代构建跨平台的快速、安全、前端隔离应用。闲

2022-08-27 15:39:57

javascript vue.js 跨平台

React中路由中的redux和redux拓展

路由中使用redux在路由中使用redux只需要两步第一步在路由策略组件中（如HashRouter），渲染Route组件，并在该Route路由规则组件中，引入connect方法处理后的应用程序组件第二步在Provider组件中，渲染路由策略组件（如HashRouter）。注意：路由规则渲染组件的时候，路由规则组件只负责向组件传递路由相关的数据，其他的数据（如store数据）是不会传递的所以Ro

2022-08-26 15:34:03

数据 ide 中间件

这些前端新技术你很难再忽视了 —— Svelte

新系列《这些前端新技术你很难再忽视了》，包括：SolidJS、Svelte、Tauri、Bun、Schema等。每一个都引领前端技术演变趋势，很有必要了解。咱们将采用 5W1H 分析法，即 What（何事）、Why（何因）、Where（何地）、When（何时）、何人（Who）、How（何法）6 个维度来解析这些“新玩意儿”。本篇带来 —— Svelte，或许很多工友已经很熟悉了，还不认识的工友赶快

2022-08-26 09:41:12

html javascript 数据

React中详解redux

reduxredux严格按照flux思想实现的一套框架，实现了单一数据流向。组成部分redux由四部分组成action 组件发布的消息store 存储消息的reducers 捕获action，处理数据的方法view 组件视图了通信流程一个组件发布actionaction通过store被reducers捕获reducers根据消息的类型处理数据reducers将新的数据存储在store中store将

2022-08-25 13:10:23

数据中间件函数式编程

这些前端新技术你很难再忽视了 —— SolidJS

新系列《这些前端新技术你很难再忽视了》，包括：SolidJS、Svelte、Tauri、Bun、Schema等。每一个都引领前端技术演变趋势，很有必要了解。咱们将采用 5W1H 分析法，即 What（何事）、Why（何因）、Where（何地）、When（何时）、何人（Who）、How（何法）6 个维度来解析这些“新玩意儿”。闲话少说，冲了~点赞收藏关注，今晚一夜暴富 ????What什么是 Sol

2022-08-25 09:18:38

代码风格实时更新预编译

《合成大西瓜》重制版！（联机版在做了）

我用Vite、物理引擎box2d、渲染库pixi.js重制了《合成大西瓜》！代码开源，手把手保姆级别教学！我还用React和WebSocket实现了《合成大西瓜》联机版！

2022-08-25 07:09:04

前端 JavaScript js

《CSS揭秘》读书笔记-条纹背景(一)

背景知识颜色渐变设置：background: linear-gradient(direction, color-stop1, color-stop2, ...);指定背景图片大小：background-size: length|percentage|cover|contain;难题在网页设计和其他传统媒介中，各种尺寸、颜色、角度的条纹图案在视觉设计中无处不在。想要在网页中实现条纹图案，通常我们的方

2022-08-24 17:25:01

css 背景图视觉设计

React中Flux与redux

混合react提供了组件的目的是为了复用虚拟DOM，所以react提供了混合的技术是为了复用组件的功能在ES5中，我们可以通过mixins使用，继承对象中的属性和方法但是ES6中，提供了extends关键字实现了继承，因此就移除了mixins，所以我们可以通过extends实现混合的继承。分成两步第一步定义混合类，继承组件基类第二步组件类，继承混合类这样组件类，通过混合类就继承了组件基类之所以

2022-08-24 15:29:15

数据 css 传递数据

[教你做小游戏] 用86行代码写一个联机五子棋WebSocket后端

如何做一个联机对战的五子棋？这需要个后端服务，我手把手带你编写一下联机五子棋的WebSocket后端代码，只需要86行代码噢。快来学！

2022-08-23 19:20:59

前端 JavaScript js

#yyds干货盘点#vue.config.js 的完整配置

今天分享一下，我们项目当中的一些webpack配置，希望能给大家有所启发；只要配置多了，你就会发现其实所有的配置的都是相似的，尤其像插件的配置，都是十分相似的。我们现在开始进入今天的主题啦~~1 介绍之前，我有提到过，当然大家肯定也都知道，Vue3.0不在有webpack.config.js的配置；但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整webpack

2022-08-21 17:33:08

css github html

那些你不知道的 CSS 自定义形状网格布局

关于那些你不知道的CSS自定义网格布局，基于 clip-path和mask完成六边形蜂窝，菱形，三角形，拼图等风格布局，快来看看吧

2022-08-19 09:39:40

css 布局 clip-path

Review 实战经典：2 种封装风格，你偏爱哪种？

?背景交代一直想做一个调研，到底有多少比例的 web 前端工友工作内容以开发后台管理系统为主。本瓜虽然以前也做过小程序项目、H5项目，但现实仍是以开发后台管理系统为主，是个不折不扣的“后管前端er”。大部分 web 前端工友应该也相似吧，这或许是由市场需求决定的。所以大家在后台管理系统项目中遇到的很多问题也都是相似的，代码很值得 review，本篇带来一例（真实）~闲言少叙，开冲！！ヾ(◍°∇

2022-08-17 20:50:09

复用封装字段

CSS中的文字美化与装饰属性

text-shadowtext-shadow是文字阴影，不支持inset关键字，也就是text-shadow只有外阴影，没有内阴影，不支持阴影扩展，最多支持3个数值，分别表示水平偏移、垂直偏移和模糊大小。// 右方、下方偏移2px，模糊3pxtext-shadow: 2px 2px 3px red;text-stroketext-stroke和text-fill-color

2022-08-15 09:56:46

sed ide 属性值

RxJS实现“搜索”功能

闲言少叙，直接开冲！先用 JS 原生写一个搜索功能：<input id="text"></input><script> var text = document.querySelector('#text'); text.addEventListener('keyup', (e) =>{ var searchText = e.targ

2022-08-14 16:14:18

搜索事件流 ajax

你不知道的CSS---position小技巧

众所周时"position:sticky;"是粘性布局，相当于sticky与fixed的组合。但他的细节和妙用，未必人人皆知。所以记录下我这一周的学习总结，供大家参考使用。回顾positionvaluesposition中目前有五个值分别是static、relative、absolute、fixed、sticky。使用场景分别如下：static:此值为默认值，元素仍然隶属于文档流，此时不受left

2022-08-13 14:47:33

文档流块级元素使用场景

“工厂、构造、原型” 设计模式

我们可以明显的感受到：JS 要实现面向对象（继承的能力），离不开这 3 种设计模式；原型链 + 构造函数 = 组合继承本篇带来一个新的继承方式：寄生继承，它由工厂模式和构造函数模式组成，即工厂+构造函数 = 寄生继承正文正是由于：原型链继承和构造函数继承的 “毛病”原型链继承：所有继承的属性和方法都会在对象实例间共享，无法做到实例私有。构造函数继承：子类不能访问父类原型上的方法。组合继承应运而生：

2022-08-12 10:09:29

构造函数子类父类

使用脚手架快速开发 React组件 npm包 (基于TSDX)

默认支持CommonJS、UMD、ES Module打包方式。（要开发通用的NPM包，这些的支持是必要的，不然你还得自己搞）自带开发环境、编译脚本。开发NPM包你必须要解决的一个问题：开发时有地方调试，发布时再build & pub（如果每次调试前都要build，…

2022-08-11 23:56:48

html JavaScript CSS

class 继承的重点

在 class 出现之前，JavaScript 实现继承是件麻烦事，构造函数继承有加上原型上的函数不能复用的问题；原型链继承又存在引用值属性的修改不独立的问题；组合继承又存在两次调用构造函数的问题，寄生组合继承，写起来又太麻烦了，总之，在 class 出现前，JavaScipt 实现继承真是件麻烦事儿。然而，class 的出现真的改变这一现状了吗？不如往下看。写法与函数类型相似，定义类也有两种主要

2022-08-11 10:10:21

构造函数原型链赋值

CSS中3D变换和gradient效果

radial-gradientradial-gradient()是径向渐变，指的是一个中心点向四周扩撒的渐变效果，其中包括波的扩散和光的扩散中都有径向渐变的特征。css中我们使用radial-gradient()函数表示径向渐变，语法比较复杂，所以我们可以从简单的径向渐变开始看：.warpper{ width: 250px; heigth: 125px; background-i

2022-08-10 11:20:37

一文解析Pinia和Vuex，带你全面理解这两个Vue状态管理模式

theme: smartbluePinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5，只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia。本文将通过Vue3的形式对两者的不同实现方式进行对比，让你在以后工作中无论使用到Pinia还是Vuex的时候都能够游刃有余。既然我们要对比两者的实现方式，那么我们肯定要先在我们的Vue3项目中引入这两个状态管理器（实际

2022-08-10 09:45:28

10 个 Reduce 常用“奇技淫巧”

不知道大家平常用 Reduce 多不多，反正本瓜用的不多。但实际上，Reduce 能做的，比我们能想到的要多得多，本篇带来 10 个Reduce 常用场景和技巧，一定有你不知道~冲ヾ(◍°∇°◍)ﾉﾞ累加/累积累加我们可能是最熟悉 Reduce 的一种用法，除此之外，还可以用做累积。// adderconst sum = (...nums) => { return nums.reduce(

2022-08-10 08:56:34

fish 数组 ico

每天一个JavaScript小特效——会魔法的旋转魔方相册

<fontsize=4px写在前面：</font<fontcolor=skyblue星光不问赶路人，时光不误有心人</font本栏将持续更新前端小案例牛牛最近学到了一个神奇的旋转魔方，今天就来分享给大家吧，希望大家能喜欢<fontcolor=orange最后有完整代码链接，请注意查收</font@toc效果图!在这里插入图片描述(https://s2.51cto.com/images/blog/2

2022-08-09 22:13:42

插入图片 3d html

CSS中常用函数和渐变效果

calccalc()函数支持加减乘除四种运算，很多类型都可以使用calc()函数，例如angle、length、frequency、time，percentage、number、integer，因为calc()有很多约束，所以这些类型不一定都可以出现calc()函数。我们在calc()函数中不能使用当前css属性不支持的数据类型。// 下面这

2022-08-09 14:06:23

css 线性渐变颜色值

简化理解：策略设计模式

就在前不久，我们讲了创建对象的 3 种常见设计模式：工厂设计模式、构造函数设计模式、原型设计模式。这 3 种设计模式，真切时刻发生在我们日常编码生活中，蓦然回首，灯火阑珊处。本篇带来另外一种设计模式介绍，你或许天天和它打交道，但是不认识它，它就是“策略模式”。策略模式就像诸葛亮的锦囊，它在代码中是这样体现的：比方说，我们有一个销售活动，它有着不同的销售策略function getPrice(ori

2022-08-09 11:12:50

设计模式策略模式开闭原则

CSS中box-shadow属性和2D变换

box-shadowbox-shadow表示盒阴影，可以给元素设置阴影效果，如果我们设置向下的阴影效果:.wrapper { position: fixed; left: 0; top: 0, bottom: 0, right: 0, background-color: red; box-shadow: 0 3px 5px rgba(0, 0, 0, .3

2022-08-09 09:31:24

十分钟教会你如何使用VitePress搭建及部署个人博客站点

使用VitePress可以让我们快速搭建一个静态博客网站，这篇文章将带领大家搭建一个基于VitePress的静态博客网站并且部署到GitHub Pages(github提供的静态网页服务)快速上手新建目录并初始化(我的目录名为kittydocs)这里我们使用pnpm式，当然yarn，npm都是可以的,如果你没有安装pnpm可以全局安装npm i pnpm -g然后初始化pnpm init安装vit

2022-08-09 08:53:15

想知道Vue3与Vue2的区别?五千字教程助你快速上手Vue3!

从Vue3发布以来，我就一直对其非常感兴趣，就一直想着将其投入公司的生产中，但是开始考虑到很多不确定性就暂时对一些很小的功能进行一些尝试；慢慢的发现组合式Api的形式非常适合开发（个人感觉），尤其是Vue3.2推出了setup语法糖后直呼真香。后面公司的新项目几乎全部采用了Vue3了。使用Vue3开发也将近大半年了，所以写了这篇文章对Vue2和Vue3做了一个对比总结，一是为了对这段时间使用Vue

2022-08-08 12:27:12

简化理解：发布订阅

我们前不久写过发布订阅模式：// 发布者 Publisherclass Pub { constructor() { this.deps = []; } addDep(dep) { this.deps.push(dep); } publish(dep) { this.deps.forEach(item => item ==

2022-08-07 08:47:28

发布订阅实例化观察者模式

理解JavaScript中的“面向对象”

理解JavaScript中的“面向对象”一引子面向对象，是程序开发者再熟悉不过的一个概念。一说到它，你首先会想到的是什么？类？继承？方法与属性？不同技术栈的开发者或许有不同的第一反应。面向对象本身只是一种编程方式，支持面向对象的语言很多，但其实现原理却并不都一样。大多数语言的面向对象特性都是基于“类”来实现的，例如C，ObjectiveC，Java，Python等。在这些语言中，类是面向对象的基础

2022-08-05 17:50:32

javascript 面向对象封装

CSS3实现有趣的动态表情包

前置知识点animationanimation 属性是一个简写属性，用于设置六个动画属性：animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction注释：请始终规定 animation-duration 属性，否则时长为 0，

2022-08-02 10:03:04

css 表情包动画

基于微前端qiankun的多页签缓存方案实践

本文梳理了基于阿里开源微前端框架qiankun，实现多页签及子应用缓存的方案，同时还类比了多个不同方案之间的区别及优劣势，为使用微前端进行多页签开发的同学，提供一些参考。

2022-08-02 09:14:08

微前端 vue qiankun

【原创】Auto.js get和post 案例

<table<tr<tdbgcolor=orange本文所有教程及源码、软件仅为技术研究。不涉及计算机信息系统功能的删除、修改、增加、干扰，更不会影响计算机信息系统的正常运行。不得将代码用于非法用途，如侵立删！</td</tr</tableAuto.jsget和post案例操作环境win10nexus5xAuto.js7.0.4get案例!在这里插入图片描述(://s2.51cto.co

2022-07-31 00:57:42

html 插入图片 javascript

【Harmony OS】【ARK UI】ets使用第三方类库crypto实现加密解密

在我们的日常开发过程中会经常用到加密解密，数字签名，信息加密是前后端开发经常使用的技术。应用场景包括：用户登录，交易，信息通讯等。今天分享一下AES加密解密方法，它是通过第三方类库CryptoJS来实现的 1.DevEcoStudio 新建ets项目，在Terminal命令行界面输入 npm install crypto-js --save 安装完成以后刷新工程会生成node_mod

2022-07-29 16:36:02

十六进制加密解密偏移量

源码分析Sentry用户行为记录实现过程

在日常排查问题过程中，用户的行为操作记录能给到我们很大的参考及排查方向。目前市面上有的平台还不能记录用户的行为记录，Sentry提供了很好的行为记录查询，本文基于源码分析其实现过程。

2022-07-18 15:08:34

前端异常监控监控

#yyds干货盘点#Redux 源码与函数式编程

Redux 属于典型的“百行代码，千行文档”，其中核心代码非常少，但是思想不简单，可以总结为下面两点：全局状态唯一且不可变（Immutable），不可变的意思是当需要修改状态的时候，用一个新的来替换，而不是直接在原数据上做更改：let store = { foo: 1, bar: 2 };// 当需要更新某个状态的时候// 创建一个新的对象，然后把原来的替换掉store = { ...stor

2022-07-14 09:21:23

抛出异常初始状态高阶函数

Qt+ECharts开发笔记（三）：ECharts的柱状图介绍、基础使用和Qt封装Demo

上一篇成功是EChart随着Qt窗口变化而变化，本篇将开始正式介绍柱状图介绍、基础使用，并将其封装一层Qt。本篇的demo实现了隐藏js代码的方式，实现了一个条形图的基本交互方式，即Qt调用js脚本操作html。

2022-07-13 09:41:06

纯CSS实现四种方式文本反差色效果

文字随着界面的交互变化会修改文字的颜色形成反差色，让平平无奇的文字产生了眼前一亮的效果。如果你关注设计和动画效果，这样的效果肯定见过不少，在一些比较注重设计的网站都有类似的交互效果出现。本文将详细解读有哪些方案可以实现文本反差色效果。

2022-07-12 09:28:22

css 动画效果背景颜色

CSS 中 ::before 和 ::after 伪元素的几个实际用途

CSS::before和::after伪元素允许您在任何非替换元素之前和之后插入“内容”。这有效地允许您在网页上显示 HTML 内容中可能不存在的内容。

2022-07-11 09:37:24

伪元素 css 前端

【跟着大佬学JavaScript】之lodash防抖节流合并

【跟着大佬学JavaScript】之lodash防抖节流合并

2022-07-10 01:06:36

等待时间重启句柄

【Java Web】 JS 中的 DOM API

@TOC(目录)文档对象模型是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。一个web页面是一个文档。这个文档可以在浏览器窗口或作为HTML源码显示出来。但

2022-07-08 14:04:27

html DOM 前端开发

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

51CTO技术栈公众号

业务
速览

媒体

51CTO CIOAge HC3i

社区

51CTO博客鸿蒙开发者社区 AI.x社区

教育

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