前端早茶的博客_Node.js,React,Vue(5)

列表优化之虚拟列表

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 导读本文适用于以下三种读者只想要了解一下虚拟列表可阅读“实现一个简单的虚拟列表”之前的部分想初步探究虚拟列表的具体实现可重点阅读“实现一个简单的虚拟列表”中的方案一想要深入研究和探讨如何在虚拟列

加载

数据

分页

原创 2022-05-12 20:16:42 2735 阅读

JS常用的工具函数

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 1 isArray 判断数组 var toString = Object.prototype.toString; // 可以通过 `toString()` 来获取每个对象的类型 // 一般返回值是 Bool

数组

原型链

for循环

原创 2022-05-12 20:16:26 411 阅读

Antd4 Form表单原理

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 前言在cms后台管理系统中，大家一定绕不开对Form表单的使用，接下来我们就来详细解析下Antd4 Form的背后实现以及数据仓库的知识。其实Form表单就做了以下几件事情：数据收集数跨传递数据

form表单

数据仓库

表单校验

转载 2022-05-12 20:16:04 2880 阅读

Vue之高阶组件实战

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 前言高阶组件这个概念在 React 中一度非常流行，但是在 Vue 的社区里讨论的不多，本篇文章就真正的带你来玩一个进阶的骚操作。先和大家说好，本篇文章的核心是学会这样的思想，也就是智能组件和木偶

加载

数据

sed

转载 2022-05-12 20:15:29 615 阅读

前端常见的Vue面试题目汇总

欢迎关注前端早茶，与广东靓仔携手共同进阶前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~ 1. 请说一下响应式数据的原理默认Vue在初始化数据时

响应式

数据

复用

原创 2022-05-12 20:15:08 321 阅读

JavaScript引擎基础知识

JavaScript引擎管道从编写的JavaScript代码开始。JavaScript引擎解析源代码，并将其转换为抽象语法树（AST）。基于该AST，解释器可以开始做它的事情并产生字节码。大！那时引擎实际上正在运行JavaScript代码。为了使其运行更快，可以将字节码与分析数据一起发送到优化编

javascript引擎

数组

javascript

转载 2022-05-12 18:13:49 201 阅读

tree-shaking原理

一、前言 Tree-shaking 较早由 Rich_Harris 的 rollup 实现，后来，webpack2 也增加了tree-shaking 的功能。其实在更早，google closure compiler 也做过类似的事情。三个工具的效果和使用各不相同，使用方法可以通过官网文档去了解，三

javascript

静态分析

get方法

原创 2022-05-12 18:08:48 480 阅读

react《容器组件和展示组件》

作者：Dan Abramov 容器组件和展示组件容器组件和展示组件名词都来自于redux中文文档。我在用react写程序时，发现了一种简单好用的

数据

回调函数

ide

转载 2022-05-12 18:08:07 818 阅读

十分钟带你理解Kubernetes核心概念

前言作为前端开发，我们了解下Kubernetes的核心概念，还是有点收获的。十分钟带你理解Kubernetes核心概念本文将会简单介绍Kubernetes的核心概念。因为这些定义可以在Kubernetes的文档中

负载均衡

ip地址

docker

转载 2022-05-12 18:07:48 477 阅读

async-validator 的中文文档翻译

阿里出品的 antd 和 ElementUI 组件库中表单校验默认使用的 async-validator，它在 gitbub 上也获得了 3.8k 的 star，可见这个库十分强大，奈何只有英文文档看的蛋疼，因此花点时间翻译一下以便日后查看和为新手同事提供文档，原文都以折叠的方式保留着，看不懂我的描

字段

数组

提示信息

原创 2022-05-12 18:07:11 1811 阅读

VScode Remote 远程开发与调试

简介最近VScode发布了远程编程与调试的插件Remote Development，使用这个插件可以在很多情况下代替vim直接远程修改与调试服务器上的代码，同时具备代码高亮与补全功能，就和在本地使用VScode一样。终于不用在服务器端翻来覆去的配置vim插件了。配置的过程很简单，本文介绍如何通过

安装插件

vim

命令行

原创 2022-05-12 18:06:29 2393 阅读

taro使用教程（详细版）

