技术 on Zampo Blog

你的 Docker 镜像为什么有 2GB：从 Namespaces 到 Dockerfile 最佳实践

Thu, 23 Apr 2026 20:00:00 +0800

凌晨三点，线上容器启动要三分钟。

你登上服务器，docker images 一看：2.1GB。PM 问为什么这么慢，你说"容器已经很快了"。

但容器不是虚拟机。你把 Docker 当 VM 用，它当然慢。

问题不在 Docker，在你没理解它到底是什么。

很多人以为 Docker 只是把代码和依赖打包进一个盒子，但依然不知道为什么上了生产就崩。你可能正在给一个简单的 Node.js 应用构建 2GB 的镜像，硬编码环境变量，容器启动要三分钟。

容器不是虚拟机。 它不需要 hypervisor，不需要臃肿的 guest OS。它是一个与宿主机内核直接共享的进程。

看完这篇，你能写出高效 Dockerfile，不再把容器当虚拟机用。

一、容器 vs VM：为什么你的镜像这么大

虚拟机通过 hypervisor 模拟物理硬件。每个 VM 运行独立的操作系统和应用。

VM 有三大痛点：

痛点	表现	后果
资源税	每个 VM 都带着完整的内核	10 个 VM 就是 10 份 Linux 内核，内存和 CPU 大量浪费
启动延迟	启动一个完整操作系统需要几分钟	微服务时代根本等不起
体积庞大	VM 镜像通常几个 GB	存储和传输都很慢

Docker 虚拟化的是操作系统，不是硬件。容器共享宿主机内核，只隔离用户空间的进程、库和依赖。

容器优势：

快：通常秒级启动
轻：不需要独立 OS，内存和 CPU 占用小
可移植：应用和依赖打包在一起，任意环境一致运行

你的服务不是 CPU 不够快，是缺页中断在报警

Thu, 23 Apr 2026 18:00:00 +0800

凌晨两点，线上服务突然变慢。

你登上服务器，top 一看：CPU 占用 30%，内存也没满，磁盘 IO 正常。但请求就是卡，P99 从 50ms 跳到 800ms。

第一反应：加机器？

先别急。系统给你的信号不是"资源不够"，是"内存用错了"——缺页中断在报警，你听不懂而已。

虚拟内存不是操作系统课程里的理论。它是每个写代码的人都应该能用来诊断问题的工具。

但 99% 的开发者都不理解虚拟内存。

你是那 1% 吗？

一、虚拟内存到底是什么

虚拟内存，就是让程序以为自己有很多内存，实际上用的是磁盘空间来凑。

你的机器只有 8GB RAM，但可以运行需要 12GB 内存的程序。多出来的 4GB 从哪来？从硬盘的交换空间（swap）借。

这不是魔法，是交换。

1
2


# 看看你的 swap 用了多少
free -h

输出：

 total used free shared buff/cache available
Mem: 15Gi 8.2Gi 2.1Gi 1.2Gi 5.7Gi 6.8Gi
Swap: 8.0Gi 1.5Gi 6.5Gi

看到 Swap used 1.5Gi 了吗？这意味着有 1.5GB 的数据被从 RAM 换出到磁盘了。

经验值： swap 使用率超过 30%，服务延迟大概率会抖。不是绝对，但值得警惕。

别再让后端手写脚本了：我搭了一套可复用的企业 CLI 基座，命令扩展靠 YAML

Sat, 18 Apr 2026 12:00:00 +0800

内部工具越堆越多，每个新服务都要重新写一遍登录、鉴权、日志、错误处理。

新来的同事拿到一堆脚本，不知道哪个能跑、哪个已经废了。测试环境和生产环境的 token 混着用，一不小心就把测试数据写到生产。

这是我搭这套 CLI 基座的真实原因：不是为了让工程师更极客，而是为了把内部能力收敛成一个人和 Agent 都能调用的统一入口。

这个项目我已经用在企业内部，核心代码公开。看完你能照着自己搭一套。

一、我为什么把企业后台能力做成 CLI

先说判断。

GUI、API、CLI 这三层，很多企业只做了前两层：后台页面给人点，API 给系统调。但中间那层——对人足够友好、对脚本足够稳定、对 Agent 足够结构化——一直是空的。

后果就是：

业务同学要操作后台，点到手软
工程师要写脚本，每个脚本都重新处理一遍认证、日志、错误
Agent 要调用业务，得直接拼 API，参数错了都不知道怎么报错

CLI 正好卡在中间。

但企业 CLI 不是把几个 API 包成命令就完了。我搭这套基座时，核心就一个原则：稳定层先代码化，业务层再规格化。

什么意思？

认证、环境、HTTP 请求、Header 注入、打包发布——这些是稳定层，一次搭好，长期复用。

业务命令——这些是变化层，用 YAML 规格化，扩展时不改核心代码。

这样搭出来的 CLI，命令越多，扩展越快。而不是命令越多，代码越乱。

二、这套 CLI 基座的骨架

项目结构长这样：

.
├── cmd/ # Cobra 命令入口
│ ├── root.go # 根命令，加载 YAML 动态命令
│ ├── auth_login.go # 登录回调
│ ├── token_refresh.go # Token 刷新
│ └── oauth_injected.go # OAuth 凭据注入（构建时生成）
├── internal/
│ ├── auth/ # 认证层：登录、token、device_id
│ ├── httpx/ # 请求层：HTTP client、Header 注入、401 refresh
│ ├── runtime/ # 执行层：YAML 解析、Cobra 命令注册、请求执行
│ └── store/ # 存储层：profile、token 本地持久化
├── specs/
│ ├── groups/ # 业务命令规格
│ │ └── order/
│ │ ├── group.yaml # 订单组配置
│ │ └── commands/
│ │ └── list.yaml # 订单查询命令
│ └── embed.go # go:embed 把 YAML 编译进二进制
└── scripts/
 └── build-with-oauth.sh # 多环境、多平台打包脚本

