Task

Write a shader that splits the screen into two parts: the left half should be black and the right half should be red. The shader should work for any screen resolution. To achieve this, consider using the iResolution uniform variable and gl_FragColor to control the position of the split.

编写一个着色器，将屏幕分成两部分：左半部分为黑色，右半部分为红色。该着色器应适用于任何屏幕分辨率。为此，请考虑使用iResolutionuniform 变量 和gl_FragColor来控制分割的位置。

Requirements

The shader should avoid using branching or conditional statements in its code, and instead rely on the step function to determine the color of each pixel.

着色器应避免在其代码中使用分支或条件语句，而是依靠step函数来确定每个像素的颜色。

Theory

step是一个阈值函数。如果传递的值小于阈值，step则返回0.0，否则返回1.0。edge是阈值

函数

float step(float edge, float x)

• 如果是x < edge，函数返回0.0。
• 如果是x >= edge，函数返回1.0。

示例用法

float edge = 0.5;

float x = 0.3;

float result = step(edge, x); // x < edge ? 0.0 : 1.0

Answer

uniform vec2 iResolution;

void main() {
  vec2 uv = gl_FragCoord.xy/iResolution.xy;
  float result = step(0.5, uv.x);
  gl_FragColor = vec4(result, 0.0, 0.0, 1.0);
}

效果

练习

Step

最后

如果你觉得这篇文章有用，记得点赞、关注、收藏，学Shader更轻松！！

一、核心设计理念差异

1. 数据流向的明确性

‌props/emit‌ 遵循严格的单向数据流：

// 父组件
<child-component :message="parentMsg" @update="handleUpdate" />

// 子组件
export default {
  props: ['message'],
  methods: {
    sendToParent() {
      this.$emit('update', newValue) // 明确的数据流向
    }
  }
}

‌provide/inject‌ 则是隐式的跨层级通信：

// 祖先组件
provide('sharedData', reactive({ value: null }))

// 任意后代组件
const data = inject('sharedData')
data.value = 123 // 来源不直观

二、必须使用 props/emit 的场景

1. 可复用组件开发

‌组件库中的按钮组件‌：

// 使用props定义明确接口
export default {
  props: {
    type: {
      type: String,
      default: 'default',
      validator: val => ['default', 'primary', 'danger'].includes(val)
    },
    disabled: Boolean
  },
  emits: ['click'], // 显式声明事件
  template: `
    <button 
      :class="['btn', `btn-${type}`]"
      :disabled="disabled"
      @click="$emit('click', $event)"
    >
      <slot></slot>
    </button>
  `
}

2. 父子组件明确契约

‌表单验证场景‌：

// 父组件
<validated-input
  :rules="[v => !!v || '必填项']"
  @valid="isFormValid = $event"
/>

// 子组件
export default {
  props: ['rules'],
  emits: ['valid'],
  watch: {
    inputValue() {
      const isValid = this.rules.every(rule => rule(this.inputValue))
      this.$emit('valid', isValid) // 明确的状态反馈
    }
  }
}

三、provide/inject 的适用边界

1. 适合使用 provide/inject 的场景

‌跨多层组件共享配置‌：

// 主题提供者组件
provide('theme', {
  colors: {
    primary: '#409EFF',
    danger: '#F56C6C'
  },
  darkMode: false
})

// 深层嵌套的按钮组件
const theme = inject('theme')
const buttonColor = computed(() => 
  theme.darkMode ? theme.colors.primary : '#333'
)

2. 不适合使用 provide/inject 的情况

‌列表项与父组件通信‌：

// 错误示范：使用inject修改父级状态
inject('parentMethods').updateItem(item) // 破坏组件独立性

// 正确做法：通过props/emit
props: ['item'],
emits: ['update'],
methods: {
  handleUpdate() {
    this.$emit('update', newItem) // 保持接口明确
  }
}

四、关键对比维度

维度	props/emit	provide/inject
‌组件耦合度‌	低（明确接口）	高（隐式依赖）
‌可维护性‌	容易追踪数据流	调试困难
‌类型安全‌	支持完整类型定义	JavaScript中难以类型检查
‌适用层级‌	父子/直接关联组件	任意层级组件
‌测试便利性‌	可单独测试输入输出	需要构建完整上下文
‌代码可读性‌	接口清晰可见	需要查找provide源头

五、实际项目中的混合使用

1. 组合式API最佳实践

// 组件定义
export default {
  props: {
    // 必须的输入
    modelValue: { type: String }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    // 注入应用级配置
    const appConfig = inject('appConfig')
    
    const handleInput = (e) => {
      // 本地事件处理
      emit('update:modelValue', e.target.value)
      
      // 同时使用注入的方法
      appConfig.trackInput?.(e.target.value)
    }
    
    return { handleInput }
  }
}

2. 设计模式选择指南

graph TD
    A[组件通信需求] --> B{通信方向}
    B -->|父→子| C[props]
    B -->|子→父| D[emit]
    B -->|兄弟组件| E[状态提升/全局状态]
    A --> F{层级深度}
    F -->|1-2层| G[优先props/emit]
    F -->|3+层| H[考虑provide]
    A --> I{复用性要求}
    I -->|高复用组件| J[必须用props/emit]
    I -->|内部实现细节| K[可用provide]

六、典型误用案例分析

1. 滥用 provide 导致的状态混乱

// 问题代码：多个组件通过inject修改同一状态
provide('globalState', reactive({ count: 0 }))

// 组件A
inject('globalState').count++

// 组件B
inject('globalState').count *= 2
// 无法追踪修改来源，调试困难

2. 应该使用 props 的场景

// 错误示范：用inject代替props
provide('userAvatar', avatarUrl)

// 正确做法：头像组件应该通过props接收数据
export default {
  props: {
    avatarUrl: String // 明确接口
  }
}

七、工程化考量

1. 项目可维护性影响

• ‌props/emit‌ 使组件成为"黑盒"，通过接口文档即可理解功能
• ‌provide/inject‌ 需要查看组件实现才能理解依赖关系

2. 团队协作规范

// 良好的组件接口设计
export default {
  props: {
    // 带验证的props
    size: {
      type: String,
      default: 'medium',
      validator: s => ['small', 'medium', 'large'].includes(s)
    }
  },
  emits: {
    // 带验证的emit
    'size-change': payload => typeof payload === 'string'
  }
}

总结来说，props/emit 提供了组件间明确、可预测的通信方式，是构建可维护、可复用组件的基础；而 provide/inject 是特定场景下的补充方案，适用于真正需要穿透多层级的上下文共享场景。

---

一、provide/inject 基础原理

1. 基本用法

// 祖先组件提供数据
export default {
  provide() {
    return {
      theme: 'dark',
      toggleTheme: this.toggleTheme
    }
  },
  methods: {
    toggleTheme() {
      this.theme = this.theme === 'dark' ? 'light' : 'dark'
    }
  }
}

// 后代组件注入使用
export default {
  inject: ['theme', 'toggleTheme'],
  template: `
    <button @click="toggleTheme">
      当前主题: {{ theme }}
    </button>
  `
}

2. 响应式数据传递

// 使用 Vue 3 的 reactive/ref
import { ref, provide } from 'vue'

export default {
  setup() {
    const count = ref(0)
    provide('count', count)
    
    return { count }
  }
}

// 后代组件
export default {
  setup() {
    const count = inject('count')
    return { count }
  }
}

二、provide/inject 的优势

1. 组件树穿透能力

‌场景‌：多层嵌套组件共享配置

// 根组件
provide('appConfig', {
  apiBaseUrl: 'https://api.example.com',
  features: {
    analytics: true,
    notifications: false
  }
})

// 第5层子组件直接使用
const config = inject('appConfig')
console.log(config.apiBaseUrl) // 直接访问

2. 减少 props 传递

‌传统方式‌：

// 每层组件都需要传递props
<Parent :config="config">
  <Child :config="config">
    <GrandChild :config="config" />
  </Child>
</Parent>

‌provide/inject 方式‌：

// 根组件
provide('config', config)

// 任意层级子组件
const config = inject('config')

3. 动态上下文共享

‌场景‌：表单组件与表单项通信

// Form 组件
provide('formContext', {
  registerField: (field) => { /* 注册字段 */ },
  validate: () => { /* 验证表单 */ }
})

// FormItem 组件
const { registerField } = inject('formContext')
onMounted(() => registerField(this))

三、provide/inject 的劣势

1. 调试困难

// 当多个祖先提供同名key时
const data = inject('settings') // 无法直观确认数据来源

// 解决方案：使用Symbol作为key
const SettingsKey = Symbol()
provide(SettingsKey, { theme: 'dark' })
const settings = inject(SettingsKey)

2. 缺乏状态管理

// 简单的计数器示例
provide('counter', {
  count: 0,
  increment() { this.count++ }
})

// 问题：
// 1. 状态变更无法追踪
// 2. 多个组件修改时可能产生冲突

3. 类型安全缺失（JavaScript中）

// 无法像TypeScript那样进行类型检查
const user = inject('user') // 不知道user的结构

四、与传统状态管理（Vuex）对比

1. Vuex 基本示例

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => commit('increment'), 1000)
    }
  }
})

// 组件中使用
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}

2. 对比表格

特性	provide/inject	Vuex
‌作用范围‌	组件树局部	全局
‌调试工具‌	不可见	完整的时间旅行调试
‌响应式‌	自动响应式	自动响应式
‌代码组织‌	分散在各组件	集中式管理
‌类型安全‌	需要额外处理	需要类型定义
‌服务端渲染‌	天然支持	需要额外配置
‌性能‌	按需注入，内存友好	全局存储，初始加载稍慢
‌适用场景‌	组件库/局部状态共享	大型应用全局状态管理

五、实际场景选择指南

1. 适合 provide/inject 的场景

‌场景1：UI组件库开发‌

// 下拉菜单组件
provide('dropdown', {
  registerItem: (item) => { /* 注册菜单项 */ },
  close: () => { /* 关闭菜单 */ }
})

// 菜单项组件
const { registerItem, close } = inject('dropdown')
onMounted(() => registerItem(this))

‌场景2：主题切换‌

// 主题提供者
provide('theme', {
  current: 'light',
  colors: {
    light: { primary: '#fff' },
    dark: { primary: '#000' }
  }
})

// 任意子组件
const { current, colors } = inject('theme')
const bgColor = computed(() => colors[current].primary)

2. 适合 Vuex/Pinia 的场景

‌场景1：用户全局状态‌

// store/user.js (Pinia示例)
export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    token: ''
  }),
  actions: {
    async login(credentials) {
      const res = await api.login(credentials)
      this.name = res.name
      this.token = res.token
    }
  }
})

// 多个组件共享同一状态
const userStore = useUserStore()
userStore.login({...})

‌场景2：购物车管理‌

// store/cart.js (Vuex示例)
{
  state: {
    items: []
  },
  mutations: {
    ADD_ITEM(state, item) {
      state.items.push(item)
    }
  },
  getters: {
    totalPrice: (state) => {
      return state.items.reduce((sum, item) => sum + item.price, 0)
    }
  }
}

// 组件中使用
this.$store.commit('ADD_ITEM', product)
this.$store.getters.totalPrice

六、混合使用模式

1. 全局状态 + 局部增强

// 使用Pinia作为基础
const userStore = useUserStore()

// 在特定组件树中增强功能
provide('enhancedUser', {
  ...userStore,
  // 添加局部方法
  sendMessage() {
    console.log(`Message to ${userStore.name}`)
  }
})

2. 性能优化技巧

javascriptCopy Code
// 避免在provide中直接传递大对象
provide('heavyData', () => fetchHeavyData())

// 组件中按需获取
const getHeavyData = inject('heavyData')
const data = computed(() => getHeavyData())

七、决策流程图

graph TD
    A[需要共享状态?] -->|是| B{状态使用范围}
    B -->|全局多组件| C[Vuex/Pinia]
    B -->|特定组件树| D{状态复杂度}
    D -->|简单配置| E[provide/inject]
    D -->|复杂业务逻辑| C
    A -->|否| F[使用组件本地状态]

‌总结‌：

• provide/inject 适合组件库开发和局部状态共享
• Vuex/Pinia 适合大型应用全局状态管理
• 在JavaScript项目中，注意通过命名规范和Symbol来避免注入冲突
• 对于中型项目，可以考虑混合使用两种方案

---

前言

在前端开发的面试中，HTML 是最基础也是最重要的知识点之一。

尤其是大厂的前端面试，往往会围绕 HTML 的核心概念和语义化标签进行深入考察。

本文将带你梳理一些常见的 HTML 面试问题，并结合实际应用场景进行解析。

---

Q1 ：HTML5 是什么，为什么重要？

HTML5 是 HTML 的最新版本标准，它不仅增强了网页结构的表现能力，还引入了丰富的语义化标签和原生功能（如音视频支持、本地存储等），使开发者能够更高效地构建现代 Web 应用。

在 HTML5 中，我们通常会在文档开头使用：

<!DOCTYPE html>

这行代码的作用是告诉浏览器这是一个 HTML5 文档，确保浏览器以标准模式渲染页面。

---

Q2 : HTML 标签有哪些分类？

---

1.按布局需求，可分为行内元素标签和块级元素标签：

1.1 行内元素（Inline Elements）

• 特点：默认情况下，行内元素不会独占一行，宽度由内容决定，不能设置宽高。
• 常见标签：
  • <a>：超链接
  • <span>：文本容器，常用于样式控制

✅ 小技巧：调试的时候可以给元素添加背景色，以便观察布局效果。

示例：

<span style="background-color: yellow;">这是一个 span</span>
<a href="#">这是一个链接</a>

1.2 块级元素（Block-level Elements）

• 特点：每个块级元素独占一行，默认宽度为父容器的 100%，可以设置宽高。
• 常见标签：
  • <div>：通用容器
  • <ul> / <li>：无序列表
  • <p>：段落
  • <header> / <footer> / <nav>：语义化标签

示例：

<div style="background-color: lightblue;">这是一个 div</div>
<p>这是一个段落</p>

---

2. 按功能分，可分为语义化标签、表格标签、表单标签等...

除了布局相关的分类外，HTML 标签还可以根据其功能进行划分，尤其是一些新增的语义化标签，在大厂面试中经常被问到。

2.1 语义化标签（Semantic Tags）

HTML5 引入了许多具有明确含义的语义化标签，这些标签比传统的 <div> 更具可读性和可维护性，也有利于 SEO 和爬虫抓取。

标签	含义
<header>	页面或区块的头部
<main>	页面主要内容
<footer>	页面或区块的底部
<nav>	导航区域
<section>	内容区块
<article>	独立文章内容
<aside>	侧边栏或辅助信息

示例：

<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于我们</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>文章标题</h2>
    <p>这是文章内容。</p>
  </article>
</main>
<footer>
  <p>© 2025 版权所有</p>
</footer>

2.2 表格相关标签

表格用于展示结构化的数据，虽然现在不常用作布局工具，但在数据展示方面依然不可或缺。

• <table>：定义表格
• <tr>：表格行
• <td>：单元格
• <th>：表头单元格（加粗居中显示）

示例：

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
  </tr>
</table>

2.3 表单相关标签

表单是用户与网页交互的重要方式，常用于登录、注册等功能。

• <form>：表单容器
• <input>：输入框（文本、密码、复选框等）
• <select> / <option>：下拉选择框
• <textarea>：多行文本输入

示例：

<form action="/submit" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br><br>

  <label for="color">喜欢的颜色：</label>
  <select id="color" name="color">
    <option value="red">红色</option>
    <option value="blue">蓝色</option>
  </select><br><br>

  <input type="submit" value="提交">
</form>

---

3. 结语

HTML 虽然是前端三大核心技术之一中最基础的部分，但其重要性不容忽视。掌握 HTML 的基本结构、标签分类以及语义化应用，不仅能帮助你写出更清晰、易于维护的代码，还能在大厂面试中脱颖而出。

在准备面试时，建议多动手实践，尝试用语义化标签重构传统 <div> 布局，理解不同标签的行为差异，并关注 HTML5 新增的功能特性，如 Canvas、SVG、本地存储等，这些都是进阶面试题的重要考点。

