![image.png](https://api.gaoredu.com/public/uploads/2025-09-27/image.png)

## 问题描述
首次初始化electron-vite项目，运行pnpm dev后出现了报错，一大堆，关键的就是提到了electron uninstall这个错误。


## 解决方法
如果是在node环境下，运行命令 node .\node_modules\electron\install.js 后，项目就可以正常启动了。


## 问题背景

最近在初始化一个新的 electron-vite 项目时，运行 `pnpm dev` 命令后遇到了一系列错误，其中最关键的报错信息提到了 **electron uninstall**。这个错误通常发生在首次创建或克隆 Electron 项目时，特别是在依赖安装完成后尝试启动开发环境的情况下。

## 错误现象

当你满怀期待地执行 `pnpm dev` 命令，准备开始 Electron 开发之旅时，却在控制台看到了类似以下的错误信息：

```
Error: Cannot find module 'electron'
// 或者
Error: Electron failed to install correctly
// 或者直接提到 electron uninstall 相关错误
```

这些错误通常伴随着一堆堆栈跟踪信息，让新手开发者感到困惑。

## 问题根源

这个问题的根本原因在于 Electron 的安装机制。Electron 包在安装过程中需要执行一个后安装脚本（post-install script）来下载实际的 Electron 二进制文件。有时候，由于网络问题、权限限制或安装过程被中断，这个步骤可能没有正确完成。

## 解决方案

### 方法一：手动运行安装脚本（推荐）

最简单的解决方法是手动运行 Electron 的安装脚本：

```bash
node ./node_modules/electron/install.js
```

这个命令会：
1. 检查当前平台（Windows、macOS 或 Linux）
2. 下载对应平台的 Electron 二进制文件
3. 将其安装到项目的 `node_modules` 目录中

### 方法二：重新安装依赖

如果上述方法不奏效，可以尝试删除 `node_modules` 文件夹并重新安装依赖：

```bash
# 删除 node_modules
rm -rf node_modules
# 或者 Windows 系统使用
rmdir /s node_modules

# 重新安装依赖
pnpm install
```

### 方法三：清除缓存并重新安装

有时候，缓存可能导致安装问题：

```bash
# 清除 npm/pnpm 缓存
pnpm store prune
# 或者
npm cache clean --force

# 然后重新安装依赖
pnpm install
```

### 方法四：检查网络和代理设置

如果你在公司网络或使用代理，可能需要检查网络设置：

```bash
# 设置 Electron 镜像（中国大陆用户）
npm config set electron_mirror https://npmmirror.com/mirrors/electron/

# 然后重新运行安装
node ./node_modules/electron/install.js
```

## 预防措施

为了避免将来再次遇到这个问题，可以考虑以下预防措施：

1. **使用可靠的网络环境**：在安装 Electron 项目时确保网络连接稳定

2. **设置环境变量**：对于经常需要安装 Electron 的环境，可以设置镜像源：
   ```bash
   # 在 .bashrc、.zshrc 或环境变量中设置
   export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
   ```

3. **使用 .npmrc 配置**：在项目根目录创建 `.npmrc` 文件：
   ```
   electron_mirror=https://npmmirror.com/mirrors/electron/
   ```

4. **考虑使用 yarn 或 pnpm**：这些包管理器有时能更好地处理依赖安装

## 深入理解

为什么需要这个额外的安装步骤？这是因为 Electron 实际上由两部分组成：
- 包含 JavaScript API 的 npm 包
- 平台特定的二进制可执行文件

当你安装 `electron` npm 包时，它只包含了 JavaScript 部分。实际的 Chromium + Node.js 运行时需要在安装后单独下载，这就是 `install.js` 脚本的作用。

## 总结

遇到 Electron uninstall 错误时不必惊慌，这通常只是 Electron 二进制文件没有正确下载导致的。通过运行 `node ./node_modules/electron/install.js` 命令，大多数情况下问题都能迎刃而解。如果问题依然存在，按照上述方法一步步排查，通常能找到解决方案。

希望这篇博客能帮助遇到类似问题的开发者顺利开始他们的 Electron 开发之旅！



首次初始化electron-vite项目，运行pnpm dev后出现了报错，一大堆，关键的就是提到了electron uninstall这个错误。

 初始化electron项目运行后报错 electron uninstall 解决方法

方法一：手动运行安装脚本（推荐）


> 本地构建一切正常，但一到 Vercel 就报错？这可能是 Git 大小写敏感性在作祟。本文将分享一个真实的故障排查案例，帮助你避免这个隐蔽的跨平台兼容性问题。

## 问题背景：诡异的构建失败

最近在部署一个 React 项目到 Vercel 时，遇到了一个令人困惑的问题：

```bash
# 本地构建（成功）
pnpm run build
# ✅ 一切正常

# Vercel 构建（失败）
22:32:28.979 src/api/Article.ts(27,43): error TS2307: 
Cannot find module './HttpClient' or its corresponding type declarations.
```

奇怪的是，相同的代码、相同的依赖、相同的构建命令，在本地能够完美构建，但在 Vercel 上却失败了。

## 问题根源：大小写敏感性的差异

经过排查，发现问题出在文件命名上：

- **实际文件名**: `httpClient.ts`（首字母小写）
- **导入语句**: `import HttpClient from './HttpClient';`（首字母大写）

这个差异在不同操作系统环境下表现不同：

### 操作系统差异

| 环境 | 大小写敏感性 | 行为 |
|------|-------------|------|
| Windows | 不敏感 | `./HttpClient` 和 `./httpClient` 都能找到文件 |
| macOS | 通常不敏感 | 同上 |
| Linux (Vercel) | 敏感 | 必须精确匹配 `./HttpClient` |

### Git 的配置陷阱

问题的深层原因在于 Git 的配置：

```bash
# 检查 Git 大小写配置
git config core.ignorecase
# 返回: true
```

当 `core.ignorecase=true` 时，Git 不会区分文件名的大小写，这就导致了：

1. 在 Windows/Mac 上开发时，一切正常
2. 文件被提交为 `httpClient.ts`（小写）
3. 但在 Linux 构建环境中，导入语句找不到对应的文件

## 解决方案：三步修复法

### 第一步：诊断问题

```bash
# 查看实际文件名
find . -name "*httpclient*" -type f
# 输出: ./src/api/httpClient.ts

# 查看 Git 记录的文件名
git ls-files | grep -i httpclient
# 输出: src/api/httpClient.ts
```

### 第二步：修复文件名

```bash
# 临时启用大小写敏感
git config core.ignorecase false

# 重命名文件（两步法避免冲突）
git mv src/api/httpClient.ts src/api/HttpClient.temp.ts
git mv src/api/HttpClient.temp.ts src/api/HttpClient.ts

# 提交修复
git commit -m "fix: correct HttpClient filename case sensitivity"
git push origin feat/reactpresss-config-v2
```

### 第三步：验证修复

```bash
# 在 GitHub 上确认文件名已更正
# 等待 Vercel 重新部署
# 构建应该成功通过
```

## 预防措施：建立防护网

### 1. 项目级配置

在项目中添加 `.gitconfig` 文件：

```ini
[core]
    ignorecase = false
```

### 2. ESLint 规则检查

配置 ESLint 检查文件名规范：

```javascript
// .eslintrc.js
module.exports = {
  rules: {
    'unicorn/filename-case': [
      'error',
      {
        cases: {
          camelCase: true,    // 工具函数：camelCase
          pascalCase: true    // 类/组件：PascalCase
        }
      }
    ]
  }
};
```

### 3. CI/CD 流水线检查

在 GitHub Actions 中添加检查：

```yaml
# .github/workflows/check-filenames.yml
name: Check Filename Case
on: [push, pull_request]

jobs:
  check-case:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Check filename consistency
        run: |
          for file in $(find src -name "*.ts" -o -name "*.tsx"); do
            filename=$(basename "$file" .ts | basename "$file" .tsx)
            if [[ $filename =~ [A-Z] ]]; then
              echo "✓ $filename uses PascalCase"
            else
              echo "⚠ $filename - consider using PascalCase for components/classes"
            fi
          done
```

### 4. 预提交钩子

使用 Husky 在提交前检查：

```bash
#!/bin/bash
# .husky/pre-commit
find src -name "*.ts" -o -name "*.tsx" | while read file; do
    base=$(basename "$file")
    if [[ $base =~ ^[a-z] ]] && [[ $base =~ \.(ts|tsx)$ ]]; then
        echo "警告: 建议类文件使用 PascalCase: $file"
    fi
done
```

## 深入理解：为什么会有这种差异？

### 历史原因

- **Windows**: 源于 DOS，设计初衷是用户友好，不区分大小写
- **Linux**: 源于 UNIX，强调精确和一致性，区分大小写
- **macOS**: 基于 UNIX，但默认文件系统 HFS+/APFS 通常不区分大小写

### Git 的设计选择

Git 为了跨平台兼容性，默认采用 `core.ignorecase=true`，这在实际开发中带来了便利，但也埋下了隐患。

## 最佳实践总结

1. **统一命名规范**
   - 类文件使用 PascalCase: `HttpClient.ts`
   - 工具函数使用 camelCase: `formatDate.ts`
   - 配置文件使用 kebab-case: `app-config.ts`

2. **团队协作约定**
   - 新成员入职时强调文件名规范
   - 代码审查时注意文件名大小写
   - 使用工具自动化检查

3. **跨平台开发策略**
   - 主要开发环境尽量与生产环境一致（推荐使用 Linux 容器）
   - 定期在 CI/CD 环境中测试构建
   - 建立快速反馈机制

## 结语

这个看似简单的"大小写"问题，实际上涉及操作系统设计、Git 工作原理、团队协作规范等多个层面。在跨平台开发日益普遍的今天，我们需要更加重视这类环境差异导致的问题。

**记住：在本地能运行只是第一步，在生产环境能运行才是真正的完成。**

希望通过这个案例，你能避免类似的陷阱，建立更健壮的开发工作流。如果你也遇到过类似的跨平台兼容性问题，欢迎在评论区分享你的经验和解决方案！

---

*本文基于真实故障排查经历撰写，项目已成功部署。特别感谢 Vercel 清晰的错误日志，让问题定位变得容易。*

本地构建一切正常，但一到 Vercel 就报错？这可能是 Git 大小写敏感性在作祟。本文将分享一个真实的故障排查案例，帮助你避免这个隐蔽的跨平台兼容性问题。

从 Vercel 构建失败谈 Git 大小写敏感性问题：一个容易被忽视的跨平台陷阱

问题根源：大小写敏感性的差异

深入理解：为什么会有这种差异？

## 问题概述
在使用 NestJS 构建安装向导服务时，开发人员经常会遇到一系列棘手问题，包括端口占用冲突、进程异常关闭、服务启动失败，以及安装成功后前端轮询无法正确检测服务状态等问题。这些问题不仅影响用户体验，还可能导致安装流程完全失败。

## 问题一：偶发进程关闭异常

### 根本原因分析
1. **竞争条件**：安装服务器关闭与主应用启动之间存在时间差，导致资源访问冲突
2. **状态管理缺失**：缺乏服务器状态跟踪机制，无法判断服务器是否已完全关闭
3. **异常处理不足**：关闭操作缺少超时控制和错误恢复机制
4. **资源未完全释放**：连接和套接字未正确清理，导致端口占用

### 核心解决方案代码

```typescript
// 服务器状态跟踪接口
interface ServerState {
  server: any;
  isClosing: boolean;
  isListening: boolean;
}

// 全局状态管理
const serverState: ServerState = {
  server: null,
  isClosing: false,
  isListening: false
};

// 安全关闭服务器函数
const safelyCloseServer = async (): Promise<void> => {
  if (!serverState.server || serverState.isClosing) {
    return;
  }
  
  serverState.isClosing = true;
  
  return new Promise((resolve) => {
    // 设置超时强制关闭
    const timeout = setTimeout(() => {
      if (serverState.server.closeAllConnections) {
        serverState.server.closeAllConnections();
      }
      serverState.server = null;
      serverState.isClosing = false;
      serverState.isListening = false;
      resolve();
    }, 3000);
    
    // 尝试正常关闭
    serverState.server.close((err: any) => {
      clearTimeout(timeout);
      if (err && err.code !== 'ERR_SERVER_NOT_RUNNING') {
        console.warn('Server close warning:', err.message);
      }
      serverState.server = null;
      serverState.isClosing = false;
      serverState.isListening = false;
      resolve();
    });
  });
};
```

## 问题二：服务启动后轮询异常

### 根本原因分析
1. **时机不同步**：前端轮询开始时，后端服务尚未完全初始化完成
2. **URL 不一致**：前端使用固定URL轮询，但后端服务可能使用不同端口
3. **缺少超时处理**：轮询请求可能无限期等待，导致浏览器阻塞
4. **错误处理不足**：网络错误或服务暂时不可用时缺乏重试机制

### 核心解决方案代码

```typescript
// 后端：安装完成后返回正确的服务器URL
app.post('/install', async (req, res) => {
  try {
    // ... 安装逻辑
    
    res.json({ 
      success: true, 
      message: 'Installation completed! Server will restart.',
      serverUrl: site.serverUrl || 'http://localhost:3002' // 返回实际使用的URL
    });
    
    // 确保响应已发送后再关闭服务器
    res.on('finish', async () => {
      await safelyCloseServer();
      await startMainApplication();
    });
  } catch (error: any) {
    res.status(400).json({ 
      success: false, 
      message: `Installation failed: ${error.message}` 
    });
  }
});
```

```javascript
// 前端：智能轮询机制
let redirectAttempts = 0;
const maxRedirectAttempts = 30;

function startServerStatusCheck() {
  const checkInterval = setInterval(() => {
    if (redirectAttempts >= maxRedirectAttempts) {
      clearInterval(checkInterval);
      showError('Server did not start in time');
      return;
    }
    
    // 使用HEAD请求和超时控制
    fetch(`${serverUrl}/api`, { 
      method: 'HEAD',
      signal: AbortSignal.timeout(3000)
    })
    .then(response => {
      if (response.ok) {
        clearInterval(checkInterval);
        window.location.href = `${serverUrl}/api`;
      } else {
        redirectAttempts++;
      }
    })
    .catch(() => {
      redirectAttempts++;
      updateStatusMessage(`Waiting for server... (${redirectAttempts}/${maxRedirectAttempts})`);
    });
  }, 2000);
}
```

## 问题三：端口占用与服务启动失败

### 根本原因分析
1. **端口竞争**：多个服务实例尝试绑定相同端口
2. **进程残留**：先前实例异常退出，端口未释放
3. **缺乏端口管理**：没有端口检测和自动回退机制

### 核心解决方案代码

```typescript
// 端口检测函数
const checkPort = (port: number): Promise<boolean> => {
  return new Promise((resolve) => {
    const server = net.createServer();
    server.once('error', () => resolve(false));
    server.once('listening', () => server.once('close', () => resolve(true)).close());
    server.listen(port);
  });
};

// 查找可用端口
const findAvailablePort = async (startPort: number): Promise<number> => {
  for (let port = startPort; port < startPort + 10; port++) {
    if (await checkPort(port)) {
      return port;
    }
  }
  throw new Error(`No available ports found in range ${startPort}-${startPort + 9}`);
};

// 等待端口释放
const waitForPort = async (port: number, timeout = 30000): Promise<boolean> => {
  const startTime = Date.now();
  
  while (Date.now() - startTime < timeout) {
    if (await checkPort(port)) {
      return true;
    }
    await new Promise(resolve => setTimeout(resolve, 500));
  }
  
  return false;
};
```

## 综合解决方案实施

### 1. 安装流程优化
```typescript
const main = async () => {
  try {
    setupSignalHandlers();
    
    const envPath = join(__dirname, '../.env');
    if (fs.existsSync(envPath)) {
      console.log('[ReactPress] Environment file exists, starting main application');
      await startMainApplication();
      return;
    }
    
    console.log('[ReactPress] Starting installation wizard');
    await runInstallationWizard();
    
  } catch (error) {
    console.error('[ReactPress] Fatal error:', error);
    await safelyCloseServer();
    process.exit(1);
  }
};
```

### 2. 主应用启动流程
```typescript
const startMainApplication = async (): Promise<void> => {
  try {
    // 确保安装服务器完全关闭
    await safelyCloseServer();
    
    // 延迟启动以确保端口释放
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // 动态导入以避免在安装阶段加载 NestJS
    const { bootstrap } = await import('./starter');
    await bootstrap();
  } catch (error) {
    console.error('Failed to start main application:', error);
    process.exit(1);
  }
};
```

## 总结

通过以上解决方案，我们成功解决了 NestJS 安装服务中的三个核心问题：

1. **进程关闭异常**：通过状态跟踪和安全关闭机制，确保服务器完全关闭后再启动新服务
2. **轮询异常**：通过智能轮询机制、超时控制和正确的URL管理，确保前端能正确检测服务状态
3. **端口占用**：通过端口检测、等待和自动查找机制，避免端口冲突

这些解决方案不仅提高了安装服务的稳定性和可靠性，还显著改善了用户体验，使安装过程更加顺畅和可预测。关键技术点包括状态管理、资源清理、超时控制和渐进式回退策略，这些原则同样适用于其他类似的服务器应用场景。

在使用 NestJS 构建安装向导服务时，开发人员经常会遇到一系列棘手问题，包括端口占用冲突、进程异常关闭、服务启动失败，以及安装成功后前端轮询无法正确检测服务状态等问题。这些问题不仅影响用户体验，还可能导致安装流程完全失败。

NestJS 安装服务稳定性问题分析与解决方案

问题三：端口占用与服务启动失败

# 事件循环

## 浏览器的进程模型

### 何为进程？

程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZV4E..png)


