前端 - 哈喽比特 - https://www.hellobit.com.cn

推荐

资讯

基础

前端

后端

人工智能

Android

iOS

Rust

Flutter

Shell

RFC文档

前端

一看就懂的TypeScript工具类型

TypeScript是一种静态类型检查的编程语言，它内置了许多基本数据类型，如字符串、数字和布尔型等。除了基本数据类型，当某种类型对于大多数代码来说都非常有用时，它们就会被添加到TypeScript中并且被大家使用而无需担心它们的可用性。这些内置在TS中的类型我们称之为工具类型，这些工具类型位于TS安装目录typescript/lib/lib.es5.d.ts，熟悉这些工具类型，可以帮助我们提高开发效率。

发表于 10月以前 · 阅读量：666

前端

vue3组件注册

一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。

发表于 10月以前 · 阅读量：601

Vue JavaScript

前端

Promise中这四个API原来这么简单！

不管你是否还学的动，JS语言依然在以自己的节奏飞快的进化。Promise中的any()、race()、all()方法都是比较常见的；转眼间，Promise 的工具包里又多了一个方法Promise.allSettled 供你选择，它看起来像是对 Promise.all 的一种补充，缓解了使用 Promise.all 碰到reject 的痛点问题。

发表于 10月以前 · 阅读量：536

前端

你想要的图片优化方案都在这里！

当谈到前端性能优化，不得不提图片资源的优化，图片可谓是网站的主要构成部分，尤其是对于商城类的网站。

发表于 10月以前 · 阅读量：659

前端

前端如何生成临时链接？

前端基于文件上传需要有生成临时可访问链接的能力，我们可以通过URL.createObjectURL和FileReader.readAsDataURAPI来实现。

发表于 10月以前 · 阅读量：496

前端

如何实现一个Canvas渲染引擎(一)：节点和层级关系

canvas中没有节点和层级的概念，我们通过DisplayObject和Container等类，实现了节点和层级的概念；通过Transform属性实现了类似DOM的transform属性；通过叠加节点相对于父节点的变换(localTransform)和父节点相对于canvas视窗的变换(parent.worldTransform)，得到了每个节点相对于canvas视窗的变换，然后调用ctx.setTransform设置画笔的状态，来进行绘制；通过requestAnimationFrame实现了自动清除画布和重新绘制。

发表于 10月以前 · 阅读量：961

前端

一篇文章带你看懂Node.js

Node.js 是一个开源与跨平台的 JavaScript 运行时环境。在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核），利用事件驱动、非阻塞和异步输入输出模型等技术提高性能。可以理解为 Node.js 就是一个服务器端的、非阻塞式I/O的、事件驱动的JavaScript运行环境。

发表于 10月以前 · 阅读量：556

Node.js JavaScript

前端

Vue之nextTick原理与作用

在 Vue.js 中，$nextTick 方法的底层原理涉及 Vue 的更新队列以及浏览器的异步任务队列（微任务和宏任务）。它的主要目标是在下次 DOM 更新循环结束后执行回调函数，确保能够访问到更新后的 DOM。

发表于 10月以前 · 阅读量：607

Vue JavaScript

前端

浅谈JavaScript闭包

当一个函数能够记住并访问它创建时的词法作用域，即使该函数在其词法作用域之外执行，我们称之为闭包。

发表于 10月以前 · 阅读量：575

JavaScript

前端

npm 淘宝镜像到期了，尽快切换~(npm使用淘宝镜像安装时报错)

npm使用淘宝镜像安装时突然报错了,错误信息：npm ERR! request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired

发表于 10月以前 · 阅读量：1081

前端

大厂都使用webp图片提速降本，必须安排！

站点性能优化一个很重要的方向是图片压缩，一方面能提升客户端访问性能，另外一方面因为图片体积变小，能大大减少站点的流量成本，特别是博客，相比文本内容，大量的图片占了流量成本的大头。

发表于 10月以前 · 阅读量：539

前端

Web 第三方嵌入的最佳实践

今天给大家带来一篇 Web 第三方嵌入相关的实践文章，在我们的网页中嵌入一个第三方网页是再常见不过的需求了，比如一些视频播放、在线地图或者广告等等。

发表于 10月以前 · 阅读量：550

前端

我知道你想用useEffect，但你先别急

