鸿蒙开发者社区

WOT全球技术创新大会

公众号矩阵

移动端

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

精品班厂商认证 IT技术 2024年软考 PMP项目管理软考资讯

CTO训练营技术经理研习营 LeaTech峰会

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

51CTO

开源基础软件社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

开源基础软件社区订阅号

51CTO学堂APP

51CTO学堂企业版APP

开源基础软件社区视频号

账号设置退出

前端

2.2w内容

关注

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

文章博文帖子课程

共 713 条

使用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 键值对数组

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

一分钟教会你使用Vuecli创建项目并整合ElementUI，全程高能，速速来看 ~

2022-03-05 21:39:48

node.js 创建项目 json

JavaScript 数据处理 - 列表篇

从 Array 类中提供的实例方法可以看出来，数组涵盖了一般的列表操作，增删改查俱全。除了日常的 CRUD 之外，最重要的就是对列表进行完全或部分遍历，拿到预期的结果。

2022-03-04 22:44:44

数组数据 javascript

浅谈：为什么vue和react都选择了Hooks?

一文带你领略 Hooks 的优点~

2022-03-01 22:54:43

vuejs react hooks

#yyds干货盘点# 内鬼消息：串联高频面试问题，值得一看！

前言开宗明义，本瓜深知汝之痛点：前端面试知识点太杂，卿总为了面试而面试，忘了记，记了又忘，循环往复，为此叫苦不迭。来，让本瓜带领各位都稍稍回顾一下，自己曾经在学生时代记忆元素周期表的光辉岁月。氢、氦、锂、铍、硼、碳、氮、氧、氟、氖、钠、镁、铝、硅、磷、硫、氯、氩、钾、钙、钪、钛、钒、铬、猛、铁、钴、镍、铜、锌......咱当初记这前三十位元素，是死记硬背的吗？答案是否定的，机智的我们用到了&nbs

2022-02-28 09:10:13

缓存服务器客户端

#yyds干货盘点# 前端模块化的全面总结

随着前端功能越来越复杂，前端代码日益膨胀，为了减少维护成本，提高代码的可复用性，前端模块化势在必行。

2022-02-27 23:50:39

#yyds干货盘点# CSS盒子模型

CSS盒子模型在CSS中算是比较重要的部分了，他已经开始涉及到网页布局和设计了，对于这一块内容要引起重视，多加练习。

2022-02-25 08:15:47

盒模型 css 页面布局

前端SSR的落地实践