---

📌 小贴士：

• 在调试页面时，可以给元素添加背景颜色，快速识别布局结构。
• 使用语义化标签提升代码可读性，有助于团队协作和搜索引擎优化（SEO）。

希望这篇文章能帮助你在 HTML 面试中游刃有余，顺利拿下心仪的大厂 offer！

编者注： Git worktree 是 Git 提供的一个强大功能，它允许你在同一个仓库中同时处理多个分支，而不会干扰当前的工作环境。1) 通过创建新的 worktree，你可以并行处理多个任务，比如修复紧急 bug 和开发新功能。2) worktree 与主工作区完全隔离，你可以独立提交、推送和归档更改。3) 使用 worktree 可以避免频繁切换分支带来的混乱，保持工作区的整洁。本文详细介绍了 worktree 的使用场景和操作方法，帮助你更高效地管理 Git 仓库。

什么是 Git worktree

Git worktree 是 Git 仓库的链接副本，允许你同时检出多个分支。worktree 与主工作副本的路径不同，但它可以处于不同的状态和不同的分支上。Git 中新的 worktree 的优势在于，你可以进行与当前任务无关的更改，提交更改，然后在稍后合并它，而不会干扰你当前的工作环境。

来自 git-worktree 手册页的典型示例是，当你正在为项目开发一个令人兴奋的新功能时，你的项目经理告诉你需要一个紧急修复。问题是，你的工作仓库（你的“worktree”）因为正在开发一个主要的新功能而处于混乱状态。你不想将修复“偷偷”插入当前的冲刺中，也不愿意暂存更改以创建一个新的分支来进行修复。相反，你决定创建一个新的 worktree，以便在那里进行修复：

$ git branch | tee 
* dev 
  trunk 
$ git worktree add -b hotfix ~/code/hotfix trunk 
Preparing ../hotfix (identifier hotfix) HEAD is now at 62a2daf commit

上述命令的功能是从 trunk 分支创建一个名为 hotfix 的新分支，并将其作为一个独立的 worktree 放置在 ~/code/hotfix 目录中。此时，你可以将这个 worktree 当作主要的工作空间。你能够切换到该目录，进行紧急修复，提交修改，最后删除这个 worktree：

$ cd ~/code/hotfix 
$ sed -i 's/teh/the/' hello.txt 
$ git commit --all --message '紧急修复'

一旦你完成了紧急工作，你可以回到之前的任务。你可以控制何时将你的 hotfix 集成到主项目中。例如，你可以直接从它的 worktree 将更改推送到项目的远程仓库：

$ git push origin HEAD 
$ cd ~/code/myproject

或者你可以将 worktree 归档为 TAR 或 ZIP 文件：

$ cd ~/code/myproject 
$ git archive --format tar --output hotfix.tar master

或者你可以从单独的 worktree 中获取更改：

$ git worktree list 
/home/seth/code/myproject 15fca84 [dev] 
/home/seth/code/hotfix 09e585d [master]

从那里，你可以使用最适合你和你的团队的策略来合并你的更改。

列出活跃的 worktree

你可以使用 git worktree list 命令获取 worktree 的列表，并查看每个 worktree 检出的分支：

$ git worktree list 
/home/seth/code/myproject 15fca84 [dev] 
/home/seth/code/hotfix 09e585d [master]

你可以在任何一个 worktree 中使用这个命令。worktree 总是链接的（除非你手动移动它们，破坏 Git 定位 worktree 的能力，从而切断链接）。

移动一个 worktree

Git 在你的项目的 .git 目录中跟踪 worktree 的位置和状态：

$ cat ~/code/myproject/.git/worktrees/hotfix/gitdir /home/seth/code/hotfix/.git

如果你需要重新定位一个 worktree，你必须使用 git worktree move；否则，当 Git 尝试更新 worktree 的状态时，它会失败：

$ mkdir ~/Temp 
$ git worktree move hotfix ~/Temp 
$ git worktree list 
/home/seth/code/myproject 15fca84 [dev] 
/home/seth/Temp/hotfix 09e585d [master]

删除一个 worktree

当你完成工作后，你可以使用 remove 子命令删除它：

$ git worktree remove hotfix 
$ git worktree list 
/home/seth/code/myproject 15fca84 [dev]

为了确保你的 .git 目录是干净的，在删除 worktree 后使用 prune 子命令：

$ git worktree prune

何时使用 worktree

使用标签、书签、自动备份等功能时，需自行跟踪数据，否则易管理混乱。Git worktree 也同理，别频繁创建，避免副本过多。建议按需创建，完成任务、提交工作后及时删除，保持简洁专注。

重要的是，worktree 为你管理 Git 仓库提供了更大的灵活性。在需要时使用它们，再也不用为了检查另一个分支上的内容而匆忙保存工作状态。

英文原文

开篇

axios还用封装？

不着急，咱先聊聊为什么要封装axios，或者说我们的封装目标是什么。

1、三级拦截器：支持全局、实例、单次请求响应的拦截器设置

为什么要分级设置拦截器?

为了分离关注点，从而实现分层。

拿错误处理来说，

当请求过程中发生错误时，错误拦截器执行顺序会是：全局拦截器、实例级拦截器、单次请求级拦截器。

那我们可以用实例级拦截器处理通用错误，用单次请求级拦截器处理特定业务错误。

业务错误在实例级错误拦截器里重新抛出就行了。

这样在错误处理时，实例级拦截器只需要处理通用错误，单次请求级拦截器只需要处理特定业务的错误。

岂不爽哉?

2、支持比axios更严格更清晰的类型要求

axios的get、post等方法泛型参数不传会自动给any。

而我们通过封装可以让 any 爬~

而且封装之后可以通过interface开放类型的拓展，还就那个开闭原则。

3、不锁死axios：方便渣~

哪天不想(能)用axios了，可以无痛切换。

所以说，有这些需求完全可以封装一下axios。

那怎么个封装法?

1、封装实例和请求配置

这里提一嘴，不建议在响应拦截器里偷懒返回res.data，因为axios内部拦截器是串行调用的，上一个拦截器的结果会作为下一个拦截器的输入，这会导致后续的其它拦截器拿到res.data,而不是res。

import type {
AxiosError,
AxiosInstance,
AxiosRequestConfig,
AxiosResponse,
InternalAxiosRequestConfig
} from 'axios';
import axios from 'axios';

//RD: Request Data, SD: Response Data
export interface RequestConfig<RD, SD> extends AxiosRequestConfig<RD> {
reqOKFn?: ((config: RequestConfig<RD, SD>) => Promise<RequestConfig<RD, SD>> | RequestConfig<RD, SD>)[];
//不支持偷懒返回res.data,这是一种反模式, 因为会导致后续的其它拦截器拿到res.data,而不是res
resOKFn?: ((res: AxiosResponse<SD, RD>) => Promise<AxiosResponse<SD, RD>> | AxiosResponse<SD, RD>)[];
reqFailFn?: (error: AxiosError<SD, RD>) => Promise<AxiosResponse<SD, RD>> | AxiosResponse<SD, RD>;
resFailFn?: (error: AxiosError<SD, RD>) => Promise<AxiosResponse<SD, RD>> | AxiosResponse<SD, RD>;
}


class Requester<TRD, TSD> {
instance: AxiosInstance;
constructor(config: RequestConfig<TRD, TSD>) {
this.instance = axios.create(config);
}
        
  async request<RD, SD>(config: RequestConfig<RD, SD>): Promise<AxiosResponse<SD, RD>> {
let res = await this.instance.request<SD, AxiosResponse<SD>, RD>(config);
return res;
}
}

这里要求泛型必须传入参数且以之指定返回值类型，就可以进行更为严格的类型要求。

2、三级拦截器功能

全局拦截器直接在constructor里设置，全局就是对每个实例都设置。

实例拦截器在传入config里设置、在constructor中应用。

值得一提的是，axios中请求拦截器的签名是这样的：