每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

### 何为线程？

有了进程后，就可以运行程序的代码了。

运行代码的「人」称之为「线程」。

一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。

如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZVBS..png)

### 浏览器有哪些进程和线程？

**浏览器是一个多进程多线程的应用程序**

浏览器内部工作极其复杂。

为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZVJ6..png)

> 可以在浏览器的任务管理器中查看当前的所有进程

其中，最主要的进程有：

1. 浏览器进程

   主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

2. 网络进程

   负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。

3. **渲染进程**（本节课重点讲解的进程）

   渲染进程启动后，会开启一个**渲染主线程**，主线程负责执行 HTML、CSS、JS 代码。

   默认情况下，浏览器会为每个标签页开启一个新的渲染进程，以保证不同的标签页之间不相互影响。

   > 将来该默认模式可能会有所改变，有兴趣的同学可参见[chrome官方说明文档](https://chromium.googlesource.com/chromium/src/+/main/docs/process_model_and_site_isolation.md#Modes-and-Availability)

## 渲染主线程是如何工作的？

渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：

- 解析 HTML
- 解析 CSS
- 计算样式
- 布局
- 处理图层
- 每秒把页面画 60 次
- 执行全局 JS 代码
- 执行事件处理函数
- 执行计时器的回调函数
- ......

> 思考题：为什么渲染进程不适用多个线程来处理这些事情？

要处理这么多的任务，主线程遇到了一个前所未有的难题：如何调度任务？

比如：

- 我正在执行一个 JS 函数，执行到一半的时候用户点击了按钮，我该立即去执行点击事件的处理函数吗？
- 我正在执行一个 JS 函数，执行到一半的时候某个计时器到达了时间，我该立即去执行它的回调吗？
- 浏览器进程通知我“用户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪一个呢？
- ......

渲染主线程想出了一个绝妙的主意来处理这个问题：排队

![image-20220809223027806](http://mdrs.yuanjin.tech/img/202208092230847.png)

1. 在最开始的时候，渲染主线程会进入一个无限循环
2. 每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。
3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务

这样一来，就可以让每个任务有条不紊的、持续的进行下去了。

**整个过程，被称之为事件循环（消息循环）**

## 若干解释

### 何为异步？

代码在执行过程中，会遇到一些无法立即处理的任务，比如：

- 计时完成后需要执行的任务 —— `setTimeout`、`setInterval`
- 网络通信完成后需要执行的任务 -- `XHR`、`Fetch`
- 用户操作后需要执行的任务 -- `addEventListener`

如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于「阻塞」的状态，从而导致浏览器「卡死」

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZUX0..png)

**渲染主线程承担着极其重要的工作，无论如何都不能阻塞！**

因此，浏览器选择**异步**来解决这个问题

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZVQK..png)