useEffect是React提供给我们的一个“逃生舱”，是React 的纯函数式世界通往命令式世界的“逃生通道”，选择合适的时机使用useEffect会让我们的代码既优雅又高效，反之会造成不必要的负担。

发表于 10月以前 · 阅读量：849

React JavaScript

前端

React之Effect详解

在React中，Effect是一种用于处理副作用的机制，它允许我们在组件生命周期中执行诸如数据获取、订阅事件、手动操作DOM等副作用操作。

发表于 10月以前 · 阅读量：843

React JavaScript

前端

React之自定义 Hook

自定义Hooks是一种在React中重用逻辑的方式。它允许我们将组件中的状态逻辑提取到可重用的函数中，并在需要时在不同的组件中使用。

发表于 10月以前 · 阅读量：619

React JavaScript

前端

认识&对比 React、Vue2、Vue3 三者的 diff 算法

React 是 Fiber 架构的，Fiber 其实是一个链表的结构，但是由于没有设置反向指针，因此没有使用双端比对的方式去优化 Diff 算法（没有反向指针，从右往左遍历链表会很困难）。这一点在 React 源码 reconcileChildrenArray 函数的注释中也有说明。

发表于 10月以前 · 阅读量：615

React JavaScript

前端

【滴滴】如何实现 chunk 函数，数组进行分组

滴滴面试题：如何实现 chunk 函数，数组进行分组。

发表于 10月以前 · 阅读量：561

前端

15 张精美动图全面讲解 CORS

本文翻译自 Lydia Hallie[1] 小姐姐写的 ✋🏼🔥 CS Visualized: CORS[2]，她用了大量的动图去解释 CORS 这个概念，国内还没有人翻译本文，所以我在原文的理解上翻译了本文并修改了一些错误，希望能帮到大家。

发表于 10月以前 · 阅读量：421

前端

🤯 [性能优化] 浏览器跨域带来的一些性能问题

CORS 除了会带来一些资源加载失败的问题，它其实还会对一些性能场景带来一些干扰，本篇文章就是记录一下工作中遇到的一些问题。

发表于 10月以前 · 阅读量：445

前端

React之Context 深层传递参数

通常情况下，我们使用Context来避免通过props一层一层地传递数据，特别是当应用程序变得复杂时。深层传递参数是指在React应用程序中将数据从一个祖先组件传递到较深层的后代组件。

发表于 10月以前 · 阅读量：585

React JavaScript

前端

JavaScript中的设计模式

JavaScript设计模式是编程世界的智慧结晶，提供了解决常见问题的优秀方案。无论你是初学者还是经验丰富的开发者，掌握这些模式都能让你的代码更清晰、更灵活。本文将为你介绍一些常见的设计模式，帮助你提高代码质量，构建更可维护的应用。让我们一起深入了解这些设计模式的精妙之处吧！

发表于 10月以前 · 阅读量：706

JavaScript

前端

写一个 Vue3 Hooks，计算网页的帧数 FPS

平时我们在打游戏的时候，都会接触到帧数这个名词，也就是 fps，帧数越高，说明画面的显示更加流畅。

发表于 10月以前 · 阅读量：537

前端

作为前端，工作中处理过什么复杂的需求？

我今天提到的“复杂度”则比较普适，所有团队都存在面临这种场景的可能性，而对于每个团队而言，我认为没有一个团队会觉得应对起来很简单。更多需要的是公司资源调度+团队技术积累+个人能力的配合。

发表于 10月以前 · 阅读量：535

前端

一张架构图让我认识到前端的渺小

本文想通过一次后端架构分析, 让我们前端人意识到自己的不足与眼界的狭窄,我们前端er需要对一个完整的大型项目有一个整体的认知,意识到自己的不足，才能在这条路上更好的走下去。不要满足于html拼拼页面,写写样式,做做一些简单的工作。

发表于 10月以前 · 阅读量：600

前端

React之条件渲染

条件渲染是指根据特定条件选择性地渲染React组件或元素。这可以通过JavaScript中的条件语句（如`if`语句或三元运算符）来实现。在React中，条件渲染通常与组件的`render`方法结合使用，根据某些条件返回不同的React元素。

发表于 10月以前 · 阅读量：732

React JavaScript

前端

用 Electron 打造你自己的录屏软件

录屏软件对于我们来说都不陌生了，今天我们要做的事情是实现自己的录屏软件。载体使用Electron，因为它更适合录制桌面的场景。

