乐闻
Webpack 的详细工作流程
Webpack是一个现代JavaScript应用程序的静态模块打包器，它主要的工作就是分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（如TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
Webpack的工作流程主要分为以下几个阶段：
### 初始化
在Webpack启动后，它会从配置文件（默认是 `webpack.config.js`）中读取配置的参数，合并命令行传递过来的参数，形成最终的配置对象。
### 编译（Compiling）
Webpack开始编译整个项目。在这个阶段，Webpack会根据配置中的入口（Ent...
前端 · 2023年11月19日 18:19
如何做 CSS 的性能优化
CSS 性能优化是 web 项目性能优化中的重要部分。
以下是一些策略来帮助优化 CSS 的性能：
1. **减少冗余代码**
为类或元素重复写入相同的 CSS 规则会浪费带宽和浏览解析时间。实用工具如 [PurgeCSS](https://purgecss.com/) 可帮助删除无用的 CSS。
2. **CSS 压缩**
CSS 压缩可以移除所有多余的字符，包括空格、换行符和注释。使用CSS 压缩工具如 [CSSO](https://github.com/css/csso) 或 [clean-css](https://github.com/jakubpawlowi...
前端 · 2023年11月19日 18:15
Composition API 如何实现逻辑复用
在Vue.js的Composition API中，逻辑复用是通过使用可组合函数（composables）来实现的。可组合函数是可以封装和重用Vue组件逻辑的函数。Composition API引入了一种新的组织和重用组件逻辑的方式，它提供了更灵活的代码组织结构，使得函数的复用变得更加简单和清晰。
要实现逻辑复用，你可以按照以下步骤操作：
1. **创建可组合函数（composables）：**你可以创建一个独立的JavaScript函数，这个函数利用Composition API中的`ref`, `reactive`, `computed`, `watch`, `watchEffec...
前端 · 2023年11月19日 18:10
Composition API和Options API 之间的区别是什么
Composition API 和 Options API 是 Vue.js 框架中用于创建和组织组件的两种不同的API。Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面和单页应用程序。下面我将详细说明它们之间的区别：
### Options API
Options API 是 Vue.js 最初提供的接口，它是基于一个包含描述组件选项的对象的概念。这些选项包括了`data`、`methods`、`props`、`computed`、`watch`、`lifecycle hooks`等属性。这种API的特点是将组件的不同方面划分到这些选项中，代码按功能组织。
...
前端 · 2023年11月19日 18:10
什么是 React 的受控组件和非受控组件?
在React中，**受控组件(Controlled Components)**和**非受控组件(Uncontrolled Components)**都是处理表单输入的方式，但它们处理数据的方式不同。
### 受控组件(Controlled Components)
受控组件是React的一种模式，在这种模式下，表单数据是由React组件的状态管理的。这意味着每次字段的值发生变化时，我们都会通过一个事件处理函数（通常是 `onChange`）来更新组件的状态。然后，组件的状态被用作输入字段的值，确保组件的状态是数据的唯一来源。
**示例：**
假设我们有一个受控的 `<input>`元...
前端 · 2023年11月19日 17:46
手写 javascript 中 new 的实现过程
当我们在JavaScript中使用`new`操作符创建一个新对象时，实际上会发生以下几个步骤：
1. **创建一个新对象。** 使用`new`操作符时，JavaScript会自动为我们创建一个新的空对象。
2. **设置原型链。** 新对象内部的`[[Prototype]]`（或者`__proto__`）属性会被赋值为构造函数的`prototype`属性，这样新对象就可以访问到构造函数原型上的属性和方法。
3. **绑定`this`并执行构造函数。** 构造函数内部的`this`将会被绑定到新创建的对象上，然后执行构造函数中的代码，这样新对象就可以具有构造函数中定义的属性和方法。
...
前端 · 2023年11月19日 18:05
如何自定义实现 Redux 中间件
在Redux中，中间件是一种强大的机制，允许开发者在action被发送到reducer之前插入自己的逻辑。创建自定义的Redux中间件涉及到编写一个函数，该函数按照Redux中间件API的规格返回一个满足特定签名的函数。
我将向您展示如何自定义实现一个简单的日志中间件，该中间件的作用是在action被派发时在控制台输出日志信息。
以下是自定义Redux中间件的基本步骤：
1. 编写一个函数，该函数接收`store`的`dispatch`和`getState`方法。
2. 该函数返回一个接收下一个中间件的`next`函数的函数。
3. 返回的函数再返回一个接收action的函数。
4...
前端 · 2023年11月19日 18:03
css 清除浮动的几种方式以及各自的优缺点
CSS中清除浮动（Float）的几种常见方法如下：
### 1. 使用`clear`属性
在浮动元素之后添加一个空的元素，并为其设置`clear`属性。
```html
<div class="float-element"></div>
<div class="clear"></div>
```
```css
.float-element {
float: left;
}
.clear {
clear: both;
}
```
**优点:**
- 简单易懂。
- 兼容性好，适用于所有浏览器。
**缺点:**
- 需要额外的标记（markup），可能导致HTML结...
前端 · 2023年11月19日 17:57
React 如何使用异步组件以及异步组件的使用场景
React 的异步组件（通常被称为懒加载组件）主要是通过动态 `import()` 语法和 React 的 `React.lazy` 函数来实现的。它们用于在需要时才加载组件，可以显著提高应用程序的性能，尤其是当应用程序很大并且有许多不同的页面和组件时。接下来，我会详细介绍如何使用异步组件以及它们的使用场景。
### 如何使用异步组件
使用 React 异步组件的基本步骤如下：
1. 使用 `React.lazy` 函数分别导入组件。这个函数允许你定义一个动态导入的组件。该函数接受一个函数，这个函数必须调用一个 `import()`，它返回一个 `Promise`，该 `Prom...
前端 · 2023年11月19日 17:50
React Router 是如何配置组件的懒加载？
React Router 可以通过配合 React 的 `React.lazy()` 和 `Suspense` 组件来配置组件的懒加载。以下是使用 React Router 实现懒加载的基本步骤：
1. **使用 `React.lazy` 实现动态导入**: `React.lazy()` 是一个允许你动态加载组件的函数。它可以让你定义一个动态导入的组件，并且这个组件会在首次渲染时自动加载。
```jsx
const LazyComponent = React.lazy(() => import('./LazyComponent'));
```
2. **使用 `S...
前端 · 2023年11月19日 17:48