使用异步的方式，**渲染主线程永不阻塞**

> 面试题：如何理解 JS 的异步？
>
> 
>
> 参考答案：
>
> JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。
>
> 而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。
>
> 如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。
>
> 所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。
>
> 在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

### JS为何会阻碍渲染？

先看代码

```html
<h1>Mr.Yuan is awesome!</h1>
<button>change</button>
<script>
  var h1 = document.querySelector('h1');
  var btn = document.querySelector('button');

  // 死循环指定的时间
  function delay(duration) {
    var start = Date.now();
    while (Date.now() - start < duration) {}
  }

  btn.onclick = function () {
    h1.textContent = '袁老师很帅！';
    delay(3000);
  };
</script>
```

点击按钮后，会发生什么呢？

<见具体演示>

### 任务有优先级吗？

任务没有优先级，在消息队列中先进先出

但**消息队列是有优先级的**

根据 W3C 的最新解释:

- 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。
  在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
- 浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行
  https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

> 随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法

在目前 chrome 的实现中，至少包含了下面的队列：

- 延时队列：用于存放计时器到达后的回调任务，优先级「中」
- 交互队列：用于存放用户操作后产生的事件处理任务，优先级「高」
- 微队列：用户存放需要最快执行的任务，优先级「最高」

> 添加任务到微队列的主要方式主要是使用 Promise、MutationObserver
>
> 
>
> 例如：
>
> ```js
> // 立即把一个函数添加到微队列
> Promise.resolve().then(函数)
> ```

> 浏览器还有很多其他的队列，由于和我们开发关系不大，不作考虑

> 面试题：阐述一下 JS 的事件循环
>
> 
>
> 参考答案：
>
> 事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。
>
> 在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。
>
> 过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。
>
> 根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

> 面试题：JS 中的计时器能做到精确计时吗？为什么？
>
> 
>
> 参考答案：
>
> 不行，因为：
>
> 1. 计算机硬件没有原子钟，无法做到精确计时
> 2. 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差
> 3. 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差
> 4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差

深入剖析JavaScript的事件循环

### 实现一个类似于jQuery功能的轻量级框架

在现代前端开发中，jQuery仍然是一个经典且强大的工具库，但有时候，出于性能优化或自定义功能的需求，我们可能需要实现一个轻量级的框架来满足特定的需求。本文将带你一步一步实现一个类似于jQuery功能的轻量级框架，称之为`Xframe`。

#### 一、项目结构与设计思路

##### 1. 项目结构
我们的项目将分为几个主要模块：
- **主框架**：用于获取DOM元素集合并支持链式调用。
- **公共框架**：包含字符串处理、数组操作、数据类型检测等通用功能。
- **事件框架**：实现事件绑定和解绑功能。
- **CSS框架**：提供CSS类操作、元素显示隐藏、尺寸获取等功能。
- **属性框架**：操作DOM元素的属性。
- **内容框架**：操作DOM元素的内容（HTML、文本、值）。
- **动画框架**：实现简单的动画效果。

##### 2. 设计思路
- **链式调用**：通过返回一个对象实例本身来支持链式调用。
- **扩展性**：使用`extend`方法允许动态添加方法。
- **模块化**：每个功能模块都封装在单独的闭包中，以减少全局变量的污染。

#### 二、实现主框架

首先，我们需要实现一个基础的框架，能够获取DOM元素并支持链式调用。