核心分层：

我用 PostgreSQL 替换了整个技术栈，省了 6 个微服务

Fri, 17 Apr 2026 20:00:00 +0800

现代软件工程已经基本变成了"订阅管理模拟器"。

我们被云厂商洗脑了，以为即使构建一个基础应用，也需要拼凑一个脆弱的分布式网络：

Redis 做缓存
Confluent Kafka 集群做后台任务
Elasticsearch 只是为了一个简单的搜索框
再搞个专用向量数据库为了那个临时加上的 AI 功能

等你终于把应用部署给你那"要求极高"的用户群（你自己和你妈）时，你已经欠了十几家 Y Combinator 支持的 SaaS 初创公司的钱，就为了让灯亮着。

这是一个过度工程化、价格离谱的陷阱。

但如果我告诉你，你可以把那些闪亮的云依赖全部扔进焚化炉，用一个经过 30 年验证的开源软件替换它们呢？

科技行业不想让你知道的秘密：一个久经考验的工具可以吞噬你的整个架构。

我刚刚用 PostgreSQL 替换了整个技术栈。

一、PostgreSQL 为什么能吞噬整个栈

PostgreSQL 是一个开源对象关系数据库系统，已经活跃开发了 30 多年。

开箱即用的能力：

坚如磐石的 ACID 合规性——当你的廉价云服务器崩溃时，用户数据不会损坏
可扩展性——这才是它能吞噬整个栈的真正原因

PostgreSQL 不只是行列存储。

它还能存储：

JSONB（半结构化数据）
向量（AI 嵌入）
全文搜索索引
地理空间数据（PostGIS）
图数据（关系遍历）
时间序列数据
键值对（作为 Redis 替代）

PostgreSQL 不是数据库，是一个数据平台。

二、实战替换：Redis（缓存 + 键值存储）

传统架构

应用 → Redis（缓存） → PostgreSQL（持久化）

问题：

两个服务要运维
缓存和数据库数据可能不一致
Redis 挂了要处理降级

PostgreSQL 方案

使用 UNLOGGED 表做高速缓存：

Qwen3.6 vs Gemma4：本地 AI 模型性能基准测试，10000 tokens/秒是什么体验

Fri, 17 Apr 2026 19:00:00 +0800

Qwen3.6 的发布，可能是本地 Agent 应用场景中最棒的发布之一。

为什么？

因为 Qwen3.5 27B 有一个致命问题：工具调用可靠性很强，但是慢。

对于需要不断生成 token 的 Agent 工作流来说，这是关键批评。你有一个可靠的工具调用专家，但它生成 token 的速度慢到你无法实用。

Qwen3.6 解决了这个问题——速度大幅提升，同时保持工具调用可靠性。

这篇是本地 AI 模型性能基准测试，基于真实测试数据，给你一份可操作的硬件选型指南。看完你知道：

Qwen3.6 比 Qwen3.5 27B 快多少
24GB VRAM 为什么是魔法数字
入门/中端/高端/极限四档配置怎么选
量化等级 Q4/Q5/Q6/Q8 如何取舍

一、测试硬件配置

先说测试平台。

平台	GPU 配置	总 VRAM	用途
HP Z440	2× RTX 3060 12GB	24GB	双卡并行测试
Prox 2	8× GPU	多配置	极限吞吐量测试
单机	RTX 3090 24GB	24GB	单卡高配测试
单机	RTX 4090 24GB	24GB	单卡旗舰测试

24GB VRAM 是魔法数字

为什么强调 24GB？

99% 的开发者不懂堆内存，你真的懂吗？

Fri, 17 Apr 2026 18:00:00 +0800

1
2
3
4


func example() *int {
 x := 42
 return &x
}

问你一个问题：这个 x 是在堆上还是在栈上？

如果你答"栈上"，你错了——至少在这段代码里，Go 编译器会把 x 分配到堆上。

为什么？因为它的地址逃逸了函数。

99% 的开发者不懂堆内存——不是不懂 malloc 和 free，是不懂分配器、碎片化、逃逸分析、GC 代价这些让堆变得迷人的底层细节。

你可能觉得内存管理就是"分配"和"释放"这么简单，也可能不在意这些底层细节。但如果你不懂我刚才说的那些术语，或者想深入了解堆内存，这篇就是为你写的。

一、堆 vs 栈：核心差异在哪

先说结论。

栈内存是程序内存中用于存储局部变量的区域，堆内存是用于动态分配的区域。

听起来简单，但 99% 的开发者忽略了两者的本质差异。

差异点	栈（Stack）	堆（Heap）
管理方式	后进先出（LIFO），编译器自动管理	运行时管理，分配器或 GC 管理
分配速度	极快，编译器确切知道值存储在哪里、存活多久	慢，涉及元数据、可能的线程同步、GC
生命周期	函数结束时自动释放	可以比创建它的函数活得更久
大小限制	相对较小，通常几 MB	更大、更灵活，可向 OS 请求更多
碎片化	无	有，频繁分配释放会产生碎片

栈的工作方式：

每次函数调用都会压入一个帧（frame），包含局部变量，返回时弹出。这个过程是严格的后继先出，所以极快。

堆的工作方式：

堆是一个更灵活但代价更高的空间。当程序运行时需要按需分配内存——比如那些可能比当前函数存活更久的对象，或者大小可以增长的集合——堆就是这些内存的来源。

关键区别在于生命周期： 栈变量在函数结束时消失，但堆对象可以比创建它的函数活得更久。

PostgreSQL 真正厉害的，不是性能，而是它把最后一道权限判断留在了数据库里

Fri, 17 Apr 2026 09:33:20 +0800

我越来越觉得，很多团队的安全问题，不是前面没做，而是最后收得不够。