!图片(https://s4.51cto.com/images/blog/202202/22104833_62144f0151bda52909.png?xossprocess=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpd

2022-02-22 14:40:08

数据服务端客户端

「VS Code 整活」100行代码，写一个超实用的悬浮翻译插件

要说哪个插件对效率提升最大，可能各有推荐，各有千秋。但我要说对初学者，以及英文有亿点点差的同学来讲：翻译，是日常开发中必不可少的一环。在下找过N个`VSCode` 翻译插件发现一个神器：

2022-02-21 15:06:35

ide 插件开发 VS Code

#yyds干货盘点# 洋哥表单，看了都说好

洋哥表单，看了都说好。表单精心总结，快速掌握

2022-02-17 18:54:19

表单 HTML CSS

#yyds干货盘点#这一次，彻底搞懂Promise

彻底搞定Promise

2022-02-12 09:22:04

数据迭代数组

#yyds干货盘点# SAP UI5 batch 请求的响应解析流程分析

batch请求的回复：!(https://s4.51cto.com/images/blog/202202/10104156_62047b74dba8c78382.png?xossprocess=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3po

2022-02-10 10:42:29

json 字段数据

JavaScript 之 Proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

2022-01-27 23:18:10

前端 JavaScript Proxy

APICloud AVM框架列表组件list-view的使用、flex布局教程

avm.js 是APICloud 推出的多端开发框架。使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App，且多端渲染效果统一；全新的 App 引擎 3.0 不依赖 webView，提供百分百的原生渲染，保障 App 性能和体验与原生 App 一致。 list-view 定义可复用内容的竖向滚动

2022-01-26 11:40:47

css 列表 avm.js

使用 React 和 Next.js 构建博客

Next.js 是由 Vercel 创建和维护的基于 React 的应用程序框架。本教程将从零开始学习如何使用 Next.js 构建一个小型的博客网站：

2022-01-22 21:18:38

html next.js react

使用APICloud AVM框架开发预约应用

前段时间跟朋友一起搞了一个预约的项目，前端用的APICloud的AVM框架做的，后端用的php开发的，用的tp5框架，没几天就搞出来了。简单跟大家分享一下开发中的一些功能点的实现吧。也欢迎大家一起探讨。一、整理项目脑图二、项目原型图原型是用的码前做的，大家可以通过www.devbefore.com/protomobile/47942983009476608查看三、项目前端本项目中前端采用A

2022-01-21 14:54:17

多端开发 app开发小程序开发

#私藏项目实操分享# SAP 电商云 Spartacus UI 的交货模式 Delivery Mode 设计

本文讨论SpartacusUIcheckout流程时，下图高亮的两种交货模式，DeliveryMode的数据来源：!(https://s4.51cto.com/images/blog/202201/21094219_61ea0f7b7aa0060876.png?xossprocess=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFF

2022-01-21 09:42:55

TypeScript JavaScript

#私藏项目实操分享# RxJs 操作符 withLatestFrom 在 SAP 电商云 Spartacus UI 中的应用

看下面这段代码：!(https://s4.51cto.com/images/blog/202201/20113916_61e8d964460c987385.png?xossprocess=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5

2022-01-20 11:39:46

数据数据类型 typescript

从零打造一个Web地图引擎

说到地图，大家一定很熟悉，平时应该都使用过百度地图、高德地图、腾讯地图等，如果涉及到地图相关的开发需求，也有很多选择，比如前面的几个地图都会提供一套js API，此外也有一些开源地图框架可以使用，比如OpenLayers、Leaflet等。那么大家有没有想过这些地图是怎么渲染出来的呢，为什么根据一个经纬度就能显示对应的地图呢，不知道没关系，本文会带各位从零实现一个简单的

2022-01-18 22:34:04

这8个JS 新功能，你应该去尝试一下

本文主要介绍几个已经进入stage4的提案，这几个提案有望在2022年逐步纳入标准。

2022-01-17 11:24:41

github javascript 开发语言

#yyds干货盘点# 数据结构与算法之JavaScript

几个常见JavaScript中的算法

2022-01-15 22:56:24

javascript 数据结构算法

Bootstrap实战 - 响应式布局

响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。导航栏与轮播在大部分网站的头部占很高的比重，特别是导航栏，扮演着网站地图的角色。在响应式布局中，要求导航栏能够根据终端屏幕大小显示不同的样式。

2022-01-12 10:25:30

bootstrap 导航栏 ico

使用APICloud开发app的性能提升实践

一、为什么说这个问题？首先我是一名前端开发者，使用过的开发方式有，APICloud、原生开发、自己混合打包开发。这些都是根据不同的业务需求，用不同的开发方式，有的只需要安卓开发的需求，有需要安卓和iOS开发的需求，还有一些要h5和安卓等等。根据这些就做了相应的研究。二、性能分析两个平台上代码,安卓原生代码。本次测试所用机型是XiaoMi Redmi K30 (1)安卓代码 MainAct

2022-01-04 17:42:31

APICloud Android App开发

#yyds干货盘点#7个场景让你深入理解min/max - width/height

创作不易，点个赞再看呗! 前言日常开发的时候，大家有么有遇到下面这种情况：设置一个盒子，但是我们不知道有没有内容，并且有多少内容我们也不能确定，而且又不想出现滚动条，这个时候我们就不能设置具体高度，但是我们可以设置min-height来用最小的高度撑开盒子，并且随着内容的多少，盒子的高度可以动态调整，这样是不是就满足了我们的要求。min/max 宽高这个我们不常用的属性，在某些时候还是能发挥奇效

2021-12-31 22:58:36

最小宽度属性值默认值

原生JavaScript灵魂拷问(二)，你能全部答对吗？#yyds干货盘点#

前言JavaScript之运算符篇16.你知道与&&的返回值规则吗？+短路效应：&&和都会发生短路+&&只有在两个操作数都为true时，条件判断的结果才为true，如果操作数一为false，不会判断操作数二。+两个操作数只要有一个为true，条件判断的结果就为true，因此操作数一为true时，不会判断操作数二。+返回值规则+和&&首先会对操作数一执行条件判断，如果不是布尔值就先强制转换为布尔类型

2021-12-31 14:43:25

灵魂拷问 JavaScript 基础

CSS实现一只自由飞翔的鸟儿?#yyds干货盘点#

?前言前几天在逛社区时，偶然发现一个非常赏心悦目得小鸟飞翔效果，并且是纯css实现的，具体可以看一下效果。!flybird.gif(https://s2.51cto.com/images/20211230/1640850656820522.gif)这不由让我大感惊奇，css的世界可谓是渊博如海，让人又爱又恨。我是一只小小小小鸟，想要飞呀飞却飞也飞不高，我寻寻觅觅寻寻觅觅一个，温暖的怀抱?????进

2021-12-30 15:51:38

css 飞翔的小鸟q 前端

原生JavaScript灵魂拷问，你能答上多少(一)#yyds干货盘点#

前言当下的前端开发，三大框架三分天下，框架的简单、强大让我们欲罢不能，使用原生JavaScript越来越少。但我认为JavaScript作为每一个前端工程师的立身之本，不止要学会，还要学好、学精，学再多遍都不为过。另一方面，前端面试中，越来越重视原生JavaScript的考察，其所占比例也越来越高。我抓取了牛客上今年的线上面试题和面经，大约500左右道题，原生JavaScript的难点(闭包，ev

2021-12-30 15:42:47

javascript 基础前端

#yyds干货盘点#Console 3000字完整指南，让你不只会用console.log !

创作不易，求一个免费的赞，谢谢啦！！！。前言为啥会突然想起写一篇关于console的文章？笔者接触JS也不少时间了，除了用vscode的debuger，其实大部分时间都在使用console.log()方法来输出一些或者调试程序，我相信很多刚开始接触JS的同志，应该也都习惯使用console.log()。但是log的能力是有限的，并不能满足所有的场景。比如我们相用表格数据对象。下面这张图

2021-12-29 23:39:58

数组 chrome 火狐浏览器

小程序自定义配置顶部栏#yyds干货盘点#

app.json "window": { "navigationStyle": "custom"//自定义需要配置的内容 },app.jsApp({ onLaunch: function () { // 获取顶部栏信息 wx.getSystemInfo({ success: res => { //导航高度 this.globalD

2021-12-29 18:42:25

自定义 ico xml

#私藏项目实操分享# Angular Change Detection 的学习笔记

Angular变化检测机制(https://blog.angularuniversity.io/howdoesangular2changedetectionreallywork/)比AngularJs中的等效机制更透明且更易于推理。但是在某些情况下（例如在进行性能优化时），我们确实需要知道幕后发生了什么。因此，让我们通过以下主题深入了解变更检测：如何实施变更检测？Angular变化检测器是什么样子

2021-12-29 11:05:01

typescript 变化检测应用程序

前端性能和加载体验优化实践（附：PWA、离线包、内存优化、预渲染）

页面为何会卡？等待时间长？看起来卡？特别是对于首屏资源加载中的白屏时间，用户等待的时间就越长，用户感知到页面的速度就越慢。麻省理工学院的 Richard Larson 在讲话中指出，“人类将被动等待高估了 36%”。这意味着用户感觉到的等待时间比开发工具记录的长得多。

2021-12-28 15:30:11

JavaScript 体验性能

《2w字大章 38道面试题》彻底理清JS中this指向问题 #yyds干货盘点#

前言当一个函数调用时，会创建一个执行上下文，这个上下文包括函数调用的一些信息(调用栈，传入参数，调用方式)，this就指向这个执行上下文。this不是静态的，也并不是在编写的时候绑定的，而是在运行时绑定的。它的绑定和函数声明的位置没有关系，只取决于函数调用的方式。本篇文章有点长，涉及到很多道面试题，有难有简单，如果能耐心的通读一编，我相信以后this都不成问题。学习this之前，建议先学习以下知识

2021-12-28 15:17:19

javascript 作用域 this

DevTools 实现原理与性能分析实战

本文通过分析 Chrome 的 DevTools 的技术实现，特别是在浏览器内核中的实现部分，来展示这款被万千开发者所喜爱的开发工具背后的秘密。本文适合阅读对象主要有前端开发者、有志于开发 Hybrid 应用调试工具或重写 webdriver 实现对 Chrome 或 WebView 控制的应用工程师。

2021-12-27 10:14:05

chrome javascript Web

#yyds干货盘点#还在用JS计数吗？来试试纯CSS计数器！！！

创作不易，点个赞再看呗! 关注专栏，让你走进CSS世界的深处前言不知道有多少人做过自己的博客，在生成文章目录的时候，有没有人是下图样式的：会在标题前面加上数字编号的，大部分的实现方案是什么呢？我一开始是在遍历的时候加上数字编号的，不过这样的JS代码很多。需要判断层级数很麻烦。直到我发现纯css的counter属性！计数器CSS的计数器通过在 content 上应用 counter() 或 cou

2021-12-26 23:23:00

重置 css 嵌套

半小时，阿包带你学会手撕高阶函数 #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 数组动态绑定

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

51CTO技术栈公众号

业务
速览

媒体

51CTO CIOAge HC3i

社区

51CTO博客鸿蒙开发者社区

教育

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