```javascript
(function (w) {
    var xframe = function (selector, context) {
        return this.init.apply(this, [selector, context]);
    };

    xframe.prototype.init = function (selector, context) {
        this.length = 0;
        if (typeof selector === 'string') {
            var nodeList = (context || document).querySelectorAll(selector);
            this.length = nodeList.length;
            for (var i = 0; i < this.length; i++) {
                this[i] = nodeList[i];
            }
        } else if (selector.nodeType) {
            this[0] = selector;
            this.length = 1;
        }
        return this;
    };

    var $$ = function (selector, context) {
        if (typeof selector === 'function') {
            w.onload = selector;
        } else {
            return new xframe(selector, context);
        }
    };

    $$.extend = function () {
        var len = arguments.length, target = null, i = 1, key;
        if (len === 0) return;
        if (len === 1) {
            target = xframe.prototype;
            i--;
        } else {
            target = arguments[0];
        }
        for (; i < len; i++) {
            for (key in arguments[i]) {
                target[key] = arguments[i][key];
            }
        }
        return target;
    };

    w.xframe = w.$ = $$;
})(window);
```

#### 三、实现功能模块

##### 1. 公共框架

公共框架包含一些基础的功能，如字符串处理、数组操作等。这里仅给出结构，具体实现可根据需求编写。

```javascript
(function (xframe) {
    // 字符串处理模块
    xframe.extend(xframe, {
        // 实现 ltrim, rtrim, trim 等方法
    });

    // 数组相关模块
    xframe.extend(xframe, {
        // 实现数组操作方法
    });

    // 数据类型检验模块
    xframe.extend(xframe, {
        isNumber: function (obj) {
            return typeof obj === 'number' && !isNaN(obj);
        },
        // 实现其他数据类型检测方法
    });
})(xframe);
```

##### 2. 事件框架

事件框架实现事件绑定和解绑功能。

```javascript
(function (xframe) {
    xframe.extend({
        on: function (event, handler) {
            return this.each(function (index, element) {
                element.addEventListener(event, handler);
            });
        },
        // 实现 off 方法
    });
})(xframe);
```

##### 3. CSS框架

CSS框架提供CSS类操作、元素显示隐藏、尺寸获取等功能。

```javascript
(function (xframe) {
    xframe.extend({
        css: function (property, value) {
            return this.each(function (index, element) {
                element.style[property] = value;
            });
        },
        show: function () {
            return this.css('display', '');
        },
        hide: function () {
            return this.css('display', 'none');
        },
        // 实现其他CSS相关方法
    });
})(xframe);
```

##### 4. 属性框架

属性框架提供操作DOM元素属性的方法。

```javascript
(function (xframe) {
    xframe.extend({
        attr: function (name, value) {
            if (value !== undefined) {
                return this.each(function (index, element) {
                    element.setAttribute(name, value);
                });
            } else {
                return this[0] ? this[0].getAttribute(name) : null;
            }
        },
        addClass: function (className) {
            return this.each(function (index, element) {
                element.classList.add(className);
            });
        },
        removeClass: function (className) {
            return this.each(function (index, element) {
                element.classList.remove(className);
            });
        },
    });
})(xframe);
```

##### 5. 内容框架

内容框架提供操作DOM元素内容的方法。

```javascript
(function (xframe) {
    xframe.html = function (htmlString) {
        if (htmlString !== undefined) {
            return this.each(function (index, element) {
                element.innerHTML = htmlString;
            });
        } else {
            return this[0] ? this[0].innerHTML : null;
        }
    };

    xframe.text = function (textString) {
        if (textString !== undefined) {
            return this.each(function (index, element) {
                element.textContent = textString;
            });
        } else {
            return this[0] ? this[0].textContent : null;
        }
    };

    xframe.val = function (value) {
        if (value !== undefined) {
            return this.each(function (index, element) {
                element.value = value;
            });
        } else {
            return this[0] ? this[0].value : null;
        }
    };
})(xframe);
```

##### 6. 动画框架

动画框架实现简单的动画效果。这里只给出结构，具体实现可根据需求编写。

```javascript
(function () {
    function Animate() {
        // 动画实现
    }

    Animate.prototype = {
        // 动画方法
    };

    // 将Animate绑定到xframe上
    xframe.animate = function (options) {
        return new Animate(this, options);
    };
})();
```

#### 四、总结

通过以上步骤，我们实现了一个类似于jQuery功能的轻量级框架`Xframe`。它包含了获取DOM元素、事件处理、CSS操作、属性操作、内容操作以及动画功能。你可以根据自己的需求，进一步完善和扩展这个框架。

`Xframe`不仅可以帮助你理解jQuery的底层实现原理，还可以作为一个轻量级的选择，满足你项目中特定的需求。希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！

在现代前端开发中，jQuery仍然是一个经典且强大的工具库，但有时候，出于性能优化或自定义功能的需求，我们可能需要实现一个轻量级的框架来满足特定的需求。本文将带你一步一步实现一个类似于jQuery功能的轻量级框架，称之为`Xframe`。

jQuery框架源码解析与实现

实现一个类似于jQuery功能的轻量级框架


> 在现代Web开发中，搜索引擎优化（SEO）是提高网站可见性和流量的重要手段。Next.js作为一个功能强大的React框架，凭借其内置的SEO支持以及丰富的工具和策略，成为构建高性能、SEO友好的Web应用的首选框架之一。本文将深入探讨Next.js的SEO优化方案，并通过代码示例展示具体实现方法。

#### 一、Next.js的SEO优势

Next.js提供了多种内置功能，使得开发者能够轻松实现SEO优化。这些功能包括但不限于：

1. **自动处理`<head>`标签**：Next.js提供了`Head`组件，允许开发者动态管理页面的元信息，如标题、描述、canonical等。
2. **预渲染技术**：Next.js支持静态生成（Static Generation, SG）和服务器端渲染（Server-Side Rendering, SSR），这两种技术都能提供完整的HTML结构供搜索引擎爬虫抓取，从而提升SEO排名。
3. **基于文件的路由系统**：Next.js使用基于文件的路由系统，使得创建干净且对SEO友好的URL变得容易。
4. **next-seo库**：next-seo是一个专门为Next.js设计的库，它提供了一组React组件，允许开发者轻松地将与SEO相关的元标记添加到页面中。

#### 二、Next.js SEO优化方案

##### 1. 使用`Head`组件管理页面元信息

Next.js的`Head`组件允许开发者在页面中设置和管理`<head>`标签，这些标签对于搜索引擎来说非常重要。通过`Head`组件，可以设置页面的标题、描述信息以及关键词等，从而吸引搜索引擎和用户的关注，提升网站在搜索结果中的点击率。

```jsx
import Head from 'next/head';

const HomePage = () => (
  <>
    <Head>
      <title>Home Page</title>
      <meta name="description" content="This is the description of the Home Page" />
    </Head>
    <h1>Welcome to the Home Page!</h1>
  </>
);

export default HomePage;
```

##### 2. 使用next-seo库添加元标记

next-seo是一个流行的库，它允许开发者轻松地将与SEO相关的元标记添加到Next.js应用程序中。搜索引擎使用这些标签（如标题和描述标签）来了解页面内容并将其显示在搜索结果中。

首先，需要安装next-seo库：

```bash
npm install next-seo
# 或者
yarn add next-seo
```

然后，在页面中导入并使用next-seo组件：

```jsx
import Head from 'next/head';
import { DefaultSeo, SEO } from 'next-seo';

const Home = () => {
  return (
    <div>
      <Head>
        <title>My Next.js App</title>
      </Head>
      <SEO
        title="My Next.js App"
        description="This is my Next.js app, it's awesome!"
        openGraph={{
          title: 'My Next.js App',
          description: 'This is my Next.js app, it\'s awesome!',
          url: 'https://mynextjsapp.com',
          images: [
            {
              url: 'https://mynextjsapp.com/og-image.jpg',
              alt: 'My Next.js App',
            },
          ],
          site_name: 'My Next.js App',
        }}
      />
      <p>Welcome to my Next.js app!</p>
    </div>
  );
};

export default Home;
```