发表于 11月以前 · 阅读量：460

前端

滴滴开源小程序框架 Mpx 新特性：局部运行时能力增强

Mpx 是滴滴开源的一款增强型跨端小程序框架，自 2018 年立项开源以来如今已经进入第六个年头，在这六年间，Mpx 根植于业务，与业务共同成长，针对小程序业务开发中遇到的各类痛点问题提出了解决方案，并在滴滴内部建设了完善的小程序跨端开发生态。

发表于 11月以前 · 阅读量：381

前端

轻量级、可插拔、OOP 式图形编辑器开发引擎

图形编辑器在多个行业中扮演着至关重要的角色，其应用范围广泛且影响深远。以 Figma 为典范的 Web 图形设计工具，为人们提供了一个自由发挥创造力的平台，随着 Web 平台的发展壮大，技术如 WebGL 和 WebGPU 的涌现与成熟，为传统的 OpenGL 图形编辑系统迁移到 Web 环境带来了新的可能性，极大地拓展了创新的边界。

发表于 11月以前 · 阅读量：458

前端

React.js快速入门教程

React.js是一个由Facebook开发的用于构建用户界面的JavaScript库。它主要用于构建单页面应用程序（SPA），可以轻松地创建交互性强、快速响应的用户界面。

发表于 11月以前 · 阅读量：496

React JavaScript

前端

全网最详细！Echarts+gl实现3D地图板块

本文主要是对3D地图的实现，包含一些常用的配置和功能，从2D的实现到3D的实现，都是一些配置的使用，官方文档可能比较晦涩，有个实际的例子给到大家会比较方便，如果各位有需要用到对应的功能，直接码下来进行更改即可，实现这个功能花了我一两天的时间，大部分时间都是在查文档和问GPT的路上，踩了很多坑。

发表于 11月以前 · 阅读量：487

前端

不同打包工具下的环境变量配置方式对比

在现代的JavaScript应用程序开发中，环境变量的配置是至关重要的。不同的应用场景和部署环境可能需要不同的配置，例如开发、测试和生产环境。最常见的需求是根据不同的环境，配置如是否开启sourceMap、API请求地址的切换、是否压缩代码等逻辑。本文主要介绍利用不同的工具：Webpack、Vite、Rollup打包项目的环境变量的配置方式。

发表于 11月以前 · 阅读量：653

JavaScript

前端

export 导出一个字面量会报错，而 export default 不会报错？

其实总的来说就是 export 导出的是变量的句柄（或者说符号绑定、近似于 C 语言里面的指针，C++里面的变量别名），而 export default 导出的是变量的值。

发表于 11月以前 · 阅读量：714

前端

浅析 5 种 React 组件设计模式

作为一名 React 开发者，你可能会面临下面几个问题：如何构建一个高复用度性的组件，使其适应不同的业务场景？如何构建一个具有简单 API的组件，使其易于使用？如何构建一个在 UI 和功能方面具有可扩展性的组件？为解决上述问题，下面介绍五种 React 组件设计模式，并对比它们的优缺点。

发表于 11月以前 · 阅读量：930

React JavaScript

前端

用TypeScript编写React的最佳实践

如今， React 和 TypeScript 是许多开发人员正在使用的两种很棒的技术。但是把他们结合起来使用就变得很棘手了，有时很难找到正确的答案。不要担心，本文我们来总结一下两者结合使用的最佳实践。

发表于 11月以前 · 阅读量：804

React JavaScript

前端

TypeScript 前端工程最佳实践

随着前端工程化的快速发展， TypeScript 变得越来越受欢迎，它已经成为前端开发人员必备技能。TypeScript 最初是由微软开发并开源的一种编程语言，自2012年10月发布首个公开版本以来，它已得到了人们的广泛认可。

发表于 11月以前 · 阅读量：592

前端

字节面试：如何实现准时的setTimeout

setTimeout 是不准的。因为 setTimeout 是一个宏任务，它的指定时间指的是：进入主线程的时间。

发表于 11月以前 · 阅读量：708

面试

前端

开发过程中，因为国际化太麻烦，我写了这款 vscode 国际化插件

新增了一个国际化类型，翻译的时候多了一个繁体中文，保存的时候，也会检测本地文件是否存在如果不存在，会自动创建该类型文件。添加国际化语言时冒号前面是百度翻译支持的类型，后面是文件名，如果一样可以只写一个。