浏览器有隔离，接口有鉴权，服务上了 HTTPS，机器放在内网里，日志和审计也配了。可等请求真的落到 PostgreSQL，后端连过去的，还是一个几乎什么都能做的高权限角色。

前面一层一层都像样，最后这一跳却像没上锁。

这也是我最近看 PostgreSQL 安全这条视频时，最有感触的一点：PostgreSQL 真正厉害的，不是它默认很安全，也不只是它功能多，而是它把最后一道权限判断留在了数据库里。

你每天都在用 Git，但你可能不懂 rebase

Tue, 14 Apr 2026 16:10:00 +0800

你在 feature 分支上写了三个提交，准备提 PR。

同事说：先 rebase 一下 main，把历史整理干净。

你照做了，但心里没底：rebase 到底改了什么？会不会出问题？

很多开发者对 rebase 的理解，停留在"会敲命令，不知道它到底做了什么"。

每个前端都在用 React，但很多人把它学反了

Tue, 14 Apr 2026 15:00:00 +0800

你写了半年 React，还是会背 useState、useEffect、JSX。

但老板问：React 到底在解决什么问题？

你答不上来。

问题不在你，是很多人从一开始，就把 React 学反了。

每个前端都在用 React，但很多人把它学反了

Tue, 14 Apr 2026 15:00:00 +0800

你学了 React，但可能学反了。

不是你不会写 useState、useEffect，而是你一直没想明白：React 到底在解决什么问题。

很多前端工程师都是这样：能用 React 写页面，但说不清它和 jQuery 的根本差异在哪。

老板问：上了 TPU，为什么没快多少？

Tue, 14 Apr 2026 13:59:00 +0800

老板问：我们上了 TPU，为什么训练速度没快多少？

你答不上来。

问题不在 TPU，在你一开始就没想清楚：你的计算模式，到底适合什么。

为什么很多团队的内部 API，早就不该只用 REST 了

Tue, 14 Apr 2026 11:30:00 +0800

服务越写越多，接口越写越拧巴。

明明是 approveInvoice() 这种动作，却要硬拗成 POST /invoices/{id}/approval。

文档越来越厚，新来的同事越看越迷糊——这到底是资源操作，还是动作调用？

很多团队的问题，不是不会做 API，而是一开始就把内部系统也按公共 API 那套方式设计了。

Vue.js 3.0 新特性详解与实战

Thu, 15 Feb 2024 13:45:00 +0800

Vue.js 3.0带来了许多令人兴奋的新特性，今天我们来深入了解这些变化以及如何在实际项目中应用它们。

🚀 Vue 3的主要改进

性能提升

更快的虚拟DOM：重写了虚拟DOM，性能提升1.3-2倍
更小的包体积：通过tree-shaking支持，减少了41%的包体积
更好的TypeScript支持：完全用TypeScript重写

新的响应式系统

基于ES6的Proxy实现，相比Vue 2的Object.defineProperty：

支持数组索引和length的监听
支持Map、Set、WeakMap、WeakSet
支持13种数组变更方法的监听

💡 Composition API详解

为什么需要Composition API？

Vue 2的Options API在处理复杂组件时存在一些问题：

逻辑复用困难
类型推断不够友好
大组件难以维护

基础语法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


import { ref, reactive, computed, watch, onMounted } from 'vue'

export default {
 setup() {
 // 响应式数据
 const count = ref(0)
 const state = reactive({
 name: '张三',
 age: 25
 })
 
 // 计算属性
 const doubleCount = computed(() => count.value * 2)
 
 // 方法
 const increment = () => {
 count.value++
 }
 
 // 生命周期
 onMounted(() => {
 console.log('组件已挂载')
 })
 
 // 监听器
 watch(count, (newVal, oldVal) => {
 console.log(`count从${oldVal}变为${newVal}`)
 })
 
 return {
 count,
 state,
 doubleCount,
 increment
 }
 }
}

组合函数（Composables）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


// composables/useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
 const count = ref(initialValue)
 
 const increment = () => count.value++
 const decrement = () => count.value--
 const reset = () => count.value = initialValue
 
 const isEven = computed(() => count.value % 2 === 0)
 
 return {
 count: readonly(count),
 increment,
 decrement,
 reset,
 isEven
 }
}

// 在组件中使用
import { useCounter } from './composables/useCounter'

export default {
 setup() {
 const { count, increment, decrement, isEven } = useCounter(10)
 
 return {
 count,
 increment,
 decrement,
 isEven
 }
 }
}

逻辑复用示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


// composables/useFetch.js
import { ref, reactive } from 'vue'

export function useFetch(url) {
 const data = ref(null)
 const loading = ref(true)
 const error = ref(null)
 
 const fetchData = async () => {
 try {
 loading.value = true
 error.value = null
 const response = await fetch(url)
 if (!response.ok) throw new Error('请求失败')
 data.value = await response.json()
 } catch (err) {
 error.value = err.message
 } finally {
 loading.value = false
 }
 }
 
 fetchData()
 
 return { data, loading, error, refetch: fetchData }
}

// 在组件中使用
export default {
 setup() {
 const { data: users, loading, error } = useFetch('/api/users')
 
 return { users, loading, error }
 }
}

⚡ 新特性深入

1. Teleport（传送门）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


<template>
 <div class="modal-container">
 <button @click="showModal = true">打开模态框</button>
 
 <!-- 将模态框传送到body下 -->
 <Teleport to="body">
 <div v-if="showModal" class="modal-backdrop">
 <div class="modal">
 <h3>模态框标题</h3>
 <p>这是模态框内容</p>
 <button @click="showModal = false">关闭</button>
 </div>
 </div>
 </Teleport>
 </div>
</template>

<script>
import { ref } from 'vue'

export default {
 setup() {
 const showModal = ref(false)
 return { showModal }
 }
}
</script>

2. Fragments（片段）

Vue 3支持组件有多个根节点：

Node.js后端开发完整指南