在这个示例中，我们使用了`SEO`组件来设置页面的标题、描述以及OpenGraph标签。同时，`Head`组件中也设置了标题标签，这是Next.js中添加元标签的标准方式。

##### 3. 优化URL结构

合理的URL结构能提升搜索引擎对网站的认可度，从而带来更好的排名和流量。Next.js使用基于文件的路由系统，使得创建干净且对SEO友好的URL变得容易。此外，Next.js还支持动态路由，允许开发者创建具有良好结构的URL。

```jsx
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;
  return <p>Post: {id}</p>;
};

export default Post;
```

在这个示例中，我们创建了一个动态路由页面`Post`，通过`useRouter`钩子获取路由参数`id`，并将其显示在页面中。

##### 4. 内容质量和关键词优化

除了技术层面的优化，还需要关注网站的内容质量和关键词优化。Next.js的静态生成和服务端渲染能够帮助实现高质量的内容展示，而在内容中合理地布局关键词，并进行内部链接的优化，也是提升网站SEO的重要策略。

##### 5. 使用预渲染技术提升性能

Next.js提供了静态生成和服务器端渲染两种预渲染技术，这两种技术都能提供完整的HTML结构供搜索引擎爬虫抓取，从而提升SEO排名。同时，预渲染技术还能显著提升页面加载速度和服务器资源利用率。

- **静态生成**：适用于内容相对固定、更新频率较低的页面。

```jsx
export const getStaticProps = async () => {
  const posts = await fetchPostsFromApi(); // 获取静态数据
  return {
    props: { posts },
    revalidate: 60, // 可选，指定数据刷新间隔（秒）
  };
};

function HomePage({ posts }) {
  // 页面渲染逻辑
}
```

- **服务器端渲染**：适用于需要实时数据、个性化内容或动态路由的应用场景。

```jsx
export const getServerSideProps = async (context) => {
  const currentUserId = context.req.user?.id; // 从请求上下文中获取当前用户ID
  const personalizedData = await fetchPersonalizedData(currentUserId); // 获取实时数据
  return {
    props: { personalizedData },
  };
};

function UserProfilePage({ personalizedData }) {
  // 页面渲染逻辑
}
```

##### 6. 图片优化

在网站开发中，图片通常是占用较大资源的内容。Next.js提供了`Image`组件来进行图片优化，包括懒加载、响应式加载等策略，以提升页面的加载速度和性能表现。

```jsx
import Image from 'next/image';

function BlogPost({ post }) {
  return (
    <>
      <Image
        src={post.featuredImage.url}
        alt={post.title}
        width={800}
        height={450}
        layout="responsive"
      />
      {/* 页面内容 */}
    </>
  );
}
```

##### 7. 代码分割和懒加载

Next.js支持代码分割和按需加载，通过动态导入和懒加载的方式，可以将页面和组件进行分割，按需加载，以减少初始加载时的资源压力，提升页面的响应速度。

```jsx
const SomeComponent = React.lazy(() => import('../components/SomeComponent'));

function MyPage() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <SomeComponent />
      </Suspense>
    </div>
  );
}
```

##### 8. 缓存策略

通过合理地设置HTTP缓存策略、使用CDN加速等手段，可以有效地提升网站的访问速度和性能表现，为用户提供更好的体验。

#### 三、总结

Next.js凭借其强大的静态生成、服务器端渲染以及对SEO的深度支持，已成为构建高性能、高SEO友好Web应用的首选框架之一。通过合理的URL结构、页面标题和描述、内容质量和关键词优化，以及图片优化、代码分割和懒加载、缓存策略等手段，可以提升网站在搜索引擎中的排名，以及网站的加载速度和用户体验。这些策略都是基于Next.js丰富的特性和工具而提供的，可以帮助开发者构建性能优秀、SEO友好的Web应用。

在Next.js的SEO优化过程中，next-seo库是一个不可或缺的工具，它使得添加和管理SEO元标记变得更加容易和高效。同时，Next.js的预渲染技术、动态路由、图片优化等功能也为SEO优化提供了强有力的支持。

作为开发者，我们应该充分利用Next.js的这些功能和工具，不断优化和提升网站的SEO效果，从而为网站带来更多的流量和曝光机会。希望本文能够为你的Next.js SEO优化之路提供一些有用的启示和帮助。

在现代Web开发中，搜索引擎优化（SEO）是提高网站可见性和流量的重要手段。Next.js作为一个功能强大的React框架，凭借其内置的SEO支持以及丰富的工具和策略，成为构建高性能、SEO友好的Web应用的首选框架之一。本文将深入探讨Next.js的SEO优化方案，并通过代码示例展示具体实现方法。

Next.js SEO优化方案全解析

# Ajax 

## 1. 介绍一下ajax并代码实现 
### 1.1 基本概念 
>  avaScript 和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

[Ajax | MDN](https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX)


### 1.2 创建一个简单的Ajax

 - 创建 XMLHttpRequest 对象
```js
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
```

 - 绑定onreadystatechange 事件
```js
httpRequest.onreadystatechange = function(){
    // Process the server response here.
};
```

 - 向服务器发送请求
```js
httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();
```

完整的例子
```js
function ajax(url, cb) {
  let xhr;
  if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      cb(xhr.responseText);
    }
  }
  xhr.open('GET', url, true);
  xhr.send();
}
```

### 1.3 httpRequest.readyState的值(熟记)

 - 0 (未初始化) or (请求还未初始化)
 - 1 (正在加载) or (已建立服务器链接)
 - 2 (加载成功) or (请求已接受)
 - 3 (交互) or (正在处理请求)
 - 4 (完成) or (请求已完成并且响应已准备好)


### 1.4 访问服务端返回的数据

 - httpRequest.responseText
   - 服务器以文本字符的形式返回
 - httpRequest.responseXML
   - 以 XMLDocument 对象方式返回，之后就可以使用JavaScript来处理


### 1.5 GET 注意事项

 -  如果不设置响应头 `Cache-Control: no-cache` 浏览器将会把响应缓存下来而且再也不无法重新提交请求。你也可以添加一个总是不同的 GET 参数，比如时间戳或者随机数 (详情见 [bypassing the cache](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache))


### 1.6 POST 请求
> [!NOTE]
> POST请求则需要设置`RequestHeader`告诉后台传递内容的编码方式以及在send方法里传入对应的值

```js
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type": "application/x-www-form-urlencoded");
xhr.send("key1=value1&key2=value2");
```


### 1.7 Ajax如何携带cookie(面试加分)
 - ajax会自动带上同源的cookie，不会带上不同源的cookie
 - 可以通过前端设置withCredentials为true， 后端设置Header的方式让ajax自动带上不同源的cookie，但是这个属性对同源请求没有任何影响。会被自动忽略。

[withCredentials | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials)

```js
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);
```


【计算机网络】Ajax

# HTML基础强化
## 1.如何理解HTML？
1. HTML类似于一份word“文档”
2. 描述文档的“结构”
3. 有区块和大纲

## 2.对WEB标准的理解？
> Web标准是由一系列标准组合而成。一个网页主要由三部分组成：结构层、表现层和行为层。

对应的标准也分三方面：
+ 结构化标准语言主要包括XHTML和HTML以及XML，
+ 表现层标准语言主要包括CSS，
+ 行为标准主要包括对象模型，DOM、ECMAScript等

### 2.1 结构层标准
> 结构化标准语言，就是W3C规定的主要包括HTML和XHTML以及XML，在页面body里面我们写入的标签都是为了页面的结构。

1. 标签的书写，需要开始和结束。单便签除外；
2. 块级元素不能放在p标签里面。li内可以包含div标签。
3. 块元素里面可以放在块和内联，特殊的 p和 h1—h6里面不要放块元素，li和div可以放很多。因为这两个标签，本身就有容器的属性
4. 内联里面要放内联，不要放块。（嵌套关系）
5. 结构与表现分离
6. 命名一定要规范