发表于 11月以前 · 阅读量：660

前端

React 中条件渲染的 N 种方法

条件渲染在React开发中非常重要的功能，它允许开发人员根据条件控制渲染的内容，在创建动态和交互式用户界面方面发挥着至关重要的作用，本文总结了常用的的条件渲染方法。

发表于 11月以前 · 阅读量：804

React JavaScript

前端

盘点2023年前端大事件

2023 年即将过去，这一年前端生态圈快速发展，发生了许多令人瞩目的事件和变化。从新技术的涌现到老技术的更新，前端技术正在经历着一次全面的变革。本文将梳理 2023 年前端界的重要事件，带你回顾那些令人难忘的历史时刻！

发表于 11月以前 · 阅读量：726

前端

从新建文件夹到承接猫晚——夜间版淘宝首页的发展

淘宝首页Bface，业务上又称作夜淘宝（以下简称BFace），是结合淘宝用户以长时间休闲娱乐为主的需求而打造的一个全新产品，是我们对淘宝服务于用户生活方式的一个探索。本文将从技术的视角，介绍BFace的设计和发展。

发表于 1年以前 · 阅读量：681

前端

Chrome 插件开发指南和实践

阅读本文你将了解到:Chrome 插件整体架构；如何开发一个 Chrome 插件（Popup 和 Devtools）；如何使用前端框架（React/Vue）进行开发；如何调试插件；如何使用 Puppeteer 对插件进行 E2E 测试（本地和 CI 环境）。

发表于 1年以前 · 阅读量：1185

Vue React JavaScript

前端

12 个超级实用的 CSS 技巧

本文来分享 12 个超级实用的CSS 技巧，帮助你充分发挥 CSS 的优势，优化用户体验。

发表于 1年以前 · 阅读量：628

前端

前端最轻量级的精度计算工具库！

今天和同事聊起计算机中精度的话题。于是想起一个小巧的，快速的JavaScript库：big.js。它可用于任意精度的十进制算术运算。这里分享给大家。

发表于 1年以前 · 阅读量：677

JavaScript

前端

探索Taro：跨平台开发的实践与原理

对于开发者来说，针对不同平台重新开发一套小程序应用将变成一场无尽的噩梦。开发者需要熟悉并掌握每个客户端的api差异，编写大量重复的代码，并进行平台特定的调试和适配工作。这不仅增加了开发的工作量和时间成本，还容易导致错误和兼容性问题。

发表于 1年以前 · 阅读量：630

前端

了解前端新框架-nue.js

前端开发者 Tero Piirajinen 推出了一个名为 Nue.js 的极简化前端开发工具，并迅速引发社区讨论。Piirajinen 在 Hacker News 上表示，它是 React、Vue、Next.js、Vite、Svelte 和 Astro 的替代品。

发表于 1年以前 · 阅读量：652

Vue React JavaScript

前端

探究Base64在前端的原理和应用

Base64在前端开发中的普遍应用。本文将探讨Base64编码的原理以及在前端项目中应用的实际应用。

发表于 1年以前 · 阅读量：597

前端

浏览器如何运行一段JavaScript代码

虽然有很多关于JavaScript的书籍和资料，但绝大多数都从JavaScript语言本身的角度去分析其语法和语义，很少有与JavaScript具体执行过程相关的分析资料。因此，我邀请大家一起从浏览器的角度来看一下一段JavaScript代码到底是如何执行的。

发表于 1年以前 · 阅读量：646

JavaScript

前端

JS如何判断文字被ellipsis了？

如果我们想要当文本被省略的时候，也就是当文本超出指定的宽度后，鼠标悬浮在文本上面才展示popper，应该怎么实现呢？

发表于 1年以前 · 阅读量：359

前端

前端“量子纠缠”：multipleWindow3dScene 来了

在量子力学里，当几个粒子在彼此相互作用后，由于各个粒子所拥有的特性已综合成为整体性质，无法单独描述各个粒子的性质，只能描述整体系统的性质，则称这现象为量子缠结或量子纠缠。量子纠缠是一种奇怪的量子力学现象，处于纠缠态的两个量子不论相距多远都存在一种关联，其中一个量子状态发生改变，另一个的状态会瞬时发生相应改变。