技术笔记案例

本文介绍如何使用 PowerWiki 建立个人技术笔记系统。

笔记定位

• 目的: 记录学习过程、积累技术知识
• 内容: 编程语言、框架工具、算法原理
• 特点: 快速记录、方便查阅、持续积累

目录结构

tech-notes/
├── README.md                  # 笔记首页
├── ABOUT.md                   # 学习目标
│
├── 编程语言/
│   ├── README.md
│   ├── JavaScript/
│   │   ├── README.md
│   │   ├── 基础语法.md
│   │   ├── 函数.md
│   │   ├── 异步编程.md
│   │   └── 常用API.md
│   ├── Python/
│   │   ├── README.md
│   │   ├── 基础语法.md
│   │   ├── 数据结构.md
│   │   └── Web开发.md
│   └── Go/
│       └── README.md
│
├── 前端框架/
│   ├── README.md
│   ├── React/
│   │   ├── README.md
│   │   ├── 组件.md
│   │   ├── Hooks.md
│   │   └── 状态管理.md
│   └── Vue/
│       └── README.md
│
├── 后端技术/
│   ├── README.md
│   ├── Node.js/
│   │   └── README.md
│   ├── 数据库/
│   │   ├── README.md
│   │   ├── MySQL.md
│   │   └── Redis.md
│   └── 微服务/
│       └── README.md
│
├── 工具技能/
│   ├── README.md
│   ├── Git.md
│   ├── Docker.md
│   ├── Linux.md
│   └── 设计模式.md
│
├── 算法与数据结构/
│   ├── README.md
│   ├── 基础算法.md
│   ├── 排序算法.md
│   └── 树与图.md
│
└── 读书笔记/
    ├── README.md
    ├── JavaScript高级程序设计.md
    ├── 代码整洁之道.md
    └── 架构整洁之道.md

笔记方法论

1. 分类法

按技术领域分类，建立知识体系：

技术知识
├── 编程语言
│   ├── JavaScript
│   ├── Python
│   └── Go
├── 前端框架
│   ├── React
│   └── Vue
└── 后端技术
    ├── Node.js
    └── 数据库

2. 标签法

为笔记添加多个标签，方便检索：

---
title: React Hooks 详解
tags: [React, Hooks, 前端, 状态管理]
---

3. 链接法

建立笔记之间的关联：

相关笔记：
- [React 组件通信](./React/组件通信.md)
- [Redux 状态管理](./React/Redux.md)
- [Vue3 Hooks 对比](./Vue/Hooks对比.md)

笔记模板

1. 技术学习笔记

---
title: JavaScript 异步编程
description: 深入理解 JavaScript 异步编程
tags: [JavaScript, 异步, Promise, async/await]
date: 2026-02-07
---

# JavaScript 异步编程

## 概念

异步编程是一种非阻塞的编程模式...

## 回调函数

### 基本用法

```javascript
function fetchData(callback) {
  setTimeout(() => {
    callback('数据');
  }, 1000);
}

fetchData(data => {
  console.log(data);
});

回调地狱

fetchData(a => {
  fetchMore(a, b => {
    fetchMore(b, c => {
      // 嵌套层数过多，难以维护
    });
  });
});

Promise

基本用法

const promise = new Promise((resolve, reject) => {
  // 异步操作
  resolve('成功');
});

promise
  .then(data => console.log(data))
  .catch(err => console.error(err));

链式调用

fetchUser()
  .then(user => fetchPosts(user.id))
  .then(posts => fetchComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(err => console.error(err));

async/await

基本语法

async function getData() {
  try {
    const user = await fetchUser();
    const posts = await fetchPosts(user.id);
    return posts;
  } catch (err) {
    console.error(err);
  }
}

并行执行

async function getData() {
  const [users, posts] = await Promise.all([
    fetchUsers(),
    fetchPosts()
  ]);
  return { users, posts };
}

错误处理

try/catch

async function safeFetch() {
  try {
    const data = await fetchData();
    return data;
  } catch (err) {
    console.error('获取数据失败:', err);
    return null;
  }
}

常见场景

1. 竞态条件处理

let cache = {};

async function getData(id) {
  if (cache[id]) {
    return cache[id];
  }

  const data = await fetch(`/api/${id}`);
  cache[id] = data;
  return data;
}

2. 超时处理

function withTimeout(promise, ms) {
  return Promise.race([
    promise,
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('超时')), ms)
    )
  ]);
}

总结

• 回调函数是基础但容易产生回调地狱
• Promise 解决了回调地狱问题
• async/await 是最优雅的异步写法
• 注意错误处理和异常情况

### 2. 面试题笔记

```markdown
---
title: JavaScript 面试题汇总
description: JavaScript 常见面试题及答案
tags: [JavaScript, 面试]
date: 2026-02-07
---