Taro框架的简介和开篇介绍 Taro是由京东凹凸实验室推出的框架，目的就是解决多端混乱的局面，也是当下比较新兴的一个框架。当我们按照一种模式一种代码进行开发，开发完成后，项目就有了在任何终端显示的能力，这是一种想想都很爽的。那具体Taro有那些优点，请看下面的图片。目前Taro支持的终端微信小

taro

小程序

h5

原创 2022-05-12 18:06:13 4289 阅读

Mac 中安装 nvm: 切换Node 不同版本

一、查看是否可以访问此网站，该网站是nvm的官方网址如可以访问：则直接安装 nvm，打开nvm github官方文档，查看最新版本安装，如不可以访问，则操作以下步骤：以下两种方法： 1. 如果打不开，则需要代理/FQ软件进行帮助 2. 打开终端 1. cd ~ 2. sudo vi /et

版本号

github

新版本

原创 2022-05-12 18:05:33 2692 阅读

npm、cnpm、yarn安装指定版本的依赖包

（1）、npm 在npm install 后面加上 @以及版本号就行 npm install --save echarts@4.3.0 （2）、cnpm 安装cnpm： npm install -g cnpm --registry=https://registry.npm.taobao.org 安装

管理工具

镜像源

命令操作

原创 2022-05-12 18:04:37 7281 阅读

Redux数据持久化

背景在开发的过程中，数据用redux管理，觉得希望将数据持久化保存，也就是说当用户下一次打开APP或者网站的时候，我们希望浏览器或者APP自动加载上次的数据，怎么办？有没有一个统一的方式？有的，这就是简单易用的redux-persist,事情会比你想象中的简单太多。下面是官方示例代码： imp

ide

数据

加载

原创 2022-05-12 18:04:20 1345 阅读

redux-thunk使用教程

背景 Redux store 仅支持同步数据流。使用 thunk 等中间件可以帮助在 Redux 应用中实现异步性。可以将 thunk 看做 store 的 dispatch() 方法的封装器；我们可以使用 thunk action creator 派遣函数或 Promise，而不是返回 actio

中间件

微信公众号

封装器

原创 2022-05-12 18:04:10 642 阅读

Taro -- 上传图片公用组件

效果图子组件chooseImage //component/chooseImage/index.js import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' import {

taro

上传

图片上传

原创 2022-05-12 18:04:00 1316 阅读

React组件什么时候render