(config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig

而我们想要设置的是这样的：

(config:RequestConfig) => RequestConfig

看一眼axios源码看看InternalAxiosRequestConfig是个啥：

export interface InternalAxiosRequestConfig<D = any> extends AxiosRequestConfig<D> {
  headers: AxiosRequestHeaders;
}

那请求拦截器函数实际上拿到的是加了个 headers 属性的 RequestConfig ，同时也是属性只多不少的 InternalAxiosRequestConfig。

所以我们可以通过类型断言来进行适配， 同时保持类型安全。

import type {
AxiosError,
AxiosInstance,
AxiosRequestConfig,
AxiosResponse,
InternalAxiosRequestConfig
} from 'axios';
import axios from 'axios';

//RD: Request Data, SD: Response Data
export interface RequestConfig<RD, SD> extends AxiosRequestConfig<RD> {
reqOKFn?: ((config: RequestConfig<RD, SD>) => Promise<RequestConfig<RD, SD>> | RequestConfig<RD, SD>)[];
//不支持偷懒返回res.data,这是一种反模式, 因为会导致后续的其它拦截器拿到res.data,而不是res
resOKFn?: ((res: AxiosResponse<SD, RD>) => Promise<AxiosResponse<SD, RD>> | AxiosResponse<SD, RD>)[];
reqFailFn?: (error: AxiosError<SD, RD>) => Promise<AxiosResponse<SD, RD>> | AxiosResponse<SD, RD>;
resFailFn?: (error: AxiosError<SD, RD>) => Promise<AxiosResponse<SD, RD>> | AxiosResponse<SD, RD>;
}

class Requester<TRD, TSD> {
instance: AxiosInstance;
//config：实例的默认配置
constructor(config: RequestConfig<TRD, TSD>) {
this.instance = axios.create(config);
// 这里 设置并应用 全局拦截器（会给每个实例都设置）
// this.instance.interceptors.request.use(onFulfilledCb,onRejectedCb);

// 这里 应用 实例的拦截器
this.instance.interceptors.request.use(async (config: InternalAxiosRequestConfig<TRD>) => {
/* 
实际上拿到的是加了 headers 属性的 RequestConfig ,
同时也是属性只多不少的 InternalAxiosRequestConfig
类型安全（鸭子类型）
*/
let configCustom = config as unknown as RequestConfig<TRD, TSD>;
for (const fn of configCustom.reqOKFn || []) {
configCustom = await fn(configCustom);
}
return configCustom as InternalAxiosRequestConfig<TRD>;
}, config.reqFailFn);

this.instance.interceptors.response.use(async (value: AxiosResponse<TSD, TRD>) => {
for (const fn of config.resOKFn || []) {
value = await fn(value);
}
return value;
}, config.resFailFn);
}

单次请求的拦截器在request方法里应用就行了。

async request<RD, SD>(config: RequestConfig<RD, SD>):: Promise<AxiosResponse<SD, RD>> {
// 这里 应用 单次请求和响应的拦截器
try {
for (const fn of config.reqOKFn || []) {
config = await fn(config);
}
let res = await this.instance.request<SD, AxiosResponse<SD>, RD>(config);
for (const fn of config.resOKFn || []) {
res = await fn(res);
}
return res;
} catch (error) {
/* 拦截器执行顺序：实例级拦截器、单次请求级拦截器
实例级拦截器处理通用错误,
单次请求级拦截器处理特定业务错误
*/
if (axios.isAxiosError(error)) {
if (error.response) {
//响应错误
if (config.resFailFn) {
                                        // 拦截器返回值会成为请求的最终结果（提供fallback）
return config.resFailFn(error); 
}
} else {
//请求或者请求创建错误
if (config.reqFailFn) {
return config.reqFailFn(error);
}
}
}

throw error;
}
}
}

这里注意要像这样手动设置request方法的返回值类型,不然会推导成Promise<any>

这样，当请求过程中发生错误时，拦截器执行顺序是：全局拦截器、实例级拦截器、单次请求级拦截器。

用实例级拦截器处理通用错误，用单次请求级拦截器处理特定业务错误。

业务错误在实例级错误拦截器里重新抛出就行了。

体会到拦截器分层的好处了吗?

其实不管前端后端，分层的架构思想都无处不在。

比如一个完整的前端应用会分为：

1. UI组件层: 纯展示组件(按钮、表单等)
2. 页面/容器层: 组合UI组件，连接数据与展示
3. 状态管理层: 管理应用状态(Redux/Vuex等)
4. 服务/API层: 处理与后端的通信(当前代码所处层次)
5. 工具/辅助层: 提供通用功能

有些复杂的项目甚至还会使用BFF（Backend For Frontend）来加个一层。

3、结束

最后加上常用的get和post方法

async get<SD>(url: string, config?: RequestConfig<never, SD>) {
return await this.request<never, SD>({
url,
method: 'GET',
...config
});
}

async post<RD, SD>(url: string, data: RD, config?: RequestConfig<RD, SD>) {
return await this.request<RD, SD>({
url,
method: 'POST',
data,
...config
});
}

没了啊，就这。

使用示例：

interface ServerDataFormat<TData = unknown> {
code: string; 

message: string; 

data: TData; 
}

interface LoginResponse {
id: number;
username: string;
create_at: Date | null;
update_at: Date | null;
email: string;
token: string;
}

interface UserInfo {
username: string;

password: string;

email?: string;

captcha?: string;
}

import { type RequestConfig, Requester } from './requester';
import type { ServerDataFormat } from './types';

const config: RequestConfig<unknown, ServerDataFormat> = {
baseURL: 'http://localhost:3000',
timeout: 10000,
//这里 设置 实例拦截器
reqOKFn: [
async config => {
//添加token
const token = localStorage.getItem('token');
if (token && config.headers) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
}
],
resOKFn: [
async response => {
return response;
}
]
};

const instance = new Requester<unknown, ServerDataFormat>(config);

async function login(userInfo: UserInfo) {
return await instance.post<UserInfo, ServerDataFormat<LoginResponse>>('/user/login', userInfo);
}

结尾

后头咱来聊聊，如何从后端到前端，制定统一返回格式和错误处理，前端联合axios、react-query、redux，进行优雅的前后端通信、错误处理和状态管理。

cesium离线部署

  引言：前面文章主要介绍了cesium的初始化，这篇文章主要介绍cesium怎么在断网条件下进行开发和调试，具体内容包括地图与地形的下载，切片和部署。最后会在断网条件下进行初始cesium。

cesium影像瓦片

  cesium的初始化成功后的地球，看似是一个完整的球体，但是仔细观察镜头在推进的时候能看到图层表面是有一些缝隙的，就像一张张图片拼接成的一个能观察的现实地球，这些图片就是瓦片图。AI搜索的cesium瓦片图解释是这样： Cesium的瓦片图是其实现大规模地理数据高效加载与渲染的核心技术，主要分为影像瓦片和地形瓦片两大类，同时支持三维模型瓦片（3D Tiles）。其实，这些影像瓦片是通过将地图按照层级、行号、列号切分为小图块，以四叉树结构组织存储。Cesium通过ImageryProvider加载这些瓦片。具体实现如下：

离线化部署

1. 瓦片图下载：下载全能地图下载器进行破解，因为很多地图资源的下载都是收费的，所以你懂的，[网盘链接](pan.baidu.com/s/11f5a6tsM… 提取码: 25yn)。下载解压后，右键注册机以管理员身份运行得到注册码，双击imaps.exe，将注册码填写就可以愉快的下载瓦片图了。具体操作如下：

  有其余需要下载的，由于篇幅有限，就不一一介绍了，请自己摸索。下载成功的资源目录如下：

2. nginx部署： 在这里我就不介绍怎么在windows安装部署nginx了，请自行百度安装。安装后的目录如下：   打开conf文件夹，打开nginx.conf文件，新增一个server，配置代码如下。其中root对应的是文件名称，下面的是为例解决跨域访问的问题

 server {
        listen       81;
        server_name  127.0.0.1;
       
        location / {
            root   satellite;
            autoindex on;
            autoindex_exact_size off;
            autoindex_localtime on;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS';  
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

  之后双击nginx.exe，会出现cmd一闪而过，打开浏览器输入127.0.0.1:81出现如图所示即表示部署成功。

3. 配置模板路径： 使用UrlTemplateImageryProvider，访问加载瓦片图，具体路径 如：http://127.0.0.1：81/{z}/{x}/{y}.jpg。具体实现如下：

<script setup>
import * as cesium from "cesium";
import { onMounted } from 'vue';
import { useCesium } from "@/hooks/useCesium";
let viewer = null
const map1 = new cesium.UrlTemplateImageryProvider({
    url: 'http://127.0.0.1:81/{z}/{x}/{y}.jpg'
})

onMounted(() => {
    const earth = document.querySelector("#earth");
    viewer = useCesium(earth);
    viewer.imageryLayers.addImageryProvider(map1)
})
</script>

<template>
    <div class="content">
        <div class="earth" id="earth"></div>
    </div>
</template>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100%;
    position: relative;
    .earth {
        width: 100%;
        height: 100%;
    }
}
</style>

cesium地形瓦片

  1.下载： 地形瓦片的离线部署比较麻烦，因为需要自己切割，所以需要在地理空间数据云上下载数据。www.gscloud.cn/search 选择好需要下载的数据级，这里选择DEM数字高程数据中的GDEMV3 30M分辨率数字高程数据。

  然后检索想要下载的地区，这里作者选择的是北京市昌平区。点击检索结果最右侧的下载按钮下载，实际下载的数据是绿色框框住的面积。

  2.cesiumLab处理： 将解压后的ASTGTMV003_N40E115_dem.tif文件上传，具体操作如下：等待处理完成。   处理好的地形瓦片：

  3. nginx部署： 具体代码如下：

server {
        listen       888;
        server_name  127.0.0.1;
       
        location / {
            root   terrain;
            autoindex on;
            autoindex_exact_size off;
            autoindex_localtime on;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS'; 
        }
     
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

  4.配置模板路径： 使用静态方法cesium.CesiumTerrainProvider.fromUrl，访问http://127.0.0.1:888加载地形资源。实现与效果如下：

<script setup>
import * as cesium from "cesium";
import { onMounted } from "vue";
import { useCesium } from "@/hooks/useCesium";
let viewer = null
// 加载离线地图
const map1 = new cesium.UrlTemplateImageryProvider({
    url: 'http://127.0.0.1:81/{z}/{x}/{y}.jpg'
})
onMounted(async () => {
    const earth = document.querySelector("#earth");
    viewer = useCesium(earth);
    viewer.imageryLayers.addImageryProvider(map1)
    // 加载离线地形
   try{
    const terrainProvider = await cesium.CesiumTerrainProvider.fromUrl('http://127.0.0.1:888');
    viewer.terrainProvider = terrainProvider;
   }catch(e){
       console.log(e)
   }
});
</script>
<template>
    <div class="earth" id="earth"></div>
</template>

<style lang="scss" scoped>
.earth {
    width: 100%;
    height: 100%;
}
</style>

总结

  cesium影像瓦皮和地形瓦片的部署已经实现，回顾前几篇文章，发现几乎没有新的API用到，最麻烦的也就是nginx部署，实际应用中可以直接整合到后端代码中，如果前端再进行桌面化开发，那么就不用nginx也可以实现，作者已经使用tauri + rust实现了集成。具体实现等有时间再聊聊，今天就到此为止。下一篇聊cesium实体的创建，敬请期待！（觉得对你有帮助的话请点赞+收藏，有问题下方留言。）

最近开发了一个React拖拽排序组件库，计划通过npm link到本地测试时，遇到了报错：Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.经过多轮排查，最终发现到React多实例冲突与pnpm对peerDependencies的隐式安装是核心原因，以下是完整解决流程，供同类问题参考

一、问题初判：React版本兼容性？

测试项目使用Next 15（App Router）报错，初步怀疑版本冲突：

• Next 15 App Router默认依赖React 19，但组件库用了React 18.3.1
• 尝试放宽版本限制：将组件库package.json中react的版本范围改为"^18.3.1 || ^19.0.0"，但测试仍报错
• 结论：版本兼容性非主因（组件库并没有使用与react18强相关的特性，后来使用了一个react18的项目也不行）

二、排查方向：组件库依赖配置问题

查阅React官方文档（Invalid Hook Call警告）和关键Issue（github.com/facebook/re… ，提示可能是React多实例或Hooks未在函数组件内调用导致。因为组件代码没有问题所以排除后者，重点排查多实例：

1. 验证多实例的关键方法

• 现象辅助判断：同时出现Invalid hook call和Cannot read properties of null (reading 'useState')，是典型多实例特征（不同React实例的Hooks上下文不共享）

• 打包产物检查：

  • 构建后搜索组件库代码，确认仅在入口有import React from 'react'，其他位置无重复引入或者明显的function useState(){}定义等
  • 使用rollup-plugin-visualizer分析打包依赖，确认React未被打包进组件库

2. 修复尝试：配置peerDependencies与外部化

• peerDependencies声明：在组件库package.json中，将react和react-dom标记为peerDependencies（告知用户需自行安装）
• Rollup外部化配置：在vite.config.ts中，通过build.rollupOptions.external将React相关模块排除在打包外：["react", "react-dom", "react/jsx-runtime"] 关键：包括react/jsx-runtime
• 结果：仍报错

三、关键突破：React路径指向异常

尝试暴力验证：将组件库打包后的import React from 'react'改为测试项目中React的绝对路径（如import React from '/path/to/test-project/node_modules/react'），测试项目运行正常

• 结论：实锤组件库与测试项目引用了不同路径的React实例

四、终极原因：pnpm对peerDependencies的隐式安装

进一步排查依赖管理工具pnpm的特性：

• pnpm默认行为：pnpm 10默认开启autoInstallPeers（官方文档）（pnpm9也是），会自动安装peerDependencies到当前项目的node_modules中（这篇文章stackoverflow.com/questions/7… 有误导性）
• 问题触发场景：组件库依赖了motion，而motion的peerDependencies中声明了react，pnpm因autoInstallPeers=true，会隐式为组件库安装一个独立的React实例
• 验证方法：执行pnpm why react（显示哪个包依赖了react导致的下载），输出显示React由motion的peer依赖触发安装

五、最终解决方案

通过配置pnpm禁用自动安装peer依赖，确保组件库与测试项目共享同一React实例：

1. 在组件库根目录创建.npmrc文件，添加：auto-install-peers = false
2. 删除lock文件，重新安装依赖（pnpm i），可以看到pnpm-lock.yaml中开头有一行autoInstallPeers: false
3. 重新build组件库

总结与避坑指南

• 核心原则：本地测试组件库时，确保组件库与测试项目共享同一React实例（路径、版本完全一致）

• 关键配置：

  • 组件库必须声明react为peerDependencies，避免打包时包含React
  • Rollup/Vite需外部化react、react-dom、react/jsx-runtime（避免打包）
  • pnpm用户需检查auto-install-peers配置（默认开启，可能导致隐式安装独立实例）

tips：npm link和pnpm link的区别

1. npm link：先npm link将组件库注册到全局，再在测试项目npm link 包名引用全局链接，即通过全局node_modules建立软链接
2. pnpm link：直接将组件库路径硬链接到测试项目的node_modules（需显式指定路径pnpm link 组件库路径），无需经过全局node_modules

希望这篇记录能帮到遇到类似问题的开发者

第一章 跨域问题本质：同源策略与凭证携带限制

1.1 同源策略的核心规则

同源策略（Same-Origin Policy）是浏览器最核心的安全机制之一，其定义为：协议、域名、端口三者完全一致才视为同源。当浏览器发起跨域请求（如前端域名https://web.example.com访问后端https://api.example.com）时，会受到以下限制：

• 默认禁止读取响应内容（如 JSON 数据）
• 默认禁止携带凭证（如 Cookie、HTTP 认证头）
• 需通过 CORS 响应头显式授权

1.2 withCredentials的特殊限制

当前端通过以下方式显式要求携带凭证时：

// Fetch API
fetch('https://api.example.com/data', { credentials: 'include' });

// XMLHttpRequest
xhr.withCredentials = true;

浏览器会对服务端响应头施加更严格的验证规则：

1. Access-Control-Allow-Origin禁止使用*
   必须返回具体的源（如https://web.example.com），否则浏览器将拦截响应，报错：
   The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

2. 必须返回Access-Control-Allow-Credentials: true
   显式告知浏览器允许携带凭证，否则凭证不会被发送。

3. 预检请求（OPTIONS）的特殊要求
   非简单请求（如 PUT/DELETE 方法、自定义请求头）需先发送 OPTIONS 请求验证权限，服务端必须正确响应以下头：

   Access-Control-Allow-Methods: POST, GET, OPTIONS
   Access-Control-Allow-Headers: Content-Type, Authorization
   

第二章 Koa2 核心解决方案：动态源与中间件配置

2.1 手动处理 CORS 响应头（无中间件）

通过 Koa 中间件手动解析请求源并动态设置响应头，适合轻量级项目或需要高度定制化的场景。

2.1.1 基础实现：白名单校验

const Koa = require('koa');
const app = new Koa();

// 允许的源白名单（生产环境建议从环境变量读取）
const ALLOWED_ORIGINS = new Set([
  'https://web.example.com',
  'https://admin.example.com:8080' // 包含端口的完整源
]);

app.use(async (ctx, next) => {
  const origin = ctx.get('Origin'); // 获取前端请求的源
  
  // 校验源是否合法
  if (ALLOWED_ORIGINS.has(origin)) {
    ctx.set('Access-Control-Allow-Origin', origin);
    ctx.set('Access-Control-Allow-Credentials', 'true'); // 必须设置为true
    ctx.set('Access-Control-Expose-Headers', 'Authorization, X-Total-Count'); // 允许前端读取的自定义头
  } else {
    // 不允许的源返回403或不设置Access-Control-Allow-Origin（浏览器自动拒绝）
    if (ctx.method === 'OPTIONS') {
      ctx.status = 403;
      return;
    }
  }

  // 处理预检请求
  if (ctx.method === 'OPTIONS') {
    ctx.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    ctx.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    ctx.set('Access-Control-Max-Age', '86400'); // 预检结果缓存24小时
    ctx.status = 204; // 成功响应预检请求
    return;
  }

  await next();
});

// 示例路由
app.use(async ctx => {
  if (ctx.path === '/api/data') {
    ctx.body = { data: 'Authenticated response' };
    ctx.set('Authorization', 'Bearer xxx'); // 配合Access-Control-Expose-Headers使用
  }
});

app.listen(3000);

2.1.2 进阶场景：通配符匹配（需谨慎）

允许同一域名下的所有子域名（如*.example.com），可通过正则表达式实现：

const ALLOWED_ORIGIN_REGEX = /^https?://(?:\w+.)?example.com$/;

app.use(async (ctx, next) => {
  const origin = ctx.get('Origin');
  if (origin && ALLOWED_ORIGIN_REGEX.test(origin)) {
    ctx.set('Access-Control-Allow-Origin', origin);
    ctx.set('Access-Control-Allow-Credentials', 'true');
  }
  // ...处理预检请求
});

警告：通配符匹配可能引入安全风险，仅建议在可控环境（如同一域名下的子系统）使用。

2.2 使用koa-cors中间件简化配置

koa-cors是 Koa 官方推荐的 CORS 中间件，支持动态源、凭证配置及预检请求处理，代码量可减少 50% 以上。

2.2.1 基础配置

const Koa = require('koa');
const cors = require('koa-cors');
const app = new Koa();

app.use(cors({
  origin: function(ctx) {
    // 动态返回允许的源，优先匹配白名单
    const allowed = ['https://web.example.com', 'https://admin.example.com'];
    const origin = ctx.get('Origin');
    if (allowed.includes(origin)) {
      return origin;
    }
    // 开发环境允许本地调试（需限制在开发阶段）
    if (process.env.NODE_ENV === 'development' && origin.includes('localhost')) {
      return origin;
    }
    return false; // 禁止的源返回false，浏览器会忽略该头
  },
  credentials: true, // 允许携带凭证
  maxAge: 86400, // 预检缓存时间
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  headers: ['Content-Type', 'Authorization', 'X-Custom-Header']
}));

app.listen(3000);

2.2.2 配置简写：环境变量驱动

app.use(cors({
  origin: ctx => ctx.get('Origin') || '*', // 生产环境需移除*，此处仅为示例
  credentials: true,
  // 从环境变量读取允许的方法和头
  methods: process.env.ALLOWED_METHODS.split(','),
  headers: process.env.ALLOWED_HEADERS.split(',')
}));

第三章 生产环境最佳实践：安全与性能优化

3.1 安全加固策略

3.1.1 严格限制允许的源

• 禁止使用* ：无论是否携带凭证，生产环境必须使用白名单

• 白名单来源：

  • 前端正式环境域名（如https://example.com）
  • 移动端 API 域名（如api.example.com）
  • 第三方合作平台域名（需提前审核）

3.1.2 防范 CSRF 攻击

• 启用SameSite Cookie 属性：

  ctx.cookies.set('sessionId', 'xxx', {
    sameSite: 'strict', // 严格模式，禁止跨站发送Cookie
    secure: true, // 仅通过HTTPS传输
    httpOnly: true // 禁止JS读取Cookie
  });
  

• 验证Referer头（配合 CORS 白名单）：

  app.use(async (ctx, next) => {
    const referer = ctx.get('Referer');
    if (referer && !ALLOWED_ORIGINS.has(new URL(referer).origin)) {
      ctx.throw(403, 'Invalid referer');
    }
    await next();
  });
  

3.1.3 限制请求方法与头

• 仅允许必要的 HTTP 方法（如GET/POST），禁止危险方法（如PUT/DELETE直接暴露在外网）

• 严格控制允许的请求头，避免开放*：

  // 错误示例（开放所有头，存在安全风险）
  ctx.set('Access-Control-Allow-Headers', '*');
  
  // 正确示例（仅允许必要头）
  ctx.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  

3.2 性能优化

3.2.1 预检请求缓存

通过Access-Control-Max-Age头设置预检结果缓存时间（单位：秒），避免重复 OPTIONS 请求：

ctx.set('Access-Control-Max-Age', '86400'); // 缓存24小时

3.2.2 静态资源与 API 分离

• 静态资源（JS/CSS/ 图片）通过 CDN 分发，设置Access-Control-Allow-Origin: *（无需凭证）
• API 接口单独部署，严格限制允许的源并启用凭证校验

第四章 典型场景解决方案

4.1 前后端分离开发（本地调试）

前端环境：

• 开发服务器地址：http://localhost:8080
• 后端 API 地址：http://localhost:3000

Koa2 配置：

const ALLOWED_ORIGINS = new Set([
  'http://localhost:8080', // 前端开发地址
  'http://127.0.0.1:8080' // 兼容不同本地IP访问
]);

// 开发环境允许动态添加源（仅用于调试）
if (process.env.NODE_ENV === 'development') {
  ALLOWED_ORIGINS.add(ctx.get('Origin')); // 临时信任首次请求的源
}

前端请求：

fetch('http://localhost:3000/api/data', {
  credentials: 'include', // 携带本地Cookie（如登录态）
});

4.2 多前端应用共享 API（如 Web+App + 小程序）

允许的源列表：

const ALLOWED_ORIGINS = new Set([
  'https://web.example.com', // Web端
  'https://app.example.com', // 移动端App
  'https://miniprogram.example.com' // 小程序
]);

差异化配置：

app.use(async (ctx, next) => {
  const origin = ctx.get('Origin');
  if (ALLOWED_ORIGINS.has(origin)) {
    ctx.set('Access-Control-Allow-Origin', origin);
    
    // 根据不同源返回不同响应头
    if (origin.includes('miniprogram')) {
      ctx.set('Access-Control-Allow-Headers', 'Content-Type'); // 小程序仅需基础头
    } else {
      ctx.set('Access-Control-Allow-Headers', 'Content-Type, Authorization'); // Web端需要认证头
    }
  }
  await next();
});

4.3 第三方应用授权访问（需严格审核）

场景：

允许经过认证的第三方应用（如partner.example.com）访问 API，但需限制 IP 来源。

实现方案：

app.use(async (ctx, next) => {
  const origin = ctx.get('Origin');
  const clientIp = ctx.ip; // 获取客户端IP
  
  // 校验源与IP绑定关系
  if (origin === 'https://partner.example.com' && clientIp === '192.168.1.100') {
    ctx.set('Access-Control-Allow-Origin', origin);
    ctx.set('Access-Control-Allow-Credentials', 'true');
  }
  await next();
});

第五章 常见问题与排错指南

5.1 浏览器报错：Access-Control-Allow-Origin缺失

可能原因：

1. 服务端未返回Access-Control-Allow-Origin头
2. 源校验失败，服务端未设置任何允许的源

解决方案：

• 通过浏览器开发者工具（F12）查看响应头，确认是否存在该头
• 检查白名单是否包含当前请求的源（包括端口）

5.2 凭证未携带（Cookie 未发送到服务端）

可能原因：

1. Access-Control-Allow-Credentials未设置为true
2. 服务端返回的Access-Control-Allow-Origin与请求的源不一致（如缺少端口）

解决方案：

// 确保同时设置两者
ctx.set('Access-Control-Allow-Origin', 'https://web.example.com:8080');
ctx.set('Access-Control-Allow-Credentials', 'true');

5.3 预检请求（OPTIONS）失败

可能原因：

1. 未处理 OPTIONS 请求，返回 404 或其他错误状态码
2. Access-Control-Allow-Methods未包含实际请求的方法（如 POST 请求但仅允许 GET）

解决方案：

// 手动处理OPTIONS请求
app.use(async (ctx, next) => {
  if (ctx.method === 'OPTIONS') {
    ctx.status = 204;
    ctx.set('Access-Control-Allow-Methods', 'GET, POST'); // 包含实际使用的方法
    return;
  }
  await next();
});

第六章 完整项目示例：Koa2 + Vue3 跨域实战

6.1 项目结构

koa2-api/
├── src/
│   ├── app.js               # Koa主文件
│   ├── middleware/
│   │   └── cors.js          # CORS中间件
│   └── routes/
│       └── api.js           # API路由
├── package.json
└── config/
    └── cors.js              # CORS配置文件

6.2 配置文件（config/cors.js）

module.exports = {
  allowedOrigins: new Set([
    'https://vue.example.com', // Vue生产环境
    'http://localhost:8080'    // Vue开发环境
  ]),
  credentials: true,
  maxAge: 86400
};

6.3 CORS 中间件（middleware/cors.js）

const { allowedOrigins, credentials, maxAge } = require('../config/cors');

module.exports = async (ctx, next) => {
  const origin = ctx.get('Origin');
  if (allowedOrigins.has(origin)) {
    ctx.set('Access-Control-Allow-Origin', origin);
    ctx.set('Access-Control-Allow-Credentials', String(credentials));
    ctx.set('Access-Control-Max-Age', String(maxAge));
  }

  if (ctx.method === 'OPTIONS') {
    ctx.set('Access-Control-Allow-Methods', 'GET, POST');
    ctx.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    ctx.status = 204;
    return;
  }

  await next();
};

6.4 主文件（src/app.js）

const Koa = require('koa');
const cors = require('./middleware/cors');
const apiRouter = require('./routes/api');

const app = new Koa();

app.use(cors);
app.use(apiRouter.routes());

app.listen(3000, () => {
  console.log('Koa2 API server running on port 3000');
});

6.5 前端（Vue3）请求示例

<template>
  <button @click="fetchData">获取数据</button>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const data = ref('');

const fetchData = async () => {
  try {
    const response = await axios.get('https://api.example.com/api/data', {
      withCredentials: true, // 携带Cookie
      headers: {
        Authorization: `Bearer ${localStorage.getItem('token')}`
      }
    });
    data.value = response.data;
  } catch (error) {
    console.error('跨域请求失败:', error);
  }
};
</script>

第七章 未来趋势：跨域方案的演进

7.1 HTTP2 与跨域优化

HTTP2 的多路复用特性可减少跨域请求的性能损耗，配合Alt-Svc头实现域名切换：

Alt-Svc: h2=":443"; ma=2592000

7.2 边缘计算与 CORS 卸载

通过 CDN 边缘节点处理 CORS 头，减轻源站压力：

# 示例Nginx配置
location /api/ {
  proxy_pass http://koa-server;
  add_header Access-Control-Allow-Origin $http_origin;
  add_header Access-Control-Allow-Credentials true;
}

7.3 同站策略（SameSite）替代跨域

通过调整 Cookie 的SameSite属性，将跨域请求转为同站请求（需前后端共享域名）：

// 后端设置
ctx.cookies.set('sessionId', 'xxx', {
  sameSite: 'lax', // 允许跨站GET请求携带Cookie
  domain: '.example.com' // 共享同一域名
});

结语

在withCredentials场景下，Koa2 通过动态源校验、中间件封装及安全策略配置，可有效解决跨域凭证携带问题。核心原则是：严格限制允许的源，避免滥用通配符，始终遵循最小权限原则。通过结合环境变量、配置文件及安全加固措施，既能满足开发效率需求，又能保障生产环境的安全性。未来随着浏览器策略的升级，建议持续关注 CORS 规范的演进，采用更高效的同站策略或边缘计算方案优化跨域体验。

在 React 开发中，闭包陷阱是一个常见且令人头疼的问题。当我们在 useEffect、useCallback、setTimeout、setInterval 或其他异步回调中使用 state 或 props 时，这些函数会捕获其定义时作用域内的变量值。如果这些值后续发生了变化，而闭包本身没有被重新创建（例如，useEffect 的依赖项数组不正确或为空），那么回调函数内部引用的依然是陈旧的数据，导致各种难以预料的 Bug。

函数式编程思想，尤其是纯函数的概念，为我们提供了优雅的解决方案来应对这些挑战。本文将重点介绍两种广泛应用且充分体现纯函数优势的方法：函数式更新和 useReducer。

闭包陷阱的核心问题

简单来说，当一个函数（回调函数）在另一个函数（例如组件函数或 useEffect 的 setup 函数）内部定义时，它会“记住”其外部作用域的变量。如果外部变量更新了，但这个回调函数没有重新创建以捕获新的值，它就会继续使用旧的值。

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 假设这个 effect 只在组件挂载时运行一次
    const intervalId = setInterval(() => {
      // 问题：这里的 count 是 effect 创建时捕获的初始值 0
      // 即使外部 count 已经通过 setCount 更新，这里仍然是 0
      console.log('Stale count:', count);
      // setCount(count + 1); // 这样做会导致 count 永远是 1
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // 空依赖数组，effect 只运行一次

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

1. 函数式更新 (Functional Updates)

React 的 setState 函数（来自 useState Hook）提供了一种强大的机制来避免闭包陷阱：函数式更新。你可以传递一个函数给 setState，这个函数的参数是当前最新的状态值，返回值是新的状态。

原理与纯函数特性

当你使用 setCount(prevCount => prevCount + 1) 时：

1. React 会确保传递给你的回调函数 (prevCount => ...) 的 prevCount 参数始终是最新的状态值，无论这个 setCount 调用是在哪个闭包中。
2. 你传递给 setState 的回调函数 prevState => newState 本身就是一个纯函数。它接收当前状态，计算并返回新状态，不依赖外部变量，也没有副作用。

代码示例

import React, { useState, useEffect } from 'react';

function IntervalCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      // 正确：使用函数式更新
      // prevCount 总是最新的 count 值
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // 清理函数
    return () => clearInterval(intervalId);
  }, []); // 依赖数组为空，setInterval 只设置一次，但 setCount 依然能获取最新状态

  return <h1>Count: {count}</h1>;
}

export default IntervalCounter;

常用场景

• setInterval / setTimeout 回调：如上例，当需要在定时器回调中基于前一个状态更新状态时，函数式更新是首选，因为你不需要将 state 加入 useEffect 的依赖数组，避免了不必要的定时器重置。
• 异步操作回调：在 fetch 或其他异步操作的 then 或 catch 回调中更新状态，如果该回调是在 useEffect 中定义且不希望因 state 变化而重新触发 useEffect。

  useEffect(() => {
    fetchData().then(newData => {
      setData(prevData => ({ ...prevData, ...newData }));
    });
  }, []); // 假设 fetchData 和 setData 引用稳定
  

• 复杂的事件处理器：当事件处理器需要在多次触发后累积或修改状态，而事件处理器本身通过 useCallback 缓存且不希望因依赖的状态变化而频繁重建。

  const handleScroll = useCallback(() => {
    // ... 一些计算
    setScrollPositions(prevPositions => [...prevPositions, window.scrollY]);
  }, []); // 如果 setScrollPositions 不依赖其他 state/props
  

• 任何你希望在回调中安全地更新状态，而不必担心闭包捕获了旧状态的场景。

2. 使用 useReducer 管理复杂状态

对于更复杂的状态逻辑，或者当下一个状态依赖于前一个状态并且涉及到多个子值时，useReducer 是一个更强大的选择。

原理与纯函数特性

const [state, dispatch] = useReducer(reducer, initialState);

1. Reducer 函数的纯粹性：reducer(currentState, action) 函数本身被设计为纯函数。它接收当前状态和描述操作的 action 对象，然后返回一个新的状态对象。它不修改原状态，也没有副作用。
2. dispatch 函数的稳定性：React 保证 dispatch 函数的引用在组件的整个生命周期内是稳定的。这意味着你可以安全地将其传递给子组件或在 useEffect、useCallback 的回调中使用，而无需将其添加到依赖数组中（ESLint 插件通常会自动处理或允许忽略）。

代码示例

import React, { useReducer, useEffect } from 'react';

// 初始状态
const initialState = {
  count: 0,
  step: 1,
  lastAction: null,
};

// Reducer 纯函数
function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + state.step, lastAction: 'increment' };
    case 'decrement':
      return { ...state, count: state.count - state.step, lastAction: 'decrement' };
    case 'setStep':
      return { ...state, step: action.payload, lastAction: 'setStep' };
    case 'reset':
      return { ...initialState, lastAction: 'reset' }; // 重置到初始状态
    default:
      throw new Error(`Unknown action: ${action.type}`);
  }
}