Sat, 10 Feb 2024 10:30:00 +0800

Node.js让JavaScript不再局限于浏览器，成为了全栈开发的强大工具。今天分享Node.js后端开发的完整学习路径。

🚀 Node.js基础

什么是Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，让JavaScript能够在服务器端运行。

核心特性：

🔄 事件驱动：非阻塞I/O模型
⚡ 高性能：适合I/O密集型应用
📦 NPM生态：丰富的第三方包
🌐 跨平台：Windows、macOS、Linux

环境搭建

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


# 安装Node.js（推荐使用nvm管理版本）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install node
nvm use node

# 验证安装
node --version
npm --version

# 创建项目
mkdir my-node-app
cd my-node-app
npm init -y

📊 Express框架入门

快速开始

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


const express = require('express');
const app = express();
const port = 3000;

// 中间件
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 路由
app.get('/', (req, res) => {
 res.json({ message: 'Hello World!' });
});

app.listen(port, () => {
 console.log(`服务器运行在 http://localhost:${port}`);
});

中间件系统

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// 日志中间件
const logger = (req, res, next) => {
 console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
 next();
};

// 错误处理中间件
const errorHandler = (err, req, res, next) => {
 console.error(err.stack);
 res.status(500).json({ error: 'Something went wrong!' });
};

// 应用中间件
app.use(logger);
app.use('/api', apiRoutes);
app.use(errorHandler);

路由设计

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


const router = express.Router();

// RESTful API设计
router.get('/users', getAllUsers); // 获取所有用户
router.get('/users/:id', getUserById); // 获取单个用户
router.post('/users', createUser); // 创建用户
router.put('/users/:id', updateUser); // 更新用户
router.delete('/users/:id', deleteUser); // 删除用户

// 路由处理函数
const getAllUsers = async (req, res) => {
 try {
 const users = await User.find();
 res.json(users);
 } catch (error) {
 res.status(500).json({ error: error.message });
 }
};

module.exports = router;

🗄️ 数据库集成

MongoDB + Mongoose

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


const mongoose = require('mongoose');

// 连接数据库
mongoose.connect('mongodb://localhost:27017/myapp', {
 useNewUrlParser: true,
 useUnifiedTopology: true
});

// 定义Schema
const userSchema = new mongoose.Schema({
 name: {
 type: String,
 required: true,
 trim: true
 },
 email: {
 type: String,
 required: true,
 unique: true,
 lowercase: true
 },
 password: {
 type: String,
 required: true,
 minlength: 6
 },
 createdAt: {
 type: Date,
 default: Date.now
 }
});

// 密码加密中间件
userSchema.pre('save', async function(next) {
 if (!this.isModified('password')) return next();
 
 const bcrypt = require('bcrypt');
 this.password = await bcrypt.hash(this.password, 12);
 next();
});

const User = mongoose.model('User', userSchema);

数据库操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


// 创建用户
const createUser = async (userData) => {
 try {
 const user = new User(userData);
 await user.save();
 return user;
 } catch (error) {
 throw error;
 }
};

// 查询用户
const findUsers = async (filter = {}) => {
 return await User.find(filter)
 .select('-password')
 .sort({ createdAt: -1 });
};

// 更新用户
const updateUser = async (id, updateData) => {
 return await User.findByIdAndUpdate(
 id, 
 updateData, 
 { new: true, runValidators: true }
 );
};

🔐 身份验证与授权

JWT身份验证

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43


const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');

// 生成JWT Token
const generateToken = (userId) => {
 return jwt.sign({ userId }, process.env.JWT_SECRET, {
 expiresIn: '7d'
 });
};

// 登录功能
const login = async (req, res) => {
 try {
 const { email, password } = req.body;
 
 // 查找用户
 const user = await User.findOne({ email });
 if (!user) {
 return res.status(401).json({ error: '邮箱或密码错误' });
 }
 
 // 验证密码
 const isMatch = await bcrypt.compare(password, user.password);
 if (!isMatch) {
 return res.status(401).json({ error: '邮箱或密码错误' });
 }
 
 // 生成token
 const token = generateToken(user._id);
 
 res.json({
 message: '登录成功',
 token,
 user: {
 id: user._id,
 name: user.name,
 email: user.email
 }
 });
 } catch (error) {
 res.status(500).json({ error: error.message });
 }
};

认证中间件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


const authenticate = async (req, res, next) => {
 try {
 const token = req.header('Authorization')?.replace('Bearer ', '');
 
 if (!token) {
 return res.status(401).json({ error: '访问被拒绝，需要token' });
 }
 
 const decoded = jwt.verify(token, process.env.JWT_SECRET);
 const user = await User.findById(decoded.userId);
 
 if (!user) {
 return res.status(401).json({ error: '用户不存在' });
 }
 
 req.user = user;
 next();
 } catch (error) {
 res.status(401).json({ error: 'Token无效' });
 }
};

// 使用认证中间件
app.use('/api/protected', authenticate);

📝 API设计最佳实践

RESTful API规范

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


// 统一响应格式
const sendResponse = (res, statusCode, data, message) => {
 res.status(statusCode).json({
 success: statusCode < 400,
 message,
 data,
 timestamp: new Date().toISOString()
 });
};

// API版本控制
app.use('/api/v1', v1Routes);
app.use('/api/v2', v2Routes);

// 参数验证中间件
const validateUser = (req, res, next) => {
 const { name, email, password } = req.body;
 
 if (!name || !email || !password) {
 return sendResponse(res, 400, null, '缺少必要参数');
 }
 
 if (password.length < 6) {
 return sendResponse(res, 400, null, '密码长度至少6位');
 }
 
 next();
};

分页和排序

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


