鸿蒙开发者社区

公众号矩阵

移动端

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

全部课程 AI课堂软考信创认证华为认证厂商认证 IT技术 PMP项目管理免费题库

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

51CTO

51CTO运维帮

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

51CTO运维帮视频号

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

账号设置退出

前端

3.1w内容

关注

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

文章博文帖子课程

共 695 条

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 作用域

vue3和vue2的比较

最近开始切入vue3的学习，处于在3和2的过渡阶段中，有时候用了3的写法，有时候用了2的写法，走火入魔了属于是，于是想写一篇文章，做一次全面的比较，给自己一个总结，希望经过本文，加一时间沉淀，我可以信誓旦旦说我熟练vue2/3生命周期整体来看，变化不大，只是名字大部分需要+ on，功能上类似。使用上 Vue3 组合式 API 需要先引入，而 Vue2 选项 API 则可直接调用，如下所示。

2022-04-19 00:05:21

Vue基础知识总结(三):快速构建Vue项目

?个人主页：程序员阿红(https://blog.51cto.com/u_13902521)??支持我：点赞?收藏⭐️留言?1.什么是VuecliVuecli是基于Vue的应用开发提供的一个标准的脚手架工具.为应用搭建基础的框架结构,提供插件、开发服务、Preset、构建打包功能Vuecli背后集成了现代化开发的诸多功能,通过简单的命令就可以完成"零配置"的项目环境搭建2.安装Vuecli步骤在安

2022-04-15 15:39:35

node.js 服务端 javascript

vue 性能监控分析

我们在浏览网站的时候，不可避免的需要消耗自身计算机资源，比如带宽、cpu、存储等等，这些资源会随着访问时间的延长而产生一定的数据碎片，在我们没有关闭浏览器的时候，这些碎片会一直存在的，那么作为开发者我们开发的网站是否优质，是否对用户计算机负担小，打开是否未低时延这些就是我们用来衡量网站是否卓越的指标了。vue作为一款很卓越的前端开发框架，开发起来很舒服，那性能怎样呢？这个时候就需要使用性能检测相关

2022-04-15 00:12:46

初始化重定向时间戳

在nodejs中事件循环分析

在上一篇文章[在chromev8中的JavaScript事件循环分析]()中分析到，在chrome中的js引擎是通过执行栈和事件队列的形式来完成js的异步操作。然而在node中，事件循环表现出的状态与浏览器中大致相同。不同的是node中有一套自己的模型。node中事件循环的实现是依靠的libuv引擎。我们知道node选择chrome v8引擎作为js解释器，v8引擎将js代码分析后

2022-04-11 22:07:37

事件循环 v8 javascript

在chromev8中的JavaScript事件循环分析

JavaScript从诞生之日起就是一门单线程的非阻塞的脚本语言。这是由其最初的用途来决定的：与浏览器交互。单线程，JavaScript代码在执行的任何时候，都只有一个主线程来处理所有的任务。非阻塞则是当代码需要进行一项异步任务（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）的时候，主线程会挂起pending这个任务，然后在异步任务返回结果的时候再根据一定规

2022-04-09 00:40:10

执行栈主线程任务队列

vue在浏览器中对DOM渲染探究

“世间万物都由分子构成。用气将万物的分子打散，分解眼前事物，再将分子重组，在短暂的瞬间，可以凝成时空停顿，甚至逆转时空。”这句熟悉的电影台词想必大家能猜出是哪一招武林绝学吧？是的，万事万物无时无刻不在变化，譬如与我们息息相关的DOM树，用“气”将树打散，再将树重组，我们的页面就动起来了！Vue渲染流程vuejs有两个阶段：编译时和运行时。编译时我们平常开发时写的.vue文件是无法直接运行在

2022-04-06 23:52:40

css html 重绘

浅析$nextTick和$forceUpdate

vue中提供了数十种api供我们开发者日常使用，而常用的其实也就十多种，比如setup, mount, forceupdate, nextTick, compute, ref等，这些参数有的是在生命周期中进行管理，有的是在页面执行过程中，更新参数，有些是可以用来检测页面数据，这些随着项目的推进或多或少都是会使用到。其中nextTick

2022-04-05 21:30:01

数据事件循环重绘

动态资源技术JSP｜Java与Html的美好相遇

你想要的动态Web资源技术JSP，这里都有，万字长文带你一睹Java与Html的美好相遇！

2022-04-04 17:57:22

jsp页面服务器 JSP

使用APICloud AVM框架开发人事档案管理助手app实战

由于人事档案具有涉密性，所以本应用没有使用后台服务，全部功能都在APP本地实现。开发工具采用　APICloud Studio3，基于VSCode的（PS：比基于Atom的autio2好用太多）；数据库采用sqllite，没有使用UI框架，个人觉得AVM本身支持的flex布局配合自写CSS样式，完全可以实现市面上所有的ＵＩ框架的元素，这个取决于个人功力。一、项目思维脑图二、功能介绍１、人员花名册２、

2022-04-02 14:56:23

app开发 apicloud 项目实战

Vue基础知识总结(二)：进阶篇

1.0 MVVM模式MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。MVVM模式将页面,分层了 M 、V、和VM ,解释为：Model: 负责数据存储View: 负责页面展示View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示<body><div id="app">

2022-03-30 10:50:31

#yyds干货盘点# 一步步教你用taro封装一个公司库的下拉组件

前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷前言歌谣歌谣如何封装一个公司库的一个组件需求介绍首先要实现的是1第一步需要在一个input框中输入字符当字符发生变化的时候进行接口的调用2超过两个字符开始

2022-03-24 09:26:02

taro ico 赋值

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

快速搞懂Vue双向绑定原理~干货满满

2022-03-22 16:44:03

双向绑定 html 数组

使用Node.js、MongoDB、Fastify 构建API服务

文章从零开始介绍如果使用Node.js构建API、通过swagger完善API文档、postman测试API、pm2或者docker服务部署全过程

2022-03-19 22:20:54

mongodb node.js swagger

使用APICloud开发物流仓储app项目实践

一、前端思维导图二、项目原型图（UI图）初版原型地址墨刀原型链接《外贸类》，涉及的页面大概有20+，有兴趣可以去招人做一下UI。三、前端app项目创建1、前端APICloud后台（www.apicloud.com/console）创建app，创建混合的开发的app。2、下载调试工具自定义loader安装包自定义loader是一个安卓或iOS的安装包，可以装到收集端，从而进行js

2022-03-17 16:38:09

apicloud HTML5 vue

使用APICloud平台实现朋友圈功能

一、效果展示二、项目结构图以及用到的模块三、主要功能 1、下拉刷新上啦加载更多（mescroll.js） 2、点赞评论 3、导航背景透明渐变效果 4、图像预览（UIPhotoViewer） 5、图像压缩 6、定位附近地点（aMap） 7、图像批量上传四、功能点详解 1、下拉刷新和上拉加载我用的是 mescroll.js(自带图像懒加载，官方网站有详细使用说明文档) 实

2022-03-16 15:57:32

APICloud HTML5 JavaScript

【7000字】一晚上爆肝浏览器从输入到渲染完毕原理

前言Chromecomic，一本Chrome架构简要概述的漫画，Chrome架构于2008年同Chrome浏览器一起发布。!(https://s4.51cto.com/images/blog/202203/09175402_6228793abfc4d43268.png?xossprocess=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_F

2022-03-09 17:56:25

浏览器 JavaScript 渲染

JavaScript 数据处理 - 映射表篇

由于 JavaScript 的动态特性，其对象本身就是一个映射表，对象的「属性名⇒属性值」就是映射表中的「键⇒值」

2022-03-06 21:15:15

javascript 键值对数组

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

51CTO技术栈公众号

业务
速览

媒体

51CTO CIOAge HC3i

社区

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

教育

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