function ComplexCounter() {
  const [state, dispatch] = useReducer(counterReducer, initialState);

  useEffect(() => {
    // 示例：一个异步操作，完成后需要更新计数
    const simulateAsyncIncrement = () => {
      setTimeout(() => {
        // dispatch 是稳定的，可以直接在回调中使用
        // reducer 函数会接收到最新的 state
        dispatch({ type: 'increment' });
        console.log('Dispatched increment from timeout.');
      }, 1500);
    };

    if (state.count < 5 && state.lastAction !== 'increment') { // 仅在特定条件下触发
        simulateAsyncIncrement();
    }

    // 注意：如果 useEffect 逻辑依赖 state 中的某些值，
    // 应该将这些值加入依赖数组，以确保逻辑在它们变化时重新运行。
    // 这里为了演示 dispatch 的稳定性，假设异步操作的触发条件不频繁改变。
  }, [state.count, state.lastAction]); // 依赖 state 中的值

  return (
    <div>
      <p>Count: {state.count} (Step: {state.step})</p>
      <p>Last Action: {state.lastAction || 'None'}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      <button onClick={() => dispatch({ type: 'setStep', payload: state.step + 1 })}>Increase Step</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
}

export default ComplexCounter;

常用场景

• 复杂的状态对象：当你的组件状态是一个包含多个字段的对象，并且这些字段之间可能存在依赖关系或需要一起更新时。
• 状态转换逻辑复杂：当状态的下一个值不仅仅是前一个值的简单修改，而是需要根据不同的“动作”（action）类型执行不同的计算逻辑。
• 多个事件处理器更新同一状态：如果多个用户交互（如按钮点击、表单提交等）都会以不同方式影响同一块状态数据。
• 状态逻辑需要跨组件共享或易于测试：Reducer 函数是纯函数，易于独立测试。结合 Context API，useReducer 可以用于管理全局或局部共享的状态。
• 优化性能：由于 dispatch 函数引用稳定，传递给子组件时不会导致不必要的重渲染（如果子组件用了 React.memo）。

其他重要的辅助策略

虽然函数式更新和 useReducer 是解决闭包问题的核心函数式方法，但以下策略同样重要：

1. 正确使用React Hooks的依赖数组 (useEffect, useCallback, useMemo)： 这是React官方推荐的确保闭包捕获最新值的方式。务必将回调函数内部引用的所有会随时间变化的 props 或 state 都列入依赖数组。ESLint 插件 eslint-plugin-react-hooks 对此有很大帮助。

2. 使用 useRef 存储可变值 (作为“逃生舱口”)： 在某些情况下，你可能确实需要一个在多次渲染之间保持不变的引用，并且其 .current 属性可以被修改而不会触发重新渲染。你可以用它来存储那些你想在回调中访问的最新值，而又不想让回调本身因为这些值的变化而重新创建（例如，避免频繁添加/移除事件监听器，但监听器内部需要最新状态）。

   const latestCountRef = useRef(count);
   useEffect(() => {
     latestCountRef.current = count; // 每次 count 变化时更新 ref
   });
   
   const handleClick = useCallback(() => {
     setTimeout(() => {
       console.log('Latest count via ref:', latestCountRef.current);
     }, 1000);
   }, []); // handleClick 只创建一次
   

   注意：修改 ref.current 不会触发组件重新渲染。

总结

通过拥抱函数式编程思想，特别是利用纯函数（如函数式更新的回调和 Reducer 函数）以及 React Hooks 提供的机制，我们可以有效地避免和解决闭包陷阱带来的问题。函数式更新和 useReducer 不仅使状态管理更加清晰、可预测，还因为其对纯粹性和不变性的强调，使得代码更易于理解、测试和维护。

在实际开发中，根据状态的复杂度和更新逻辑的特性，灵活选择最适合的策略，是编写高质量 React 应用的关键。

目录

获取DOM节点

通过ID查找节点

通过标签名查找节点

通过类名查找节点

通过CSS选择器查找单个节点

通过CSS选择器查找所有节点

通过关系获取节点

获取下一个兄弟节点

获取上一个兄弟节点

获取所有子节点（元素节点）

获取父级节点

创建、删除、替换和克隆节点

创建节点

删除节点（自删除）

删除子节点

替换节点

克隆节点

操作节点属性

设置属性

获取属性

删除属性

类名操作

直接设置类名（会覆盖原有的类名）

使用classList操作类名

向标签内部写入内容

写入文本

事件处理

基本事件

阻止事件冒泡

阻止默认行为

输入框事件

键盘事件

绑定事件（不推荐，因为无法绑定多个事件处理器）

事件监听（推荐方式）

移除事件监听

---

获取DOM节点

1. 通过ID查找节点

   let element = document.getElementById('elementId');
   

   

2. 通过标签名查找节点

   let elements = document.getElementsByTagName('tagName'); // 返回HTMLCollection
   

   

3. 通过类名查找节点

   let elements = document.getElementsByClassName('className'); 
   // 返回HTMLCollection
   

   

4. 通过CSS选择器查找单个节点

   let element = document.querySelector('.className #elementId'); 
   // 返回第一个匹配的元素
   

   

5. 通过CSS选择器查找所有节点

   let elements = document.querySelectorAll('.className, #elementId'); 
   // 返回NodeList
   

   

通过关系获取节点

1. 获取下一个兄弟节点

   let nextSibling = element.nextElementSibling;
   

   

2. 获取上一个兄弟节点

   let prevSibling = element.previousElementSibling;
   

   

3. 获取所有子节点（元素节点）

   let children = element.children; // 返回HTMLCollection，只包含元素节点
   

   

4. 获取父级节点

   let parent = element.parentNode; 
   //如果需要父元素节点，可以使用element.parentElement
   

   

创建、删除、替换和克隆节点

1. 创建节点

   let newElement = document.createElement('tagName');
   

   

2. 删除节点（自删除）

   element.remove();
   

   

3. 删除子节点

   parentElement.removeChild(childNode);
   

   

4. 替换节点

   parentElement.replaceChild(newNode, oldNode);
   

   

5. 克隆节点

   let clonedNode = originalNode.cloneNode(true); 
   // true表示深拷贝，false表示浅拷贝
   

   

操作节点属性

1. 设置属性

   element.setAttribute('attributeName', 'value');
   

   

2. 获取属性

   let value = element.getAttribute('attributeName');
   

   

3. 删除属性

   element.removeAttribute('attributeName');
   

   

类名操作

1. 直接设置类名（会覆盖原有的类名）

   element.className = 'newClassName';
   

   

2. 使用classList操作类名

   element.classList.add('className'); // 添加
   element.classList.remove('className'); // 删除
   element.classList.toggle('className'); // 切换
   let hasClass = element.classList.contains('className'); // 判断是否存在
   

   

向标签内部写入内容

1. 写入文本

   element.innerText = 'text'; // 不会解析HTML
   element.textContent = 'text'; // 与innerText类似，但兼容性更好
   

   

2. 写入文本或标签

   element.innerHTML = '<p>HTML content</p>'; // 会解析HTML
   

   

事件处理

1. 基本事件

   element.onclick = function() { /* code */ };
   element.onmouseenter = function() { /* code */ };
   element.onmouseleave = function() { /* code */ };
   element.onmousemove = function() { /* code */ };
   

   

2. 阻止事件冒泡

   event.stopPropagation();
   

   

3. 阻止默认行为

   event.preventDefault();
   

   

4. 输入框事件

   inputElement.onblur = function() { /* code when element loses focus */ };
   inputElement.onfocus = function() { /* code when element gains focus */ };
   inputElement.oninput = function() { /* code when input value changes */ };
   inputElement.onchange = function() { 
   /* code when input value is committed (e.g., after losing focus and value has changed) */ 
   };
   

   

5. 键盘事件

   element.onkeydown = function(event) { 
   /* code; event.keyCode is deprecated, use event.key or event.code */ 
   };
   element.onkeyup = function(event) { /* code */ };
   

   

6. 绑定事件（不推荐，因为无法绑定多个事件处理器）

   element.onclick = function() { /* code */ };
   

   

7. 事件监听（推荐方式）

   element.addEventListener('click', function(event) { /* code */ });
   element.addEventListener('mouseenter', function(event) { /* code */ }, false); 
   // 第三个参数为捕获阶段（可选，默认为false，即冒泡阶段）
   

   

8. 移除事件监听

   element.removeEventListener('click', functionReference); 
   // 必须传递与添加时相同的函数引用
   

   

注意：event.keyCode 在现代浏览器中已被弃用，建议使用 event.key 或 event.code 来获取键盘事件的键值。同时，当使用 addEventListener 和 removeEventListener 时，传递给 removeEventListener 的函数必须与传递给 addEventListener 的函数完全相同（通常是同一个函数引用）。如果传递的是匿名函数，则无法正确移除事件监听器。

目录

一、交互组件类

轮播图实现

Tab切换功能

模态框 (Modal)

下拉菜单

手风琴效果

自定义右键菜单

二、表单处理类

表单验证增强

密码强度检测（输入安全相关）

三、数据存储类

本地存储记忆功能（localStorage/cookie操作）

四、动态内容处理

实时搜索过滤

动态加载更多内容

随机名言生成器

五、实用工具类

网页计时器/倒计时

复制到剪贴板

简易画板功能（图形交互工具）

六、用户体验优化

回到顶部按钮

图片懒加载（性能优化）

  原生js图片放大镜效果

暗黑模式切换

网页主题色切换

七、视觉效果类

点击切换图片（基础视觉交互）

滚动动画触发

视差滚动效果

---

除了以下功能，还想要什么功能可写评论，作者大大看到就会回复哦

一、交互组件类

轮播图实现

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="carousel">
        ![404](images/image1.jpg)
        ![457](images/image2.jpg)
        ![495](images/image3.jpg)
        <!-- 可以继续添加更多图片 -->
        <div class="controls">
            <button id="prev">Prev</button>
            <button id="next">Next</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

styles.css

.carousel {
    position: relative;
    width: 600px;
    height: 400px;
    overflow: hidden;
    margin: 0 auto;
    border: 2px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.carousel img {
    width: 100%;
    height: 100%;
    display: none;
    transition: opacity 0.5s ease;
}

.carousel img.active {
    display: block;
    opacity: 1;
}

.controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.controls button {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.controls button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

script.js

document.addEventListener('DOMContentLoaded', () => {
    let currentIndex = 0;
    const images = document.querySelectorAll('.carousel img');
    const prevButton = document.getElementById('prev');
    const nextButton = document.getElementById('next');

    function showImage(index) {
        images.forEach((img, i) => {
            img.classList.toggle('active', i === index);
        });
    }

    function showNextImage() {
        currentIndex = (currentIndex + 1) % images.length;
        showImage(currentIndex);
    }

    function showPrevImage() {
        currentIndex = (currentIndex - 1 + images.length) % images.length;
        showImage(currentIndex);
    }

    nextButton.addEventListener('click', showNextImage);
    prevButton.addEventListener('click', showPrevImage);

    // 自动播放功能（可选）
    setInterval(showNextImage, 3000); // 每3秒切换一次图片

    // 添加淡入淡出效果
    images.forEach(img => {
        img.addEventListener('transitionend', () => {
            if (!img.classList.contains('active')) {
                img.style.opacity = 0;
            }
        });
    });

    // 初始化时设置非活动图片的透明度
    images.forEach((img, i) => {
        if (i !== currentIndex) {
            img.style.opacity = 0;
        }
    });
});

Tab切换功能

 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab Switch</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="tabs">
        <button class="tab-button" data-tab="1">Tab 1</button>
        <button class="tab-button" data-tab="2">Tab 2</button>
        <button class="tab-button" data-tab="3">Tab 3</button>
    </div>
    <div class="tab-content">
        <div class="tab-pane" id="tab-1">Content for Tab 1</div>
        <div class="tab-pane" id="tab-2">Content for Tab 2</div>
        <div class="tab-pane" id="tab-3">Content for Tab 3</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

css

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

.tabs {
    display: flex;
    margin-bottom: 20px;
}

.tab-button {
    padding: 10px 20px;
    margin-right: 5px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
}

.tab-button:hover {
    background-color: #e0e0e0;
}

.tab-pane {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.tab-pane.active {
    display: block;
}

js

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabPanes = document.querySelectorAll('.tab-pane');

    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            tabButtons.forEach(b => b.classList.remove('active'));
            tabPanes.forEach(p => p.classList.remove('active'));

            const tabId = this.getAttribute('data-tab');
            this.classList.add('active');
            document.getElementById(`tab-${tabId}`).classList.add('active');
        });
    });

    if (tabButtons.length > 0) {
        tabButtons[0].click();
    }
});