const getPaginatedUsers = async (req, res) => {
 try {
 const page = parseInt(req.query.page) || 1;
 const limit = parseInt(req.query.limit) || 10;
 const sort = req.query.sort || 'createdAt';
 const order = req.query.order === 'asc' ? 1 : -1;
 
 const skip = (page - 1) * limit;
 
 const users = await User.find()
 .select('-password')
 .sort({ [sort]: order })
 .skip(skip)
 .limit(limit);
 
 const total = await User.countDocuments();
 
 res.json({
 users,
 pagination: {
 currentPage: page,
 totalPages: Math.ceil(total / limit),
 totalItems: total,
 itemsPerPage: limit
 }
 });
 } catch (error) {
 res.status(500).json({ error: error.message });
 }
};

🔧 实用工具和中间件

环境配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


// .env文件
const dotenv = require('dotenv');
dotenv.config();

// config/database.js
module.exports = {
 development: {
 url: process.env.DEV_DB_URL,
 options: {
 useNewUrlParser: true,
 useUnifiedTopology: true
 }
 },
 production: {
 url: process.env.PROD_DB_URL,
 options: {
 useNewUrlParser: true,
 useUnifiedTopology: true,
 ssl: true
 }
 }
};

文件上传

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


const multer = require('multer');
const path = require('path');

// 配置存储
const storage = multer.diskStorage({
 destination: (req, file, cb) => {
 cb(null, 'uploads/');
 },
 filename: (req, file, cb) => {
 const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
 cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
 }
});

const upload = multer({
 storage,
 limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
 fileFilter: (req, file, cb) => {
 const allowedTypes = /jpeg|jpg|png|gif/;
 const extname = allowedTypes.test(path.extname(file.originalname).toLowerCase());
 const mimetype = allowedTypes.test(file.mimetype);
 
 if (mimetype && extname) {
 return cb(null, true);
 } else {
 cb(new Error('只允许上传图片文件'));
 }
 }
});

// 使用文件上传
app.post('/api/upload', upload.single('image'), (req, res) => {
 if (!req.file) {
 return res.status(400).json({ error: '没有文件上传' });
 }
 
 res.json({
 message: '文件上传成功',
 filename: req.file.filename,
 path: req.file.path
 });
});

日志系统

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


const winston = require('winston');

const logger = winston.createLogger({
 level: 'info',
 format: winston.format.combine(
 winston.format.timestamp(),
 winston.format.errors({ stack: true }),
 winston.format.json()
 ),
 transports: [
 new winston.transports.File({ filename: 'logs/error.log', level: 'error' }),
 new winston.transports.File({ filename: 'logs/combined.log' })
 ]
});

if (process.env.NODE_ENV !== 'production') {
 logger.add(new winston.transports.Console({
 format: winston.format.simple()
 }));
}

module.exports = logger;

🧪 测试

单元测试

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


const request = require('supertest');
const app = require('../app');

describe('User API', () => {
 describe('POST /api/users', () => {
 it('should create a new user', async () => {
 const userData = {
 name: 'Test User',
 email: 'test@example.com',
 password: 'password123'
 };
 
 const response = await request(app)
 .post('/api/users')
 .send(userData)
 .expect(201);
 
 expect(response.body.user.name).toBe(userData.name);
 expect(response.body.user.email).toBe(userData.email);
 });
 
 it('should return 400 if required fields are missing', async () => {
 const response = await request(app)
 .post('/api/users')
 .send({})
 .expect(400);
 
 expect(response.body.success).toBe(false);
 });
 });
});

🚀 部署和优化

PM2进程管理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# 安装PM2
npm install -g pm2

# 启动应用
pm2 start app.js --name "my-app"

# 集群模式
pm2 start app.js -i max

# 监控
pm2 monitor

# 日志查看
pm2 logs

性能优化

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


// 启用gzip压缩
const compression = require('compression');
app.use(compression());

// 设置安全headers
const helmet = require('helmet');
app.use(helmet());

// 限制请求频率
const rateLimit = require('express-rate-limit');
const limiter = rateLimit({
 windowMs: 15 * 60 * 1000, // 15分钟
 max: 100 // 限制每个IP 100次请求
});
app.use(limiter);

// 缓存
const redis = require('redis');
const client = redis.createClient();

const cache = (duration) => {
 return async (req, res, next) => {
 const key = req.originalUrl;
 const cached = await client.get(key);
 
 if (cached) {
 return res.json(JSON.parse(cached));
 }
 
 res.sendResponse = res.json;
 res.json = (body) => {
 client.setex(key, duration, JSON.stringify(body));
 res.sendResponse(body);
 };
 
 next();
 };
};

📊 推荐学习资源

📚 书籍推荐

《Node.js实战》 - 全面的Node.js指南
《深入浅出Node.js》 - 朴灵著，深入理解Node.js原理

🔧 实用工具

Postman - API测试工具
MongoDB Compass - 可视化数据库管理
VS Code - 最佳Node.js开发环境

📦 常用包推荐

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


{
 "dependencies": {
 "express": "^4.18.2",
 "mongoose": "^6.8.0",
 "bcrypt": "^5.1.0",
 "jsonwebtoken": "^8.5.1",
 "dotenv": "^16.0.3",
 "cors": "^2.8.5",
 "helmet": "^6.0.1",
 "compression": "^1.7.4"
 },
 "devDependencies": {
 "nodemon": "^2.0.20",
 "jest": "^29.3.1",
 "supertest": "^6.3.3"
 }
}

💡 总结

Node.js后端开发的核心要点：

CSS实用技巧集合：让你的网页更精美

Mon, 05 Feb 2024 14:15:00 +0800

CSS是前端开发中不可或缺的技术，掌握一些实用的CSS技巧能让你的网页脱颖而出。今天分享一些我常用的CSS技巧。

🎨 布局技巧

1. 完美居中

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


/* 方法一：Flexbox */
.center-flex {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}

/* 方法二：Grid */
.center-grid {
 display: grid;
 place-items: center;
 height: 100vh;
}