### 2.2 表现层标准
> 表现标准语言主要包括CSS（Cascading Style Sheets）层叠式样式表，通过CSS样式表，W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言，通过CSS样式可以是页面的结构标签更具美感。

1.	尽可能使用外部引入的方式，达到分离的目的
2.	CSS选择器，优先级
3.	代码简洁

### 2.3 行为层标准
> 行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，标准主要包括对象模型（如W3C DOM）、ECMAScript并要求这三部分分离。

+ DOM是Document Object Model文档对象模型的缩写。DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

+ ECMAScript是ECMA(EuropeanComputer Manufacturers Association)制定的标准脚本语言（JAVAScript）

## 3.对W3C的认识？
> W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范。

主要包含如下几点：
### 3.1 对于结构的要求
+ 1）标签字母要小写
+ 2）标签要闭合
+ 3）标签不允许随意嵌套
  
### 3.2 对于css和js的要求
+ 1）尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
+ 2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版。
+ 3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
  
## 4.什么是前端语义化？
> [!NOTE]
>语义化就是是让机器可以读懂内容，web页面的解析是由搜索引擎来进行搜索，机器来解析。

### 4.1 标签是有语义的
h1~h6、thead、ul、ol等标签，初期的语义化标签：程序员利用HTML标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加如id="footer"或者class="footer"的属性（值）（使用有语义的对于需要声明的变量和class，id）
### 4.2 HTML5的语义标签
w3C采用了header/footer; section（章节、页眉、页脚）/article（内容区域）; nav导航；aside 不重要的内容；em(emphasize)/strong增强; i(icon)制作图标

## 5.谈一下页面布局架构？
+ CSS布局：table布局，float布局，flex布局（瀑布流布局），inline-block布局
+ 三大框架，页面架构

## 6.HTML的版本问题？
1. HTML4/4.0.1(SGML)(标签允许不结束)
2. XHTML(XML)（标签必须结束，属性必须带引号，属性必须有值，标签属性必须有值）
3. HTML5（类似于HTML4的写法）

> [!NOTE]
> 关键点：HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言

## 7.HTML5新增的内容有哪些？
1. 新的区块标签：section,article,nav,aside
2. 表单增强：日期、时间、搜索（修改type的类型实现）；表单验证；placeholder
3. 语义增强：header/footer; section/article; nav导航；aside 不重要的内容；em(emphasize)/strong增强; i(icon)制作图标

## 8.HTML的元素分类？
+ 块级元素block（方块形状，占据一整行）：div ul ol li dl dt dd h1 h2 h3 h4…p
+ 行内元素inline(一行中的某个位置)：a b span img input select strong（强调的语气）
+ inline-block(行内，有宽高属性)：selection

> [!NOTE]
> 行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
> 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
> 空元素:br、meta、hr、link、input、img

## 9.HTML嵌套关系？
1. 块级元素可以包含行内元素
2. 块级元素不一定能包含块级元素(p标签不能包含div标签)
3. 行内元素“一般”不能包含块级元素（a包含div是可以的）

## 10.HTML的默认样式？
1. 默认样式的意义
2. 默认样式代理的问题
3. CSS Reset 的作用

```css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
```

## 11.使用ajax方式来提交数据可以不使用form标签吗？
1. form标签可以使用submit, reset
2. 使用form可以直接一次性获取所有的form窗体的数据属性
3. form可以较好地实现表单验证等功能

### 11.1 Form表单提交
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="login test">   
</head>
<body>
<div id="form-div">
    <form id="form1" action="/users/login" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="submit" value="登录">&nbsp<input type="reset" value="重置"></p>
    </form>