# JavaScript 面试题汇总

## 变量类型

### Q: JavaScript 有哪些数据类型？

**Answer:**
JavaScript 有 8 种数据类型：
- 7 种原始类型：String, Number, Boolean, Null, Undefined, Symbol, BigInt
- 1 种引用类型：Object

### Q: typeof 能检测哪些类型？

**Answer:**
```javascript
typeof 'str'     // string
typeof 123       // number
typeof true      // boolean
typeof undefined // undefined
typeof null      // object (历史遗留)
typeof {}        // object
typeof []        // object
typeof function  // function

作用域

Q: 什么是作用域？

Answer:
作用域是指变量和函数的可访问范围。

Q: JavaScript 有几种作用域？

Answer:

1. 全局作用域
2. 函数作用域
3. 块级作用域（let, const）

this

Q: 如何理解 this？

Answer:
this 指向当前函数执行的环境对象。

const obj = {
  name: 'test',
  fn() {
    console.log(this.name);
  }
};

obj.fn(); // test

原型链

Q: 什么是原型链？

Answer:
每个对象都有一个原型对象，原型对象也有自己的原型，形成链式结构。

function Person() {}
Person.prototype.say = function() {}

const p = new Person();
p.__proto__ === Person.prototype // true
Person.prototype.__proto__ === Object.prototype // true

Q: new 操作符做了什么？

Answer:

1. 创建新对象
2. 将构造函数作用域赋给新对象
3. 执行构造函数
4. 返回新对象

### 3. 速查手册

```markdown
---
title: Docker 常用命令速查
description: Docker 常用命令快速参考
tags: [Docker, 速查, 命令]
date: 2026-02-07
---

# Docker 常用命令速查

## 镜像操作

```bash
# 搜索镜像
docker search nginx

# 拉取镜像
docker pull nginx:latest

# 查看镜像
docker images

# 删除镜像
docker rmi nginx:latest

# 构建镜像
docker build -t myapp:1.0 .

容器操作

# 运行容器
docker run -d -p 8080:80 nginx

# 查看运行中的容器
docker ps

# 查看所有容器
docker ps -a

# 停止容器
docker stop container_id

# 删除容器
docker rm container_id

# 进入容器
docker exec -it container_id bash

# 查看日志
docker logs -f container_id

Docker Compose

# 启动服务
docker-compose up -d

# 停止服务
docker-compose down

# 查看日志
docker-compose logs -f

# 重新构建
docker-compose build

网络操作

# 创建网络
docker network create mynetwork

# 查看网络
docker network ls

数据卷操作

# 创建数据卷
docker volume create mydata

# 查看数据卷
docker volume ls

## 笔记技巧

### 1. 及时记录

遇到问题及时记录解决方法：

```markdown
# 问题
npm install 报错 EACCES

# 解决
sudo chown -R $(whoami) ~/.npm

# 原因
npm 目录权限不足

2. 代码片段

保存常用代码片段：

// 防抖函数
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// 节流函数
function throttle(fn, delay) {
  let flag = true;
  return function(...args) {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn.apply(this, args);
      flag = true;
    }, delay);
  };
}

3. 图文并茂

使用 Mermaid 图表：

flowchart LR
    A[输入] --> B[处理]
    B --> C[输出]
    style A fill:#f9f,stroke:#333
    style B fill:#bbf,stroke:#333
    style C fill:#bfb,stroke:#333

4. 对比学习

对比不同技术：

特性	React	Vue
数据流	单向	双向
状态管理	Redux/Zustand	Vuex/Pinia
模板	JSX	模板语法
学习曲线	中等	较平缓

搜索技巧

1. 标签搜索

tags: [React, Hooks]

2. 内容搜索

PowerWiki 支持全文搜索，快速定位笔记。

3. 目录导航

通过目录结构快速找到相关笔记。

持续优化

1. 定期回顾

• 每周回顾本周笔记
• 每月整理知识体系

2. 归档整理

• 将过时的笔记归档
• 删除重复内容

3. 分享输出

• 将笔记整理成博客
• 分享到技术社区

---

提示: 技术笔记是一个持续积累的过程，坚持记录会让你的知识体系越来越完善。