直播训练营

鸿蒙开发者社区

WOT技术大会

AIGC创新中国行

公众号矩阵

移动端

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

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

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

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO题库小程序

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

账号设置退出

前端

2.4w内容

关注

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

文章博文帖子课程

共 715 条

Vue 灰度发布新功能的那些事

介绍在Vue中3种页面级别前端灰度新功能的方案，看看有你熟悉的方案吗

2022-07-07 09:34:02

灰度 vue JavaScript

【Java Web】前端三剑客之 CSS

@TOC(目录)CSSCSS的语法规则非常简单！每一个CSS语句包含两个部分：选择器+应用属性。内部样式表1.内部样式表css<stylep{/设置字体颜色/color:red;/设置字体大小/fontsize:30px;}</style<phello</p上面的代码，就是最典型的例子。其中style标签的内容，就是一个CSS的代码。!image20220627160305131(https://

2022-07-06 12:12:59

css html 前端

CSS 基于文字的图片马赛克你见过吗

基于filter和mix-blend-mode实现文字图片马赛克效果，你不来看看么

2022-07-06 09:30:23

css 混合模式滤镜

【JavaWeb】前端三剑客之 HTML

@TOC(目录)1.什么是HTMLHTML是用来描述网页的一种语言。HTML是一种在Web上使用的通用标记语言。HTML允许你的格式化文本,添加图片,创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。1.HTML指的是超文本标记语言:HyperTextMarkupLanguage2.HTML不是一种编程语言，而是一种标记语言3.标记语言是一套标记标签(markupta

2022-07-05 14:06:49

html Web 前端

CSS动画篇之炫酷时钟之时钟墙

通过CSS制作的时钟大家肯定看到的多了，但是像下面这样的时钟是不是很少见，整个时钟是有很多个小的时钟组合而成，每秒通过多个时钟的动画来切换时间，不得不说这个设计是非常的炫酷且有特色。

2022-07-05 09:21:11

css javascript 动画

vue+tauri开发小巧的跨OS桌面应用-股票体检

最近打算写一个用于股票体检的软件，比如股权质押比过高的股票不合格，ROE小于10的股票不合格，PE大于80的股票不合格等等等等，就像给人做体检一样给股票做个体检。也实现了一些按照技术指标、基本面自动选股，实盘买卖点回测功能等等等等。我用vue开发了这样一个软件，目前只有我自己在浏览器上使用，许多小伙伴和我说:“你把它做成网站呗”。先不说别的，这种网站只是备案就够我喝一壶的！所以我就想做成一个PC端

2022-07-05 06:21:56

桌面应用 webview 安装包

CSS 实现炫酷文本过渡动画

纯CSS实现炫酷文本切换过渡动画，附在线地址预览

2022-07-01 11:53:14

Fiori 应用通过 Adaptation Project 的增强方式分享

笔者曾经在SAP成都研究院CRMFiori开发团队工作时，担任了德国一个著名的灯具制造商客户的CRMFiori项目的devangel.当时客户提出了若干对CRMFiori标准应用的增强需求，总的来说分为前台FioriUI界面的增强(比如增添新的自定义字段)以及后台逻辑的增强。当时还处于Fiori1.0时代，还没有直接在浏览器上使用S/4HANA的KeyUsertool进行新建字段的办法，因此对于前

2022-07-01 10:36:03

应用程序 SAP UI5 Fiori

夏天来啦，用纯CSS实现水果解解馋吧

不知不觉地又是一年夏天来临了，面对烈日炎炎，夏天要吃的水果那是必不可少，今天就用CSS来给大家带来一个水果拼盘，提前给大家解解暑~

2022-06-29 11:01:05

css css3 前端

javaScript原型和原型链

前言在了解原型和原型链之前，我们先了解一部分概念，constructor，prototype，__proto__。constructor在之前判断数据类型的文章:javaScript常见数据类型检查校验(http://lewyon.xyz/checkType.html)有提到过关于构造函数的属性constructorconstructor的是返回创建实例对象的构造函数的引用，这个属性的值是对函数本

2022-06-29 09:37:31

构造函数原型链原型对象

vue的接口封装和状态管理

1.config index.js下面的跨域代理设置： proxyTable: { '/api': { target: 'http://xxxx', //要访问的后端接口 changeOrigin: true, pathRewrite: { '^/api': 'http://xxx' } }, },

2022-06-28 23:44:25

ios 拦截器封装

前端性能优化之请求优化

前端页面使用场景多变，受外界因素影响较多，网络环境，用户设备，浏览器内核等都会影响性能体验。所以针对每一个请求都要想想是否有优化的空间，是否有省去的可能，让每发起一个请求都尽其所能，达到请求的极致。

2022-06-28 09:41:44

缓存请求性能优化

让你事半功倍的JS utils工具函数

分享一篇积累和收集了很久的JS utils工具函数，文章代码量较多，建议收藏起来慢慢看，当哪一天需要用到的时候，打开你尘封已久的收藏夹，相信能让你的业务代码开发事半功倍。

2022-06-27 18:33:27

JavaScript utils 前端

JS高级程序设计第 4 版：迭代器的学习

JavaScript 高级程序设计第 4 版（后简称高程4），相较于第 3 版，增加了 ES6 至 ES10 的全新内容，删除了旧版过时的内容，并在原有基础上充实了更加翔实的内容。中文译版于 2020 年发售，妥妥的“新鲜出炉”，你要是问本瓜：当今学 JavaScript 哪家强，我只能说：红宝书第 4 版最在行。于是乎，借着更文契机，本瓜将开启一个小系列，带你重看一遍高级程序设计4（先前只是跳着

2022-06-22 08:56:31

数据结构迭代器迭代

基于Echarts的柱状图Demo-记录设备历史数据

基于项目中对柱状图使用的各种情况，Echarts提供的组件不太能满足业务记录设备历史数据的需求，对其研究会花费大量的时间，为了提高研发的速度，我这里对柱状图进行二次封装，以便满足业务需求，可直接使用。

2022-06-16 14:35:45

中软国际 Echarts 柱状图demo

「Node学习笔记」Node.js的模块实现及编译

前言在计算机程序的开发过程中，随着程序代码越写越多，在一个文件里代码就会越来越长，越来越不容易维护。为了编写可维护的代码，我们把很多函数分组，分别放到不同的文件里，这样，每个文件包含的代码就相对较少，很多编程语言都采用这种组织代码的方式。在 Node 环境中，一个 .js 文件就称之为一个模块（module）。一、使用模块的好处使用模块最大的好处是大大提高了代码的可维护性。其次，编写代码不必从零开

2022-06-15 15:19:47

Node 前端模块

javascript高级进阶

js的一些高级进阶

2022-06-13 17:32:08

数组构造函数作用域

JS 变量、作用域与内存

JavaScript 高级程序设计第 4 版（后简称高程4），相较于第 3 版，增加了 ES6 至 ES10 的全新内容，删除了旧版过时的内容，并在原有基础上充实了更加翔实的内容。中文译版于 2020 年发售，妥妥的“新鲜出炉”，你要是问本瓜：当今学 JavaScript 哪家强，我只能说：红宝书第 4 版最在行。于是乎，借着更文契机，本瓜将开启一个小系列，带你重看一遍高级程序设计4（先前只是跳着

2022-06-13 09:14:45

垃圾回收 javascript 数据

一张图不用，纯CSS 做个贺卡

朋友生日了，直接画，炫技并且表示本人闲的全身疼才会去拿CSS画画，以此嘲弄对方的加班：!在这里插入图片描述(https://s4.51cto.com/images/blog/202206/08213715_62a0a60b36a0220401.png?xossprocess=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_1

2022-06-08 21:39:17

一分钟教你快速搭建Vue脚手架（Vue-Cli）项目并整合ElementUI

一分钟教你快速搭建Vue脚手架（Vue-Cli）项目并整合ElementUI

2022-06-08 08:31:10

node.js java 创建项目

3分钟带你搞懂Vue双向绑定原理及问题剖析

3分钟带你搞懂Vue双向绑定原理及问题剖析

2022-06-05 14:23:40

双向绑定 html 数组

700行无用纯 CSS 祝考生金榜高粽！《1_bit 的无用 CSS 代码》

纯 CSS 海报制作

2022-06-04 20:12:18

css html 前端

element-ui：el-table合并单元格后的行高亮显示

有如下一份数据src/data.jsonjson{"list":{"id":1,"user_id":1,"name":"王小虎","address":"上海市普陀区金沙江路1弄"},{"id":2,"user_id":1,"name":"王小虎","address":"上海市普陀区金沙江路2弄"},{"id":3,"user_id":1,"name":"王小虎","address":"上海市普陀区

2022-06-03 15:42:41

高亮 jquery json

前端必学——函数式编程（五）

前文梳理第一篇为什么要进行函数式编程？——一切只是为了代码更加可读！！开发人员喜欢【显式】输入输出而不是【隐式】输入输出，要明白何为显式，何为隐式！！一个函数如果可以接受或返回一个甚至多个函数，它被叫做高阶函数。闭包是最强大的高阶函数！！第二篇讲了重要的两个概念：偏函数、柯里化函数组装是函数式编程最重要的实现方式！而熟练运用偏函数、柯里化，以及它们的变体，是函数组装的基础。偏函数表现形

2022-06-02 09:15:51

函数式编程数组偏函数

前端必学——函数式编程（四）

本篇会将谈谈函数编程中一个很重要的细节 ——“副作用”。维基上关于副作用的解释：函数内部有隐式（Implicit）的数据流，这种情况叫做副作用（Side Effect）。咱们前文也提到过：开发人员喜欢显式输入输出而不是隐式输入输出。所以我们将细致的看看副作用中【隐式】和【显式】的区别!何为副作用？先来个小例子作开胃菜：//片段1functionfo

2022-06-01 09:39:45

幂等输入输出显式

前端必学——函数式编程（三）

在前面的文章，我们谈了基础之基础，重要之重要——“偏函数”，偏函数通过函数封装，实现了减少传参数量的目的，解决了手动指定实参的麻烦。更具重要意义的是：当函数只有一个形参时，我们能够比较容易地组合它们。这种单元函数，便于进行后续的组合函数；没错，本篇就是谈关于“组合函数”。它是函数编程的重中之重之重之重重重！组合函数含义函数编程就像拼乐高！乐高有各式各样的零部件，我们将它们组装拼接，拼成

2022-05-31 10:11:38

sed 封装函数编程

前端必学——函数式编程（二）

本篇将着重介绍函数的输入，它是 JS 轻量函数式编程的基础之基础，重要之重要！！！偏函数传参现状我们经常会写出这样的代码：function ajax(url,data,callback) { // ..}function getPerson(data,cb) { ajax( "http://some.api/person", data, cb );}ajax函

2022-05-30 13:56:53

ajax 函数式编程偏函数

我离全栈工程师又进了一步！APICloud云数据库使用体验

前几篇文章主要记录了一下是使用APICloud开发App前端的部分，这次再来体验一下APICloud的云数据库。云数据库可以通过web页面来操作，实现一些数据库的基本功能，非常方便。云数据库大家可以理解为是普通的一个数据库，存储用户业务逻辑的数据。云数据库的操作包数据表的操作，数据表字段的操作，还有数据表中内容的增删改查和索引设置等，下面我们来一起创建一个自己的云数据库。首先进入控制台（www

2022-05-24 13:44:30

数据库后端 APICloud

诺！给你「最酷」网页设计指南

作为一个优秀的 Web 前端开发者，如果不懂点用户体验设计（UED），任由 UI 搁那指指点点，那可真叫是：知三晓五 —— 就是不懂事（四）了！别方，抱紧我！本篇将为大家带来最酷的网页设计指南！闲言少叙，直接奥力给！新拟态新拟态，英文叫作：Neumorphism，是由「New Skeuomorphism」组合的新名词，也就是新型态的拟物化风格设计，中文称作新拟态、同化，也有设计师称其为Soft U

2022-05-24 08:46:11

3d 网页设计数据

JS 的浪漫 —— Promise 食用注意点

本瓜一直觉得 Promise 就是咱 JS 人的浪漫，没错，Promise　天天见，但或许越熟悉越陌生，我们在一直用的过程中会形成一些定式，这导致难免会漏掉一些定式以外的要点；本篇带来　Promise 5 个避免，以供自查！！1. 避免回调地狱啥？Promise 就是来解决回调地狱的，如果还写成这个样子，那一切还有什么意义？userLogin('user').then(function(user)

2022-05-23 09:35:23

函数式编程封装函数声明

为什么说 JS 是多范式语言？

小引JavaScript 技能持有者一定有问过这个问题：JavaScript 是面向对象语言吗？你期望得到的答案应该为：“是” 或 “不是”。但是可惜，你得不到这样简单的答案！你大概了解一通之后，你会被告知：JavaScript 不是纯粹的面向对象语言！wtf！为什么是不纯粹？能不能纯粹一点？！我们喜欢纯粹，不喜欢混沌！......实际上，死扣定义真的没太必要。定义背后的故事才是最重要的！看完本篇

2022-05-21 11:42:36

设计模式多态 javascript

JavaScript的相关知识点学习与实践二

JS帮助我们实现动画效果

2022-05-18 10:19:13

html 数组字符串

JavaScript数组常用方法解析和深层次js数组扁平化

前言数组作为在开发中常用的集合，除了for循环遍历以外，还有很多内置对象的方法，包括map，以及数组筛选元素filter等。注：文章结尾处附深层次数组扁平化方法操作。作为引用数据类型的一种，在处理数组Array的时候，我们需要考虑到深拷贝和浅拷贝的情况可以参考以下文章javaScript中深拷贝和浅拷贝简单梳理(http://lewyon.xyz/objectCopy.html)深度解析javaS

2022-05-18 09:28:40

数组字符串数组元素

10 个 Vue3 实战指南，冲就完事了

本篇介绍 10 点如何从实战中学习突破 Vue JS 3 的新特性，细细看完，一定会有收获~初始化挂载在 Vue2 中，我们在 main.js 通常这样进行初始化挂载：new Vue({ render: h => h(App), components: { App }}).$mount('#app')在 Vue3 中，调整为这样：import { createApp } from 'v

2022-05-18 09:07:38

数组数据新特性

JavaScript的相关知识点学习与实践一

Js是我们用来实现交互和动态效果的

2022-05-17 10:02:12

html 构造函数创建对象

5 种在循环中使用 async/await 的方法，建议收藏

我们经常会遇到这样的需求，在循环中使用异步请求，而ES6 的 async/await是我们让异步编程更简单的利剑?。本篇总结了 5 种在循环中使用 async/await 的方法（代码干货都能在浏览器控制台自测）：打勾的方法 ✔：表示在循环中每个异步请求是按照次序来执行的，我们简称为“串行”打叉的方法 ❌ ：表示只借助循环执行所有异步请求，不保证次序，我们简称为“并行”按需

2022-05-15 10:17:11

异步请求回调函数遍历数组

重读 ES6 标准入门（第3版）

前言仅将自己的理解做整理、归类并结合实际遇到的问题做记录，更推荐阅读ECMAScript 6 入门。扩展篇数组的扩展解构赋值“ES6 中允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）”作用：可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值let [a,b,c] = [1,2,

2022-05-14 10:25:59

数组字符串赋值

JavaScript函数闭包以及作用域

递归函数递归函数：在函数内部调用自身，一般解决数学问题。菲波那切数列：1,1,2,3,,5,8,13,21,34……function feibo(n) { // 用户输入第n项，返回对应的值 // 从第3项开始值等于n-1对应的值+n-2对应的值 if(n === 1 || n == 2) { return 1; }else { return feibo(n-1) + feib

2022-05-12 11:14:37

作用域全局变量局部变量

Vue 项目中如何重构“布局”？

正视布局开篇想先问你一个问题：“你认为你目前所在 Vue 项目中的 layouts 设置有什么问题吗？”你可能会回答：“没有啥问题啊。因为不就是简单的在外层套一个 Layout 组件吗？”我想一定类似这样吧：<template> <MyLayout> <h1>Here is my page content</h1> </MyLayou

2022-05-11 08:40:43

初始化 sed ico

airflow+k8s 多用户-分布式-跨集群-容器化调度

对于考虑使用拖拉拽编排使用云原生调度的可以参考https://github.com/tencentmusic/argo-workflow全栈工程师开发手册（作者：栾鹏）架构系列文章最开始采用airflow+k8s分布式容器化调度的方案主要是为了解决下面的问题：1、特有环境/特有脚本调度的调度问题2、大数据量任务或大算力任务节点故障和调度管理问题目前已经基于air

2022-05-10 15:43:50

airflow 调度 k8s

跨越时空的对白——async&await分析

同步中的异步在ES6中新增了asgnc...await...的异步解决方案，对于这种方案，有多种操作姿势，比如这样const asyncReadFile = async function(){ const f1 = await readFile('/etc/fstab') const f2 = await readFile('/etc/shells') console.l

2022-05-08 11:38:56

异步操作异步任务回调函数

腾讯面试 4 个【好问题】！

引言一朋友刚面了腾讯音乐（TME）前端开发岗位（两年经验），本瓜撰文记之。以期同各面试人分享交流~自评面试难度：?????话不多说，直接看题！我相信一定有你想要的！注：好的面试流程通常以聊天的方式进行，题目是连续的。此处抽出核心四问，其间附带的小问题一笔带过，不做赘述。页面通信❝问题一：从页面 A 打开一个新页面 B，B 页面关闭（包括意外崩溃），如何通知 A 页面？炸看这一题，以为讲的是 htm

2022-05-08 09:34:53

html 数据加载

从【if...else...】到【责任链】再到【composeAOP】，顺带把【传参】解决了~

?嵌套毛毛虫我猜你一定见过这样的代码：if(condition1 === A1){ if(condition2 === A2){ ... }else if(condition2 === B2){ ... }else if(condition2 === C2){ ... }else{ ... }}esle if(c

2022-05-05 09:27:45

json 数组 i++

RxJS Map 操作符四大天王

从高阶Observable 的概念与RxJS Map 操作符来介绍四大让人却步的Map 系列操作符—MergeMap、ConcatMap、SwitchMap以及ExhaustMap。先从简单的Map 操作符开始，以下面的程式码举例：Rx.Observable .interval(1000) .take(5) .map(item => i

2022-04-30 11:44:41

时间轴操作符二维

5 张弹珠图彻底弄清 RxJS 的拉平策略：mergeMap、switchMap、concatMap、exhaustMap

map 操作想必大家一定不陌生：const { of } = Rx;const { map } = RxOperators;const namesObservable = of('A', 'B');namesObservable.pipe( map(name => `map ${name}`))namesObservable .subscribe(result => consol

2022-04-28 17:56:11

操作符数据扁平化

逆向进阶，利用 AST 技术还原 JavaScript 混淆代码

AST Babel 入门手册，手把手带你还原 JS 混淆代码，让你逆向如虎添翼！

2022-04-28 15:31:52

javascript 语法树编译器

分分钟搞懂防抖和节流-案例

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟节流以第一次为准，防抖以最后一次为准防抖//防抖debounce代码：function debounce(fn) { let timeout = null; // 创建一

2022-04-22 15:12:24

调用方法函数节流事件触发

vuex应用状态管理和axios网络请求响应

vuex应用状态管理和axios网络请求响应Vuex插件的安装在vue项目目录下执行如下命令：npm install vuex@3.6.2 --save安装完成后，在package.json的项目配置文件中显示出vuex安装版本.手动在项目的src目录下创建store文件夹和index.js文件，index.js文件内容如下。该文件内容就是Vuex进行状态集中管理的仓库。impo

2022-04-21 09:27:31

数据 vue axios

前端VueRouter解析

前端VueRouter解析VueClI2项目构建过程中安装VueRouter我们学习了使用vue init webpack [project-name]命令快速构建Vue项目脚手架。如果需要在项目中加入VueRouter，在项目配置填写的阶段Install vue-touter？填写Y(Yes)。使用VueRouter开发第一个demo 第一个示例很简单，创建一个单页面应用。这个单页面应用

2022-04-20 08:46:06

懒加载映射关系重定向

VUE深度解析

VUE深度解析ES6语法-var-const-let用法详解javascript作用域javascript只有函数作用域，没有块级作用域。即在dunction里面定义的变量是有作用域的，if、for等代码块定义的变量是没有作用域的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8

2022-04-20 08:43:56

数据 html 作用域

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

51CTO技术栈公众号

业务
速览

媒体

51CTO CIOAge HC3i

社区

51CTO博客鸿蒙开发者社区

教育

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