模态框 (Modal)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模态框示例</title>
  <style>
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
    }
    .modal-content {
      position: relative;
      margin: 10% auto;
      padding: 20px;
      width: 80%;
      max-width: 500px;
      background-color: white;
      border-radius: 5px;
    }
    .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 24px;
      cursor: pointer;
    }
    .open-modal {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="open-modal">打开模态框</button>
  <div id="modal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <h2>模态框标题</h2>
      <p>这是一个模态框内容。</p>
    </div>
  </div>
  <script>
    const modal = document.getElementById('modal');
    const openBtn = document.querySelector('.open-modal');
    const closeBtn = document.querySelector('.close');

    openBtn.onclick = () => {
      modal.style.display = 'block';
    };

    closeBtn.onclick = () => {
      modal.style.display = 'none';
    };

    window.onclick = (e) => {
      if (e.target === modal) {
        modal.style.display = 'none';
      }
    };
  </script>
</body>
</html>

下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>下拉菜单示例</title>
  <style>
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: white;
      min-width: 160px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    .dropdown-content.show {
      display: block;
    }
    .dropdown-btn {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="dropdown">
    <button class="dropdown-btn">下拉菜单</button>
    <div class="dropdown-content">
      <a href="#">链接 1</a>
      <a href="#">链接 2</a>
      <a href="#">链接 3</a>
    </div>
  </div>
  <script>
    const dropdown = document.querySelector('.dropdown');
    const dropdownContent = document.querySelector('.dropdown-content');

    dropdown.addEventListener('mouseover', () => {
      dropdownContent.classList.add('show');
    });

    dropdown.addEventListener('mouseout', () => {
      dropdownContent.classList.remove('show');
    });
  </script>
</body>
</html>

手风琴效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手风琴效果示例</title>
  <style>
    .accordion {
      margin: 20px 0;
    }
    .accordion-header {
      padding: 10px;
      background-color: #f1f1f1;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
    }
    .accordion-content {
      padding: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }
    .accordion-content.active {
      padding: 10px;
      max-height: 200px;
    }
    .arrow {
      transition: transform 0.3s ease;
    }
    .arrow.rotate {
      transform: rotate(180deg);
    }
  </style>
</head>
<body>
  <div class="accordion">
    <div class="accordion-header">
      <span>标题 1</span>
      <span class="arrow">▼</span>
    </div>
    <div class="accordion-content">
      <p>这是手风琴内容 1。</p>
    </div>
  </div>
  <div class="accordion">
    <div class="accordion-header">
      <span>标题 2</span>
      <span class="arrow">▼</span>
    </div>
    <div class="accordion-content">
      <p>这是手风琴内容 2。</p>
    </div>
  </div>
  <script>
    document.querySelectorAll('.accordion-header').forEach(header => {
      header.addEventListener('click', () => {
        const content = header.nextElementSibling;
        content.classList.toggle('active');
        header.querySelector('.arrow').classList.toggle('rotate');
      });
    });
  </script>
</body>
</html>

自定义右键菜单

        自定义右键菜单需要阻止默认的右键菜单，显示自定义的菜单，并根据点击位置定位。同时，点击页面其他位置时要隐藏菜单。这里可能需要动态创建菜单元素，并处理事件冒泡。

<div id="customMenu" style="display:none; position:absolute; background:#fff; box-shadow:0 0 5px #999">
  <div class="menu-item">复制</div>
  <div class="menu-item">粘贴</div>
  <div class="menu-item">刷新</div>
</div>

<script>
document.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  const menu = document.getElementById('customMenu');
  menu.style.display = 'block';
  menu.style.left = e.pageX + 'px';
  menu.style.top = e.pageY + 'px';
});

document.addEventListener('click', () => {
  document.getElementById('customMenu').style.display = 'none';
});
</script>

---

二、表单处理类

表单验证增强

<form id="myForm">
  <input type="email" id="email" placeholder="邮箱">
  <div class="error" id="emailError"></div>
  
  <input type="password" id="password" placeholder="密码(6-12位)">
  <div class="error" id="pwdError"></div>

  <button type="submit">提交</button>
</form>

<script>
const form = document.getElementById('myForm');

// 实时验证
document.getElementById('email').addEventListener('input', (e) => {
  const email = e.target.value;
  const regex = /^[^\s@]+@[^\s@]+.[^\s@]+$/;
  document.getElementById('emailError').textContent = 
    regex.test(email) ? '' : '邮箱格式不正确';
});

// 提交验证
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const pwd = document.getElementById('password').value;
  
  if(pwd.length < 6 || pwd.length > 12) {
    document.getElementById('pwdError').textContent = '密码长度需6-12位';
    return;
  }
  
  // 验证通过后提交
  form.submit();
});
</script>

密码强度检测（输入安全相关）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>密码强度检测示例</title>
  <style>
    #password {
      width: 100%;
      padding: 10px;
      margin-bottom: 20px;
    }
    #strengthMeter {
      width: 100%;
      height: 10px;
      background-color: #ddd;
      border-radius: 5px;
      margin-bottom: 10px;
    }
    #strengthMeterFill {
      height: 100%;
      width: 0;
      border-radius: 5px;
      transition: width 0.3s, background-color 0.3s;
    }
    #strengthText {
      font-size: 14px;
      color: #666;
    }
  </style>
</head>
<body>
  <input type="password" id="password" placeholder="输入密码">
  <div id="strengthMeter">
    <div id="strengthMeterFill"></div>
  </div>
  <div id="strengthText"></div>
  <script>
    document.getElementById('password').addEventListener('input', (e) => {
      const password = e.target.value;
      const meterFill = document.getElementById('strengthMeterFill');
      const strengthText = document.getElementById('strengthText');
      const strength = calculateStrength(password);
      meterFill.style.width = strength + '%';
      meterFill.style.backgroundColor = getStrengthColor(strength);
      strengthText.textContent = getStrengthText(strength);
    });

    function calculateStrength(password) {
      let strength = 0;
      if (password.length >= 8) strength += 25;
      if (/[A-Z]/.test(password)) strength += 25;
      if (/[a-z]/.test(password)) strength += 25;
      if (/[0-9]/.test(password)) strength += 25;
      return strength;
    }

    function getStrengthColor(strength) {
      if (strength < 25) return '#ff0000';
      if (strength < 50) return '#ffaa00';
      if (strength < 75) return '#ffdd00';
      return '#4CAF50';
    }

    function getStrengthText(strength) {
      if (strength < 25) return '弱';
      if (strength < 50) return '一般';
      if (strength < 75) return '强';
      return '非常强';
    }
  </script>
</body>
</html>

---

三、数据存储类

本地存储记忆功能（localStorage/cookie操作）

        本地存储记忆功能。这需要利用localStorage来保存用户的数据，比如表单输入或主题设置。在页面加载时读取存储的数据，并在数据变化时更新存储。例如，记住用户的搜索历史或表单填写内容。

// 保存数据
const saveData = () => {
  const data = {
    username: document.getElementById('name').value,
    theme: document.body.classList.contains('dark') ? 'dark' : 'light'
  };
  localStorage.setItem('userPrefs', JSON.stringify(data));
};

// 读取数据
window.addEventListener('load', () => {
  const saved = JSON.parse(localStorage.getItem('userPrefs'));
  if(saved) {
    document.getElementById('name').value = saved.username;
    if(saved.theme === 'dark') document.body.classList.add('dark');
  }
});

// 输入时自动保存
document.getElementById('name').addEventListener('input', saveData);

---

四、动态内容处理