</div>
</body>
</html>
```
### 11.2 ajax提交
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="ajax方式">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        function login() {
            $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/login" ,//url
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
    </script>
</head>
<body>
<div id="form-div">
    <form id="form1" onsubmit="return false" action="##" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登录" onclick="login()">&nbsp;<input type="reset" value="重置"></p>
    </form>
</div>
</body>
</html>
```
> [!NOTE]
> 扩展思考：Form表单提交数据给一个非同源的网址，如在A网址(http://www.A.com)上直接向B网站(http://www.B.com)发送数据请求, 为什么不会触发浏览器的同源策略限制呢？

【HTML相关】HTML基础强化

11.使用ajax方式来提交数据可以不使用form标签吗？

### 实现一个类型判断函数

1. 判断null
2. 判断基础类型
3. 使用`Object.prototype.toString.call(target)`来判断**引用类型**

> [!NOTE]
> 注意： 一定是使用`call`来调用，不然是判断的Object.prototype的类型

之所以要先判断是否为基本类型是因为：虽然`Object.prototype.toString.call()`能判断出某值是：number/string/boolean，但是其实在包装的时候是把他们先转成了对象然后再判断类型的。 但是JS中包装类型和原始类型还是有差别的，因为对一个包装类型来说，typeof的值是object

```javascript
/**
 * 类型判断
 */
function getType(target) {
  //先处理最特殊的Null
  if(target === null) {
    return 'null';
  }
  //判断是不是基础类型
  const typeOfT = typeof target
  if(typeOfT !== 'object') {
    return typeOfT;
  }
  //肯定是引用类型了
  const template = {
    "[object Object]": "object",
    "[object Array]" : "array",
    "[object Function]": "function",
    // 一些包装类型
    "[object String]": "object - string",
    "[object Number]": "object - number",
    "[object Boolean]": "object - boolean"
  };
  const typeStr = Object.prototype.toString.call(target);
  return template[typeStr];
}
```

# 升级版本
```js
// typeof可以检测基本数据类型
// Undefined, Null, Boolean, Number, String, Objec
// undefined, object, boolean, number, string, object

// 以下是11种：
var number = 1;          // [object Number]
var string = '123';      // [object String]
var boolean = true;      // [object Boolean]
var und = undefined;     // [object Undefined]
var nul = null;          // [object Null]
var obj = {a: 1}         // [object Object]
var array = [1, 2, 3];   // [object Array]
var date = new Date();   // [object Date]
var error = new Error(); // [object Error]
var reg = /a/g;          // [object RegExp]
var func = function a(){}; // [object Function]

function checkType() {
    for (var i = 0; i < arguments.length; i++) {
        console.log(Object.prototype.toString.call(arguments[i]))
    }
}

checkType(number, string, boolean, und, nul, obj, array, date, error, reg, func)

console.log(Object.prototype.toString.call(Math)); // [object Math]
console.log(Object.prototype.toString.call(JSON)); // [object JSON]

function a() {
    console.log(Object.prototype.toString.call(arguments)); // [object Arguments]
}

a();

// TODO:Object.toString()的理解？
/*1. 如果 this 值是 undefined，就返回 [object Undefined]
  2. 如果 this 的值是 null，就返回 [object Null]
  3. 让 O 成为 ToObject(this) 的结果
  4. 让 class 成为 O 的内部属性 [[Class]] 的值
  5. 最后返回由 "[object " 和 class 和 "]" 三个部分组成的字符串*/

// TODO:封装一个通用的type API？
// v1: 基础版本
var class2type = {};

'Undefined Null String Number Boolean Object Function Array Date RegExp Error'
    .split(' ')
    .map(function (item) {
        // 开始建立映射关系
        class2type[`[object ${item}]`] = item.toLowerCase();
    })

function type(obj) {
    return typeof obj === 'object' || typeof obj === 'function'
        ? class2type[Object.prototype.toString.call(obj)] || 'object'
        : typeof obj;
}

// v2:在 IE6 中，null 和 undefined 会被 Object.prototype.toString 识别成 [object Object]！
// TODO: 解决IE6下的null和undefined 会被识别为[object Object]?
var class2type = {};
'Undefined Null String Number Boolean Object Function Array Date RegExp Error'
    .split(' ').map(function (item) {
    class2type[`[object ${item}]`] = item.toLowerCase();
})

/**
 * 查看type的基础类型
 * @param obj
 * @return {string|*}
 */
function type(obj) {
    // 开始解决ie下的兼容问题
    if (obj == null) {
        return obj + '';
    }
    return typeof obj === 'object' || obj === 'function'
            //  ES6 新增的 Symbol、Map、Set 等类型，它们并不在 class2type 列表中，所以使用 type 函数，返回的结果会是 object
            ? class2type[Object.prototype.toString.call(obj)] || 'object'
            : typeof obj;
}

/**
 * 查看obj是否为函数累类型
 * @param obj
 * @return {boolean}
 */
function isFunction(obj) {
    return type(obj) === 'function';
}


/**
 * 注意这里的isArray是一个函数，并不是一个函数执行的结果
 * @type {((arg: any) => arg is Array<any>) | (function(*=): boolean)}
 */
var isArray = Array.isArray || function (obj) {
    return type(obj) === 'array';
}


// TODO: plainObject, 就是该对象是通过 "{}" 或 "new Object" 创建的，该对象含有零个或者多个键值对?
// 存放toString的映射结果
var class2type = {};
// Object.prototype.toString
var toString = class2type.toString();
// Object.prototype.hasOwnProperty
var hasOwn = class2type.hasOwnProperty;

function isPlainObject(obj) {
    // 排除掉宿主对象 eg: toString.call(window) === '[objct window]'
    if (!obj || toString.call(obj) !== '[object Object]') {
        return false;
    }

    /**
     * Object.getPrototypeOf() 方法返回指定对象的原型（即, 内部[[Prototype]]属性的值）,如果没有继承属性，则返回 null 。
     * eg: obj.__proto__ === Object.protptype
     * @type {any}
     */
    var proto = Object.getPrototypeOf(obj);
    // 如果没有原型对象的话，eg:Object.create(null), 就是纯对象
    if (!proto) {
        return true;
    }

    // 通过new Object方式创建的对象
    // 判断 proto 是否有 constructor 属性，如果有就让 Ctor 的值为 proto.constructor
    var Constructor = hasOwn.call(proto, 'constructor') && proto.constructor;

    // 判断Constructor是不是Object的构造函数
    return typeof Constructor === 'function' && hasOwn.toString.call(Constructor) === hasOwn.toString.call(Object);
}


// TODO: EmptyObject如何判断？
function isEmptyObject(obj) {
    var name;
    // 看一下当前的这个obj对象有没有属性，如果有的话就返回false
    for (name in obj) {
        // 遍历的不仅仅是obj自身的属性，而且也遍历了obj原型上的属性
        return false;
    }
    return true;
}
// test
console.log(isEmptyObject({})); // true
console.log(isEmptyObject([])); // true
console.log(isEmptyObject(null)); // true
console.log(isEmptyObject(undefined)); // true
console.log(isEmptyObject(1)); // true
console.log(isEmptyObject('')); // true
console.log(isEmptyObject(true)); // true


// TODO: 判断是否为window对象？
// window对象的window属性指向其本身
function isWindow(obj) {
    return obj != null && obj == obj.window;
}

// TODO: 判断是否为document对象？
function isDocument(obj) {
    return obj != null && obj.nodeType == obj.DOCUMENT_NODE;
}

// TODO: 判断是不是DOM元素
function isDOMElement(obj) {
    // 这里需要强制把返回的结果转换为bool类型，eg:obj = undefined,!!undefined=r\true
    return !!(obj && obj.nodeType === 1);
}


// TODO: isArrayLike如何实现？(可以判断数组和伪数组类型)
function isArrayLike(obj) {
    // 1. 先看obj有没有length属性
    var length = !!obj && ('length' in obj) && obj.length;
    var typeRes = type(obj);

    // 2. 排除掉函数和window对象, window也是有length属性的
    if (typeRes === 'function' || isWindow(obj)) {
        return false;
    }

    // 3. 开始处理结果
    return typeRes === 'array'                  // 1. 是数组类型
            || length === 0                     // 2. 长度为0(函数中的arguments参数)
            || typeof length === 'number'
            && length > 0
            && (length - 1) in obj;             // 3. length 属性是大于 0 的数字类型，并且obj[length - 1]必须存在(符合条件的类数组对象是一定存在最后一个元素的)

}

// underscore 如何实现的？
function isArrayLike(collection) {
    var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
    var length = getLength(collection);
    return typeof length === 'number' && length >= 0 && length <= MAX_ARRAY_INDEX;
}
```

【编程题与分析题】类型检测

# 参考资料

## 前端工具

- Git
  1. [入门篇](https://backlog.com/git-tutorial/cn/intro/intro1_1.html)
  2. [高级篇](https://backlog.com/git-tutorial/cn/stepup/stepup1_1.html)
  3. [索引篇](https://backlog.com/git-tutorial/cn/reference/)
  4. [原版](https://www.atlassian.com/git/tutorials/merging-vs-rebasing)
  5. [原版翻译](https://github.com/geeeeeeeeek/git-recipes/wiki/1.1-%E6%9E%9C%E5%A3%B3%E4%B8%AD%E7%9A%84-Git)
  6. [Git 的奇技淫巧](https://github.com/cucygh/git-tips)
- Webpack
  1. [文档](https://doc.webpack-china.org/concepts/)
  2. [插件](https://doc.webpack-china.org/plugins/)
- Gulp
  -  [文档](https://www.gulpjs.com.cn/)
- Grunt
  - [文档](http://www.gruntjs.net/)
- Rollup
  - [文档](http://www.rollupjs.com/)
- 代码质量
  1. [vue eslint](https://mysticatea.github.io/vue-eslint-demo/)
  2. [htmlhint](https://htmlhint.io/)
  3. [stylelint](https://stylelint.io/)
- http-server
  - [静态服务器](https://www.npmjs.com/package/http-server)
- ast
  - [业界 AST 库](https://github.com/cucygh/AST-)
- 自动化测试
  - [jest](https://jestjs.io/zh-Hans/)


## 前端框架

- Vue
  1. [基本教程](https://cn.vuejs.org/)
  2. [路由](https://router.vuejs.org/)
  3. [Vuex](https://vuex.vuejs.org/)
  4. [SSR](https://ssr.vuejs.org/)
  5. [Nuxt.js](https://zh.nuxtjs.org/)
  6. [Vue 源码分析·免费](http://hcysun.me/vue-design/)
- React
  1. [文档](https://doc.react-china.org/)
  2. [Redux 官方文档](http://cn.redux.js.org/)
  3. [Redux 中文社区](http://www.redux.org.cn/)
  4. [Next.js](https://zeit.co/blog/next4)
  5. [Next.js 中文文档](http://nextjs.frontendx.cn/docs)
  6. [Next.js 掘金博客](https://juejin.im/entry/59791d8f6fb9a03c391b557e)
- Angular
  - [官方文档](https://angular.cn/)
- Koa
  > Express 升级后的框架，抽象设计更彻底，强大、自由、灵活

  1. [文档](https://koa.bootcss.com/)
  2. [Koa2 进阶学习笔记](https://chenshenhai.github.io/koa2-note/)
  3. [基于 Koa2 搭建 Node.js 实战项目教程](https://github.com/ikcamp/koa2-tutorial)
- Express
  > Node.js 开发最容易上手的业务应用开发框架
  - [文档](http://expressjs.com/zh-cn/)

## 前端技术

- 内存泄漏
  1. [JavaScript 内存泄露和 CSS 优化](https://github.com/cucygh/js-leakage-patterns?organization=cucygh&organization=cucygh)
  2. [内存泄漏](https://developers.google.com/web/tools/chrome-devtools/memory-problems/?hl=zh-cn)
- MDN官方文档
  - [MDN官方文档](https://developer.mozilla.org/zh-CN/)

## CSS 教程

- Less
  - [文档](http://less.bootcss.com/)
- Sass
  - [文档](http://sass.bootcss.com/docs/sass-reference/)
- CSS3 布局
  - [学习布局](http://zh.learnlayout.com/)

## JavaScript 教程

- ES6
  1. [权威教程:ECMAScript 6](http://es6-features.org/#Constants)
  2. [入门教程](http://es6.ruanyifeng.com/)
- Node
  1. [官方网站](http://nodejs.cn/)
  2. [官方教程](http://nodejs.cn/api/)
- ES3
  - [入门教程](http://www.runoob.com/js/js-tutorial.html)
- ES5
  1. [ES5 新特性与 ES3 的对比](http://www.hahack.com/wiki/javascript-es5.html#es5-%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7)
  2. [ES5 新特性博客](http://pij.robinqu.me/JavaScript_Core/ECMAScript/es5.html)

## 服务端教程

- [Nginx 入门](http://cnt1992.xyz/2016/03/18/simple-intro-to-nginx/)
- [Nginx 入门与精通（高级）](http://tengine.taobao.org/book/#)
- [Nginx 配置大全](https://nginxconfig.io/)



【总结】参考资料

# 函数

## 1. JS编译解析的流程

### 1.1 JS运行分三步
语法分析（通篇扫描是否有语法错误），预编译（发生在函数执行的前一刻），解释执行（一行行执行）。


### 1.2 预编译执行分五步
1. 创建AO对象（Activation Object  执行期上下文）

2. 找形参和变量声明，将变量和形参名作为AO属性名，值为undefined. 变量声明提升（变量放到后面也不会报错，只是未定义类型）如：console.log(a);var a=10;结果undenfined;

3. 将实参值和形参统一（传参）

4. 在函数体里面找到函数声明{函数声明整体提升（相当于放到程序最前面）}

5. 值赋予函数体，执行（声明函数和变量的部分直接不看了）


## 2. 函数作用域和作用域链
### 2.1 函数作用域

> 每个javascript函数都是一个对象，对象中有的属性可以访问，有的不能，这些属性仅供javascript引擎存取，如[[scope]]。

[[scope]]就是函数的作用域，其中存储了执行期上下文的集合。

**执行期上下文**： 当函数执行时，会创建一个称为执行期上下文的内部对象（AO）。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行期上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行期上下文，当函数执行完毕，它所产生的执行上下文被销毁。


### 2.2 作用域链
`[[scope]]`中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们称这种链式链接为作用域链。查找变量时，要从作用域链的顶部开始查找。Activation Object（AO）到Global Object（GO）。

![function](../../img/function.png)
![a定义](../../img/define.png)
![a run](../../img/run.png)
![b define](../../img/bdefine.png)
![b run](../../img/brun.png)



### 2.3 闭包
> [!NOTE]
> 当内部函数被保存到外部时，将会生成闭包。生成闭包后，内部函数依旧可以访问其所在的外部函数的变量。

> 闭包问题的解决方法：立即执行函数、let

#### 2.3.1 详细解释

1. 当函数执行时，会创建一个称为**执行期上下文的内部对象（AO）**，执行期上下文定义了一个函数执行时的环境。

2. 函数还会获得它所在作用域的**作用域链**，是存储函数能够访问的所有执行期上下文对象的集合，即这个函数中能够访问到的东西都是沿着作用域链向上查找直到全局作用域。

3. 函数每次执行时对应的执行期上下文都是独一无二的，当函数执行完毕，函数都会失去对这个作用域链的引用，JS的垃圾回收机制是采用引用计数策略，如果一块内存不再被引用了那么这块内存就会被释放。

4. 但是，当闭包存在时，即内部函数保留了对外部变量的引用时，这个作用域链就不会被销毁，此时内部函数依旧可以访问其所在的外部函数的变量，这就是闭包。


#### 2.3.2 闭包的应用
> 先看两个例子，两个例子都打印5个5

```js
for (var i = 0; i < 5; i++) {
  setTimeout(function timer() {
    console.log(i)
  }, i * 100)
}
```

```js
function test() {
   var a = [];
   for (var i = 0; i < 5; i++) {
         a[i] = function () {
            console.log(i);
         }
   }
   return a;
}

var myArr = test();
for(var j=0;j<5;j++)
{
   myArr[j]();
}
```


> 解决方法： 使用立即执行函数

```js
for (var i = 0; i < 5; i++) {
   ;(function(i) {
      setTimeout(function timer() {
         console.log(i)
      }, i * 100)
   })(i)
}
```
```js
function test(){
   var arr=[];
   for(i=0;i<10;i++)
   {
      (function(j){
         arr[j]=function(){
         console.log(j);
         }
      })(i)
   }
   return arr;
}

var myArr=test();
for(j=0;j<10;j++)
{
   myArr[j]();
}
```


#### 2.3.3 闭包-封装私有变量
```js
function Counter() {
   let count = 0;
   this.plus = function () {
      return ++count;
   }
   this.minus = function () {
      return --count;
   }
   this.getCount = function () {
      return count;
   }
}

const counter = new Counter();
counter.puls();
counter.puls();
console.log(counter.getCount())
```


## 3. 作用域与变量声明提升?
1. 在 JavaScript 中，函数声明与变量声明会被 JavaScript 引擎隐式地提升到当前作用域的顶部 
2. 声明语句中的赋值部分并不会被提升，只有名称被提升
3. 函数声明的优先级高于变量，如果变量名跟函数名相同且未赋值，则函数声明会覆盖变量声明
4. 如果函数有多个同名参数，那么最后一个参数（即使没有定义）会覆盖前面的同名参数


## 4. 构造函数，new时发生了什么？
 
```javascript
   var obj  = {}; 
   obj.__proto__ = Base.prototype;
   Base.call(obj);  
```

1. 创建一个新的对象 obj;
2. 将这个空对象的__proto__成员指向了Base函数对象prototype成员对象
3. Base函数对象的this指针替换成obj, 相当于执行了Base.call(obj);
4. 如果构造函数显示的返回一个对象，那么则这个实例为这个返回的对象。 否则返回这个新创建的对象



## 5. 函数参数是对象会发生什么问题？

```javascript
function test(person) {
  person.age = 26
  person = {
    name: 'yyy',
    age: 30
  }

  return person
}
const p1 = {
  name: 'hy',
  age: 25
}
const p2 = test(p1)
console.log(p1) // -> {name: "hy", age: 20}
console.log(p2) // -> {name: "yyy", age: 30}
```

`person = {}` 这一步操作就将应用与原来的分离了
![地址改变](../../img/addressChange.png)



## 6. JavaScript 中，调用函数有哪几种方式？
1. 方法调用模式 Foo.foo(arg1, arg2);
2. 函数调用模式 foo(arg1, arg2);
3. 构造器调用模式 (new Foo())(arg1, arg2);
4. call/applay 调用模式 Foo.foo.call(that, arg1, arg2);
5. bind 调用模式 Foo.foo.bind(that)(arg1, arg2)();

【JS相关】函数

4. 构造函数，new时发生了什么？

5. 函数参数是对象会发生什么问题？

6. JavaScript 中，调用函数有哪几种方式？

# NodeJS
## 1.	对Node的优点和缺点提出了自己的看法：
*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
## 2.	需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
至少给出自己的思路（url-hash,可以使用已有的一些框架history.js等）
## 3.	Node.js的适用场景？
1)、实时应用：如在线聊天，实时通知推送等等（如socket.io）
2)、分布式应用：通过高效的并行I/O使用已有的数据
3)、工具类应用：海量的工具，小到前端压缩部署（如grunt），大到桌面图形界面应用程序
4)、游戏类应用：游戏领域对实时和并发有很高的要求（如网易的pomelo框架）
5)、利用稳定接口提升Web渲染能力
6)、前后端编程语言环境统一：前端开发人员可以非常快速地切入到服务器端的开发（如著名的纯Javascript全栈式MEAN架构）
## 4.	(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
Nodejs相关概念的理解程度
## 5.	解释一下 Backbone 的 MVC 实现方式？
流行的MVC架构模式
## 6.	什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
熟悉前后端通信相关知识


【前端面试题】NodeJS

1.   对Node的优点和缺点提出了自己的看法：

2.   需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？

4.   (如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

5.   解释一下 Backbone 的 MVC 实现方式？

6.   什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?