直播训练营

鸿蒙开发者社区

WOT技术大会

AIGC创新中国行

公众号矩阵

移动端

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

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

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

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO题库小程序

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

账号设置退出

前端

2.4w内容

关注

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

文章博文帖子课程

共 715 条

半小时，阿包带你学会手撕高阶函数 #yyds干货盘点#

前言JavaScript中有很多高阶函数，例如map、filter、every等，还有ES6新提供的find等，熟练使用后能极大提高编写代码的效率。下面就一起来学习一下这些高阶函数，并使用原生JS模拟实现。那么什么样的函数是高阶函数那？至少满足下列一个条件的函数:+接受一个函数或者多个函数作为参数+输出一个函数JavaScript中的高阶函数大多都是接受一个函数作为参数，具体传参如下:jsArra

2021-12-26 15:20:23

数组高阶函数前端

牛客最新前端笔试题解析(一) this指向题目解析及扩展 #yyds干货盘点#

前言这篇文章主要来解析牛客笔试题部分的this指向题目。首先我们先从宏观上了解一下JavaScript中得this指向问题。JavaScript中this共有四种绑定(包括隐式绑定丢失)加ES6新增得箭头函数绑定，如果把这几种绑定全学会了，this指向完全不成问题。this指向更详细的讲解，可以去看前面写过的一篇博文，里面还有38道题目，详细完整的讲解了this指向问题。+默认绑定:非严格模式下t

2021-12-25 10:56:40

面试 JavaScript 前端

Promise如何使用？全方位解析，5分钟搞懂异步#yyds干货盘点#

什么是异步？异步：操作之间没啥关系，同时进行多个操作，操作之间不会有干扰（可以先往下执行，回头再执行上面的），代码复杂同步：同时只能做一件事，上面数据执行完之后才能进行下个操作（从上到下），代码简单什么情况下用到promise？一般情况下是有异步操作时，使用Promise对这个异步操作进行封装new构造函数(1.保存了一些状态信息2.执行传入的函数)在执行传入的回调函数时，会传入两个函数：reso

2021-12-25 10:23:39

github 赋值网络请求

带你了解HTML基本标签的使用#yyds干货盘点#

@toc(目录)前言在浏览器的地址栏中输入一个网址，就会查阅到相应的网页内容。在网页中包含很多内容，如文字、图片、动画，以及声音和视频等。网页的最终目的是为访问者提供有价值的信息。提到网页设计，不得不提到HTML标记语言，HTML的全称是HypertextMarkupLanguage，即超文本标记语言。HTML用于描述超文本中内容的显示方式。使用HT

2021-12-23 20:53:02

html 表单属性值

JavaScript之预编译学习(内含多个面试题) #yyds干货盘点#

前言在学习JavaScript预编译之前，先了解一下JavaScript从编译到执行的过程，大致可分为四步：1.词法分析2.语法分析：检查代码是否存在错误，若有错误，引擎会抛出语法错误。同时会构建一颗抽象语法树(AST)。3.预编译4.解释执行预编译JavaScript是解释性语言，也就是说，编译一行，执行一行，但js并非上来就进入编译环节，它在编译之前存在预编译过程。js中预编译一般有两种：全局

2021-12-23 19:34:12

JavaScript JavaScript深预编译

#yyds干货盘点#24张图攻克border-image