实时搜索过滤

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实时搜索过滤示例</title>
  <style>
    #searchInput {
      width: 100%;
      padding: 10px;
      margin-bottom: 20px;
    }
    .item {
      padding: 10px;
      margin-bottom: 5px;
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <input type="text" id="searchInput" placeholder="搜索...">
  <div class="item">项目 1</div>
  <div class="item">项目 2</div>
  <div class="item">项目 3</div>
  <div class="item">项目 4</div>
  <div class="item">项目 5</div>
  <script>
    document.getElementById('searchInput').addEventListener('input', (e) => {
      const searchTerm = e.target.value.toLowerCase();
      document.querySelectorAll('.item').forEach(item => {
        const text = item.textContent.toLowerCase();
        item.style.display = text.includes(searchTerm) ? 'block' : 'none';
      });
    });
  </script>
</body>
</html>

动态加载更多内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态加载更多内容示例</title>
  <style>
    #loadMore {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .item {
      padding: 10px;
      margin-bottom: 5px;
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <div id="content">
    <div class="item">项目 1</div>
    <div class="item">项目 2</div>
    <div class="item">项目 3</div>
  </div>
  <button id="loadMore">加载更多</button>
  <script>
    let currentPage = 1;
    const loadMoreBtn = document.getElementById('loadMore');

    loadMoreBtn.addEventListener('click', () => {
      currentPage++;
      // 模拟数据加载
      setTimeout(() => {
        const data = [`项目 ${currentPage * 3 - 2}`, `项目 ${currentPage * 3 - 1}`, `项目 ${currentPage * 3}`];
        renderItems(data);
      }, 1000);
    });

    function renderItems(data) {
      const content = document.getElementById('content');
      data.forEach(item => {
        const div = document.createElement('div');
        div.className = 'item';
        div.textContent = item;
        content.appendChild(div);
      });
    }
  </script>
</body>
</html>

随机名言生成器

        随机名言生成器需要预定义名言数组，随机选择一条显示，并可能通过按钮点击切换。如果用户需要，可以扩展为从API获取数据，但当前需求是纯JS，所以先使用本地数据。

<div id="quoteDisplay"></div>
<button onclick="newQuote()">新语录</button>

<script>
const quotes = [
  "代码写得好，头发掉得少",
  "Ctrl+C/V 是程序员最高礼仪",
  "程序不工作？试试console.log()",
  "永远相信：下一个版本会更好"
];

function newQuote() {
  const randomIndex = Math.floor(Math.random() * quotes.length);
  document.getElementById('quoteDisplay').textContent = quotes[randomIndex];
}

// 初始化
newQuote();
</script>

---

五、实用工具类

网页计时器/倒计时

        网页计时器/倒计时需要用到setInterval来更新时间显示，处理开始、暂停和重置功能。需要注意时间的格式化，如补零显示，并在倒计时结束时触发事件。

<div id="timer">00:00:00</div>
<button onclick="startTimer()">开始</button>
<button onclick="pauseTimer()">暂停</button>

<script>
let seconds = 0;
let timerId;

function formatTime(sec) {
  const h = Math.floor(sec/3600).toString().padStart(2,'0');
  const m = Math.floor(sec%3600/60).toString().padStart(2,'0');
  const s = (sec%60).toString().padStart(2,'0');
  return `${h}:${m}:${s}`;
}

function startTimer() {
  if(!timerId) {
    timerId = setInterval(() => {
      seconds++;
      document.getElementById('timer').textContent = formatTime(seconds);
    }, 1000);
  }
}

function pauseTimer() {
  clearInterval(timerId);
  timerId = null;
}
</script>

复制到剪贴板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>复制到剪贴板示例</title>
  <style>
    #copyText {
      width: 100%;
      padding: 10px;
      margin-bottom: 20px;
      background-color: #f1f1f1;
    }
    #copyBtn {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="copyText">这是要复制的文本</div>
  <button id="copyBtn">复制到剪贴板</button>
  <script>
    document.getElementById('copyBtn').addEventListener('click', () => {
      const text = document.getElementById('copyText').innerText;
      navigator.clipboard.writeText(text)
        .then(() => {
          alert('已复制!');
        })
        .catch(err => {
          console.error('复制失败:', err);
          // 降级方案
          const textarea = document.createElement('textarea');
          textarea.value = text;
          document.body.appendChild(textarea);
          textarea.select();
          document.execCommand('copy');
          document.body.removeChild(textarea);
          alert('已复制!');
        });
    });
  </script>
</body>
</html>

简易画板功能（图形交互工具）

        简易画板功能需要处理canvas的鼠标事件，跟踪鼠标位置来绘制路径。可能需要设置画笔属性，如颜色和粗细，并实现清除画布的功能。

<canvas id="myCanvas" width="500" height="300"></canvas>
<button onclick="clearCanvas()">清空</button>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);

function startDrawing(e) {
  isDrawing = true;
  ctx.beginPath();
  ctx.moveTo(e.offsetX, e.offsetY);
}

function draw(e) {
  if(!isDrawing) return;
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
}

function stopDrawing() {
  isDrawing = false;
}

function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}
</script>

---

六、用户体验优化

回到顶部按钮

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>回到顶部按钮示例</title>
  <style>
    body {
      height: 2000px;
    }
    #topBtn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: none;
      width: 50px;
      height: 50px;
      background-color: #4CAF50;
      color: white;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div style="height: 1500px; background-color: #f1f1f1;"></div>
  <button id="topBtn">↑</button>
  <script>
    window.onscroll = () => {
      document.getElementById('topBtn').style.display = 
        (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) ? 'block' : 'none';
    };

    document.getElementById('topBtn').onclick = () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    };

    window.onload = () => {
      document.getElementById('topBtn').style.display = 'none';
    };
  </script>
</body>
</html>

图片懒加载（性能优化）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片懒加载示例</title>
  <style>
    .lazyload {
      width: 100%;
      height: 200px;
      background-color: #f1f1f1;
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <img data-src="https://via.placeholder.com/800x200" class="lazyload" alt="Lazy-loaded image">
  <img data-src="https://via.placeholder.com/800x200" class="lazyload" alt="Lazy-loaded image">
  <img data-src="https://via.placeholder.com/800x200" class="lazyload" alt="Lazy-loaded image">
  <div style="height: 1000px;"></div>
  <script>
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    });

    document.querySelectorAll('.lazyload').forEach(img => observer.observe(img));
  </script>
</body>
</html>

原生js图片放大镜效果

        图片放大镜效果比较复杂。需要监听鼠标移动事件，计算放大区域的位置和比例，使用canvas来绘制放大后的图像。可能需要处理图片的加载和缩放比例，确保放大镜跟随鼠标移动。

<div class="img-container">
  <img src="small.jpg" id="targetImg">
  <div id="magnifier" style="display:none; width:200px; height:200px; position:absolute"></div>
</div>

<script>
const img = document.getElementById('targetImg');
const magnifier = document.getElementById('magnifier');

img.addEventListener('mousemove', (e) => {
  const rect = img.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  magnifier.style.display = 'block';
  magnifier.style.background = `
    url(${img.src}) 
    no-repeat 
    ${-x*2}px ${-y*2}px
  `;
  magnifier.style.left = e.pageX + 15 + 'px';
  magnifier.style.top = e.pageY + 15 + 'px';
});

img.addEventListener('mouseleave', () => {
  magnifier.style.display = 'none';
});
</script>

暗黑模式切换

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>暗黑模式切换示例</title>
  <style>
    body {
      transition: background-color 0.3s, color 0.3s;
    }
    body.dark-mode {
      background-color: #333;
      color: white;
    }
    #darkModeToggle {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button id="darkModeToggle">切换暗黑模式</button>
  <script>
    const toggle = document.getElementById('darkModeToggle');

    toggle.addEventListener('click', () => {
      document.body.classList.toggle('dark-mode');
      const theme = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
      localStorage.setItem('theme', theme);
    });

    window.onload = () => {
      const savedTheme = localStorage.getItem('theme');
      if (savedTheme === 'dark') {
        document.body.classList.add('dark-mode');
      }
    };
  </script>
</body>
</html>

网页主题色切换

        网页主题色切换可以通过切换CSS类或直接修改样式属性，使用localStorage记住用户选择的主题。需要考虑如何动态改变主题颜色，并在页面加载时应用已保存的主题。

<button onclick="toggleTheme()">切换主题</button>

<script>
function toggleTheme() {
  const root = document.documentElement;
  const isDark = root.classList.toggle('dark-theme');
  
  // 保存主题状态
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
}

// 初始化主题
document.addEventListener('DOMContentLoaded', () => {
  const savedTheme = localStorage.getItem('theme') || 'light';
  document.documentElement.classList.toggle('dark-theme', savedTheme === 'dark');
});

/* CSS需配合：
:root { --bg: #fff; --text: #333; }
.dark-theme { --bg: #222; --text: #fff; }
body { background: var(--bg); color: var(--text); }
*/
</script>

---

七、视觉效果类

点击切换图片（基础视觉交互）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品展示/图片画廊</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .nav {
        width: 80%;
        margin: 0 auto;
        height: 65px;
        display: flex;
    }
    .nav span {
        flex: 1;
        height: 65px;
        text-align: center;
        line-height: 65px;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer; /* 添加鼠标指针样式 */
    }
    .nav .siz {
        background: orange; /* 高亮显示的导航项背景色 */
    }
    .content {
        width: 80%;
        height: 500px;
        margin: 20px auto; /* 调整内容与导航之间的间距 */
        display: flex;
        flex-wrap: wrap; /* 允许内容换行 */
    }
    .content div {
        display: none; /* 默认隐藏所有内容区域 */
        width: 49%; /* 设置每个内容区域的宽度 */
        margin: 0.5%; /* 设置内容区域之间的间距 */
        box-sizing: border-box; /* 包含内边距和边框在内计算元素的总宽度和高度 */
    }
    .content .show {
        display: block; /* 显示当前高亮的内容区域 */
    }
    .content img {
        width: 100%; /* 图片宽度自适应内容区域 */
        height: auto; /* 图片高度自动调整以保持比例 */
    }
</style>
</head>
<body>

<div class="nav"></div>
<div class="content"></div>

<script>
    let car = {
        data: [
            { name: '产品1', pics: ['img1-1.jpg', 'img1-2.jpg'] },
            { name: '产品2', pics: ['img2-1.jpg', 'img2-2.jpg'] },
            // ... 可以继续添加更多产品数据
        ]
    };

    let data = car.data;
    let nav = document.querySelector(".nav");
    let content = document.querySelector(".content");

    // 渲染导航和内容区域
    for (let i = 0; i < data.length; i++) {
        let span = document.createElement("span");
        span.innerText = data[i].name;
        span.onclick = function () {
            // 移除所有span和div的siz和show类
            let navSpans = document.querySelectorAll(".nav span");
            let contentDivs = document.querySelectorAll(".content div");
            navSpans.forEach(span => span.className = '');
            contentDivs.forEach(div => div.className = '');

            // 给当前点击的span和对应的div添加siz和show类
            this.className = 'siz';
            contentDivs[i].className = 'show';
        }
        nav.appendChild(span);

        let div = document.createElement("div");
        let img1 = document.createElement("img");
        let img2 = document.createElement("img"); 
        // 这里虽然创建了两个img元素，但实际上每个div只显示一个（根据需求调整）
        // 为了简化示例，这里只设置第一个img的src，第二个可以隐藏或根据需求处理
        img1.setAttribute("src", data[i].pics[0]);
        // img2.setAttribute("src", data[i].pics[1]); 
        // 如果需要显示两张图片，可以取消注释并调整CSS布局
        div.appendChild(img1);
        // div.appendChild(img2); 
        // 如果需要显示两张图片，可以取消注释
        content.appendChild(div);
    }

    // 设置初始状态：默认显示第一个产品/项目
    let navSpans = document.querySelectorAll(".nav span");
    let contentDivs = document.querySelectorAll(".content div");
    if (navSpans.length > 0 && contentDivs.length > 0) {
        navSpans[0].className = 'siz';
        contentDivs[0].className = 'show';
    }
</script>

</body>
</html>

滚动动画触发

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滚动动画触发示例</title>
  <style>
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s, transform 0.5s;
    }
    .animate-on-scroll.active {
      opacity: 1;
      transform: translateY(0);
    }
    .box {
      width: 100%;
      height: 200px;
      background-color: #f1f1f1;
      margin: 20px 0;
      padding: 20px;
      box-sizing: border-box;
    }
    .spacer {
      height: 1000px;
      background-color: #f9f9f9;
    }
  </style>
</head>
<body>
  <div class="spacer"></div>
  <div class="animate-on-scroll box">动画内容 1</div>
  <div class="animate-on-scroll box">动画内容 2</div>
  <div class="animate-on-scroll box">动画内容 3</div>
  <div class="spacer"></div>
  <script>
    window.addEventListener('scroll', () => {
      document.querySelectorAll('.animate-on-scroll').forEach(el => {
        const rect = el.getBoundingClientRect();
        if (rect.top < window.innerHeight * 0.8) {
          el.classList.add('active');
        }
      });
    });
  </script>
</body>
</html>