/* 方法三：绝对定位 + Transform */
.center-absolute {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

2. 等高列布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


.equal-height-container {
 display: flex;
}

.column {
 flex: 1;
 padding: 20px;
 background: #f5f5f5;
 margin: 0 10px;
}

/* 或使用Grid */
.grid-equal-height {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}

3. 粘性页脚

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


body {
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}

main {
 flex: 1;
}

footer {
 margin-top: auto;
}

✨ 视觉效果

1. 毛玻璃效果

1
2
3
4
5
6
7
8


.glassmorphism {
 background: rgba(255, 255, 255, 0.25);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border-radius: 10px;
 border: 1px solid rgba(255, 255, 255, 0.18);
 box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

2. 渐变文字

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


.gradient-text {
 background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
 background-size: 300% 300%;
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
 0%, 100% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
}

3. 悬浮卡片效果

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.hover-card {
 transition: all 0.3s ease;
 transform: translateY(0);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hover-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

🔥 动画效果

1. 加载动画

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


/* 旋转加载器 */
.loader {
 width: 40px;
 height: 40px;
 border: 4px solid #f3f3f3;
 border-top: 4px solid #3498db;
 border-radius: 50%;
 animation: spin 1s linear infinite;
}

@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

/* 脉冲加载器 */
.pulse-loader {
 width: 20px;
 height: 20px;
 background-color: #3498db;
 border-radius: 50%;
 animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
 0%, 100% {
 transform: scale(0);
 opacity: 1;
 }
 50% {
 transform: scale(1);
 opacity: 0.7;
 }
}

2. 打字机效果

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


.typewriter {
 overflow: hidden;
 border-right: 2px solid #333;
 white-space: nowrap;
 margin: 0 auto;
 animation: 
 typing 3.5s steps(40, end),
 blink-caret 0.75s step-end infinite;
}

@keyframes typing {
 from { width: 0; }
 to { width: 100%; }
}

@keyframes blink-caret {
 from, to { border-color: transparent; }
 50% { border-color: #333; }
}

3. 波浪动画

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


.wave {
 position: relative;
 overflow: hidden;
}

.wave::before {
 content: '';
 position: absolute;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%;
 background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
 animation: wave 2s linear infinite;
}

@keyframes wave {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

📱 响应式技巧

1. 流体字体大小

1
2
3
4
5
6
7
8


.fluid-typography {
 font-size: clamp(1rem, 2.5vw, 2rem);
}

/* 更精确的控制 */
.responsive-text {
 font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1920 - 320)));
}

2. 容器查询

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


.card-container {
 container-type: inline-size;
}

@container (min-width: 300px) {
 .card {
 display: flex;
 align-items: center;
 }
 
 .card-image {
 width: 100px;
 height: 100px;
 }
}

3. 响应式图片

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


.responsive-image {
 width: 100%;
 height: auto;
 object-fit: cover;
 aspect-ratio: 16/9;
}

/* 艺术指导 */
.hero-image {
 width: 100%;
 height: 50vh;
 object-fit: cover;
 object-position: center top;
}

@media (max-width: 768px) {
 .hero-image {
 object-position: center center;
 height: 30vh;
 }
}

🛠️ 实用工具类

1. 文本处理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


/* 单行省略 */
.text-ellipsis {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

/* 多行省略 */
.text-clamp {
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

/* 防止文本选择 */
.no-select {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

2. 滚动条样式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


/* 自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar {
 width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
 background: #f1f1f1;
 border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
 background: #888;
 border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
 background: #555;
}

/* 隐藏滚动条但保持功能 */
.hide-scrollbar {
 scrollbar-width: none; /* Firefox */
 -ms-overflow-style: none; /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
 display: none; /* Chrome, Safari and Opera */
}

3. 焦点管理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


/* 改善可访问性的焦点样式 */
.focus-visible {
 outline: none;
}

.focus-visible:focus-visible {
 outline: 2px solid #4285f4;
 outline-offset: 2px;
}

/* 跳转链接 */
.skip-link {
 position: absolute;
 top: -40px;
 left: 6px;
 background: #000;
 color: #fff;
 padding: 8px;
 text-decoration: none;
 transition: top 0.3s;
}

.skip-link:focus {
 top: 6px;
}

🎯 性能优化

1. 硬件加速

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.gpu-accelerated {
 transform: translateZ(0);
 /* 或 */
 will-change: transform;
}

/* 注意：用完后要移除will-change */
.animation-finished {
 will-change: auto;
}

2. 减少重排重绘

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


/* 使用transform代替改变position */
.move-element {
 transform: translateX(100px);
 /* 而不是 left: 100px; */
}

/* 使用opacity代替visibility */
.fade-element {
 opacity: 0;
 /* 而不是 visibility: hidden; */
}

🧪 实验性功能

1. CSS Houdini

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


/* 注册自定义属性 */
@property --gradient-angle {
 syntax: '<angle>';
 initial-value: 0deg;
 inherits: false;
}

.animated-gradient {
 background: conic-gradient(from var(--gradient-angle), #ff6b6b, #4ecdc4, #45b7d1, #ff6b6b);
 animation: rotate-gradient 3s linear infinite;
}

@keyframes rotate-gradient {
 to {
 --gradient-angle: 360deg;
 }
}

2. CSS Grid子网格

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


.subgrid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}

.subgrid-item {
 display: grid;
 grid-template-rows: subgrid;
 grid-row: span 3;
}

📋 实践建议

1. CSS组织结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


/* 使用BEM命名规范 */
.card {
 /* 块 */
}

.card__header {
 /* 元素 */
}

.card--featured {
 /* 修饰符 */
}

2. CSS变量的妙用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


:root {
 --primary-color: #3498db;
 --secondary-color: #2ecc71;
 --font-size-base: 16px;
 --spacing-unit: 8px;
}

.component {
 color: var(--primary-color);
 font-size: calc(var(--font-size-base) * 1.2);
 padding: calc(var(--spacing-unit) * 2);
}

/* 主题切换 */
[data-theme="dark"] {
 --primary-color: #5dade2;
 --background-color: #2c3e50;
}

3. 调试技巧

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


/* 临时边框调试 */
* {
 outline: 1px solid red;
}

/* 网格调试 */
.debug-grid {
 background-image: 
 linear-gradient(rgba(255, 0, 0, 0.1) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255, 0, 0, 0.1) 1px, transparent 1px);
 background-size: 20px 20px;
}

💡 总结

这些CSS技巧涵盖了日常开发中的常见需求：

React开发最佳实践指南

Sun, 28 Jan 2024 16:20:00 +0800

React作为目前最流行的前端框架之一，掌握其最佳实践对于开发高质量应用至关重要。

组件设计原则

1. 单一职责原则

每个组件应该只负责一个功能：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// ❌ 不好的做法 - 组件职责过多
const UserDashboard = () => {
 // 用户信息管理
 // 数据统计
 // 设置管理
 // ...太多功能
};

// ✅ 好的做法 - 拆分成多个组件
const UserProfile = () => { /* 用户信息 */ };
const UserStats = () => { /* 数据统计 */ };
const UserSettings = () => { /* 设置管理 */ };

2. Props接口设计

明确定义组件的Props类型：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


import PropTypes from 'prop-types';

const Button = ({ 
 children, 
 onClick, 
 type = 'button', 
 disabled = false,
 variant = 'primary' 
}) => {
 return (
 <button 
 type={type}
 onClick={onClick}
 disabled={disabled}
 className={`btn btn-${variant}`}
 >
 {children}
 </button>
 );
};

Button.propTypes = {
 children: PropTypes.node.isRequired,
 onClick: PropTypes.func,
 type: PropTypes.oneOf(['button', 'submit', 'reset']),
 disabled: PropTypes.bool,
 variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger'])
};

状态管理策略

1. 状态提升原则

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


// 将共享状态提升到最近的公共父组件
const TodoApp = () => {
 const [todos, setTodos] = useState([]);
 
 const addTodo = (text) => {
 setTodos([...todos, { id: Date.now(), text, completed: false }]);
 };
 
 const toggleTodo = (id) => {
 setTodos(todos.map(todo => 
 todo.id === id ? { ...todo, completed: !todo.completed } : todo
 ));
 };
 
 return (
 <div>
 <TodoInput onAdd={addTodo} />
 <TodoList todos={todos} onToggle={toggleTodo} />
 </div>
 );
};

2. 自定义Hook复用逻辑

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


// 自定义Hook封装常用逻辑
const useLocalStorage = (key, initialValue) => {
 const [storedValue, setStoredValue] = useState(() => {
 try {
 const item = window.localStorage.getItem(key);
 return item ? JSON.parse(item) : initialValue;
 } catch (error) {
 console.log(error);
 return initialValue;
 }
 });
 
 const setValue = (value) => {
 try {
 setStoredValue(value);
 window.localStorage.setItem(key, JSON.stringify(value));
 } catch (error) {
 console.log(error);
 }
 };
 
 return [storedValue, setValue];
};

// 使用自定义Hook
const Settings = () => {
 const [theme, setTheme] = useLocalStorage('theme', 'light');
 
 return (
 <div>
 <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
 切换主题
 </button>
 </div>
 );
};

性能优化技巧

1. React.memo优化渲染

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// 使用React.memo防止不必要的重渲染
const ExpensiveComponent = React.memo(({ data, onUpdate }) => {
 console.log('ExpensiveComponent渲染');
 
 return (
 <div>
 {data.map(item => (
 <div key={item.id}>{item.name}</div>
 ))}
 </div>
 );
});

// 自定义比较函数
const MyComponent = React.memo((props) => {
 // 组件内容
}, (prevProps, nextProps) => {
 // 返回true表示props相等，不需要重渲染
 return prevProps.id === nextProps.id;
});

2. useCallback和useMemo优化

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


const TodoList = ({ todos, filter }) => {
 // 缓存计算结果
 const filteredTodos = useMemo(() => {
 return todos.filter(todo => {
 switch (filter) {
 case 'completed':
 return todo.completed;
 case 'active':
 return !todo.completed;
 default:
 return true;
 }
 });
 }, [todos, filter]);
 
 // 缓存回调函数
 const handleToggle = useCallback((id) => {
 // 处理逻辑
 }, []);
 
 return (
 <div>
 {filteredTodos.map(todo => (
 <TodoItem 
 key={todo.id} 
 todo={todo} 
 onToggle={handleToggle}
 />
 ))}
 </div>
 );
};

3. 懒加载和代码分割

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


import React, { Suspense, lazy } from 'react';

// 路由级别的代码分割
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

const App = () => {
 return (
 <Router>
 <Suspense fallback={<div>加载中...</div>}>
 <Routes>
 <Route path="/" element={<Home />} />
 <Route path="/about" element={<About />} />
 <Route path="/contact" element={<Contact />} />
 </Routes>
 </Suspense>
 </Router>
 );
};

错误处理

1. 错误边界

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = { hasError: false, error: null };
 }
 
 static getDerivedStateFromError(error) {
 return { hasError: true, error };
 }
 
 componentDidCatch(error, errorInfo) {
 console.error('错误边界捕获到错误:', error, errorInfo);
 // 可以将错误发送到错误报告服务
 }
 
 render() {
 if (this.state.hasError) {
 return (
 <div className="error-fallback">
 <h2>出现了错误</h2>
 <details>
 {this.state.error && this.state.error.toString()}
 </details>
 </div>
 );
 }
 
 return this.props.children;
 }
}

// 使用错误边界
const App = () => {
 return (
 <ErrorBoundary>
 <Header />
 <Main />
 <Footer />
 </ErrorBoundary>
 );
};

2. 异步错误处理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


const useAsyncError = () => {
 const [error, setError] = useState(null);
 const [loading, setLoading] = useState(false);
 
 const execute = async (asyncFunction) => {
 try {
 setLoading(true);
 setError(null);
 const result = await asyncFunction();
 return result;
 } catch (err) {
 setError(err);
 throw err;
 } finally {
 setLoading(false);
 }
 };
 
 return { execute, error, loading };
};

// 使用示例
const DataComponent = () => {
 const [data, setData] = useState(null);
 const { execute, error, loading } = useAsyncError();
 
 const fetchData = async () => {
 const result = await execute(async () => {
 const response = await fetch('/api/data');
 if (!response.ok) throw new Error('请求失败');
 return response.json();
 });
 setData(result);
 };
 
 useEffect(() => {
 fetchData();
 }, []);
 
 if (loading) return <div>加载中...</div>;
 if (error) return <div>错误: {error.message}</div>;
 
 return <div>{JSON.stringify(data)}</div>;
};

测试策略

1. 组件单元测试

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

describe('Counter组件', () => {
 test('初始值为0', () => {
 render(<Counter />);
 expect(screen.getByText('0')).toBeInTheDocument();
 });
 
 test('点击增加按钮，数值增1', () => {
 render(<Counter />);
 const incrementButton = screen.getByText('增加');
 fireEvent.click(incrementButton);
 expect(screen.getByText('1')).toBeInTheDocument();
 });
 
 test('点击减少按钮，数值减1', () => {
 render(<Counter />);
 const decrementButton = screen.getByText('减少');
 fireEvent.click(decrementButton);
 expect(screen.getByText('-1')).toBeInTheDocument();
 });
});

2. Hook测试

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


import { renderHook, act } from '@testing-library/react';
import useCounter from './useCounter';

describe('useCounter Hook', () => {
 test('初始值正确', () => {
 const { result } = renderHook(() => useCounter(5));
 expect(result.current.count).toBe(5);
 });
 
 test('increment功能正常', () => {
 const { result } = renderHook(() => useCounter(0));
 
 act(() => {
 result.current.increment();
 });
 
 expect(result.current.count).toBe(1);
 });
});

项目结构建议

src/
├── components/ # 通用组件
│ ├── ui/ # UI基础组件
│ ├── layout/ # 布局组件
│ └── forms/ # 表单组件
├── pages/ # 页面组件
├── hooks/ # 自定义Hook
├── services/ # API服务
├── utils/ # 工具函数
├── constants/ # 常量定义
├── styles/ # 样式文件
└── __tests__/ # 测试文件

开发工具推荐

1. 开发环境

Create React App - 快速搭建项目
Vite - 更快的开发服务器
Next.js - 全栈React框架

2. 状态管理

Redux Toolkit - 简化的Redux
Zustand - 轻量级状态管理
React Query - 服务端状态管理

3. 样式解决方案

Styled Components - CSS-in-JS
Tailwind CSS - 实用优先的CSS框架
Emotion - 高性能CSS-in-JS库

总结

React开发最佳实践的核心是：

JavaScript开发实用技巧汇总

Mon, 15 Jan 2024 14:30:00 +0800

在JavaScript开发过程中，掌握一些实用的技巧能够大大提高我们的开发效率。今天分享一些我在项目中经常使用的JavaScript技巧。

1. 数组去重的几种方法

使用Set

1
2
3


const numbers = [1, 2, 2, 3, 3, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

使用filter和indexOf

1

const uniqueNumbers = numbers.filter((item, index) => numbers.indexOf(item) === index);

2. 对象属性的简洁写法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


const name = "张三";
const age = 25;

// 传统写法
const person = {
 name: name,
 age: age
};

// ES6简洁写法
const person = { name, age };

3. 解构赋值的妙用

交换变量

1
2
3


let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1

提取对象属性

1
2


const user = { name: "李四", age: 30, city: "北京" };
const { name, age } = user;

4. 链式操作符

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// 可选链操作符
const user = {
 profile: {
 name: "王五"
 }
};

console.log(user?.profile?.name); // "王五"
console.log(user?.address?.street); // undefined (不会报错)

// 空值合并操作符
const defaultName = user?.name ?? "匿名用户";

5. 数组的高阶函数

map, filter, reduce的组合使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


const products = [
 { name: "商品A", price: 100, category: "电子" },
 { name: "商品B", price: 200, category: "服装" },
 { name: "商品C", price: 150, category: "电子" }
];

// 筛选电子产品，计算总价
const totalPrice = products
 .filter(product => product.category === "电子")
 .map(product => product.price)
 .reduce((sum, price) => sum + price, 0);

console.log(totalPrice); // 250

6. 异步编程最佳实践

使用async/await处理异步操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


async function fetchUserData(userId) {
 try {
 const response = await fetch(`/api/users/${userId}`);
 const userData = await response.json();
 return userData;
 } catch (error) {
 console.error("获取用户数据失败:", error);
 throw error;
 }
}

Promise.all并发处理

1
2
3
4
5


async function fetchMultipleUsers(userIds) {
 const promises = userIds.map(id => fetchUserData(id));
 const users = await Promise.all(promises);
 return users;
}

7. 防抖和节流

防抖函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function debounce(func, delay) {
 let timeoutId;
 return function(...args) {
 clearTimeout(timeoutId);
 timeoutId = setTimeout(() => func.apply(this, args), delay);
 };
}

// 使用示例
const debouncedSearch = debounce((query) => {
 console.log("搜索:", query);
}, 300);

节流函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


function throttle(func, delay) {
 let lastCall = 0;
 return function(...args) {
 const now = new Date().getTime();
 if (now - lastCall >= delay) {
 lastCall = now;
 func.apply(this, args);
 }
 };
}

总结

这些JavaScript技巧在日常开发中都非常实用。掌握这些技巧不仅能提高代码的可读性和性能，还能让我们的开发工作更加高效。