theme: channing-cyan这是我参与8月更文挑战的第13天，活动详情查看：[8月更文挑战](https://juejin.cn/post/6987962113788493831 "https://juejin.cn/post/6987962113788493831")读不在三更五鼓，功只怕一曝十寒。看完觉得有收获的，点个赞呗！！！前言前有background-image 为背景增光

2021-12-21 15:47:09

九宫格背景图谷歌浏览器

「自我检验」熬夜总结50个Vue知识点，全都会你就是神！！！

前言大家好，我是林三心，这几天发生了很多事（具体是啥我就不说了），这些事，吓得我把我这些年珍藏的Vue知识点都拿出来整理了一遍，巴不得能多总结出一道是一道，我拿出了我的笔记，并且使劲回忆，终于悟出了这50道知识点（咱不要太俗哈，不叫面试题，咱叫知识点）!image.png(https://s4.51cto./images/blog/202112/21134842_61c16abaa98515

2021-12-21 13:50:53

数据响应式数组

快速入门vue，含实战案例，“建议收藏”，用到省的百度了#yyds干货盘点#

初识Vuehtml<divid="app"<!mustache语法中，不仅可以直接写变量，也可以写简单的表达式<h2{{message+name}}</h2<h2{{mesage+''+neme}}</h2<h3{{message}}</h3<h1{{name}}</h1</div<script//let(变量)/const(常量)//编程范式：声明式编程constapp=newVue({el:

2021-12-21 11:22:59

html 数组动态绑定

#yyds干货盘点# 牛客最新前端JS笔试百题

前言前几天空闲时间抓取了牛客最新的笔试题和面试题，想做一下数据统计，展望一下面试中JavaScript的平凡考点和火爆考点，给未来自己的学习指引一下方向。但当统计完数据后，准备分析时，我才发现：我找不到特别好的切入点来进行分析，同时我只能想到使用饼图和柱状图展示各个题型或考点的出现频次，这为我上一篇的文章失败埋下了巨大的伏笔。虽然文章反响有些不尽人意，我也感觉有几分挫败，但往好处想，这篇文章并非一

2021-12-21 08:33:35

javascript 面试笔试

#yyds干货盘点#CSS-ing Candy Ghost 按钮

最近，在寻找关于编写什么代码的一些想法时，因为我的艺术感为零，所以我唯一能做的就是找到其他人想出的漂亮东西，并用干净紧凑的代码重新制作它们……我遇到了这些糖果鬼按钮！它们似乎是我可以快速编码的一个很酷的小东西的完美选择。不到十五分钟后，这是我的 Chromium 结果：纯 CSS 糖果幽灵按钮。我认为这项技术值得分享，因此在本文中，我们将介绍我最初是如何做到的以及我们还有哪些其他选择。起点

2021-12-21 07:18:03

图层圆角 5e

#yyds干货盘点#JavaScript之彻底理解原型与原型链

前言原型与原型链知识历来都是面试中考察的重点，说难不算太难，但要完全理解还是得下一定的功夫。先来看一道面试题开开胃口吧:jsfunctionUser(){}User.prototype.sayHello=function(){}varu1=newUser();varu2=newUser();console.log(u1.sayHello=u2.sayHello);console.log(User.

2021-12-20 08:39:03

原型链构造函数 javascript

#yyds干货盘点#Vue-Router路由所有相关方法讲解(全)，实战教学含登录拦截，建议收藏

router的基本使用main.js挂载路由jsimportVuefrom'vue'importAppfrom'./App'//默认导入router文件夹下的内容importrouterfrom'./router'Vue.config.productionTip=false/eslintdisablenonew/newVue({el:'app',router,//挂载路由，把路由注入为Vue对象

2021-12-19 16:53:06

html 懒加载类名

#私藏项目实操分享# SAP 电商云 Spartacus UI 的 checkout 场景中的串行请求设计分析

CurrentCheckoutDesignWhenwetoggledeliverymethodviaradioinput,onceclicked,there’rethreesequentialHTTPrequestsenttobackend:当我们点击shippingmethod时，会有三个串行的HTTP请求发送往后台。!(https://s4.51cto.com/images/blog/2021

2021-12-19 09:55:02

SAP Spartacus TypeScript

#yyds干货盘点#一个方便的小系统，用于 CSS 中的动画入口

我喜欢让网站感觉不仅仅是一个静态文档的小改动。如果网页内容不只是在页面加载时“出现”，而是弹出、滑动、褪色或旋转到位怎么办？说这样的动作总是有用的可能有点牵强，但在某些情况下，它们可以引起对某些元素的注意，加强哪些元素彼此不同，甚至表明状态发生了变化。所以，它们也不是完全没用。因此，我将一组 CSS 实用程序放在一起，用于在元素进入视图时为其设置动画。而且，是的，这个纯 CSS。它不仅有各种各样的

2021-12-17 08:03:06

#yyds干货盘点#一次性解决text-justify，text-orientation等冷门属性文本属性

读不在三更五鼓，功只怕一曝十寒。看完觉得有收获的，点个赞呗！！！前言在上中两篇介绍文本属性的时候，我们基本已经学会了很多之前没有使用过的属性，今天我们接着来看更多的文本属性，CSS的世界是精妙的，无尽的，仅仅希望同这三篇文章，可以入得CSS的基础门。人生短暂，学无止尽。text-justify兼容性此属性目前被列为“有风险”在候选推荐期间被丢弃。因此，不建议在生产中使用此属性，因为它不太可能在不久

2021-12-16 23:01:50

ide css 默认值

#yyds干货盘点# animation-delay负值妙用，你不来了解一下吗

?前言小包上一篇文章讲述如何实现随机不规则圆角头像时，其中一种方案通过妙用animationdelay负值和paused进行实现，这不由让我对animationdelay负值产生巨大兴趣，经过几天的学习，我发现animationdelay负值的独特特性带来的威力真是非同小可。可以先来看一下使用animationdelay负值实现的loading功能!musicloading.gif(https:/

2021-12-14 12:13:31

css 前端 loading

#yyds干货盘点#Vuex实战讲解（全），玩转Vue必备知识

Vuex概况store核心概念- State：包含了store中存储的各个状态。- Getters：类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。- Mutation：一组方法，是改变store中状态的执行者，只能是同步操作。- Action：一组方法，其中可以包含异步操作。- Moudule： Modul

2021-12-13 10:20:30

数据辅助函数字符串数组

#yyds干货盘点#快速理解Vue组件化开发，干货太多，”建议收藏细品“

组件化开发组件模块的分离 <div id="app"> <cpn></cpn> </div>   &lt

2021-12-12 09:33:28

默认值插槽数组

#yyds干货盘点#--30分钟上手jQuery

一、jQuery的介绍jQuery是什么jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“writeLess，DoMore”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件

2021-12-11 11:46:28

#yyds干货盘点# Next.js通配符子域

Next.js通配符子域快速总结↬使用通配符子域的主机使你的用户能够在你的域名（.example.com）的任何子域上访问你的网站，正如你所想象的，我们可以利用这一点来创造独特的用户体验，我们将在本文中通过Next.js镜头来探索。一个"通配符"？这到底是什么？好问题，这些类型的域名源于通配符DNS记录，看起来像这样。bash.example.3600TXT"Wild!Youhavefoundaw

2021-12-11 11:00:40

ide javascript json

#yyds干货盘点#iOS 15 中的前端开发快捷方式

当 Chris 分享一种在移动设备上“查看源代码”的方法时，我非常激动。当然，它与内置功能不同，但它允许像我这样的 iOS 用户通过添加view-source:URL来查看网站代码，就像 Android 上的人一样。我很好奇什么样的开发相关工具可能会直接嵌入到我的 iPhone 中，所以我四处寻找。实际上，现在正是使用刚出炉的 iOS 15 来做到这一点的最佳时机。iOS Sho

2021-12-11 06:02:09

快捷方式应用程序 ios

#yyds干货盘点#--30分钟入门JavaScript

前言JavaScript 是一种解释型的脚本语言，被大量地应用于网页中，用以实现网页和浏览者的动态交互。目前几乎所有的浏览器都可以很好地支持 JavaScript。由于 JavaScript 可以及时响应浏览者的操作，控制页面的行为表现，提高用户体验，因而已经成为前端开发人员必须掌握的语言之一。JavaScript 是为满足制作动态网页的需要而诞生的一种编程语言，是由 Netscape（网景通信公

2021-12-10 09:31:15

字符串数组 javascript

#yyds干货盘点#探索 CSS Paint API：多边形边框

如今，使用来创建复杂的形状是一项简单的任务clip-path，但为形状添加边框总是很痛苦。没有强大的 CSS 解决方案，我们总是需要为每个特定情况生成特定的“hacky”代码。在本文中，我将向您展示如何使用 CSS Paint API 解决此问题。探索 CSS Paint API 系列：第 1 部分：图像碎片效应第 2 部分： Blob 动画第 3 部分：多边形边

2021-12-08 07:59:07

css 字符串自定义

彻底搞懂HTTP协议 - 天天造轮子

你将Get的技能文章转载：乐字节如何调戏百度服务器 - 用自己手写的HTTP协议如何调戏Chrome浏览器 - 用自己手写的HTTP协议了解HTTP协议与TCP协议的关系了解HTTP协议的发明的动机一个字一个字编写一个HTTP报文 Why据说前端界有一个到非常有名的面试题叫做输入一个url发生了什么如果简单回答大概可以分为 DNS解析 TCP连接发送HTTP请求

2021-12-07 19:02:37

服务器百度数据

30 分钟，全面解析 AJAX #yyds干货盘点#

阅读目录一、什么是AJAX 二、提交Form表单的原理三、提交请求和服务响应的原理四、XMLHttpRequest对象的知识五、JQuery实现AJAX六、优势七、缺点八、应用场景九、不适用场景阅读本文需要30分钟，请先收藏转发后再看。先上原理图!(https://s4.51cto.com/images/blog/202112/07184816_61af3bf09216719194.jpg?xos

2021-12-07 18:49:45

ajax 悟空聊架构 FORM

深入Vuex最佳实践#yyds干货盘点#

前言在开始正文之前先废话一段，我上周写的一篇面试文章居然火了?,开心了一上午，其实我也才刚开始写文章肯定是比不上那些大佬的质量，所以能火我也感到很意外，很感谢支持我的朋友,我也会努力花时间在这方面为读者产出更好的文章，很多朋友问是我怎么自学的，大家可以看下我的博客(http://beige.world/blog/base/1.1.html)，我有写过自己自学的方法虽然说不上多好但也是自己自学这么久

2021-12-07 13:31:23

数据数据源响应式

#私藏项目实操分享# 使用 RxJs Observable 来避免 Angular 应用中的 Promise 使用

我们通过一个具体的例子来阐述。考虑您正在构建一个搜索输入掩码(https://blog.thoughtram.io/angular/2016/01/06/takingadvantageofobservablesinangular2.html)，该掩码应在您键入时立即显示结果。如果您曾经构建过这样的东西，那么您可能会意识到该任务带来的挑战。1.不要在每次击键时都点击搜索端点将搜索端点视为您按请求付费

2021-12-07 09:40:15

搜索 json typescript

Bootstrap实战 - 瀑布流布局

讲Bootstrap基础的教程网上已经很多了，实际上Bootstrap中文网（bootcss.com）里的文档已经写的很详细了，但实战的案例却不多。这里用一些当前流行的网页布局为导向，使用Bootstrap中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。练习本案例需有HTML/CSS基础。一、案例介绍瀑布流是近几年流行起来的一种网页布局，视觉表现为参差不齐的多栏布局，本案例便是使

2021-12-05 23:15:37

Bootstrap CSS3 布局

ES6学习第六章数值的扩展

本章介绍数值的扩展。新增了很多方法，有些不常用的方法了解即可。进制表示法

2021-11-28 23:12:59

javascript 浮点数 #私藏项目实操分享#

ES6学习第二章变量的解构赋值

ES6的解构赋值

2021-11-24 09:30:10

赋值 #yyds干货盘点#Ecmascript6

JavaScript 定时器

JavaScript 原生计时器基础，控制台也可以使用的计时器。

2021-11-21 00:09:58

javascript 定时器控制台计时器

JavaScript事件捕获冒泡与捕获

事件流JavaScript中，事件流指的是DOM事件流。概念事件的传播过程即DOM事件流。<br/事件对象在DOM中的传播过程，被称为“事件流”。<br/举个例子：开电脑这个事，首先你是不是得先找到你的电脑，然后找到你的开机键，最后用手按下开机键。完成开电脑这个事件。这整个流程叫做事件流。<br/<br/DOM事件流DOM事件，也是有一个流程的。从事件触发开始到事件响应是有三个阶段。1.事件捕获阶

2021-11-19 17:11:09

事件委托事件冒泡事件流

#私藏项目实操分享# 使用脚本进行 SAP Spartacus 安装工作

TesttheSpartacusinstallationwithschematicsonWindows(https://github.com/SAP/spartacus/issues/14241)本文介绍详细步骤。首先使用命令行安装verdaccio：Installverdaccionpmigverdaccio@4(onlyforthefirsttime)Verdaccio是一个简单的、零配置要求

2021-11-18 15:19:17

数据库 2d json

#私藏项目实操分享# Echarts实操纪实，需要实现一个日程表，以及常用属性

一、首先依赖的文件echarts.js直接放出来1、直接下载2、官网定制https://echarts.apache.org/zh/index.html全勾上点下面的下载就好了二、使用echarts.js实现一个日程表效果：<!DOCTYPE html><html><head> <meta charset="UTF-8"> &lt

2021-11-17 21:31:06

数据 html 高亮

JavaScript中的LHS和RHS分析

LHS 和 RHS对于LHS和RHS，从字面意思来说是 Left Hand Side和 Right Hand Side即左手边和右手边，一般可以理解为赋值操作的左侧和右侧，然而不能片面的用=号左边还说右边去判断是LHS还是RHS通俗的理解，LHS是赋值操作即可以看做是在往内存中存储值，而RHS是取值操作，它是从内存中进行检索。事实上赋值操作还

2021-11-03 23:38:17

赋值作用域 javascript

JavaScript 垃圾回收机制

1.概述随着软件开发行业的不断发展，性能优化已经是一个不可避免的话题，那什么样的行为才能算得上是性能优化呢？本质上任何一种可以提高运行效率，降低运行开销的行为，都可以看做是一种优化操作。这也就意味着，在软件开放行业必然存在着很多值得优化的地方，特别是在前端开发过程中，性能优化可以认为是无处不在的。例如请求资源时所用到的网络，以及数据的传输方式，再或者开发过程中所使用到的框架等都可以进行优化。本章探

2021-11-01 19:44:12

javascript 垃圾回收引用计数

只需2步，教你在Vue中设置登录验证拦截

两步教你在Vue中设置登录验证拦截！

2021-10-28 10:32:30

登录验证封装 json

Element-ui中表单（Form）校验的几种形式及表单嵌套表格含上传（Upload）组件的

1.Elementui中表单（Form）校验的几种形式1.1基础/自定义在elform上绑定rules，rlues为校验规则，在elformitem上绑定对应的prop；自定义规则，validator：checkAge，自定义规则的函数。详细的可查看element文档http://elementcn.eleme.io//zhCN/component/form(https://element.ele

2021-10-21 19:58:29

如何使用 Visual Studio Code 调试 Angular Schematics 实现

HowtoDebuganAngularSchematicusingVisualStudioCode(https://angularlicious.medium.com/howtodebuganangularschematicusingvisualstudio3bbe4fde8fd8)能够在代码执行时调试和遍历代码是我们开发工作流程的基础。这是一项必不可少的功能，使我们能够调试和确定代码在做什么。它

2021-10-21 10:42:19

Visual Stud node.js typescript

在Vue中使用JSX，很easy的

JSX 是一种 Javascript 的语法扩展，JSX = Javascript + XML，即在 Javascript 里面写 XML，因为 JSX 的这个特性，所以它既具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。

2021-10-14 10:32:54

Vue JSX Javascript

技术干货｜ Native 页面下如何实现导航栏的定制化开发？

很多 mPaaS Coder 在接入 H5 容器后都会对容器的导航栏进行深度定制，本文旨在通过不同实际场景的描述，供大家参考完成 Native 页面的定制化开发。

2021-09-28 16:39:30

H5 Native 移动开发平台

如何理解 Vue 中的生命周期

每个Vue实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到DOM、在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。在我们实际项目开发过程中，会非常频繁地和Vue组件的生命周期打交道，接下来我们就从源码的角度来看一下这些生命周期的钩子函数是如何被执行的。源码中最终执行生命周期的函数都

2021-09-23 16:17:01

好看视频Android重构——围绕于播放器的重构实践

!图片(https://s4.51cto.com/images/blog/202109/23/a3ef16793af27ec74a860ddf77074bca.png?xossprocess=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZ

2021-09-23 14:52:53

测试开发之前端篇-CSS层叠式样式表

CSS是层叠样式表(Cascading Style Sheets)的缩写，用于描述如何在屏幕、纸张或其他媒体上显示HTML元素，包括了定义网页及其元素的布局、风格、大小、位置和颜色等属性。

2021-09-22 13:05:40

ECMAScript 2021(ES12)新特性简介

简介ES12是ECMA协会在2021年6月发行的一个版本，因为是ECMAScript的第十二个版本，所以也称为ES12.ES12发行到现在已经有一个月了，那么ES12有些什么新特性和不一样的地方呢？一起来看看吧。基本上ES12引入了replaceAll方法用于对String进行操作，Promise.any用于对Promise进行组合操作，AggregateError用于表示多个错误的集合，新的逻辑

2021-09-22 11:07:43

nodejs ECMAScript javascript

一文搞懂如何使用Node.js进行TCP网络通信

网络是通信互联的基础，Node.js提供了net、http、dgram等模块，分别用来实现TCP、HTTP、UDP的通信，本文主要对使用Node.js的TCP通信部份进行实践记录。

2021-09-18 11:25:07

Node.js TCP 网络通信

应用性能前端监控，字节跳动这些年经验都在这了

字节跳动开发团队根据内部数十款产品的体验监控需求，逐渐打磨出了一版性能监控平台。经过不断的锤炼和沉淀，正式在火山引擎上对外发布应用性能监控全链路版。本文将会重点介绍它到底是一个怎样的监控平台，以及可以帮助企业解决哪些痛点。

2021-09-17 17:25:29

前端监测火山引擎字节跳动

利用原型链漏洞污染拿下服务器权限

一个平平无奇的合并函数面试的时候面试官大概率会出一个平平无奇的小问题来热热身，比如说写一个合并函数，读者估计会觉得：就这？不到30s就可以写好了一份利用递归实现的对象合并，代码如下：javascriptfunctionmerge(target,source){for(letkeyinsource){if(keyinsource&&keyintarget){merge(targetkey,sourc

2021-09-16 23:52:46

vue3，对比 vue2 有什么优点？

Vue3新版本的理念成型于 2018 年末，当时的 Vue 2 已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，Vue3在2020年正式推出，在源码和API都有较大变化，性能得到了显著的提升，比Vue2.x快1.2~2倍。

2021-09-16 14:22:29

vue3 vue2 diff算法

web性能优化—— 打包构建优化

作者：麦乐来源：恒生LIGHT云社区(https://developer.hs.net/thread/1328"恒生LIGHT云社区")压缩与合并资源的合并与压缩所涉及的优化点包括两方面：一方面是减少HTTP的请求数量，另一方面是减少HTTP请求资源的大小。下面我们将详细探讨：HTML压缩、CSS压缩、JavaScript压缩与混淆及文件合并。HTML压缩什么是HTML压缩？!370243400E

2021-09-09 14:36:20

web 前端 HTML

上一页 1 ··· 6 7 8 9 10 ··· 15 下一页

51CTO技术栈公众号

业务
速览

媒体

51CTO CIOAge HC3i

社区

51CTO博客鸿蒙开发者社区

教育

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