开篇先来个提问：对于如下Demo，点击Parent组件的div，触发更新，Son组件会打印child render!么？ function Son() { console.log('child render!'); return <div>Son</div>; } function Parent(p

优先级

返回结果

复用

原创 2022-05-12 18:03:49 248 阅读

一线技术团队前端面试题总结

理解与问答 1. 你有做过Hybrid APP开发吗？说说你的经验？在公司移动端和PC端都做过相应的开发，然后就介绍了移动端开发的一些东西，然后说了下H5是如何和客户端进行交互的，最后说了下自己参与的一些weex开发项目，说了下weex与H5的区别。 2. 能聊一聊weex么，原理是啥？简单介绍

任务队列

字段

服务端

原创 2022-05-12 18:03:26 154 阅读

Vue Router 4.0

背景在经历了 14 个 Alpha，13 个 Beta 和 6 个 RC 版本之后，Vue Router v4 闪亮登场，为你带来了 TypeScript 集成、新功能以及对现代应用程序的一致性改进，已经准备好成为 Vue3 新应用的最佳伴侣。将近 2 年的时间，大约 1500 次提交，15 个

优先级

旧版

异步处理

原创 2022-05-12 18:03:25 816 阅读

深入理解浏览器的缓存机制

一、前言缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。

缓存

服务器

浏览器缓存

原创 2022-05-12 18:02:23 171 阅读

制定企业级代码规范与检查

开篇一张图前言如何作出项目的亮点？项目中遇到了什么问题？解决问题的过程并且如何思考？思考之后通过什么方式解决最后这一个任务你学到了什么，给团队带来了什么价值，解决了哪些痛点。就从我的题目说起，本篇文章告诉你针对定制代码规范和检查这个小需求如何做出亮点？看完本文后回顾上面提到的 4 点，

typescript

解析器

官网

原创 2022-05-12 18:01:52 234 阅读

前沿团队前端代码规范

代码千万行，安全第一行；前端不规范，同事两行泪。腾讯包含内容也挺多的： PC端专题：快速上手、文件目录、页面头部、通用title、通用foot、统计代码、兼容测试移动端专题：快速上手、文件目录、页面头部、REM布局、通用foot、统计代码、分享组件、兼容要求双端官网：快速上手、页面跳转 ht

javascript

css

html

原创 2022-05-12 18:01:41 271 阅读

mpvue 引入直播功能

1.管理后台直播设置现在小程序直播已经提供公测，有资质的商家会有机会公测，接入指引如果审核成功会在小程序后台设置=》第三方设置，看到小程序直播组件然后在功能=》直播，看到直播功能，进去就可以创建直播 2.在项目有两种方式引入方式1 ： app.json中添加分包以及插件，不要改变prov

ide

小程序

3c

原创 2022-05-12 18:00:16 225 阅读

React生命周期分析

上图这张图是旧的React生命周期图，从图中可以看出React的生命周期从广义上分为三个阶段：挂载、渲染、卸载 1. 挂载卸载过程 constructor() 1.子类如果没有 constructor 方法，该方法会被默认添加，即任何的子类都有 constructor 方法，无论定义没定义，它就在

生命周期

数据

初始化

原创 2022-05-12 18:00:07 245 阅读

performance分析

有关performance官网地址前言浏览器提供的 performance api，是性能监控数据的主要来源。performance 提供高精度的时间戳，精度可达纳秒级别，且不会随操作系统时间设置的影响。基本属性在控制台我们打印performance，可以看到下面这些api：属性分析 pe

css

加载

重定向

原创 2022-05-12 17:59:50 743 阅读

npm ci命令解析

一、用途 npm ci和npm install命令一样，是用来安装依赖的命令，但他可以比常规的 npm 安装快得多，也比常规安装更严格，他可以npm依赖安装的一致和稳定 (锁版本)。在package.json中，每次install后，对应的版本前都有个 ^ 符号。在这种情况下，再次install时

json

安装包

公众号

原创 2022-05-12 17:59:14 757 阅读

react 面试专题

1.什么是虚拟DOM？虚拟DOM是组成应用程序UI的实际HTML元素的内存表示形式。重新渲染组件时，虚拟DOM会将更改与其DOM模型进行比较，以创建要应用的更新列表。主要优点是它高效，仅对实际DOM进行最小的必要更改，而不必重新渲染大块。 2.什么是JSX？ JSX是JavaScript语法的扩展

生命周期

数据

html

原创 2022-05-12 17:59:01 141 阅读

Vue.set()和this.$set()源码解析

前言我们在日常项目开发过程中，有时候我们对数组或者对象进行了一些操作后，发现页面数据没有更新到。这个时候就会有疑问，why？如果我们在看文档有这样一个api，以下内容： Vue.set()和this.$set()实现原理 Vue.set()的源码： ... 这里是省略的代码 import { s

数组

数据

响应式

原创 2022-05-12 17:58:33 525 阅读

chrome devTools调试小技巧

命令（Command）菜单 ???? “命令”菜单是最最常用的，本文也会多次用到，所以这里先说一下打开方式: 按Cmd + Shift + P（如果使用Windows，则按Ctrl + Shift + P）打开“命令”菜单。截图DOM元素 ???? 当你只想对一个特别的 DOM 节点进行截图时，你可能需

chrome

媒体查询

数据

原创 2022-05-12 17:58:23 708 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

陈泽锋博客

列表优化之虚拟列表

JS常用的工具函数

Antd4 Form表单原理

Vue之高阶组件实战

前端常见的Vue面试题目汇总

JavaScript引擎基础知识

tree-shaking原理

react《容器组件和展示组件》

十分钟带你理解Kubernetes核心概念

async-validator 的中文文档翻译

VScode Remote 远程开发与调试

taro使用教程（详细版）

Mac 中安装 nvm: 切换Node 不同版本

npm、cnpm、yarn安装指定版本的依赖包

Redux数据持久化

redux-thunk使用教程

Taro -- 上传图片公用组件

React组件什么时候render

一线技术团队前端面试题总结

Vue Router 4.0

深入理解浏览器的缓存机制

制定企业级代码规范与检查

前沿团队前端代码规范

mpvue 引入直播功能

React生命周期分析

performance分析

npm ci命令解析

react 面试专题

Vue.set()和this.$set()源码解析

chrome devTools调试小技巧

欢迎