视差滚动效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视差滚动效果示例</title>
  <style>
    .parallax {
      position: relative;
      height: 500px;
      background-image: url('https://via.placeholder.com/1920x1080');
      background-size: cover;
      background-position: center;
    }
    .content {
      height: 1000px;
      background-color: #f1f1f1;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="parallax"></div>
  <div class="content">
    <p>滚动页面查看视差效果。</p>
    <!-- 添加更多内容 -->
  </div>
  <script>
    window.addEventListener('scroll', () => {
      const scrolled = window.pageYOffset;
      document.querySelector('.parallax').style.transform = `translateY(${scrolled * 0.5}px)`;
    });
  </script>
</body>
</html>

此文尚需更新，敬请期待

码字不易，各位大佬点点赞呗

目录

一、异步编程

1.1.异步编程的基本概念与重要性

1.2.事件循环（Event Loop）机制

1.3.JavaScript异步编程的常见方式及详解

示例

1.4.异步编程的最佳实践

二、跨域

2.1.什么是跨域

2.2.怎么解决跨域

1. JSONP（JSON with Padding）

2. CORS（Cross-Origin Resource Sharing）

3. 反向代理/Nginx反向代理

4. WebSocket

5. postMessage

6. Node.js中间件代理

三、懒加载

1. 懒加载原理

2. 懒加载思路及实现

3. 图片的懒加载

案例

---

一、异步编程

1.1.异步编程的基本概念与重要性

        异步编程是一种编程方式，它允许程序在等待某些操作（如网络请求、文件读取、定时器等）完成的同时，继续执行其他任务。这种编程方式可以显著提高程序的执行效率，特别是在处理I/O密集型任务时表现出色。

        在JavaScript中，由于它是单线程语言，即同一时间只能执行一个任务，因此异步编程显得尤为重要。如果使用同步编程模型来处理需要大量时间的任务，会阻塞整个线程，导致页面或程序卡顿。而异步编程则可以让程序在执行这些长时间任务时，继续执行其他代码，从而优化用户体验。

1.2.事件循环（Event Loop）机制

1.事件循环（Event Loop） ：

        JavaScript的执行环境是单线程的，这意味着它同一时间只能执行一个任务。

        事件循环是JavaScript实现异步编程的核心机制。它包含一个执行栈（Call Stack）和一个或多个任务队列（Task Queue）。

        执行栈用于执行同步代码，而任务队列则用于存放异步任务的回调函数。

        当执行栈为空时，事件循环会从任务队列中取出任务并执行。

2.任务类型：

宏任务（Macro Task） ：如setTimeout、setInterval、I/O操作等。

微任务（Micro Task） ：如Promise的回调、process.nextTick等。

        微任务的优先级高于宏任务。在每一次事件循环中，执行栈中的任务执行完毕后，会先检查微任务队列，执行所有微任务，再执行下一个宏任务。

1.3.JavaScript异步编程的常见方式及详解

1、回调函数（Callback Functions）

                回调函数是最早的异步处理方式。它通过将一个函数作为参数传递给另一个函数，在异步任务完成后调用该函数来处理结果。

        回调函数的优点是简单易懂，但在处理多个异步任务时，会导致回调函数嵌套过多，形成“回调地狱”，使代码难以维护和理解。

2、Promise对象

        Promise是ES6引入的一种异步编程解决方案，它是一个表示未来某个事件（通常是一个异步操作）的结果的对象。

        Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。状态一旦改变就不能再变。

        Promise对象提供了then()和catch()方法来处理异步操作的结果和异常。then()方法用于处理成功的情况，catch()方法用于处理失败的情况。

        Promise支持链式调用，可以避免回调地狱，使代码更加简洁易读。

        Promise.all()和Promise.race()是Promise对象的两个静态方法。

        Promise.all()接受一个包含多个Promise的数组，并返回一个新的Promise。当所有Promise都完成时，这个Promise才会完成；如果其中有一个Promise失败，Promise.all()会立即失败。

        Promise.race()则只要数组中的任意一个Promise完成或失败，就会立即完成或失败。

        有关promise的更详细讲解在ES6基础知识https://blog.csdn.net/m0_64455070/article/details/143714359

3、async/await

        async/await是基于Promise的语法糖，是ES2017引入的用于处理异步代码的方式。

  async用来声明一个异步函数，该函数会隐式地返回一个Promise。

  await只能在async函数内部使用，用于等待一个Promise的完成。它返回的是Promise成功的结果值，如果Promise失败，则抛出异常。

        async/await使得异步代码看起来像是同步的，提高了代码的可读性和可维护性。它避免了回调地狱，并且错误处理更加方便。

        有关async/await更详细讲解在本文作者的ES6基础知识https://blog.csdn.net/m0_64455070/article/details/143714359

示例

以下是一个使用async/await实现异步网络请求的示例代码：

async function fetchData(url) {
  try {
    const response = await fetch(url); // 等待fetch函数的Promise完成
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json(); // 等待响应的JSON数据解析完成
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    throw error; // 将错误抛出给调用者处理
  }
}

// 使用 async/await 处理异步请求结果
(async () => {
  try {
    const data = await fetchData('https://api.example.com/data');
    console.log('Request succeeded:', data);
  } catch (error) {
    console.error('Request failed:', error);
  }
})();

在这个示例中，fetchData函数是一个异步函数，它使用await关键字等待fetch函数的Promise完成，并获取响应的JSON数据。然后，我们使用一个立即执行的异步函数来调用fetchData函数，并处理异步请求的结果。如果请求失败，则捕获异常并打印错误信息。

1.4.异步编程的最佳实践

避免回调地狱：使用Promise或async/await来避免回调地狱，使代码更加简洁易读。

错误处理：在异步代码中添加适当的错误处理逻辑，以确保程序的健壮性。

代码可读性：使用有意义的函数名和变量名，以及适当的注释来提高代码的可读性。

性能优化：避免不必要的异步操作，以减少资源消耗和提高程序性能。

二、跨域

2.1.什么是跨域

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。在Web开发中，由于同源策略（Same-Origin Policy）的限制，浏览器默认不允许跨域请求。如果尝试进行跨域请求，浏览器会抛出安全错误。

什么是同源策略？

同源策略是一种安全功能，它要求协议、域名和端口三者必须相同，才允许访问资源。

2.2.怎么解决跨域

1. JSONP（JSON with Padding）

原理：

JSONP是一种通过<script>标签实现跨域请求的技术。由于<script>标签不受同源策略的限制，可以加载其他域的JavaScript文件。

优点：

兼容性好，可以解决主流浏览器的跨域问题

缺点：

仅支持GET请求。

不安全，可能遭受XSS攻击。

实现步骤

JSONP的工作流程如下：

前端：动态创建一个<script>标签，并设置其src属性为跨域的URL，同时在URL中传入一个回调函数名（如callback=myFunction）。

后端：服务器接收到请求后，将返回的数据作为回调函数的参数，并包装成JavaScript代码返回（如myFunction({"key":"value"})）。

前端：当浏览器加载这段JavaScript代码时，会自动调用回调函数myFunction，从而实现跨域数据传输。

但JSONP只能发送GET请求，且存在安全风险，容易受到XSS攻击。

2. CORS（Cross-Origin Resource Sharing）

原理

CORS是一种由服务器设置响应头来允许跨域请求的机制。服务器通过设置特定的HTTP响应头，如Access-Control-Allow-Origin，来指定哪些域名或IP地址可以跨域访问资源。

优点

灵活，可以细粒度地控制哪些源可以访问资源。

前端无需配置，只需后端设置响应头。

缺点

需要服务器支持

实现步骤

前端：无需特殊配置，只需发送跨域请求即可。

后端：服务器需要在响应头中设置Access-Control-Allow-Origin等CORS相关的头部字段。

CORS支持所有类型的HTTP请求，且安全性较高，是跨域请求的推荐解决方案。但需要注意的是，CORS需要服务器和浏览器同时支持才能实现。

3. 反向代理/Nginx反向代理

原理

反向代理是一种在服务器端设置代理服务器，将前端的跨域请求转发到目标服务器，并将目标服务器的响应返回给前端的技术。Nginx是一种常见的反向代理服务器。

优点

解决跨域问题：通过反向代理，前端可以与目标服务器进行跨域通信，而无需修改前端代码。

安全性：反向代理可以作为一道安全屏障，隐藏目标服务器的真实地址，防止直接攻击。

负载均衡：在大型应用中，反向代理可以将请求分发到多个目标服务器，实现负载均衡，提高系统的可用性和性能。

缓存：反向代理可以缓存目标服务器的响应，减少对目标服务器的请求次数，提高响应速度。

缺点

配置复杂性：反向代理需要服务器端的配置和管理，这可能需要一定的技术知识和经验。

单点故障：如果反向代理服务器出现故障，整个系统可能会受到影响，导致服务中断。

性能瓶颈：虽然反向代理可以提高性能，但在高并发场景下，它也可能成为性能瓶颈。

实现步骤

前端：无需特殊配置，只需发送请求到反向代理服务器即可。

后端：需要在服务器端（如Nginx）配置反向代理规则，将请求转发到目标服务器。

通过反向代理，前端可以认为是在与同源服务器通信，从而绕过浏览器的同源策略限制。但需要注意的是，反向代理需要服务器端的配置和管理。

4. WebSocket

原理

WebSocket是一种在单个TCP连接上进行全双工通讯的协议。它默认支持跨域请求，可以在客户端和服务器之间建立持久的连接，并通过该连接进行实时数据传输。

优点

支持全双工通信，实时性好。

不受同源策略限制。

缺点

需要服务器支持WebSocket协议。

可能存在性能问题，如页面建立多个WebSocket连接。

实现步骤

前端：使用WebSocket API（如new WebSocket('ws://example.com/socket')）建立连接。

后端：服务器需要支持WebSocket协议，并处理连接和数据传输。

WebSocket适用于需要实时通信或双向通信的场景，如聊天室、实时数据监控等。

5. postMessage

原理

postMessage是HTML5中提供的一个API，用于在不同窗口、标签页或iframe之间进行跨域通信。

优点

安全，可以通过origin参数控制消息的来源。

支持复杂的通信场景，如跨域iframe之间的通信。

缺点

需要双方配合实现。

实现步骤

前端：使用window.postMessage方法发送消息到目标窗口或iframe。

接收端：目标窗口或iframe需要监听message事件，并处理接收到的消息。

postMessage适用于不同窗口之间的通信，如父子窗口、跨域iframe等。但需要在接收端进行安全验证以防止恶意攻击。

6. Node.js中间件代理

原理

当前端发送跨域请求到Node.js服务器时，Node.js服务器使用中间件拦截并处理这些请求。中间件可以检查请求的头信息、参数等，并根据配置将请求转发到目标服务器。目标服务器处理请求后，将响应返回给Node.js服务器，Node.js服务器再将响应转发给前端。通过这种方式，Node.js服务器作为中间层，实现了跨域通信。常见的中间件有cors、http-proxy-middleware等。

优点

灵活性：Node.js中间件代理可以灵活地处理跨域请求，并与其他Node.js应用集成。

易于配置：与Nginx等反向代理服务器相比，Node.js中间件代理的配置通常更加简单和直观。

可扩展性：Node.js中间件代理可以轻松地与其他中间件和路由集成，实现更复杂的功能。

缺点

性能：与Nginx等高性能反向代理服务器相比，Node.js中间件代理的性能可能稍逊一筹。

资源消耗：Node.js中间件代理需要额外的资源来运行和处理请求，这可能会增加服务器的负载。

维护成本：与Nginx等成熟的反向代理服务器相比，Node.js中间件代理可能需要更多的维护和支持

实现步骤

前端：发送请求到Node.js服务器。

后端：Node.js服务器使用中间件拦截并处理跨域请求，将请求转发到目标服务器，并将响应返回给前端。

Node.js中间件代理需要服务器端的配置和管理，但可以灵活地处理跨域请求，并与其他Node.js应用集成。

三、懒加载

1. 懒加载原理

        懒加载，即按需加载或延迟加载，是指当页面或应用中的某些资源（如图片、视频、数据等）在需要时才进行加载，而不是在页面初始化时一次性加载所有资源。这种技术的核心原理是减少初始加载时间和网络流量，提高页面响应速度和用户体验。

懒加载的原理主要基于以下几点：

按需加载：只加载用户当前需要或即将需要的资源，避免加载无用资源。

异步加载：将资源的加载推迟到用户需要使用时再进行，不阻塞用户界面的渲染。

动态加载：根据用户的行为和需求，动态地生成和加载页面内容或资源。

2. 懒加载思路及实现

1. 确定需要懒加载的资源：根据页面或应用的需求，确定哪些资源可以或应该进行懒加载。
2. 设置占位符：在资源实际加载之前，使用占位符（如低分辨率图片、默认图标等）来占据资源的位置。
3. 监听用户行为：通过事件监听（如滚动事件、点击事件等）来检测用户何时需要加载资源。
4. 加载资源：当用户需要资源时，触发加载逻辑，从服务器获取资源并替换占位符。

懒加载的实现方式有多种，包括但不限于：

1. 图片懒加载：通过监听滚动事件和判断图片是否进入可视区域来实现图片的延迟加载。
2. 视频懒加载：在视频播放器进入用户视野或用户点击播放按钮时才开始加载视频内容。
3. 数据懒加载：在用户滚动到页面底部或进行分页操作时，加载更多的数据。

3. 图片的懒加载

图片的懒加载是懒加载技术中最常见的应用之一。

步骤：

在HTML中为需要懒加载的图片设置占位符，并使用自定义属性（如data-src）存储真实图片的路径。

在JavaScript中监听滚动事件，判断图片是否进入可视区域。

当图片进入可视区域时，将占位符替换为真实图片

// 获取页面中的所有懒加载图片
var imgs = document.querySelectorAll('img[data-src]');

// 监听滚动事件
window.addEventListener('scroll', function() {
    // 遍历所有懒加载图片
    imgs.forEach(function(img) {
        // 判断图片是否进入可视区域
        if (isImageInViewport(img)) {
            // 替换占位符为真实图片
            img.src = img.getAttribute('data-src');
            // 移除data-src属性，避免重复加载
            img.removeAttribute('data-src');
        }
    });
});

// 判断图片是否进入可视区域的函数
function isImageInViewport(img) {
    var rect = img.getBoundingClientRect();
    var inViewport = (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
    return inViewport;
}

现代浏览器支持：

现代浏览器（如Chrome、Firefox、Safari等）通常支持图片的懒加载属性。可以在<img>标签中使用loading="lazy"属性来告诉浏览器延迟加载图片，直到它们出现在视口中。

例如：<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="Description">

案例

1. 图片懒加载（使用JavaScript和Intersection Observer API）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Lazy Load Example</title>
<style>
  .lazy-load {
    opacity: 0;
    transition: opacity 0.3s;
  }
  .lazy-load.loaded {
    opacity: 1;
  }
</style>
</head>
<body>

<!-- 图片列表，使用 data-src 属性存储真实图片 URL -->
<img class="lazy-load" data-src="image1.jpg" alt="Image 1">
<img class="lazy-load" data-src="image2.jpg" alt="Image 2">
<img class="lazy-load" data-src="image3.jpg" alt="Image 3">
<!-- ...更多图片... -->

<script>
  // 获取所有需要懒加载的图片
  const lazyImages = document.querySelectorAll('.lazy-load');

  // 创建 Intersection Observer 实例
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 当图片进入可视区域时，加载图片
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.add('loaded');
        // 停止观察这个图片
        observer.unobserve(img);
      }
    });
  });

  // 开始观察每个图片
  lazyImages.forEach(img => {
    observer.observe(img);
  });
</script>

</body>
</html>

2. 视频懒加载（使用JavaScript和事件监听）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Lazy Load Example</title>
</head>
<body>

<!-- 视频列表，使用 data-src 属性存储视频 URL -->
<div class="video-container">
  <video class="lazy-load" controls>
    <source data-src="video1.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>
<div class="video-container">
  <video class="lazy-load" controls>
    <source data-src="video2.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>
<!-- ...更多视频... -->

<script>
  // 获取所有需要懒加载的视频
  const lazyVideos = document.querySelectorAll('.lazy-load video');

  // 为每个视频容器添加点击事件监听器
  lazyVideos.forEach(videoContainer => {
    const video = videoContainer.querySelector('video');
    const source = video.querySelector('source');

    videoContainer.addEventListener('click', () => {
      // 当视频容器被点击时，加载视频
      video.src = source.dataset.src;
      video.load(); // 触发浏览器加载视频资源
      // 移除 data-src 属性，避免重复加载
      source.removeAttribute('data-src');
      // 移除点击事件监听器，避免重复操作
      videoContainer.removeEventListener('click', arguments.callee);
    });
  });
</script>

</body>
</html>

3. 数据懒加载（使用JavaScript和滚动事件监听）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Lazy Load Example</title>
<style>
  #content {
    max-height: 400px;
    overflow-y: auto;
  }
  .item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
</style>
</head>
<body>

<div id="content">
  <!-- 初始内容 -->
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <!-- ...更多初始内容... -->

  <!-- 占位符，用于加载更多内容 -->
  <div id="load-more">Load More</div>
</div>

<script>
  let currentPage = 1; // 当前页码

  // 为“加载更多”按钮添加点击事件监听器
  document.getElementById('load-more').addEventListener('click', () => {
    loadMoreData(currentPage);
    currentPage++; // 更新页码
  });

  // 滚动事件监听器，当用户滚动到底部时自动加载更多数据
  window.addEventListener('scroll', () => {
    const content = document.getElementById('content');
    const loadMore = document.getElementById('load-more');
    const bottomOfWindow = window.scrollY + window.innerHeight === document.body.offsetHeight;
    const bottomOfContent = content.scrollTop + content.clientHeight >= content.scrollHeight - 10; // 减去10是为了避免因为滚动条或内容高度计算误差导致的重复加载

    if (bottomOfWindow || bottomOfContent) {
      loadMoreData(currentPage);
      currentPage++; // 更新页码
      // 可以选择隐藏或禁用“加载更多”按钮，直到新数据加载完成
      loadMore.style.display = 'none';
    }
  });

  // 模拟加载更多数据的函数
  function loadMoreData(page) {
    setTimeout(() => {
      const content = document.getElementById('content');
      const loadMore = document.getElementById('load-more');

      // 清除之前的占位符（如果存在）
      if (loadMore.style.display === 'none') {
        loadMore.style.display = 'block';
      }

      // 创建新的内容项并添加到页面中
      for (let i = 0; i < 5; i++) {
        const newItem = document.createElement('div');
        newItem.className = 'item';
        newItem.textContent = `Item ${(page - 1) * 5 + i + 3}`; // 假设每页加载5个项，从Item 3开始
        content.appendChild(newItem);
      }
    }, 1000); // 模拟网络延迟，设置为1秒
  }
</script>

</body>
</html>

一、什么是MCP

MCP（Model Context Protocol）是一种用于大语言模型与外部工具交互的协议框架。它允许大语言模型能够调用各种外部工具来扩展其能力边界，如访问文件系统、搜索引擎、数据库等。

MCP的核心价值

1. 能力扩展：使大语言模型突破知识边界和计算能力的限制
2. 标准化接口：提供统一的工具调用标准，降低集成成本
3. 复杂任务处理：通过递进式工具调用，解决复杂问题
4. 灵活扩展：开发者可方便地添加自定义工具

MCP通过宿主应用、客户端、服务器和大语言模型的协作，实现了AI与工具的无缝对接，为AI应用提供了强大的扩展性。

二、各组件职责

宿主应用(Host)

• 提供用户界面，接收用户输入
• 展示AI响应和工具执行结果
• 管理用户会话和界面状态
• 维护对话历史和上下文管理

宿主应用最简实现:

// host.ts - 宿主应用简化实现
import { MCPClient } from './client';

class MCPHost {
  private client: MCPClient;
  private conversationHistory: any[] = [];

  constructor() {
    // 初始化MCP客户端
    this.client = new MCPClient();
  }

  // 应用启动
  async start() {
    // 初始化客户端
    await this.client.initialize();
    console.log("MCP宿主应用启动成功");
  }

  // 处理用户消息
  async handleUserMessage(userInput: string) {
    // 添加用户消息到历史
    this.conversationHistory.push({ role: "user", content: userInput });
    
    // 发送消息给客户端处理
    const response = await this.client.processMessage(userInput, this.conversationHistory);
    
    // 添加响应到历史
    this.conversationHistory.push({ role: "assistant", content: response });
    
    // 返回响应给UI
    return response;
  }
}

MCP客户端(Client)

• 管理注册连接mcp server
• 解析模型输出中的工具调用指令
• 使用stdio标准IO以及RPC规范与mcp server通信让其执行工具方法

注意：实际开发中，推荐使用Model Context Protocol官方SDK，官方提供了Python、TypeScript、Java、Kotlin、C#等多种语言的SDK实现。本文为了更清晰地展示底层实现细节，自行实现了一些核心方法，帮助读者理解MCP客户端的工作原理。

2.1 客户端核心结构

MCP客户端最简实现:

// client.ts - MCP客户端简化实现
import { LLMProvider } from './llm-provider';
import { spawn } from 'child_process';
import * as fs from 'fs';
import * as path from 'path';

export class MCPClient {
  private servers: Map<string, any> = new Map();
  private availableTools: any[] = [];
  private maxAgentLoops = 20;
  private llmProvider: LLMProvider;
  
  constructor() {
    this.llmProvider = new LLMProvider();
  }
  
  // 初始化客户端
  async initialize() {
    // 读取MCP服务器配置
    const configPath = path.join(process.env.HOME || process.env.USERPROFILE || '', 'mcp_config.json');
    const config = JSON.parse(fs.readFileSync(configPath, 'utf-8'));
    
    // 连接到每个配置的MCP服务器
    for (const [serverName, serverConfig] of Object.entries(config.mcpServers)) {
      console.log(`正在连接到MCP服务器: ${serverName}`);
      
      try {
        // 创建与服务器的连接
        const serverConnection = await this.connectToServer(serverName, serverConfig);
        this.servers.set(serverName, serverConnection);
        
        // 获取服务器提供的工具列表
        const tools = await this.fetchToolsFromServer(serverConnection);
        this.availableTools.push(...tools.map(tool => ({
          ...tool,
          serverName
        })));
        
        console.log(`已连接MCP服务器 ${serverName} 并发现 ${tools.length} 个工具`);
      } catch (error) {
        console.error(`连接MCP服务器 ${serverName} 失败:`, error);
      }
    }
    
    console.log(`已连接 ${this.servers.size} 个MCP服务器，共发现 ${this.availableTools.length} 个工具`);
  }
  
  // 连接到MCP服务器
  private async connectToServer(serverName: string, config: any) {
    // 根据配置启动服务器进程
    const childProcess = spawn(
      config.command,
      config.args || [],
      {
        cwd: config.cwd || process.cwd(),
        stdio: ['pipe', 'pipe', 'pipe']
      }
    );
    
    // 简单封装连接对象
    const serverConnection = {
      name: serverName,
      process: childProcess,
      async sendRequest(request: any) {
        return new Promise((resolve, reject) => {
          // 将请求写入标准输入
          childProcess.stdin.write(JSON.stringify(request) + '\n');
          
          // 从标准输出读取响应
          childProcess.stdout.once('data', (data) => {
            try {
              const response = JSON.parse(data.toString());
              resolve(response);
            } catch (error) {
              reject(new Error(`无法解析服务器响应: ${error.message}`));
            }
          });
          
          // 处理错误
          childProcess.on('error', reject);
        });
      }
    };
    
    return serverConnection;
  }
  
  // 从服务器获取工具列表
  private async fetchToolsFromServer(serverConnection: any) {
    const request = {
      jsonrpc: "2.0",
      id: this.generateId(),
      method: "listTools",
      params: {}
    };
    
    const response = await serverConnection.sendRequest(request);
    
    if (response.error) {
      throw new Error(`获取工具列表失败: ${response.error.message}`);
    }
    
    return response.result.tools || [];
  }
  
  // 处理消息并执行Agentic Loop
  async processMessage(userInput: string, history: any[]) {
    // 准备LLM请求
    const llmRequest = this.prepareLLMRequest(userInput, history);
    
    // 执行Agentic Loop
    let loopCount = 0;
    let finalResponse = "";
    
    while (loopCount < this.maxAgentLoops) {
      // 调用LLM获取响应
      const llmResponse = await this.llmProvider.generateResponse(llmRequest);
      
      // 检查是否包含工具调用
      const toolCalls = this.extractToolCalls(llmResponse);
      
      if (toolCalls.length === 0) {
        // 无工具调用，循环结束
        finalResponse = llmResponse.content;
        break;
      }
      
      // 首先添加包含工具调用的assistant消息到历史
      llmRequest.messages.push({
        role: "assistant",
        content: null,
        tool_calls: toolCalls.map((toolCall, index) => ({
          id: `call_${Date.now()}_${index}`,
          type: 'function',
          function: {
            name: toolCall.name,
            arguments: JSON.stringify(toolCall.arguments)
          }
        }))
      });
      
      // 执行工具调用
      for (const toolCall of toolCalls) {
        const result = await this.callTool(toolCall);
        
        // 将工具结果添加到对话历史
        llmRequest.messages.push({
          role: "tool",
          name: toolCall.name,
          content: JSON.stringify(result)
        });
      }
      
      loopCount++;
    }
    
    return finalResponse;
  }
  
  // 调用工具
  async callTool(toolCall: { name: string, arguments: Record<string, any> }) {
    console.log(`客户端调用工具: ${toolCall.name}，参数:`, toolCall.arguments);
    
    // 查找支持此工具的服务器
    const tool = this.availableTools.find(t => t.name === toolCall.name);
    if (!tool) {
      throw new Error(`未知工具: ${toolCall.name}`);
    }
    
    const serverConnection = this.servers.get(tool.serverName);
    if (!serverConnection) {
      throw new Error(`未找到支持工具 ${toolCall.name} 的服务器`);
    }
    
    // 创建标准JSON-RPC请求
    const request = {
      jsonrpc: "2.0",
      id: this.generateId(),
      method: "callTool",
      params: {
        name: toolCall.name,
        arguments: toolCall.arguments || {}
      }
    };
    
    // 发送请求并获取响应
    const response = await serverConnection.sendRequest(request);
    
    // 处理错误
    if (response.error) {
      throw new Error(`工具调用失败: ${response.error.message}`);
    }
    
    // 返回结果
    return response.result;
  }
  
  // 准备LLM请求
  private prepareLLMRequest(userInput: string, history: any[]) {
    return {
      messages: [...history],
      tools: this.availableTools.map(tool => ({
        type: "function",
        function: {
          name: tool.name,
          description: tool.description,
          parameters: {
            type: tool.inputSchema.type,
            properties: tool.inputSchema.properties,
            required: tool.inputSchema.required
          }
        }
      }))
    };
  }
  
  // 从LLM响应中提取工具调用
  private extractToolCalls(response: any) {
    // 简化实现，假设response包含tool_calls属性
    return response.tool_calls || [];
  }
  
  // 生成唯一ID
  private generateId() {
    return `req-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
  }
}

@modelcontextprotocol/sdk 的callTool方法实现

官方SDK也是基于JSON-RPC 2.0协议实现，是客户端与服务器交互的核心接口：

sequenceDiagram
    participant Client as SDK Client
    participant Transport as Transport层
    participant MCPServer as MCP Server
    participant Tool as 工具实现
    
    Client->>Client: callTool({name, arguments})
    Client->>Client: 验证工具能力支持
    Client->>Client: 构建JSON-RPC请求
    Client->>Client: 调用sendRequest方法
    
    Client->>Transport: 序列化并发送JSON-RPC请求
    Transport->>MCPServer: 通过HTTP/WebSocket/Stdio传输
    
    MCPServer->>MCPServer: 解析请求
    MCPServer->>Tool: 调用对应工具
    Tool-->>MCPServer: 返回执行结果
    
    MCPServer->>MCPServer: 构建JSON-RPC响应
    MCPServer-->>Transport: 返回响应
    Transport-->>Client: 接收并解析响应
    
    Client->>Client: 处理响应或错误
    Client-->>Client: 返回标准化结果

JSON-RPC 2.0格式

MCP客户端和服务器之间的通信基于JSON-RPC 2.0协议：

请求格式

{
  "jsonrpc": "2.0",
  "id": "request-123",
  "method": "callTool",
  "params": {
    "name": "calculator",
    "arguments": {
      "a": 5,
      "b": 3,
      "operation": "multiply"
    }
  }
}

成功响应格式

{
  "jsonrpc": "2.0",
  "id": "request-123",
  "result": {
    "content": [
      {
        "type": "text",
        "text": "15"
      }
    ],
    "isError": false
  }
}

错误响应格式

{
  "jsonrpc": "2.0",
  "id": "request-123",
  "error": {
    "code": -32000,
    "message": "Unknown tool 'calculator'"
  }
}

大语言模型(LLM)

• 处理用户输入并生成回复
• 根据需要输出标准格式的工具调用指令
• 根据工具执行结果给出自然语言结果或暂时由于信息不足需要调用更多的工具而继续对话

LLM提供者最简实现:

// llm-provider.ts - LLM提供者简化实现
export class LLMProvider {
  // 向大语言模型发送请求并获取响应
  async generateResponse(request: any) {
    console.log("向LLM发送请求:", request);
    
    // 这里应该调用实际的LLM API
    // 为简化示例，返回模拟响应
    
    // 模拟LLM可能返回工具调用或直接回答
    const useTool = Math.random() > 0.5;
    
    if (useTool) {
      return {
        content: "我需要先获取一些信息...",
        tool_calls: [
          {
            name: "calculator",
            arguments: {
              a: 5,
              b: 3,
              operation: "multiply"
            }
          }
        ]
      };
    } else {
      return {
        content: "这是我直接生成的回答，不需要使用工具。",
        tool_calls: []
      };
    }
  }
}

MCP服务器(Server)

• 接收来自Client的RPC工具调用请求
• 管理和执行注册的工具
• 将工具执行结果返回给Client
• 可能包含多种工具的实现或与外部工具服务的连接

MCP服务器最简实现(使用官方SDK):

// mcp-server.js - 基于SDK的MCP服务器简单实现
const { createServer } = require('@modelcontextprotocol/server');

// 创建一个MCP服务器实例
const server = createServer({
  name: 'simple-tools'
});

// 注册一个简单的计算器工具
server.registerTool({
  name: 'calculator',
  description: '执行简单的数学计算',
  parameters: {
    type: 'object',
    properties: {
      a: { type: 'number', description: '第一个数字' },
      b: { type: 'number', description: '第二个数字' },
      operation: { 
        type: 'string', 
        description: '操作类型',
        enum: ['add', 'subtract', 'multiply', 'divide']
      }
    },
    required: ['a', 'b', 'operation']
  },
  execute: async ({ a, b, operation }) => {
    let result;
    
    switch (operation) {
      case 'add':
        result = a + b;
        break;
      case 'subtract':
        result = a - b;
        break;
      case 'multiply':
        result = a * b;
        break;
      case 'divide':
        if (b === 0) {
          throw new Error('除数不能为零');
        }
        result = a / b;
        break;
      default:
        throw new Error(`不支持的操作: ${operation}`);
    }
    
    return { result: result.toString() };
  }
});

// 启动服务器，使用标准输入/输出作为传输层
server.start({ transport: 'stdio' });
console.error('计算器MCP服务器已启动');

三、MCP系统工作流程

3.1 系统初始化过程

系统启动时，会进行以下初始化步骤：

sequenceDiagram
    participant Host as 宿主应用(Host)
    participant Client as MCP Client
    participant MCPServer as MCP Server
    
    Host->>Host: 应用启动
    Host->>Client: 创建Client实例
    Client->>Client: 加载配置
    
    loop 对每个MCP服务器配置
        Client->>MCPServer: 建立连接
        MCPServer-->>Client: 返回连接状态
        Client->>MCPServer: 请求工具列表
        MCPServer-->>Client: 返回可用工具定义
        Client->>Client: 注册工具信息
    end
    
    Client-->>Host: 初始化完成，返回可用工具
    Host->>Host: 更新UI显示可用工具

初始化关键步骤

1. Host启动：

   • 宿主应用启动，加载mcp server配置文件
   • 创建MCP Client实例

2. Client初始化：

   • 加载MCPServer配置列表
   • 为每个配置创建连接

3. 工具发现与注册：

   • Client连接到各MCPServer
   • 请求并获取每个Server提供的工具列表
   • 注册工具信息（名称、描述、输入模式、所属服务器）
   • 返回完整工具列表给Host

4. UI初始化：

   • Host更新UI展示可用工具
   • 准备就绪，等待用户输入

MCP服务器配置示例:

{
  "mcpServers": {
    "calculator": {
      "command": "node",
      "args": [
        "/absolute/path/to/mcp-server.js"  // 请替换为实际的服务器脚本路径
      ]
    }
  }
}

注意：请根据实际环境替换服务器脚本路径

• Windows示例: "C:\path\to\mcp-server.js" 或 "C:/path/to/mcp-server.js"
• MacOS/Linux示例: "/Users/username/projects/mcp-server.js" 或 "/home/username/projects/mcp-server.js"

3.2 完整交互流程

MCP的各个组件之间有清晰的调用关系，下图展示了从用户输入到最终输出的完整流程：

sequenceDiagram
    actor User
    participant Host as 宿主应用(Host)
    participant Client as MCP Client
    participant LLM as 大语言模型(LLM)
    participant MCPServer as MCP Server
    participant Tools as 工具实现
    
    User->>Host: 输入请求
    Host->>Client: 发送消息
    
    Client->>Client: 构建包含对话历史和工具定义的请求
    Client->>Client: 将用户问题及MCP工具添加到对话历史
    
    loop Agentic Loop
        Client->>LLM: 发送完整请求
        LLM-->>Client: 返回响应
        
        alt 响应中包含工具调用
            Client->>Client: 解析工具调用指令
            Client->>MCPServer: 调用SDK的callTool方法
            MCPServer->>Tools: 执行对应工具
            Tools-->>MCPServer: 返回执行结果
            MCPServer-->>Client: 返回工具执行结果
            Client->>Client: 将结果添加到历史
            note right of Client: 循环继续，再次调用LLM
        else 无工具调用或达到最大次数
            Client->>Client: 循环终止
        end
    end
    
    Client-->>Host: 返回最终响应
    Host-->>User: 展示结果

四、Agentic Loop循环实现

Agentic Loop是MCP系统实现工具调用的核心机制，它允许模型进行多次连续的工具调用，实现复杂任务分解和递进式解决问题。

4.1 Agentic Loop工作原理

Agentic Loop的核心思想是让大语言模型根据情况决定是直接回答还是通过工具获取更多信息。循环机制使模型能够分步骤解决复杂问题。

4.2 循环控制与终止条件

MCP系统通常设置最大循环次数（如20次）以防止无限循环。循环在以下情况终止：

1. 模型返回不包含工具调用的完整回答
2. 达到最大循环次数
3. 遇到无法处理的错误

4.3 关键步骤详解

1. 循环初始化：

   • 用户发送请求
   • Client构建所有可用工具的大模型请求参数
   • Client将用户问题以及MCP工具添加到对话历史
   • 设置循环计数器和最大循环次数

2. LLM推理：

   • Client向LLM发送完整请求
   • LLM返回响应，可能会包含工具调用指令，也可能会直接做出回答，由大模型自主推理是否需要借助工具

3. 工具调用处理：

   • Client解析响应，检查是否包含工具调用
   • 如有工具调用，Client调用@modelcontextprotocol/sdk里client的callTool方法
   • 获取mcp server工具执行结果并添加到历史

4. 循环继续或终止：

   • 若大模型继续返回工具调用且未达到最大循环次数，回到步骤2继续
   • 若大模型未返回工具调用或达到最大次数，终止循环，输出大模型最终回答

4.4 对话历史管理

在Agentic Loop中，每轮工具调用的结果都会被添加到对话历史中，这样LLM可以利用之前工具调用的结果进行推理。这种方式使LLM能够参考历史信息，实现多步骤的复杂问题解决。

完整系统协作流程示例:

// example.ts - 展示MCP系统协作
import { MCPHost } from './host';

async function runMCPExample() {
  // 创建并启动宿主应用
  const host = new MCPHost();
  await host.start();
  
  // 模拟用户提问
  const userQuestion = "计算5乘以3等于多少?";
  console.log(`用户: ${userQuestion}`);
  
  // 宿主应用处理用户消息
  const response = await host.handleUserMessage(userQuestion);
  console.log(`助手: ${response}`);
}

// 运行示例
runMCPExample().catch(console.error);

五、最终实现效果

六、总结

MCP的技术实现是一个多层次、多组件协作的过程，它通过标准化的协议实现了大语言模型与外部工具的无缝交互。通过Agentic Loop循环机制，系统能够支持复杂任务的递进式解决，而基于JSON-RPC 2.0协议的通信方式则确保了通信的可靠性和跨平台兼容性。这种设计使得开发者可以轻松地扩展和定制工具功能，从而大幅提升AI应用的能力边界。