高热度网

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

https://github.com/fecommunity — Sat, 27 Sep 2025 14:19:04 GMT

问题描述

首次初始化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 的安装脚本：

node ./node_modules/electron/install.js

这个命令会：

检查当前平台（Windows、macOS 或 Linux）
下载对应平台的 Electron 二进制文件
将其安装到项目的 node_modules 目录中

方法二：重新安装依赖

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

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

# 重新安装依赖
pnpm install

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

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

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

# 然后重新安装依赖
pnpm install

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

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

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

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

预防措施

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

使用可靠的网络环境：在安装 Electron 项目时确保网络连接稳定
设置环境变量：对于经常需要安装 Electron 的环境，可以设置镜像源：

   # 在 .bashrc、.zshrc 或环境变量中设置
   export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

使用 .npmrc 配置：在项目根目录创建 .npmrc 文件：

   electron_mirror=https://npmmirror.com/mirrors/electron/

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

深入理解

为什么需要这个额外的安装步骤？这是因为 Electron 实际上由两部分组成：

包含 JavaScript API 的 npm 包
平台特定的二进制可执行文件

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

总结

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

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

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

https://github.com/fecommunity — Fri, 26 Sep 2025 13:37:30 GMT

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

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

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

# 本地构建（成功）
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 的配置：

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

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

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

解决方案：三步修复法

第一步：诊断问题

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

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

第二步：修复文件名

# 临时启用大小写敏感
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

第三步：验证修复

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

预防措施：建立防护网

1. 项目级配置

在项目中添加 .gitconfig 文件：

[core]
    ignorecase = false

2. ESLint 规则检查

配置 ESLint 检查文件名规范：

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

3. CI/CD 流水线检查

在 GitHub Actions 中添加检查：

# .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 在提交前检查：

#!/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，这在实际开发中带来了便利，但也埋下了隐患。

最佳实践总结

统一命名规范

类文件使用 PascalCase: HttpClient.ts
工具函数使用 camelCase: formatDate.ts
配置文件使用 kebab-case: app-config.ts

团队协作约定

新成员入职时强调文件名规范
代码审查时注意文件名大小写
使用工具自动化检查

跨平台开发策略

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

结语

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

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

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

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

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

https://github.com/fecommunity — Sat, 20 Sep 2025 01:45:24 GMT

问题概述

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

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

根本原因分析

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

核心解决方案代码

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

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

// 安全关闭服务器函数
const safelyCloseServer = async (): Promise => {
  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();
    });
  });
};

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

根本原因分析

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

核心解决方案代码

// 后端：安装完成后返回正确的服务器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}` 
    });
  }
});

// 前端：智能轮询机制
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);
}

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

根本原因分析

端口竞争：多个服务实例尝试绑定相同端口
进程残留：先前实例异常退出，端口未释放
缺乏端口管理：没有端口检测和自动回退机制

核心解决方案代码

// 端口检测函数
const checkPort = (port: number): Promise => {
  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 => {
  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 => {
  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. 安装流程优化

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. 主应用启动流程

const startMainApplication = async (): Promise => {
  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 安装服务中的三个核心问题：

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

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

Alpha-Beta 剪枝：让智能体“聪明”地舍弃无用功

https://github.com/fecommunity — Fri, 30 May 2025 05:43:33 GMT

Alpha-Beta 剪枝：让智能体“聪明”地舍弃无用功

想象你下棋时，每走一步都要考虑对手所有可能的反击，然后你再所有可能的应对…… 这种计算量会像大树一样疯狂分叉，几步之后可能就有数百万种局面需要评估，计算机也难以承受。这就是经典的极小极大算法（Minimax） 面临的“组合爆炸”难题。而 Alpha-Beta 剪枝（Alpha-Beta Pruning） 正是解决这一难题的“剪刀”，它能显著减少需要计算的节点数量，却不影响最终找到最优解！

一、基础：极小极大算法（Minimax）——博弈的“灵魂”

理解 Alpha-Beta 剪枝，先要了解它的基石：极小极大算法。

核心思想： 模拟两位理性玩家（Max 和 Min）的对抗。
- Max玩家（你）： 总是选择能让自己评估得分最高的走法。
- Min玩家（对手）： 总是选择能让 Max 得分最低的走法（相当于最大化他自己的利益）。
执行过程（深度优先搜索）：
1. 构建博弈树： 从当前局面开始，生成所有可能的走法分支，形成树状结构。
2. 评估叶子节点： 到达一定深度或游戏结束时，用评估函数给该局面打分（例如，国际象棋中，正分对 Max 有利，负分对 Min 有利）。
3. 向上回溯：
  - 在 Min 层：节点值取子节点最小值（因为 Min 会选择最不利于 Max 的走法）。
  - 在 Max 层：节点值取子节点最大值（因为 Max 会选择对自己最有利的走法）。
4. 决策： 最终，根节点（当前局面）的值代表了在双方最优决策下的预期结果。Max 选择能到达这个最大值的分支走法。

极小极大算法确保了在有限搜索深度内找到理论上的最优解，但其需要遍历整个博弈树，效率低下。

二、Alpha-Beta 剪枝：引入“哨兵”的智慧

Alpha-Beta 剪枝的核心妙处在于：它能在搜索过程中提前发现某些分支是“徒劳”的，从而安全地剪掉（跳过）这些分支的计算，大大提升效率。

它引入了两个关键的“哨兵”变量，在搜索过程中动态传递信息：

α (Alpha)： 代表 Max 玩家当前已知的至少能获得的最好分数（下界）。初始值为 -∞。
β (Beta)： 代表 Min 玩家当前已知的至多会让 Max 获得的分数（上界）。初始值为 +∞。

剪枝原理：何时能“剪”？

剪枝发生在搜索过程中，当算法发现某个节点的值已经不可能对最终决策产生影响时。主要有两种情况：

在 Min 节点剪枝（Beta 剪枝）：
- 场景：你正在一个 Min 节点（对手决策点）评估它的子节点（即对手可能的走法）。
- 条件：当发现某个子节点的值 V ≤ 当前 α 值时。
- 推理：Min 节点的职责是选子节点中的最小值返回给它的父节点（一个 Max 节点）。如果已经有一个子节点的值 V <= α，那么：
  - 这个 Min 节点最终返回的值最多是 V（如果其他子节点更大，Min 会选这个小的 V；如果其他子节点更小，Min 会选更小的那个）。
  - 因此，这个 Min 节点返回的值肯定 ≤ V，进而肯定 ≤ α。
- 结论：对于这个 Min 节点的父节点（一个 Max 节点）来说，它要选子节点（即当前这个 Min 节点）的最大值。既然这个子节点最多只能返回一个 ≤ α 的值，而 α 是 Max 已知的“至少能获得”的分数（可能来自其他分支），那么这个分支就不可能提供比 α 更好的结果给 Max。因此，Min 节点剩下的未搜索子节点完全没必要再计算了，可以剪掉！
在 Max 节点剪枝（Alpha 剪枝）：
- 场景：你正在一个 Max 节点（你的决策点）评估它的子节点（即你可能的选择）。
- 条件：当发现某个子节点的值 V ≥ 当前 β 值时。
- 推理：Max 节点的职责是选子节点中的最大值返回给它的父节点（一个 Min 节点）。如果已经有一个子节点的值 V >= β，那么：
  - 这个 Max 节点最终返回的值至少是 V（如果其他子节点更小，Max 会选这个大的 V；如果其他子节点更大，Max 会选更大的那个）。
  - 因此，这个 Max 节点返回的值肯定 ≥ V，进而肯定 ≥ β。
- 结论：对于这个 Max 节点的父节点（一个 Min 节点）来说，它要选子节点（即当前这个 Max 节点）的最小值。既然这个子节点至少会返回一个 ≥ β 的值，而 β 是 Min 已知的“至多会让 Max 获得”的分数（可能来自其他分支），那么这个分支就不可能提供比 β 更差的结果给 Min（即 Min 无法通过选择这个分支把 Max 的分数压到比 β 更低）。因此，Max 节点剩下的未搜索子节点完全没必要再计算了，可以剪掉！

形象比喻：砍价与拍卖

α (Alpha)： 买家（Max）的心理底线：“低于这个价我就肯定不买了！”（我能接受的最高价）。
β (Beta)： 卖家（Min）的心理底线：“高于这个价我就肯定卖了！”（我能接受的最低价）。
剪枝：
- 如果卖家发现一个潜在买家只出价 ≤ α (买家的最高接受价)，卖家知道即使和其他买家谈，最终成交价也不可能高于 α，而买家只接受 ≤ α 的价格，那么卖家无需再和其他买家浪费时间谈更高价了（Beta 剪枝）。
- 如果买家发现一个卖家要价 ≥ β (卖家的最低接受价)，买家知道即使和其他卖家谈，最终成交价也不可能低于 β，而卖家只接受 ≥ β 的价格，那么买家无需再和其他卖家浪费时间谈更低价了（Alpha 剪枝）。

三、执行过程详解（图示）

假设一棵简单的博弈树（Max 在根节点）：

          A (Max, α=-∞, β=+∞)
        /        |        \
      B(Min)    C(Min)    D(Min) <-- 假设先搜索B，再C，最后D
     /  |  \    /  \      /  \
    3   5   1  2    8    4    6

搜索节点 B (Min):
- 初始化：α = -∞, β = +∞ (从父节点 A 继承)。
- 搜索第一个子节点：值 = 3。
  - B 作为 Min 节点，当前值 V = min(3, ...) = 3。
  - 更新父节点 A 的潜在值：A 是 Max，所以可能通过 B 得到至少 3 -> 更新 A 的 α = 3。
- 搜索第二个子节点：值 = 5。
  - B 尝试找到最小值，当前 min(3, 5) = 3。
  - 没有触发剪枝条件（5 > α(A)=3？ 5 > 3 成立，但 Min 节点剪枝条件是 V <= α，这里 5 > 3，不满足）。
- 搜索第三个子节点：值 = 1。
  - B 找到 min(3, 5, 1) = 1。
  - 将 V = 1 返回给父节点 A。
  - 更新 A：A 是 Max，收到子节点 B 的值 1。A 当前值取 max(…, 1)。更新 A 的 α = max(3, 1) = 3 (α 只能增加或保持不变)。
搜索节点 C (Min):
- 初始化：α = 3 (从父节点 A 继承，因为 A 的 α 已被 B 更新为 3), β = +∞。
- 搜索第一个子节点：值 = 2。
  - C 作为 Min 节点，当前值 V = min(2, ...) = 2。
  - 检查剪枝条件：V (2) <= α (3)？ 2 <= 3 -> 成立！触发 Beta 剪枝！
- 为什么能剪？
  - 父节点 A (Max) 的当前 α 是 3（已知至少能从 B 节点得到 3）。
  - 节点 C (Min) 的第一个子节点值已经是 2。
  - 因为 C 是 Min 节点，它最终返回给 A 的值 ≤ 2（即使第二个子节点是 8，Min 也会选 2 返回；如果第二个子节点小于 2，Min 会选更小的返回）。
  - 因此，C 返回的值 ≤ 2 < 3 (A 的 α)。
  - 对于父节点 A (Max) 来说，它要在子节点 B、C、D 中选最大值。B 返回了 1，C 最多返回 ≤ 2 (<3)，即使 D 返回一个很大的值（比如 100），A 也能通过其他路径知道至少能得 3（α=3）。所以，C 节点返回的值（≤2）不可能比 A 当前已知的 α(3) 更大，也就不可能成为 A 的最优选择。
- 动作： 剪掉节点 C 的第二个子节点（值为 8），不计算它！ C 直接返回当前已知值 2 给 A。
- 更新 A：A 收到 C 的值 2。A 当前值取 max(当前值, 2) = max(3, 2) = 3。A 的 α 保持为 3。
搜索节点 D (Min):
- 初始化：α = 3, β = +∞ (从父节点 A 继承)。
- 搜索第一个子节点：值 = 4。
  - D 作为 Min 节点，当前值 V = min(4, ...) = 4。
  - 检查剪枝条件：4 <= α(3)？ 4 <= 3？ 不成立（4 > 3）。继续搜索。
- 搜索第二个子节点：值 = 6。
  - D 找到 min(4, 6) = 4。
  - 将 V = 4 返回给父节点 A。
- 更新 A：A 收到 D 的值 4。A 最终值取 max(1 (B), 2 (C), 4 (D)) = 4。A 选择走向 D 节点。

关键结果： 通过剪枝，我们跳过了计算 C 节点的第二个子节点（值为 8）和 D 节点的部分计算（在计算第一个子节点后仍需计算第二个，因为未触发剪枝）。最终结果（A=4）与完整遍历极小极大树的结果完全一致（Max 选 D，Min 在 D 下选 4）。效率得到了提升！

四、威力与技巧

效率提升： Alpha-Beta 剪枝的效果极其显著。在最优顺序（最可能引发剪枝的顺序）下，它可以将极小极大算法需要搜索的节点数从 O(b^d) 减少到 O(b^(d/2))。这意味着搜索深度可以加倍！例如，原来能搜 6 层，现在可能搜到 12 层，棋力大幅提升。
关键：节点顺序！ 剪枝效率高度依赖子节点被访问的顺序：
- Max 节点： 优先搜索估值最高（或最有希望最高）的子节点。这能让 α 快速增大，更容易在后续 Min 节点触发 Beta 剪枝 (V <= α)。
- Min 节点： 优先搜索估值最低（或最有希望最低）的子节点。这能让 β 快速减小，更容易在后续 Max 节点触发 Alpha 剪枝 (V >= β)。
启发式排序： 实践中，使用启发式评估函数对子节点进行快速排序，预估它们的“好坏”，以接近最优顺序，最大化剪枝效果。
其他优化： Alpha-Beta 是基础，常与其他技术结合：
- 迭代加深（Iterative Deepening）： 先浅层搜索确定好顺序，再用此顺序进行更深的搜索。
- 置换表（Transposition Table）： 存储已计算过的局面结果，避免重复计算。
- 杀手启发（Killer Heuristic）： 记录在树中其他位置导致剪枝的好走法，优先尝试。
- 历史启发（History Heuristic）： 统计历史上走法在引发剪枝方面的效果，优先尝试效果好（常引发剪枝）的走法。

五、应用场景

Alpha-Beta 剪枝是经典博弈 AI 的核心算法，广泛应用于所有零和、完全信息、确定性的两人博弈中：

国际象棋（Chess）： Deep Blue 等早期顶尖AI的核心。
围棋（Go）： 在蒙特卡洛树搜索（MCTS）兴起之前，是传统围棋AI的基础（尽管围棋分支因子巨大，单独使用效果有限）。
西洋跳棋（Checkers / Draughts）： 首个被计算机完全解决的跳棋程序 Chinook 的核心。
五子棋（Gomoku）、黑白棋（Reversi / Othello）、中国象棋、国际跳棋等： 几乎所有需要强搜索能力的棋类 AI。
一些益智游戏和谜题求解。

总结

Alpha-Beta 剪枝算法是计算机博弈论中一项优雅而强大的优化技术。它通过在极小极大搜索树的遍历过程中，动态维护 α（Max 的下界）和 β（Min 的上界）这两个边界值，并基于“不可能更好”或“不可能更差”的逻辑，安全地剪除那些不影响最终决策结果的子树分支。虽然其理论最优效率依赖于子节点搜索顺序，但在配合启发式排序和其他优化技术（如置换表、迭代加深）后，它能将博弈程序的搜索能力提升数倍，使其在复杂的策略游戏中展现出接近人类大师甚至超越人类的水平。理解 Alpha-Beta 剪枝，是打开经典博弈人工智能大门的一把关键钥匙。

深入剖析JavaScript的事件循环

https://github.com/fecommunity — Sun, 05 Jan 2025 16:16:29 GMT

事件循环

浏览器的进程模型

何为进程？

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

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

何为线程？

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

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

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

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

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

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

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

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

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

其中，最主要的进程有：

浏览器进程

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

负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。
渲染进程（本节课重点讲解的进程）

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

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

将来该默认模式可能会有所改变，有兴趣的同学可参见chrome官方说明文档

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

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

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

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

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

比如：

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

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

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

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

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

若干解释

何为异步？

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

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

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

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

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

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

面试题：如何理解 JS 的异步？

参考答案：

JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。

而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。

如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。

所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。

在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

JS为何会阻碍渲染？

先看代码

Mr.Yuan is awesome!

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

<见具体演示>

任务有优先级吗？

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

但消息队列是有优先级的

根据 W3C 的最新解释:

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

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

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

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

添加任务到微队列的主要方式主要是使用 Promise、MutationObserver

例如：
// 立即把一个函数添加到微队列
Promise.resolve().then(函数)
浏览器还有很多其他的队列，由于和我们开发关系不大，不作考虑

面试题：阐述一下 JS 的事件循环

参考答案：

事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。

在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。

过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。

根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

面试题：JS 中的计时器能做到精确计时吗？为什么？

参考答案：

不行，因为：

计算机硬件没有原子钟，无法做到精确计时

操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差

按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差

受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差

jQuery框架源码解析与实现

https://github.com/fecommunity — Mon, 23 Dec 2024 15:51:58 GMT

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

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

一、项目结构与设计思路

1. 项目结构

我们的项目将分为几个主要模块：

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

2. 设计思路

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

二、实现主框架

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

(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. 公共框架

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

(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. 事件框架

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

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

3. CSS框架

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

(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元素属性的方法。

(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元素内容的方法。

(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. 动画框架

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

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

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

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

四、总结

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

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

Next.js SEO优化方案全解析

https://github.com/fecommunity — Sun, 22 Dec 2024 15:32:54 GMT

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

一、Next.js的SEO优势

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

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

二、Next.js SEO优化方案

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

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

import Head from 'next/head';

const HomePage = () => (
  <>
    
      Home Page
      
    
    Welcome to the Home Page!
  
);

export default HomePage;

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

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

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

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

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

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

const Home = () => {
  return (
    
      
        My Next.js App
      
      
      Welcome to my Next.js app!
    
  );
};

export default Home;

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

3. 优化URL结构

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

import { useRouter } from 'next/router';

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

export default Post;

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

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

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

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

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

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

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

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

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

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组件来进行图片优化，包括懒加载、响应式加载等策略，以提升页面的加载速度和性能表现。

import Image from 'next/image';

function BlogPost({ post }) {
  return (
    <>
      
      {/* 页面内容 */}
    
  );
}

7. 代码分割和懒加载

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

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

function MyPage() {
  return (
    
      Loading...}>
        
      
    
  );
}

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优化之路提供一些有用的启示和帮助。

Windows和Mac电脑的局域网文件共享方法

https://github.com/fecommunity — Sun, 15 Dec 2024 08:47:08 GMT

背景

平时学习的时候，我是用两个不同系统的设备，第一个是我的Macbook（聊微信。。），第二个是实验室的Windows台式机（学习，嘿嘿）。但是经常需要两个设备相互之间传文件，刚开始使用网盘（one drive），后来发现还是不够方便，有一天突然在b站上看到了一个方法，感觉我好像符合这个方法的条件，所以自己也试了一下，结果发现更加方便了！

要求：需要你的设备在同一个局域网内（假如有路由器，你的设备就是在同一个局域网里了）

苹果设备之间传文件用隔空投送即可。
下面的是Windows共享文件夹的操作，实现Windows和苹果设备的文件传输

方法

在Windows中某个盘里（例如我是E盘）创建一个文件夹-》右键属性-》共享-》选择用户；这时候有个问题，首先确定你的用户对这个文件夹有所有的读写改的权限，如果没有的话，在安全这个位置修改；

接下来在Mac中打开Finder-》左上角前往-》连接服务器；

输入你Windows的ip地址-》填写用户名和密码-》这样就可以看到共享的文件夹了！

完成！

对了，注意！！！一定要在同个网段内才能共享哦！

rem 与 em：CSS中的相对单位深度解析

https://github.com/fecommunity — Sat, 07 Dec 2024 08:38:50 GMT

rem 与 em：CSS中的相对单位深度解析

在Web开发中，字体大小的控制是至关重要的。它不仅影响着网页的可读性，还直接关系到整体的设计美感。在CSS中，我们有两种主要的相对单位来设置字体大小：rem和em。尽管它们看起来相似，但实际上，它们的工作原理和应用场景有着显著的差异。今天，我们就来深入了解一下这两个单位。

一、rem：全局的相对单位

定义：
rem，全称“root em”，是一个相对于HTML文档的根元素（即标签）的字体大小的单位。这意味着，无论你在文档的哪个位置，使用rem设置的字体大小都会基于根元素的字体大小进行计算。

工作原理：
假设根元素的字体大小设置为16px（这是许多浏览器的默认值），那么1rem就等于16px。如果你将某个元素的字体大小设置为2rem，那么它的字体大小就会是32px（16px * 2）。

应用场景：
rem单位非常适合用于全局的字体大小设置。通过调整根元素的字体大小，你可以轻松地改变整个网站的字体大小，而无需逐个修改每个元素的字体大小。这使得rem成为响应式设计中的理想选择，因为你可以根据设备的屏幕尺寸动态地调整根元素的字体大小，从而改变整个网站的字体大小。

二、em：局部的相对单位

定义：
em是一个相对于其父元素的字体大小的单位。这意味着，使用em设置的字体大小会根据其父元素的字体大小进行计算。

工作原理：
如果父元素的字体大小为16px，那么1em就等于16px。如果你将某个子元素的字体大小设置为2em，那么它的字体大小就会是父元素字体大小的两倍，即32px。如果父元素的字体大小发生了变化，那么子元素使用em设置的字体大小也会相应地发生变化。

应用场景：
em单位更适合用于局部的字体大小设置，特别是当你需要相对于父元素的字体大小进行设置时。例如，在创建文本层级时，你可以使用不同的em值来设置不同层级的字体大小，从而创建更加灵活和可伸缩的布局。

三、rem与em的对比

全局与局部：

rem是全局的相对单位，它基于根元素的字体大小进行计算。
em是局部的相对单位，它基于父元素的字体大小进行计算。

可读性和一致性：

使用rem可以更容易地实现全局字体大小的一致性，因为所有使用rem设置的字体大小都会基于同一个根元素进行计算。
使用em可以创建更加灵活和可伸缩的布局，但需要注意父元素字体大小对子元素字体大小的影响。

响应式设计：

rem更适合用于响应式设计，因为你可以通过调整根元素的字体大小来轻松地改变整个网站的字体大小。
虽然em也可以用于响应式设计，但通常需要更多的计算和调整。

四、使用注意事项

在使用rem时，需要确保根元素的字体大小被正确设置，以便整个网站的字体大小能够保持一致。
在使用em时，需要注意父元素的字体大小对子元素字体大小的影响，以避免出现意外的视觉效果。
在进行复杂的布局和样式设计时，可以结合使用rem和em来创建更加灵活和可伸缩的布局。

五、总结

rem和em都是CSS中用于设置字体大小的相对单位，但它们的工作原理和应用场景有所不同。选择使用哪个单位取决于你的具体需求和设计目标。通过了解它们的差异和优势，你可以更好地控制网页的字体大小，从而创建更加美观和可读的网页。

免费的在线图片截图加电脑手机外壳外框工具

https://github.com/fecommunity — Sat, 07 Dec 2024 05:07:28 GMT

在线手机电脑样机，屏幕截图在线模拟生成器，无需下载就可以快速替换手机、电脑屏幕，制作图片加手机电脑外壳外框的效果。在线工具使用非常简单只要上传图片，调整相应的参数设置即可生成对应的加手机电脑外壳的效果。如果你需要制作网站产品等展示图片，可以使用在线手机电脑样机生成器制作出精美的展示图片。

1.Dimmy

Dimmy是一个可以在线把屏幕截图或软件界面等图片放到各种设备上查看展示效果的工具，只要上传图片后，Dimmy就会自动适配到网站提供的所有设备模型中，模拟设备支持笔记本电脑、PC机、各种型号的智能手机、平板电脑，包括Macbook、Surface Book、iMac、iPhone、Google Pixel、Nokia、iPad 和HTC Nexus等。

不错，稍微有点老。

2.MockUPhone (推荐)

MockUPhone是一个免费工具，帮助你包装在不同的移动设备应用程序截图。Android支持iPhone模型，iPad模型，模型和电视模型

目前使用了还听好用的。

3.Pixeltrue Mockup Generator

自由和简单的装置模型生成器，创造美丽的产品模型只需几次点击!完全免费的。点击上面的开始。5设备类型你会有足够的材料来为您的项目创建漂亮的产品模型和营销活动。

4.Shotsnapp

Shotsnapp是一个可以一键生成高逼格样机神器，轻松将您的应用程序界面或者网页设计作品变成漂亮的实体模型。办公人导航分享的Shotsnapp提供了各种设备模板，比如苹果手机、平板电脑、Mac笔记本电脑、PC电脑、智能手表等等样机设备，根据自己的需要修改界面背景图，可以直接使用Unsplash漂亮的图片素材作为背景外观，通过选择精美的字体加上优美的文案完成样机设计作品。

5.Deviceshots

Deviceshots是一个能够帮助我们轻松制作出精美的高分辨率样机图片，比如UI设计师需要将作品展示在苹果iphone上，通过上传UI界面图轻松就能生成超高清的样机模型。办公人导航网分享的Deviceshots除了支持手机设备之外，还有平板ipad、笔记本Macbook、手表等。可以自定义修改大小，背景及文字内容等。制作完成后可以免费下载JPG、PNG或SVG格式图片。

6.QURB

QURB是一款能让截图画面变得更有质感的Mockup产生器。办公人导航分享的Qurb工具可以让你为画面加入苹果手机、平板电脑或MacBook外框，整体呈现出逼真精美的模型，最后储存为png透明背景的图片格式。内置：iPhoneX/XS/Max、GalaxyNote8、iPhone8、iPhone8Plus、iPhone5s、iPhone5c、iPadMini和MacBookPro的免费模型。

7.mockup.photos

Mockup Photos 是一个在线样机效果展示平台，用户可以通过浏览器轻松实现样机效果，无需使用Photoshop或其他工具进行编辑。该网站拥有超过1570个免费可用的样机模型。用户可以直接访问网站，通过下拉浏览或拖动到页面底部的方式寻找所需的样机。Mockup Photos 需要录后下载样机图片。其操作过程非常简单，甚至可以直接输入网址，网站会自动截图并填充样机，实现完全傻瓜式操作。

ReactPress 服务端部署流程

https://github.com/fecommunity — Sun, 01 Dec 2024 13:33:14 GMT

环境准备

$ git clone --depth=1 https://github.com/fecommnity/reactpress.git
$ cd reactpress
$ npm i -g pnpm
$ pnpm i

配置文件

项目启动后会加载根目录下的 .env 配置文件，请确保MySQL数据库服务和下面的配置保持一致，并提前创建好 reactpress 数据库

DB_HOST=127.0.0.1 // 数据库地址
DB_PORT=3306 // 端口
DB_USER=reactpress // 用户名
DB_PASSWD=reactpress // 密码
DB_DATABASE=reactpress // 数据库

环境准备好后，执行启动命令：

$ pnpm run build

启动服务

$ pnpm run pm2

至此，ReactPress 服务就启动成功了。

代码更新启动

当ReactPress代码更新后，可以按照如下Shell重新启动服务：

# 更新代码
git checkout master
git pull

# 安装依赖&构建
pnpm install
pnpm run build

# 启动进程
pm2 delete @reactpress/server
pm2 delete @reactpress/client
pnpm run pm2

# 开机启动
pm2 startup
pm2 save

以上就是ReactPress生成环境的完整部署流程。

阮一峰推荐工具：基于React + antd + NestJS + NextJS + MySQL 的简洁兼时尚的博客网站

https://github.com/fecommunity — Sun, 10 Nov 2024 10:54:21 GMT

前言

近期，阮一峰在科技爱好者周刊第 325 期中推荐了一款开源工具——ReactPress，ReactPress一个基于 Next.js 的博客和 CMS 系统，可查看 demo站点。（@fecommunity 投稿）

在数字化时代，内容创作与发布已成为连接读者与作者的重要桥梁。而在这个过程中，一个高效、灵活且功能丰富的发布平台显得尤为重要。近期，阮一峰在科技爱好者周刊中推荐了一款开源工具——ReactPress，它凭借其出色的性能和多样化的功能，吸引了众多开发者和内容创作者的目光。

此项目是基于 React + antd + NestJS + NextJS + MySQL 的，项目已经开源，项目地址在 github 上，喜欢的，欢迎给个 star 。
项目地址：https://github.com/fecommunity/reactpress

此项目是用于构建博客网站的，包含前台展示、管理后台和后端。

此项目是基于 React + antd + NestJS + NextJS + MySQL 的，项目已经开源，项目地址在 github 上，喜欢的，欢迎给个 star 。
项目地址：https://github.com/fecommunity/reactpress

前台&管理后台展示: https://github.com/fecommunity/reactpress/tree/master/client
后端：https://github.com/fecommunity/reactpress/tree/master/server
ReactPress在线演示站点：https://blog.gaoredu.com/
前台&管理后台展示: https://github.com/fecommunity/reactpress/tree/master/client
后端：

1. 效果图

1.1 前台展示

pc 端

移动端适配

管理后台

管理后台是在蚂蚁金服用户开源的 antd 5.0 基础上进行开发的。

2. 体验地址

网站首页：https://blog.gaoredu.com/
管理后台：https://blog.gaoredu.com/admin

3. 计划

这次是一个完整的全栈式开发，只要部署了这个项目的代码，是完全可以搭建好博客网站的。

环境准备

$ git clone --depth=1 https://github.com/fecommnity/reactpress.git
$ cd reactpress
$ npm i -g pnpm
$ pnpm i

配置文件

项目启动后会加载根目录下的 .env 配置文件，请确保MySQL数据库服务和下面的配置保持一致，并提前创建好 reactpress 数据库

DB_HOST=127.0.0.1 // 数据库地址
DB_PORT=3306 // 端口
DB_USER=reactpress // 用户名
DB_PASSWD=reactpress // 密码
DB_DATABASE=reactpress // 数据库

环境准备好后，执行启动命令：

$ pnpm run dev

打开浏览器访问 http://127.0.0.1:3001

4. 收获与感触

学而不用，基本等于没学，因为最近一直在做自己的个人博客网站，所以好久没更新技术文章了；而且是利用业余时间做的，所以经过差不多两个月的搬砖，现在网站终于都上线了。
开发网站的这段时间里，每天晚上几乎都搬砖到接近 11 点，周末的时间大多也在搬砖，每天写完文章，也快 12 点了，搬砖不易啊，喜欢或者觉得不错的，欢迎到 github 上给个 star，谢谢。

5. 文档教程

项目地址： https://github.com/fecommunity/reactpress
next.js 源码：https://github.com/vercel/next.js
nest.js 源码：https://github.com/nestjs/nest

什么是ReactPress？

https://github.com/fecommunity — Sun, 03 Nov 2024 13:07:31 GMT

ReactPress

ReactPress 是一套集成文章发表、页面创建、知识库管理、博客后台管理等功能于一体的博客系统。

✨ 特性

📦 技术栈：基于 React + MySQL + NestJS + NextJS 构建
🌈 组件化：基于 antd 的交互语言和视觉风格
🌍 国际化：支持中英文切换，国际化配置管理能力
🌞 黑白主题：支持亮色和暗黑模式主题自由切换
🖌️ 创作管理：内置 MarkDown 编辑器，支持文章写文章、分类目录管理，标签管理
📃 页面管理：支持自定义新页面
💬 评论管理：支持内容评论管理
📷️ 媒体管理：支持文件本地上传和 OSS 文件上传
…

⌨️ 本地开发

环境准备

$ git clone --depth=1 https://github.com/fecommnity/reactpress.git
$ cd reactpress
$ npm i -g pnpm
$ pnpm i

配置文件

项目启动后会加载根目录下的 .env 配置文件，请确保MySQL数据库服务和下面的配置保持一致，并提前创建好 reactpress 数据库

DB_HOST=127.0.0.1 // 数据库地址
DB_PORT=3306 // 端口
DB_USER=admin // 用户名
DB_PASSWD=admin // 密码
DB_DATABASE=reactpress // 数据库

环境准备好后，执行启动命令：

$ pnpm run dev

打开浏览器访问 http://127.0.0.1:3001

🔗 链接

强烈推荐阅读《提问的智慧》、《如何向开源社区提问题》和《如何有效地报告 Bug》、《如何向开源项目提交无法解答的问题》，更好的问题更容易获得帮助。

👥 社区互助

如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。

通过 WeChat 联系，可通过搜素微信号 red_tea_v2 或扫码加入，并备注来源。
通过 GitHub Discussions 提问时，建议使用 Q&A 标签。
通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 reactpress 标签。

【计算机网络】Ajax

https://github.com/fecommunity — Mon, 28 Oct 2024 18:58:30 GMT

Ajax

1. 介绍一下ajax并代码实现

1.1 基本概念

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

Ajax | MDN

1.2 创建一个简单的Ajax

创建 XMLHttpRequest 对象

if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
 httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
 httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

绑定onreadystatechange 事件

httpRequest.onreadystatechange = function(){
 // Process the server response here.
};

向服务器发送请求

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();

完整的例子

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)

1.6 POST 请求

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

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

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

【HTML相关】HTML基础强化

https://github.com/fecommunity — Mon, 28 Oct 2024 00:54:09 GMT

HTML基础强化

1.如何理解HTML？

HTML类似于一份word“文档”
描述文档的“结构”
有区块和大纲

2.对WEB标准的理解？

Web标准是由一系列标准组合而成。一个网页主要由三部分组成：结构层、表现层和行为层。

对应的标准也分三方面：

结构化标准语言主要包括XHTML和HTML以及XML，
表现层标准语言主要包括CSS，
行为标准主要包括对象模型，DOM、ECMAScript等

2.1 结构层标准

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

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

2.2 表现层标准

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

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

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的版本问题？

HTML4/4.0.1(SGML)(标签允许不结束)
XHTML(XML)（标签必须结束，属性必须带引号，属性必须有值，标签属性必须有值）
HTML5（类似于HTML4的写法）

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

7.HTML5新增的内容有哪些？

新的区块标签：section,article,nav,aside
表单增强：日期、时间、搜索（修改type的类型实现）；表单验证；placeholder
语义增强：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嵌套关系？

块级元素可以包含行内元素
块级元素不一定能包含块级元素(p标签不能包含div标签)
行内元素“一般”不能包含块级元素（a包含div是可以的）

10.HTML的默认样式？

默认样式的意义
默认样式代理的问题
CSS Reset 的作用

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标签吗？

form标签可以使用submit, reset
使用form可以直接一次性获取所有的form窗体的数据属性
form可以较好地实现表单验证等功能

11.1 Form表单提交

11.2 ajax提交

[!NOTE]
扩展思考：Form表单提交数据给一个非同源的网址，如在A网址(http://www.A.com)上直接向B网站(http://www.B.com)发送数据请求, 为什么不会触发浏览器的同源策略限制呢？

【JS相关】运行环境

https://github.com/fecommunity — Sat, 26 Oct 2024 21:02:04 GMT

运行环境

4.1 页面加载过程

4.1.1 从输入url到得到HTML的详细过程

[!NOTE] 参考计算机网络章节考点总结

4.1.2 window.onload和DOMContentLoaded的区别

onload: 会在页面上的全部资源加载完毕之后执行（包括图片、视频）
DOMContentLoaded：（会在页面的DOM渲染完成之后执行，此时页面图片、视频还可能没有加载完毕）
jQuery和zepto这些类似的类库都是使用DOMContentLoaded来实现的

4.1.3 浏览器加载资源的形式有哪些？

输入url（或跳转页面）加载html---（eg: 输入http://www.baidu.com）
加载html中的静态资源（CSS，JS，图片等）

4.1.4 描述一下浏览器渲染页面的过程

根据HTML结构生成DOM Tree（单个节点，没样式）
根据CSS生成CSSOM（CSS对象模型）
将DOM和CSSOM整合生成一个RenderTree（每个节点都有自己的样式）
根据RenderTree开始渲染和显示
遇到script标签的时候，会执行并阻塞渲染（渲染权交给了js）----JS加载完毕之后然后执行代码

4.1.5 CSS和JS的位置问题？

CSS

浏览器是自上而下进行解析的，防止出现多次渲染
CSS加载不会阻塞DOM树的解析，但是会阻塞DOM树的加载、css加载会阻塞后面js语句的执行

JS

可以让页面快速的展示，提升性能
可以在此处获取到页面上所有的标签

4.2 性能优化

4.2.1 前端性能优化的方法有哪些

资源的合并和压缩（HTML，CSS，JS压缩混淆，文件合并）
图片资源的优化图片压缩处理 CSS雪碧图 Image Inline（Base64编码）使用SVG和webp格式的图片
4.2.2 懒加载和预加载的区别和实现原理?
[!NOTE]
- 懒加载的实现：当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中

预加载的实现：提前加载图片，当用户需要查看时可直接从本地缓存中渲染

使用img标签
创建img对象
Ajax请求（跨域问题）

4.2.3 重绘和回流的区别？

[!NOTE] 重绘：当render tree中的一些元素需要更新属性（只影响元素外观、风格，不影响布局）

回流：当render tree中的一部分因为元素的尺寸、布局、隐藏等盖面需要重新构建（页面布局和集合属性改变）

避免重绘和回流的两种方法

使用不会触发回流的标签（避免使用触发重绘、回流的CSS属性）
将重绘、回流的影响范围限制在单独的图层之内

开启浏览器自动创建图层的方法

transform:translatez(0)
z-index
video 和 canvas标签

性能优化点：

使用top会触发回流，translate不会（transform : translaeY(0)）
使用opacity替换visibility（visibility会触发重绘）
使用className替代style

4.3 安全问题

4.3.1 前端的安全问题及预防措施

XSS攻击

利用用户的cookie进行恶意欺骗（cookie发送到外部服务器）[标签转义、白名单、黑名单过滤]

CSRF攻击

论坛发送了一个删帖的API链接（图片），结果删除了自己的帖子。[恶意发帖、删帖]（验证码、token）

二者区别

XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包

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

https://github.com/fecommunity — Thu, 24 Oct 2024 20:47:37 GMT

实现一个类型判断函数

判断null
判断基础类型
使用Object.prototype.toString.call(target)来判断引用类型

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

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

/**
 * 类型判断
 */
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];
}

升级版本

// 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) | (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;
}

【编程题与分析题】防抖节流实现

https://github.com/fecommunity — Thu, 24 Oct 2024 07:40:02 GMT

防抖 debounce

[!NOTE] 函数防抖就是在函数需要频繁触发的情况下，只有足够的空闲时间，才执行一次。

典型应用:

百度搜索框在输入稍有停顿时才更新推荐热词。
拖拽

function debounce(handler, delay){

  delay = delay || 300;
  var timer = null;

  return function(){

    var _self = this,
        _args = arguments;

    clearTimeout(timer);
    timer = setTimeout(function(){
      handler.applay(_self, _args);
    }, delay);
  }
}

节流 throttle

[!NOTE] 一个函数只有在大于执行周期时才执行，周期内调用不执行。好像水滴积攒到一定程度才会触发一次下落一样。

典型应用：

抢券时疯狂点击，既要限制次数，又要保证先点先发出请求
窗口调整

页面滚动

function throttle(handler, wait){

wait = wait || 300;
var lastTime = 0;

return function(){
 var _self = this,
 _args = arguments;

 var nowTime = new Date().getTime();
 if((nowTime - lastTime) > wait){
   handler.apply(_self, _args);
   lastTime = nowTime;
 }
}
}

节流与防抖的本质

以闭包的形式存在，通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，最后用定时器或时间差来控制事件的触发频率。

【计算机网络】RESTful

https://github.com/fecommunity — Thu, 24 Oct 2024 04:27:18 GMT

RESTful

1. 谈一下你对RESTful的理解？

[!NOTE] REST (Representational State Transfer)，中文意思是：表述性状态转移。一组架构约束条件和原则，如果一个架构符合 REST 的约束条件和原则，我们就称它为 RESTful 架构。

1.1 RESTful基本概念

在 REST 中，一切的内容都被认为是一种资源
每个资源都由 URI 唯一标识
使用统一的接口处理资源请求（POST/GET/PUT/DELETE/HEAD）
无状态（每次请求之前是无关联，没有 session ）

1.2 理解RESTful

下面我们结合REST原则，围绕资源展开讨论，从资源的定义、获取、表述、关联、状态变迁等角度，列举一些关键概念并加以解释。

资源与URI
统一资源接口
资源的表述
资源的链接
状态的转移

1.2.1 资源和URI

使用 / 来表示资源的层级关系
使用 ? 用来过滤资源
使用 _ 或者 - 让URI的可读性更好
, 或 ; 可以用来表示同级资源的关系

1.2.2 统一资源接口

请求方法	描述
GET	获取某个资源。幂等（取多少次结果都没有变化）
POST	创建一个新的资源
PUT	替换某个已有的资源（更新操作），幂等（更新多次只保存一个结果）
DELETE	删除某个资源
HEAD	主要用于确认 URL 的有效性以及资源更新的日期时间等
PATCH	新引入的，对PUT方法的补充，用来对已知资源进行局部更新

1.2.3 资源表述

[!NOTE] 客户端获取的只是资源的表述而已。资源在外界的具体呈现，可以有多种表述(或成为表现、表示)形式，在客户端和服务端之间传送的也是资源的表述，而不是资源本身。文本资源可以采用 html、xml、json 等格式，图片可以使用 PNG 或 JPG 展现出来。

资源的表述包括数据和描述数据的元数据，例如，HTTP 头 “Content-Type” 就是这样一个元数据属性。

那么客户端如何知道服务端提供哪种表述形式呢？

答案是可以通过 HTTP 内容协商，客户端可以通过 Accept 头请求一种特定格式的表述，服务端则通过 Content-Type 告诉客户端资源的表述形式。

MIME 类型

accept: text/xml html文件

Content-Type告诉客户端资源的表述形式

1.2.4 资源的链接

[!NOTE] 超媒体即应用状态引擎（可以做多层链接）

https://api.github.com/repos/github

{
  "message": "Not Found",
  "documentation_url": "https://developer.github.com/v3"
}

1.2.5 状态转移

服务器端不应该保存客户端状态。

应用状态 -> 服务器端不保存应用状态

访问订单根据接口去查询

访问商品查询

【性能优化】Webpack性能优化

https://github.com/fecommunity — Thu, 24 Oct 2024 02:28:27 GMT

Webpack性能优化

1. 谈一下如何使用Webpack进行性能优化？

[!NOTE]

有哪些方式可以减少 Webpack 的打包时间
有哪些方式可以让 Webpack 打出来的包更小

1.1 减小打包后文件体积

1.1.1 按需加载

如果我们将页面全部打包进一个 JS 文件的话，虽然将多个请求合并了，但是同样也加载了很多并不需要的代码，耗费了更长的时间。那么为了首页能更快地呈现给用户，我们肯定是希望首页能加载的文件体积越小越好，这时候我们就可以使用按需加载，将每个路由页面单独打包为一个文件。

1.1.2 Tree Shaking

Tree Shaking 可以实现删除项目中未被引用的代码，比如

// test.js
export const a = 1
export const b = 2
// index.js
import { a } from './test.js'

对于以上情况，test 文件中的变量 b 如果没有在项目中使用到的话，就不会被打包到文件中。
如果你使用 Webpack 4 的话，开启生产环境就会自动启动这个优化功能。

1.1.3 Scope Hoisting

Scope Hoisting 会分析出模块之间的依赖关系，尽可能的把打包出来的模块合并到一个函数中去。

比如我们希望打包两个文件

// test.js
export const a = 1
// index.js
import { a } from './test.js'

对于这种情况，我们打包出来的代码会类似这样

[
  /* 0 */
  function (module, exports, require) {
    //...
  },
  /* 1 */
  function (module, exports, require) {
    //...
  }
]

但是如果我们使用 Scope Hoisting 的话，代码就会尽可能的合并到一个函数中去，也就变成了这样的类似代码

[
  /* 0 */
  function (module, exports, require) {
    //...
  }
]

样的打包方式生成的代码明显比之前的少多了。如果在 Webpack4 中你希望开启这个功能，只需要启用 optimization.concatenateModules 就可以了。

module.exports = {
  optimization: {
    concatenateModules: true
  }
}

1.2 加快打包速度

1.2.1 优化 Loader

[!NOTE] 对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST（抽象语法树），然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，我们是有办法优化的。

首先我们可以减小 Loader 的文件搜索范围

module.exports = {
  module: {
    rules: [
      {
        // js 文件才使用 babel
        test: /\.js$/,
        loader: 'babel-loader',
        // 只在 src 文件夹下查找
        include: [resolve('src')],
        // 不会去查找的路径
        exclude: /node_modules/
      }
    ]
  }
}

还可以将 Babel 编译过的文件缓存起来，下次只需要编译更改过的代码文件即可，这样可以大幅度加快打包时间。

  loader: 'babel-loader?cacheDirectory=true'

1.2.2 HappyPack

[!NOTE] 受限于 Node 是单线程运行的，所以 Webpack 在打包的过程中也是单线程的，特别是在执行 Loader 的时候，长时间编译的任务很多，这样就会导致等待的情况。

HappyPack 可以将 Loader 的同步执行转换为并行的，这样就能充分利用系统资源来加快打包效率了

module: {
  loaders: [
    {
      test: /\.js$/,
      include: [resolve('src')],
      exclude: /node_modules/,
      // id 后面的内容对应下面
      loader: 'happypack/loader?id=happybabel'
    }
  ]
},
plugins: [
  new HappyPack({
    id: 'happybabel',
    loaders: ['babel-loader?cacheDirectory'],
    // 开启 4 个线程
    threads: 4
  })
]

1.2.3 DllPlugin

DllPlugin 可以将特定的类库提前打包然后引入。这种方式可以极大的减少打包类库的次数，只有当类库更新版本才有需要重新打包，并且也实现了将公共代码抽离成单独文件的优化方案。

  // 单独配置在一个文件中
  // webpack.dll.conf.js
  const path = require('path')
  const webpack = require('webpack')
  module.exports = {
    entry: {
      // 想统一打包的类库
      vendor: ['react']
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: '[name].dll.js',
      library: '[name]-[hash]'
    },
    plugins: [
      new webpack.DllPlugin({
        // name 必须和 output.library 一致
        name: '[name]-[hash]',
        // 该属性需要与 DllReferencePlugin 中一致
        context: __dirname,
        path: path.join(__dirname, 'dist', '[name]-manifest.json')
      })
    ]
  }

然后我们需要执行这个配置文件生成依赖文件，接下来我们需要使用 DllReferencePlugin 将依赖文件引入项目中

// webpack.conf.js
module.exports = {
  // ...省略其他配置
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      // manifest 就是之前打包出来的 json 文件
      manifest: require('./dist/vendor-manifest.json'),
    })
  ]
}

1.2.4 代码压缩

在 Webpack3 中，我们一般使用 UglifyJS 来压缩代码，但是这个是单线程运行的，为了加快效率，我们可以使用 webpack-parallel-uglify-plugin 来并行运行 UglifyJS，从而提高效率。

[!NOTE] Webpack4新特性：在 Webpack4 中，我们就不需要以上这些操作了，只需要将 mode 设置为 production 就可以默认开启以上功能。代码压缩也是我们必做的性能优化方案，当然我们不止可以压缩 JS 代码，还可以压缩 HTML、CSS 代码，并且在压缩 JS 代码的过程中，我们还可以通过配置实现比如删除 console.log 这类代码的功能。

1.2.5 一些小的优化点

resolve.extensions 用来表明文件后缀列表，默认查找顺序是 ['.js', '.json']，如果你的导入文件没有添加后缀就会按照这个顺序查找文件。我们应该尽可能减少后缀列表长度，然后将出现频率高的后缀排在前面
resolve.alias 可以通过别名的方式来映射一个路径，能让 Webpack 更快找到路径
module.noParse 如果你确定一个文件下没有其他依赖，就可以使用该属性让 Webpack 不扫描该文件，这种方式对于大型的类库很有帮助

1.2.6 Webpack长缓存优化

[!NOTE] 浏览器在用户访问页面的时候，为了加快加载速度，对用户请求的静态资源都会进行存储，但是每次代码更新或者升级的时候，我们都需要浏览器去加载新的代码。最方便的方法就是引入新的文件名称，只下载新的代码块，不加载旧的代码块，这就是长缓存。

Webpack3配置

// foo.js
import react from 'react'
console.lg('hello world')

//webpack.config.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
    entry: {
        main: './src/foo',
        // 如果要把vendor和业务代码区分开
        // 独立的给vendor建一个entry就可以了
        vendor: ['react']
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkHash].js'
    },
    plugins: [
        // 单个模块打包优化
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: Infinity
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest'
        })
      // 引入新模块，模块顺序变化，vendor hash变化的打包优化
        new webpack.NamedChunksPlugin(),
        new webpack.NamedModulesPlugin(),
    ]   
}

这时会有三个文件，vendor、main、manifest，这时再修改代码，再加一个！此时manifest和main发生变化，但是vendor没有发生变化，manifest发生变化是因为代码发生改变，要重新编译，这就达到了改变业务代码，但不改变vendor。

如果不用这种方法，就算vendor的代码不修改，打包出来的文件名的hash值也会发生改变。

Webpack4配置

optimization: {
    splitChunks: {      // 打包 node_modules里的代码
        chunks: 'all'
     },
     runtimeChunk: true,  // 打包 runtime 代码
}

性能优化前后对比：vendor的hash值并没有发生改变。

参考文章

https://www.cnblogs.com/weihuan/p/9643095.html

【总结】参考资料

https://github.com/fecommunity — Mon, 21 Oct 2024 19:07:35 GMT

参考资料

前端工具

Git
Webpack
1. 文档
2. 插件
Gulp
- 文档
Grunt
- 文档
Rollup
- 文档
代码质量
http-server
- 静态服务器
ast
- 业界 AST 库
自动化测试
- jest

前端框架

Vue
1. 基本教程
2. 路由
3. Vuex
4. SSR
5. Nuxt.js
6. Vue 源码分析·免费
React
Angular
- 官方文档
Koa

Express 升级后的框架，抽象设计更彻底，强大、自由、灵活
Express

Node.js 开发最容易上手的业务应用开发框架
- 文档

前端技术

内存泄漏
1. JavaScript 内存泄露和 CSS 优化
2. 内存泄漏
MDN官方文档
- MDN官方文档

CSS 教程

Less
- 文档
Sass
- 文档
CSS3 布局
- 学习布局

JavaScript 教程

服务端教程

【计算机网络】输入url请求细节

https://github.com/fecommunity — Mon, 21 Oct 2024 06:22:48 GMT

URL请求细节

1. 从输入URL到页面加载完成的过程？（高频考点）

[!NOTE] 涉及到浏览器缓存、TCP连接、浏览器渲染等知识。

1.1 基本流程

判断是否需要跳转(301)
从浏览器中读取缓存
DNS解析
TCP连接
HTTP请求发出
服务端处理请求，HTTP响应返回
浏览器拿到响应数据，解析响应内内容，把解析结果展示给用户

1.2 详细流程（重点掌握）

在浏览器地址栏输入URL
浏览器查看是否有强缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
1. 如果资源未缓存，发起新请求
2. 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。
3. 检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：
  - HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
  - HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
浏览器解析URL获取协议，主机，端口，path
浏览器组装一个HTTP（GET）请求报文
DNS解析，查找过程如下：
1. 浏览器缓存
2. 本机缓存
3. hosts文件
4. 路由器缓存
5. ISP DNS缓存
6. DNS查询（递归查询 / 迭代查询）
端口建立TCP链接，三次握手如下：
1. 客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
2. 服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
3. 客户端发送ACK=Y+1， Seq=Z
TCP链接建立后发送HTTP请求
服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
服务器将响应报文通过TCP连接发送回浏览器
浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：
1. 主动方发送Fin=1， Ack=Z， Seq= X报文
2. 被动方发送ACK=X+1， Seq=Z报文
3. 被动方发送Fin=1， ACK=X， Seq=Y报文
4. 主动方发送ACK=Y， Seq=X报文
浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
如果资源可缓存，进行缓存
对响应进行解码（例如gzip压缩）
根据资源类型决定如何处理（假设资源为HTML文档）
解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释
构建DOM树：
1. Tokenizing：根据HTML规范将字符流解析为标记
2. Lexing：词法分析将标记转换为对象并定义属性和规则
3. DOM construction：根据HTML标记关系将对象组成DOM树
解析过程中遇到图片、样式表、js文件，启动下载
构建CSSOM树：
1. Tokenizing：字符流转换为标记流
2. Node：根据标记创建节点
3. CSSOM：节点创建CSSOM树
根据DOM树和CSSOM树构建渲染树:
1. 从DOM树的根节点遍历所有可见节点，不可见节点包括：1）script,meta这样本身不可见的标签。2)被css隐藏的节点，如display: none
2. 对每一个可见节点，找到恰当的CSSOM规则并应用
3. 发布可视节点的内容和计算样式
js解析如下：
1. 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading
2. HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容
3. 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素
4. 当文档完成解析，document.readState变成interactive
5. 所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()
6. 浏览器在Document对象上触发DOMContentLoaded事件
7. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete,window触发load事件
显示页面（HTML解析过程中会逐步显示页面）

补充知识：浏览器缓存包含两种类型，即强缓存（也叫本地缓存）和协商缓存
强缓存和协商缓存:https://www.cnblogs.com/wonyun/p/5524617.html

获取资源形式    状态码    发送请求到服务器
强缓存     从缓存取     200（from cache）    否，直接从缓存取
协商缓存     从缓存取     304（not modified）    是，正如其名，通过服务器来告知缓存是否可用

【编程题与分析题】模板字符串的高级用法

https://github.com/fecommunity — Sat, 19 Oct 2024 03:17:45 GMT

模板字符串的高级用法

// 模板字符串的使用
let msg = `Hello \`World`
// 可以直接原样输出
let message01 = `
    
        1
        2
    
`.trim();

// TODO: 模板字符串的嵌套
let arr = [{value: 1}, {value: 2}];
let message02 = `
    
        ${arr.map((item) => {
            return `
                ${item.value}
                    `
            }).join('')}
    
`;

// TODO: 标签模板
function handleMessage(){

}

let x = 'Hi', y = 'Kevin';
var res = handleMessage`${x}, I am ${y}`;
console.log(res);

// TODO: 需求：实现message在书写的时候是换行的，输出字符是在一行？？？
let message03 = `
    Hi,
    Daisy!
    I am
    Kevin.
`;


function handleMessage(literals, ...values) {
    let res = '';
    for (let i = 0; i < values.length; i++) {
        res += literals[i];
        res += values[i];
    }

    res += literals[literals.length - 1];
    return res;
}

/**
 * 多行转换为一行文本
 * @param template 原始的模板字符串
 * @param expressions 模板字符串里面的表达式（计算后的结果）
 * @return {*}
 */
function oneLine(template, ...expressions) {
    console.log(template, expressions)
    let res = template.reduce((prev, next, i) => {
        // 默认从1开始
        console.log(i)
        let expression = expressions[i - 1];
        return prev + expression + next;
    })

    // 得到了已经和表达式合并之后的结果
    console.log('current res', res)

    // 将多个空白符如换行符、空格等替换成一个空格
    // res = res.replace(/(\s+)/g, ' ');
    res = res.replace(/(\n\s*)/g, ' ');
    // 去掉两边的空格
    res = res.trim();

    return res;
}
let msg01 = oneLine`
    Hi,
    ${1 + 1}
    Daisy!
    I am
    ${2 - 2}
    Kevin.
`;
console.log(msg01);



// 处理模板字符串中的函数处理结果
function includeArrays(template, ...expressions) {
    let result = template.reduce((prev, next, i) => {

        let expression = expressions[i - 1];

        if (Array.isArray(expression)) {
            expression = expression.join('');
        }

        return prev + expression + next;
    });

    result = result.trim();

    return result;
}

【面经系列】腾讯面经

https://github.com/fecommunity — Thu, 17 Oct 2024 19:24:35 GMT

腾讯面经系列

js基本数据类型
js的作用域
如何判断一个数组是数组
BOM 和 DOM的区别
有一个字符串里面有很多is 请写一个方法只保留一个is
问了sql注入和防御，我说我有点忘了，把话题转移到了xss
问了node 问了如何用experess搭建服务器
js 的event-loop
有3个-10--10之间的整数，写一个方法这三个数一共有多少可能想加等于10
redux
react vue 的一些基础
说一下思路，如何把一个图片的地址，传到服务器，并保存在服务器
用js中的正则表达式去掉两边的空格
堆和栈的区别
快排，怎么判断快排排好了
dom操作，怎么遍历所有dom节点，根div下有两div(A与B)，每个div下面又有两个span(A1,A2)与span(B1、B2)，怎么将spanA1与A2存在一个数组，B1与B2存在一个数组，树的遍历算法，这个题应该用深度优先还是广度优先，用什么数据结构。
tcp慢启动
tcp三次、四次握手
https握手，加密方式是对称还是非对称
强缓存、弱缓存
修改this的方法，apply和call区别
对JS闭包的理解
原型链
事件冒泡与捕获
原生ajax请求带cookie
jsonp怎么反回后台数据
跨域后台怎么设置
es6 class怎么用es5实现
怎么实现动画，canvas动画与svg区别
css动画优化
promise原理怎么实现
水平垂直居中
从浏览器输入URL会发生什么
浏览器渲染，css、js会阻塞dom树加载吗
xss怎么防御
前端怎么实现富文本编辑器
PWA（Progressive Web App）
Service Worker
后台广播
http 长、短轮训
前端缓存，很长的数据缓存怎么选择
301与302区别，什么时候返回304
http1.1和http2.0的区别
CDN有没有了解
怎样判断Object和Array，Object有父对象么
CSS positon的属性有常见三个值 absolute fixed relative 这三个值有什么区别是怎么用的，这三个跟文档流的关系？
两个单位em和rem，是怎么用的，有什么区别
js中的类数组
能不能改写一个数组的push方法，不是重写，也不是新写，保持原来的逻辑之外，再添加一个consle.log（arguements）在控制台打印出来，比如pushA。在工作台把A打印出来，push什么就打印什么。原来的逻辑不能改？
学习前端的方式有哪些？看哪些博客？看过哪些书？
JS如何改变函数上下文
bind/call/apply有什么区别？
bind调用时传入一个参数，此参数跟函数原有的参数什么关系？
CSS继承属性有哪些？列举3个
块级元素有哪些？
CSS position有哪些取值？
一个div,position设置为absolute,再用JS设置div.style.position=""，问这时div的表现？怎么去判断？
如何检测浏览器所支持的最小字体大小？
怎么做JS代码Error统计？
一张高清图片，怎么保证其在不同移动端设备上的显示效果？
html中一进入就一直页面缓冲不出来组件怎么办
怎么使用纯css实现一个三角形
html不同页面之间怎么共享数据
垃圾回收机制是怎么样
一个5升瓶子和一个6升瓶子怎么装3升水
为什么js是单线程？怎么解决
如何定义私有字段
git add commit 区别 commit到哪？
用过webpack吗？怎么用的？css文件
HTTP 如何标记缓存
etag和exprises 哪个用得比较多为什么
35分时针分针夹角几度
实现一个input输入框，实现在一个arr数组查询命中和自动补齐效果
实现一个函数，完成超过范围的两个大整数相加功能
diff算法，树的深搜广搜
缓存机制，如何缓存图片
非递归便利二叉树
web性能优化
浏览器连接限制，编码怎么解决，http2.0
网络安全, xss, csrf
有一个数组，对这个数组按顺序进行异步处理，一个处理完才开始下一个，然后问用foreach行不行。
介绍发一个Ajax请求的链路全过程。IP地址怎样获取？
如何让一个cookie同时用于a.qq.com和b.qq.com？
有一个a.qq.com的图片发到百度贴吧上，会不会带上那个cookie？
快排原理，时间空间复杂度，为什么空间复杂度是log2n？
Vue响应式原理。
介绍项目，说其中的难点。
介绍归并排序原理。
说一下nodejs的原理（？？？不会，只说了事件驱动balabala）
https（又是https）
从海量十亿个数选最大的一百个，你有什么方法？
除了Vue还会什么？
React-router和路由的实现的方式有哪些？
移动端的适配问题？字体大小一致？
移动端的30ms点击延迟问题?如何解决？
node和ES6规范的差别？
module.exports和exports 的区别，与CommonJS的联系？
export 和 export default 的区别？
Canvas的性能如何优化？
JS的原型是什么？
webpack的底层实现原理，懒加载的配置
CSS雪碧图和Base64编码的选择？Base64编码原理？
get请求的url地址如何通过post方式发送？
浏览器的缓存策略？
将一个div容器移动到另外一个div容器的过程？
实现一个原生的ajax封装？
浏览器路由的实现方式有哪些?
输入URL到内容完全展示出来的过程？
HTTPS和HTTP的原理和区别？
Webpack和Gulp的区别
URL请求的过程
首页渲染问题如何优化, 前端的性能优化方式有哪些？
网站首页白屏错误如何排查？实时监控？
如何解决JS的回调地狱问题?
CSS的margin重叠问题如何解决？
mvvm mvc；
单页应用多页应用的优缺点；
前后分离不分离哪一个更安全区别页面的响应是前端还是后端；
typeScript；
this指针；
原型链；
https；
维持登录状态；
es6常用；
ccs3用过什么；
浏览器怎么适配；
你封装过什么组件；
js怎么优化；
工程化。webpack；
webpack工作原理；
和同事关系不好，怎么办；
一个5升一个6升空瓶子怎么弄出来2l水；
上海高铁到杭州杭州飞机到老家现在高铁晚点了怎么办（今天必须回家）；
react生命周期
url的整个过程，越多越好；
跨域的方式，越多越好；
web优化的方式，越多越好；
react生命周期，和vue比较，要求多说；
rsa算法，esa算法；
linux查看进程的命令；
一个很大的数据集包括192.168.0.1 -24/32/30 给一个ip地址怎么知道在不在这个数据集中；
给一亿个长度不一样的字符串，怎么判断一个随机长度的字符串在不在这个里面（字典树）；
给一堆整数，怎么判断这个整数在不在这一堆数里面（位图）；
一个表有姓名年龄课程，sql数据库找每个人的最高成绩，课程名，姓名。
说一下url；
xss怎么预防；
http说一下；
get post区别；
tcp三次握手和四次分手，都有什么标志；
pv uv是啥；
h5用过什么；
xml json区别；
web优化；
mysql引擎；
浏览器引擎有什么；
页面渲染的过程；
http劫持怎么预防；
ngnix反向代理服务器

【编程题与分析题】模拟实现私有变量

https://github.com/fecommunity — Sun, 13 Oct 2024 22:55:06 GMT

模拟实现私有变量（面试加分项）

// 私有变量的实现
// v1. 基础实现
class Example {
    constructor(name){
        this._private = name;
    }

    getName(){
        return this._private;
    }
}

let ex = new Example('private1');
console.log(ex.getName(), ex._private);  // private private
let ex1 = new Example('private2');
console.log(ex1.getName(), ex1._private);  // private private

// TODO: 主要问题
// 1. 外部可以访问和修改
// 2. 语言没有配合的机制，for In可以枚举出来
// 3. 命名冲突



// v2. 使用闭包来实现
// v2.1
class Example02 {
    constructor(name){
        let _private = '';
        _private = name;

        this.getName = function () {
            return _private;
        }
    }
}
let ex01 = new Example02('private1');
console.log(ex01.getName(), ex01._private);  // private private
let ex02 = new Example02('private2');
console.log(ex02.getName(), ex02._private);  // private private

// 优点：1. 没有命名冲突， 2.外部无法直接访问和修改
// TODO: 缺点
// 1. constructor 的逻辑变得复杂。构造函数应该只做对象初始化的事情，现在为了实现私有变量，必须包含部分方法的实现，代码组织上略不清晰。
// 2. 方法存在于实例，而非原型上，子类也无法使用 super 调用
// 3. 构建增加一点点开销

// v2.2 代码优化
const Example03 = (function () {
    let _private = '';

    class Example03 {
        constructor() {
           _private = 'private';
        }

        getName(){
            return _private;
        }
    }

    return Example03;
})();

let ex3 = new Example03();
console.log(ex3.getName(), ex3._private) // private undefined
// 优点： 1. 没有命名冲突， 2. 外部无法访问和修改
// TODO: 缺点：1. 写法复杂 2. 构建开销


// v3. 使用Symbol来实现
const Example4 = (function () {
    // 每个Symbol实际上都是唯一的
    let _private = Symbol('private');

    class Example4 {
        constructor(props) {
            this[_private] = 'private';
        }

        getName(){
            return this[_private];
        }
    }

    return Example4;
})();

// 优点： 1.没有命名冲突 2.外部无法访问和修改 3. 没有性能损失
// 缺点： 写法稍微复杂，兼容性还好



// v4. 使用WeakMap实现
const _private = new WeakMap();

class Example5 {
    constructor(){
        _private.set(this, 'private');
    }

    getName(){
        return _private.get(this);
    }
}

let ex5 = new Example5();
console.log(ex5.getName(), ex5.name)

// 上面的代码封装
const Example5 = (function () {
    const _private = new WeakMap();

    class Example5{
        constructor(){
            _private.set(this, 'private');
        }

        getName(){
            return _private.get(this);
        }
    }

    return Example5;
})();


// v5. 最新提案
class Point {
    #x;
    #y;

    constructor(x, y){
        this.#x = x;
        this.#y = y;
    }

    equals(point){
        return this.#x === point.#x && this.#y === point.#y;
    }
}

【NodeJS相关】EventLoop

https://github.com/fecommunity — Sat, 12 Oct 2024 10:28:09 GMT

EventLoop

1. EventLoop的执行流程图

  ┌───────────────────────┐
┌─>│        timers         │<————— 执行 setTimeout()、setInterval() 的回调
│  └──────────┬────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
│  ┌──────────┴────────────┐
│  │     pending callbacks │<————— 执行由上一个 Tick 延迟下来的 I/O 回调（待完善，可忽略）
│  └──────────┬────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
│  ┌──────────┴────────────┐
│  │     idle, prepare     │<————— 内部调用（可忽略）
│  └──────────┬────────────┘     
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
|             |                   ┌───────────────┐
│  ┌──────────┴────────────┐      │   incoming:   │ - (执行几乎所有的回调，除了 close callbacks 以及 timers 调度的回调和 setImmediate() 调度的回调，在恰当的时机将会阻塞在此阶段)
│  │         poll          │<─────┤  connections, │ 
│  └──────────┬────────────┘      │   data, etc.  │ 
│             |                   |               | 
|             |                   └───────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
|  ┌──────────┴────────────┐      
│  │        check          │<————— setImmediate() 的回调将会在这个阶段执行
│  └──────────┬────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
│  ┌──────────┴────────────┐
└──┤    close callbacks    │<————— socket.on('close', ...)

setTimeout/setInterval 属于 timers 类型；
setImmediate 属于 check 类型；
socket 的 close 事件属于 close callbacks 类型；
其他 MacroTask 都属于 poll 类型。
process.nextTick 本质上属于 MicroTask，但是它先于所有其他 MicroTask 执行；
所有 MicroTask 的执行时机，是不同类型 MacroTask 切换的时候。
idle/prepare 仅供内部调用，我们可以忽略。
pending callbacks 不太常见，我们也可以忽略。

2. 执行机制

先执行所有类型为 timers 的 MacroTask，然后执行所有的 MicroTask（注意 NextTick 要优先哦）；
进入 poll 阶段，执行几乎所有 MacroTask，然后执行所有的 MicroTask；
再执行所有类型为 check 的 MacroTask，然后执行所有的 MicroTask；
再执行所有类型为 close callbacks 的 MacroTask，然后执行所有的 MicroTask；
至此，完成一个 Tick，回到 timers 阶段； …… 如此反复，无穷无尽……

2.1 实例理解

const macroTaskList = [
  ['task1'],
  ['task2', 'task3'],
  ['task4'],
]

for (let macroIndex = 0; macroIndex < macroTaskList.length; macroIndex++) {
  const microTaskList = macroTaskList[macroIndex]

  for (let microIndex = 0; microIndex < microTaskList.length; microIndex++) {
    const microTask = microTaskList[microIndex]

    // 添加一个微任务
    if (microIndex === 1) microTaskList.push('special micro task')

    // 执行任务
    console.log(microTask)
  }

  // 添加一个宏任务
  if (macroIndex === 2) macroTaskList.push(['special macro task'])
}


// 输出结果：
// > task1
// > task2
// > task3
// > special micro task
// > task4
// > special macro task

2.2 执行细节分析

2.2.1 试分析下面程序的执行结果

console.log(1)
setTimeout(function() {
    console.log(2)
})

Promise.resolve()
    .then(function() {
        console.log(3)
    })

console.log(4)

2.2.2 执行流程分析

stack(执行栈)、Micro(微任务)、Macro（宏任务）

初始状态： stack:[], Micro: [], Macro: [script]。执行栈为空, 微任务为空, 宏任务队列中有一个整体的 script代码
主线程开始执行, 遇到console.log(1), 首先会打印 1
继续向下执行,遇到 setTimeout异步任务,就将其加入到Macro(宏任务)队列中。等待执行
继续向下执行, 遇到 Promise.resolve也是一个异步任务,单它是微任务,将其加入 Micro(微任务)队列中,等待着行
解析console.log(4), 并且打印4。当主线程执行完打印的结果依次是 1 和 4。
这时候主线程就会问任务(异步)队列,有没有微任务要执行,将所有的 Micro(微任务)加入执行栈执行, 打印结果 3
微任务执行完了, 就开始下一轮事件循环, 将第一个 Macro(宏任务)压入执行栈执行, 再次打印 2。

3. 谈一下宏任务与微任务的区别？（面试重点）

[!NOTE] 面试常考点，关键在于理解EventLoop的机制，以及宏任务和微任务的底层原理。

3.1 宏任务

setTimeout
setInterval
setImmediate
requestAnimationFrame

常见的宏任务: setTimeout、setInterval、setImmediate、 script中整体的代码、 I/O操作、 UI渲染等。

3.2 微任务

process.nextTick
MutationObserver
Promise.then catch finally

常见的微任务有: process.nextTick、Promise和 MutationObserver监听DOM的变化。

3.3 微任务和宏任务的区别

[!NOTE]

微任务进入主线程执行是一队一队的, 而宏任务进入主线程是一个一个的。

微任务是在主线程空闲时批量执行, 宏任务是在事件循环下一轮的最开始执行

参考文章：

【JS相关】函数

https://github.com/fecommunity — Sat, 12 Oct 2024 07:15:37 GMT

函数

1. JS编译解析的流程

1.1 JS运行分三步

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

1.2 预编译执行分五步

创建AO对象（Activation Object 执行期上下文）
找形参和变量声明，将变量和形参名作为AO属性名，值为undefined. 变量声明提升（变量放到后面也不会报错，只是未定义类型）如：console.log(a);var a=10;结果undenfined;
将实参值和形参统一（传参）
在函数体里面找到函数声明{函数声明整体提升（相当于放到程序最前面）}
值赋予函数体，执行（声明函数和变量的部分直接不看了）

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

2.1 函数作用域

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

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

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

2.2 作用域链

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

2.3 闭包

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

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

2.3.1 详细解释

当函数执行时，会创建一个称为执行期上下文的内部对象（AO），执行期上下文定义了一个函数执行时的环境。
函数还会获得它所在作用域的作用域链，是存储函数能够访问的所有执行期上下文对象的集合，即这个函数中能够访问到的东西都是沿着作用域链向上查找直到全局作用域。
函数每次执行时对应的执行期上下文都是独一无二的，当函数执行完毕，函数都会失去对这个作用域链的引用，JS的垃圾回收机制是采用引用计数策略，如果一块内存不再被引用了那么这块内存就会被释放。
但是，当闭包存在时，即内部函数保留了对外部变量的引用时，这个作用域链就不会被销毁，此时内部函数依旧可以访问其所在的外部函数的变量，这就是闭包。

2.3.2 闭包的应用

先看两个例子，两个例子都打印5个5

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

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]();
}

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

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

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 闭包-封装私有变量

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. 作用域与变量声明提升?

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

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

   var obj  = {}; 
   obj.__proto__ = Base.prototype;
   Base.call(obj);

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

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

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 = {} 这一步操作就将应用与原来的分离了

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

方法调用模式 Foo.foo(arg1, arg2);
函数调用模式 foo(arg1, arg2);
构造器调用模式 (new Foo())(arg1, arg2);
call/applay 调用模式 Foo.foo.call(that, arg1, arg2);
bind 调用模式 Foo.foo.bind(that)(arg1, arg2)();

【计算机网络】WebSocket

https://github.com/fecommunity — Sat, 05 Oct 2024 06:53:14 GMT

WebSocket的实现原理

1.介绍一下websocket和通信过程？

1.1 基本概念

[!NOTE] Websocket是应用层第七层上的一个应用层协议，它必须依赖 HTTP 协议进行一次握手，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。即：websocket分为握手和数据传输阶段，即进行了HTTP握手 + 双工的TCP连接。

1.2 通信过程

下面我们分别来看一下这两个阶段的具体实现原理：

1.2.1 握手阶段

客户端发送消息：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Version: 13
服务端返回消息：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
这里值得注意的是Sec-WebSocket-Accept的计算方法：
base64(hsa1(sec-websocket-key + 258EAFA5-E914-47DA-95CA-C5AB0DC85B11))
如果这个Sec-WebSocket-Accept计算错误浏览器会提示：Sec-WebSocket-Accept dismatch
如果返回成功，Websocket就会回调onopen事件

1.2.2 传输阶段

[!NOTE] Websocket的数据传输是frame形式传输的，比如会将一条消息分为几个frame，按照先后顺序传输出去。

这样做会有几个好处：

a、大数据的传输可以分片传输，不用考虑到数据大小导致的长度标志位不足够的情况。
b、和http的chunk一样，可以边生成数据边传递消息，即提高传输效率。

websocket传输使用的协议参数说明如下：

FIN：1位，用来表明这是一个消息的最后的消息片断，当然第一个消息片断也可能是最后的一个消息片断；

RSV1, RSV2, RSV3: 分别都是1位，如果双方之间没有约定自定义协议，那么这几位的值都必须为0,否则必须断掉WebSocket连接；

Opcode: 4位操作码，定义有效负载数据，如果收到了一个未知的操作码，连接也必须断掉，以下是定义的操作码：

%x0 表示连续消息片断
%x1 表示文本消息片断
%x2 表未二进制消息片断
%x3-7 为将来的非控制消息片断保留的操作码
%x8 表示连接关闭
%x9 表示心跳检查的ping
%xA 表示心跳检查的pong
%xB-F 为将来的控制消息片断的保留操作码

[!NOTE]

Mask: 1位，定义传输的数据是否有加掩码,如果设置为1,掩码键必须放在masking-key区域，客户端发送给服务端的所有消息，此位的值都是1；

Payload length: 传输数据的长度，以字节的形式表示：7位、7+16位、或者7+64位。如果这个值以字节表示是0-125这个范围，那这个值就表示传输数据的长度；如果这个值是126，则随后的两个字节表示的是一个16进制无符号数，用来表示传输数据的长度；如果这个值是127,则随后的是8个字节表示的一个64位无符合数，这个数用来表示传输数据的长度。多字节长度的数量是以网络字节的顺序表示。负载数据的长度为扩展数据及应用数据之和，扩展数据的长度可能为0,因而此时负载数据的长度就为应用数据的长度。

Masking-key: 0或4个字节，客户端发送给服务端的数据，都是通过内嵌的一个32位值作为掩码的；掩码键只有在掩码位设置为1的时候存在。

Payload data: (x+y)位，负载数据为扩展数据及应用数据长度之和。

Extension data: x位，如果客户端与服务端之间没有特殊约定，那么扩展数据的长度始终为0，任何的扩展都必须指定扩展数据的长度，或者长度的计算方式，以及在握手时如何确定正确的握手方式。如果存在扩展数据，则扩展数据就会包括在负载数据的长度之内。

Application data: y位，任意的应用数据，放在扩展数据之后，应用数据的长度=负载数据的长度-扩展数据的长度。

2. Websocket传输文件的思路？（加分项）

服务器端侦听某端口，接受WebSocket请求，后面可用nginx作反向代理，外部看到的将是80端口
客户端连接服务器的WebSocket地址，连接成功后，首先传送一个NEW_FILE的数据包，里面带上要传输的文件名
服务器端收到NEW_FILE包后，解析出文件名，并创建目标文件，再回复ACK_NEW_FILE的数据包
客户端收到ACK_NEW_FILE的数据包后，检查回应的code，如是成功码，则启动一个线程，该线程负责将源文件的数据封装成多个FILE_DATA数据包，传送这些FILE_DATA数据至服务器端
服务器端接收FILE_DATA数据包，解析出里面的文件数据，将文件数据写入文件
客户端发送完源文件数据后，再传送一个FILE_END数据包，该文件包中带上源文件的MD5值
服务器端收到FILE_END数据包后，比对源文件的MD5值与目标文件的MD5值，如相同，则认为传输成功，并返回ACK_FILE_END数据包，里面带上成功码
客户端收到ACK_FILE_END数据包，检查回应的code，如是成功码，则认为传输成功，否则认为传输失败

3. Websocket是什么样的协议，具体有什么优点？

3.1 基本介绍

首先，Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。简单的举个例子吧，用目前应用比较广泛的PHP生命周期来解释。
HTTP的生命周期通过 Request 来界定，也就是一个 Request 一个 Response ，那么在 HTTP1.0 中，这次HTTP请求就结束了。
在HTTP1.1中进行了改进，使得有一个keep-alive，也就是说，在一个HTTP连接中，可以发送多个Request，接收多个Response。但是请记住 Request = Response ，在HTTP中永远是这样，也就是说一个request只能有一个response。而且这个response也是被动的，不能主动发起。
Websocket是基于HTTP协议的，或者说借用了HTTP的协议来完成一部分握手。

3.2 细节介绍

首先我们来看个典型的 Websocket 握手（借用Wikipedia的。。）

    GET /chat HTTP/1.1
    Host: server.example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
    Sec-WebSocket-Protocol: chat, superchat
    Sec-WebSocket-Version: 13

Origin: http://example.com

熟悉HTTP的童鞋可能发现了，这段类似HTTP协议的握手请求中，多了几个东西。我会顺便讲解下作用。

Upgrade: websocket Connection: Upgrade 这个就是Websocket的核心了，告诉 Apache 、 Nginx 等服务器：注意啦，我发起的是Websocket协议，快点帮我找到对应的助理处理~不是那个老土的HTTP。

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13

首先， Sec-WebSocket-Key 是一个 Base64 encode 的值，这个是浏览器随机生成的，告诉服务器：泥煤，不要忽悠窝，我要验证尼是不是真的是Websocket助理。

然后， Sec_WebSocket-Protocol 是一个用户定义的字符串，用来区分同URL下，不同的服务所需要的协议。简单理解：今晚我要服务A，别搞错啦~

最后， Sec-WebSocket-Version 是告诉服务器所使用的 Websocket Draft（协议版本），在最初的时候，Websocket协议还在 Draft 阶段，各种奇奇怪怪的协议都有，而且还有很多期奇奇怪怪不同的东西，什么Firefox和Chrome用的不是一个版本之类的，当初Websocket协议太多可是一个大难题。。不过现在还好，已经定下来啦~~大家都使用的一个东西~~ 脱水：服务员，我要的是13岁的噢→_→

然后服务器会返回下列东西，表示已经接受到请求，成功建立Websocket啦！

HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat 这里开始就是HTTP最后负责的区域了，告诉客户，我已经成功切换协议啦~

Upgrade: websocket Connection: Upgrade 依然是固定的，告诉客户端即将升级的是 Websocket 协议，而不是mozillasocket，lurnarsocket或者shitsocket。

然后， Sec-WebSocket-Accept 这个则是经过服务器确认，并且加密过后的 Sec-WebSocket-Key 。服务器：好啦好啦，知道啦，给你看我的ID CARD来证明行了吧。。

后面的， Sec-WebSocket-Protocol 则是表示最终使用的协议。

至此，HTTP已经完成它所有工作了，接下来就是完全按照Websocket协议进行了。具体的协议就不在这阐述了。

【计算机网络】跨域

https://github.com/fecommunity — Sat, 05 Oct 2024 00:29:04 GMT

跨域问题

1.跨域问题的产生原因？

1.1 同源策略

端口相同
域名相同
协议相同

例子：http://www.example.com/dir/page.html 这个网址，协议是http，域名是www.example.com，端口是80

[!NOTE] 同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。是浏览器做的努力

1.2 同源策略限制范围

Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 无法获得
- AJAX 请求不能发送

2 跨域通信的解决方法？

2.1 CROS跨域资源请求

[!NOTE] CORS(Cross-origin resource sharing)跨域资源请求: 浏览器在请求一个跨域资源的时候，如果是跨域的Ajax请求，他会在请求头中加一个origin字段，但他是不知道这个资源服务端是否允许跨域请求的。浏览器会发送到服务端，如果服务器返回的头中没有'Access-Control-Allow-Origin': '对应网址或 * ' 的话，那么浏览器就会把请求内容给忽略掉，并且在控制台报错

2.1.1 CORS限制

允许的请求方法

GET
POST
HEAD

允许的Content-Type

text/plain
multipart/form-data
application/x-www-form-ulencoded

其他类型的请求方法和Content-Type需要通过预请求验证后然后才能发送

2.1.2 CORS预请求

[!NOTE] 跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求。

服务器在HTTP header中加入允许请求的方法和Content-Type后，其他指定的方法和Content-Type就可以成功请求了

'Access-Control-Allow-Headers': '允许Content-Type'
'Access-Control-Allow-Methods': '允许的请求方法'
'Access-Control-Max-Age': '预请求允许其他方法和类型传输的时间'

2.2 JSONP跨域

2.2.1 基本概念

[!NOTE] 浏览器上虽然有同源限制，但是像 srcipt标签、link标签、img标签、iframe标签，这种在标签上通过src地址来加载一些内容的时候浏览器是允许进行跨域请求的。

2.2.2 跨域原理

创建一个script标签，这个script标签的src就是请求的地址；
这个script标签插入到DOM中，浏览器就根据src地址访问服务器资源
返回的资源是一个文本，但是因为是在script标签中，浏览器会执行它
而这个文本恰好是函数调用的形式，即函数名（数据），浏览器会把它当作JS代码来执行即调用这个函数
只要提前约定好这个函数名，并且这个函数存在于window对象中，就可以把数据传递给处理函数。

2.3 Hash值跨域通信

[!NOTE] 背景：在页面A下提供iframe或frame嵌入了跨域的页面B

容器页面 -> 嵌入页通信：

在A页面中改变B的url中的hash值，B不会刷新，但是B可以用过window.onhashchange事件监听到hash变化

2.4 postMessage通信

// 窗口A中
window.postMessage('data', 'http://A.com');
// 窗口B中
window.addEventListener('message', function(event) {
  console.log(event.origin);    // http://A.com
  console.log(event.source);    // A 对象window引用
  console.log(event.data);      // 数据
})

2.5 WebSoket 跨域通信

var ws = new WebSocket('wss://echo.websoket.org') //这个是后端端口

ws.onopen = function(evt) {
  ws.send('some message')
}

ws.onmessage = function (evt) {
  console.log(evt.data);
}

ws.onclose = function(evt){
  console.log('连接关闭');
}

【前端面试题】NodeJS

https://github.com/fecommunity — Fri, 27 Sep 2024 10:19:44 GMT

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. 什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?

熟悉前后端通信相关知识

【Web安全】XSS攻击

https://github.com/fecommunity — Fri, 27 Sep 2024 08:04:27 GMT

XSS 跨站脚本攻击

1. 介绍一下XSS攻击的原理和危害？

1.1 基本原理

[!NOTE] XSS ( Cross Site Scripting ) 是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。

1.2 XSS攻击的危害

获取页面数据
获取cookie
劫持前端逻辑
发送请求
偷取网站任意数据
偷取用户资料
偷取用户密码和登陆态
欺骗用户

1.3 XSS攻击分类

1.3.1 反射型

通过url参数直接注入。

发出请求时，XSS代码出现在URL中，作为输入提交到服务器端，服务端解析后返回，XSS代码随响应内容一起传回给浏览器，最后浏览器执行XSS代码。这个过程像一次反射，故叫做反射型XSS。

举个例子

一个链接，里面的query字段中包含一个script标签，这个标签的src就是恶意代码，用户点击了这个链接后会先向服务器发送请求，服务器返回时也携带了这个XSS代码，然后浏览器将查询的结果写入Html，这时恶意代码就被执行了。

并不是在url中没有包含script标签的网址都是安全的，可以使用短网址来让网址变得很短。

1.3.2 存储型

[!NOTE] 存储型XSS会被保存到数据库，在其他用户访问（前端）到这条数据时，这个代码会在访问用户的浏览器端执行。

举个例子

比如攻击者在一篇文章的评论中写入了script标签，这个评论被保存数据库，当其他用户看到这篇文章时就会执行这个脚本。

1.4 XSS攻击注入点

HTML节点内容
- 如果一个节点内容是动态生成的，而这个内容中包含用户输入。
HTML属性
- 某些节点属性值是由用户输入的内容生成的。那么可能会被封闭标签后添加script标签。

Javascript代码
- JS中包含由后台注入的变量或用户输入的信息。
```
var data = "#{data}";
var data = "hello"; alert(1);"";
```
富文本

2. XSS 防御方法有哪些？

[!NOTE] 对于 XSS 攻击来说，通常有两种方式可以用来防御。

转义字符

CSP 内容安全策略

2.1 转义字符

普通的输入 - 编码
- 对用户输入数据进行HTML Entity编码（使用转义字符）
- "
- &
- <
- >
- 空格
富文本 - 过滤（黑名单、白名单）
- 移除上传的DOM属性，如onerror等
- 移除用户上传的style节点、script节点、iframe节点等
较正
- 避免直接对HTML Entity解码
- 使用DOM Parse转换，校正不配对的DOM标签和属性

2.1.1 对于会在DOM中出现的字符串（用户数据）

< 转义为 <

转义为 >

2.1.2 对于可能出现在DOM元素属性上的数据

" 转义为 " ' 转义为 &9039; 空格转义为但这可能造成多个连续的空格，也可以不对空格转义，但是一定要为属性加双引号

& 这个字符如果要转义，那么一定要放在转移函数的第一个来做

2.1.3 避免JS中的插入

var data = "#{data}";
var data = "hello"; alert(1);"";

因为是用引号将变量包裹起来的，而且被攻击也因为引号被提前结束，所以要做的就是将引号转义

先 \\ -> \\\\
再 " -> \\"

2.2 富文本

2.2.1 按照黑名单过滤script等

[!NOTE] 但是html标签中能执行html代码的属性太多了，比如onclick, onhover,onerror,

function xssFilter = function (html) {
  html = html.replace(/<\s*\/?script\s*>/g, '');
  html = html.repalce(/javascript:[^'"]/g, '');
  html = html.replace(/onerror\s*=\s*['"]?[^'"]*['"]?/g, '');
  //....
  return html;
}

2.2.1.1 按照白名单过滤

[!NOTE] 只允许某些标签和属性存在

做法：将HTML解析成树状结构，对于这个DOM树，一个一个的去看是否存在合法的标签和属性，如果不是就去掉。

使用cheerio就可以快速的解析DOM

function xssFilter (html) {

  const cheerio = require('cheerio');
  const $ = cheerio.load(html);

  //白名单
  const whiteList = {'img': ['src']}

  $('*').each((index, elem) => {
    if(!whiteList[elem.name]) {
      $(elem).remove();
      return;
    }
    for(let attr in elem.attribs) {
      if(whiteList[elem.name].indexOf(attr) === -1) {
        $(elem).attr(attr, null);
      }
    }
  })
  return html;
}

2.2.1.2 使用npm包来简化操作

xss文档

2.3 CSP 内容安全策略

[!NOTE] CSP 本质上就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少 XSS 攻击。

通常可以通过两种方式来开启 CSP：

设置 HTTP Header 中的 Content-Security-Policy
设置 meta 标签的方式

以设置 HTTP Header 来举例

只允许加载本站资源

Content-Security-Policy: default-src ‘self’

图片只允许加载 HTTPS 协议

Content-Security-Policy: img-src https://*

允许加载任何来源框架

Content-Security-Policy: child-src 'none'

参考文章

CSP ( Content Security Policy )

【CSS相关】CSS布局

https://github.com/fecommunity — Tue, 24 Sep 2024 23:19:33 GMT

CSS布局

1.实现两栏/三栏布局的方法?

表格布局
float + margin布局
inline-block布局
flexbox布局（兼容性的问题）

1.1 基础布局

1.2 圣杯布局



  
    
    实现三栏水平布局之圣杯布局
    
  
  
    
      main
      left
      right

1.3 双飞翼布局



  
    
    
    
    双飞翼布局
    
  
  
    中心区
    left
    right

2.absolute/fixed/static/sticky定位?

前者相对于最近的absolute/relative
后者相对于屏幕进行定位
fixed是相对于屏幕的可视区域的，也会直接脱离于文档流独立存在的
元素未滚动，在当前可视区域他的top值不生效，只有margin生效，滚动起来后margin失效，top值生效




  
  relative
  相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
  
  child 1
  child 2
  child 3
  


absolute
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
对于定位的主要问题是要记住每种定位的意义。
绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。所以如果要设定元素与其父元素的绝对位置定位就必须设定父元素的定位。
注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。
>
child 4
child 5
child 6



fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

child 7
child 8
child 9



static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

child 10
child 11
child 12

3.什么是层叠上下文？如何形层叠上下文？层叠顺序是怎样的？



    
        
            
                我是孙子辈的我是孙子辈的我是孙子辈的
            
        

        
            我是第二个子元素
        
    
    daughter-blue

3.1 形成层叠上下文的方法？

根元素
position值为 absolute|relative，且 z-index值不为 auto
position 值为 fixed|sticky
z-index 值不为 auto 的flex元素，即：父元素 display:flex|inline-flex
opacity 属性值小于 1 的元素
transform 属性值不为 none的元素
mix-blend-mode 属性值不为 normal 的元素
filter、 perspective、 clip-path、 mask、 mask-image、 mask-border、 motion-path 值不为none 的元素
perspective 值不为 none 的元素
isolation 属性被设置为 isolate 的元素
will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
-webkit-overflow-scrolling 属性被设置 touch的元素

[!NOTE]

层叠上下文可以包含在其他层叠上下文中，并且一起组建了一个有层级的层叠上下文

每个层叠上下文完全独立于它的兄弟元素，当处理层叠时只考虑子元素，这里类似于BFC

每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会在父级叠上下文中按顺序进行层叠

3.2 CSS层叠上下优先级

1.形成堆叠上下文环境的元素的背景与边框
2.拥有负 z-index 的子堆叠上下文元素（负的越高越堆叠层级越低）
3.正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
4.无 position 定位（static除外）的 float 浮动元素
5.正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
6.拥有 z-index:0 的子堆叠上下文元素
7.拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

3.3 层叠上下文的堆叠顺序？

[!NOTE]
总结：层叠上下文（border/background）< 负z-index < block块状盒子 < 浮动的盒子 < inline/inline-block水平盒子 < z-index:auto 或者 z-index:0 < 正z-index（定位并设定了正的z-index值，z-index值越大层级越高）

4.如何解决inline-block 的间隙问题？

4.1 字符间距问题

4.2 解决方法

1.解决方法1：直接删除换行符（IE1像素残留）
2.设置父元素的font-size为0，在子元素重新设置字体大小（低版本safari 兼容性）
3.父元素设置font-size：0 ；letter-spacing：-3px ，子元素重新设置font-size（推荐方案）

5.BFC是什么？如何清除浮动？

BFC：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关

5.1 如何触发BFC?

float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

5.2 BFC布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（高频考点）
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

5.3 如何清除浮动？

原因：浮动的元素不会占据父元素的布局空间（父元素布局不会管浮动元素）
清除方式：让盒子负责自己的布局：

5.3.1 添加额外标签

.main{float:left;}
.side{float:right;}


.footer

5.3.2 父元素设置 overflow：hidden


3)父元素设置 overflow 
.main{float:left;}
.side{float:right;}

.footer

5.3.3 使用:after 伪元素

5.3.4 双伪元素清除法(推荐)

.clearfix:before,.clearfix:after{
   content:"";
   display:table;
}
.clearfix:after{
  clear:both;
}
.clearfix{
  *zoom:1;
}

6.如何适配移动端？

6.1 viewport进行缩放

6.2 使用rem

rem是什么(CSS3新增)，初始值：1rem=16px？
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位

[!NOTE]
rem(1rem = 16px) / viewport（固定宽度） / media query（屏幕大小自适应）

6.3 设计上（响应式方法）

隐藏（移动端隐藏元素）折行（横排变纵排）自适应（留下自适应的空间）（media query）

6.4 固定宽度做法

定宽布局（版心）

7.em和rem的区别？

rem 单位翻译为像素值是由 html 元素的字体大小决定的。此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。
em 单位转为像素值，取决于他们使用的字体大小。此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位

8.垂直居中的6中实现方式？

8.1 方法一：基于视口的垂直居中



  
    
    
    
    垂直居中
  
  
  
    
      
        基于视口的垂直居中

        不要求原生有固定的宽高。

        但是这种居中是在整个页面窗口内居中，不是基于父元素

8.2 方法二：定宽居中



  
    
    
    
    垂直居中
  
  
  
    
        要求原生有固定的宽高。

        position: absolute;

        top和left 为 50%;

        margin上为高的一半

        margin左为宽的一半

8.3 方法三：calc居中



  
    
    
    
    垂直居中
  
  
  
    
        要求原生有固定的宽高。

        position: absolute;

        top 为 calc(50% 剪 一半高)
        left 为 calc(50% 剪 一半宽)

8.4 方法四：transform居中



  
    
    
    
    垂直居中
  
  
  
    
        不要求原生有固定的宽高。

        position: absolute;

        top和left 为 50%;

        transform: translate(-50%, -50%);

8.5 方法五：flex居中方法1



  
    
    
    
    垂直居中
  
  
  
    
      
        使用flex居中

        父元素 display: flex; 

        居中块： margin: auto;

8.6 方法六: flex居中方法2



  
    
    
    
    垂直居中
  
  
  
    
      
        使用flex居中

        父元素 display: flex; 

        justify-content: center;

        align-items: center;

9.水平居中的4种实现方式？

9.1 方法一：text-align的center属性



  
    
    
    
    水平元素居中
  
  
  
    
      如果需要居中的元素为常规流中 inline / inline-block 元素，为父元素设置 text-align: center;

9.2 方法二：margin的auto属性



  
    
    
    
    水平元素居中
  
  
  
    
      
          父元素上设置 text-align: center;

          居中元素上margin 为 auto。

9.3 方法三：绝对定位



  
    
    
    
    水平元素居中
  
  
  
    
      如果元素positon: absolute; 那么 0）设置父元素postion: relative 1）为元素设置宽度，2）偏移量设置为 50%，3）偏移方向外边距设置为元素宽度一半乘以-1

9.4 方法四：相对定位



  
    
    
    
    水平元素居中
  
  
  
    
      如果元素positon: relative。 那么 1）为元素设置宽度，2）偏移量设置为 50%，3）偏移方向外边距设置为元素宽度一半乘以-1

10 居中问题要点总结

10.1 被居中元素宽高固定

10.1.1 绝对定位+margin

top和left 为 50%， margin的left和top为自身宽高一半

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -9rem;
  margin-top: -5rem;
}

10.1.2 绝对定位+calc

top和lefe为父元素一半剪自身一半

.center {
  position: absolute;
  top: calc(50% - 5em);
  left: calc(50% - 9em);
}

10.2 被居中元素宽高不定

10.2.1 transform变换

使用CSS3 的 transform将位置在中心点平移自身宽高一半

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

10.2.2 flex布局+auto

.wrapper {
  display: flex;
}
.center {
  margin: auto;
}

10.2.3 flex布局+align

父元素指定子元素居中。

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

10.3 在浏览器窗口中居中

10.3.1 基于视口的垂直居中

不要求原生有固定的宽高，但是这种居中是在整个页面窗口内居中，不是基于父元素

.center{
  margin: 50vh auto;
  transform: translateY(-50%);
}

【计算机网络】缓存

https://github.com/fecommunity — Mon, 23 Sep 2024 23:44:28 GMT

缓存

1. 介绍一下HTTP的缓存？（面试重点）

[!NOTE] Http 的缓存主要利用 header 里的Cache-control 和 ETag

1.1 Cache-control

Cache-control主要包含以及几个字段：

public
- 指HTTP请求返回的资源在所经过的所有路径包括一些中间代理服务器以及发出这个请求的客户端浏览器都可以进行缓存
private
- 代表发起请求的浏览器才可以进行缓存
no-cache
- 指可以存缓存，但是每次使用都需要去服务端验证
no-store
- 本地和代理服务器都不允许去缓存
no-transform
- 不允许代理/缓存服务器转换文件格式

到期

max-age=
- 缓存到期时间
s-maxage=
- 代理服务器专用
max-stale=
- 指示客户机可以使用超出max-age时间的响应

重新验证

must-revalidate
- 设置了max-age的资源过期后必须到源服务端验证资源是否还可用
proxy-revalidate
- （缓存服务器用）设置了max-age的资源过期后必须到源服务端验证资源是否还可用

1.2 ETag

[!NOTE] ETag:即用来进行对比缓存，Etag 是服务端资源的一个标识码

当客户端发送第一次请求时服务端会下发当前请求资源的标识码 Etag，下次再请求时，客户端则会通过 header 里的 If-None-Match 将这个标识码 Etag 带上，服务端将客户端传来的 Etag 与最新的资源 Etag 做对比，如果一样，则表示资源没有更新，返回 304。

1.3 缓存方案

1.3.1 需求

有的静态资源会设置一个较长的缓存时间，但是我们希望用户还是能使用最新的资源。

1.3.2 解决方案

在打包完成的文件名上加上一串哈希码，这个哈希码是根据内容进行的哈希计算。所以，如果你的内容文件没有变，那么这个hash码不会变，即这个静态资源的url没有变。而如果内容有变，那么hash码也会变，浏览器就会去请求新的资源请求。

1.3.3 普通的缓存机制(重点理解)

1.4 资源验证

[!NOTE] 如果给Cache-Control设置了no-cache后，每次要使用资源时浏览器都要到服务器验证缓存是否过期。如果直接使用缓存，返回码：304

如何验证资源是否过期：

Last-Modified（上次修改时间）
- 配合 If-Modified-Since 或 If-Unmodified-Since 使用
- 如果请求的资源头中有Last-Modified这个头，这个头指定了一个时间。那么浏览器重新访问资源时就会带上If-Modified-Since这个头，其时间是Last-Modified的时间，服务器就会拿这个时间去对比上次修改的时间，然后告诉浏览器是否可以直接使用。
Etag （数据签名）
- 资源会依据它的内容产生一个唯一的数据签名，如果资源有更新，那么Etag就会发生变化。
- 配合 If-Match 或 If-None-Match 使用

【编程题与分析题】求数组最大值和最小值

https://github.com/fecommunity — Mon, 23 Sep 2024 16:50:32 GMT

求数组最大值和最小值

// 如何求出数组的最大值和最小值？

Math.max(true, 0) // 1
Math.max(true, '2', null) // 2
Math.max(1, undefined) // NaN
Math.max(1, {}) // NaN

var min = Math.min();   // Infinity
var max = Math.max();   // Infinity
console.log(min > max);

// v1: 原始方法
function max(arr) {
    let max = arr[0];
    for (let i = 0, len = arr.length; i < len; i++) {
        max = Math.max(max, arr[i]);
    }
    return max;
}


// v2: 使用reduce
function max(arr) {
    return arr.reduce((prev, next) => {
        return Math.max(prev, next);
    });

    return arr.reduce((prev, next) => {
        return prev > next ? prev : next;
    });
}

// v3: 使用eval, 由于Math.max支持多个参数来进行比较，可以把数组转换为多个参数
// 原因：使用eval里面的字符串实际上是发生了一个隐式转换，[1, 2, 3] ==> 1, 2, 3
// 相当于是 eval("Math.max(6,4,1,8,2,11,23)");
function max(arr) {
    return eval(`Math.max(${arr})`)
}

// v4: 使用apply来实现
function max(arr) {
    return Math.max.apply(null, arr);
}

// v5: 使用ES6..., 可以把一个数组转换为参数序列
function max(arr) {
    return Math.max(...arr);
}

function max(arr) {
    return Reflect.apply(Math.max, Math, arr);
}

【编程题与分析题】异步问题

https://github.com/fecommunity — Sun, 22 Sep 2024 16:32:54 GMT

promise与setTimeout 判断执行顺序

promise和setTimeout都会将事件放入异步队列，但setTimeout即便是写0，也会有4ms的延迟

console.log('begin');

setTimeout(() => {

  console.log('setTimeout 1');

  Promise.resolve()
    .then(() => {
      console.log('promise 1');
      setTimeout(() => {
          console.log('setTimeout2');
      });
    })
    .then(() => {
      console.log('promise 2');
    });

  new Promise(resolve => {
    console.log('a');
    resolve();
  }).then(() => {
    console.log('b');
  });

}, 0);
console.log('end');

答案

begin
end
setTimeout 1
a
promise 1
b
promise 2
setTimeout2

async函数的使用

function repeat(func, times, wait) {

}
// 输入
const repeatFunc = repeat(alert, 4, 3000);

// 输出
// 会alert4次 helloworld, 每次间隔3秒
repeatFunc('hellworld');
// 会alert4次 worldhellp, 每次间隔3秒
repeatFunc('worldhello')

我自己的实现，没有成功。这种实现是setTimeout新建了两个，然而只清理了一个。

function repeat(func, times, wait) {
  var timer = null;
  var count = 0;
  return function(...args) {
    timer = setInterval(function() {
      func.apply(null, args);
      count ++;
      console.log('count', count, "times", times)
      if( count >= times) {
        clearInterval(timer);
      }
    }, wait);
  }
}
// 输入
const repeatFunc = repeat(console.log, 4, 3000);
// 输出
// 会alert4次 helloworld, 每次间隔3秒
repeatFunc('hellworld');
// 会alert4次 worldhellp, 每次间隔3秒
repeatFunc('worldhello');

正确解法：使用 async/await来实现

async function wait(seconds) {
    return new Promise((res) => {
        setTimeout(res, seconds);
    });
}

function repeat(func, times, s) {
    return async function (...args) {
        for (let i = 0; i < times; i++) {
            func.apply(null, args);
            await wait(s);
        }
    };
}

let log = console.log
let repeatFunc = repeat(log,4,3000)
repeatFunc('HelloWorld')
repeatFunc('WorldHello')

async执行练习

await后面的才是异步的，之前都是同步的

async function async1() {
  console.log('async1 start');  // 2
  await async2();
  console.log('async1 end');    // 6
}

async function async2() {     
  console.log('async2');        // 3
}

console.log('script start');    //  1

setTimeout(function() {
  console.log('setTimeout');    // 8
}, 0);

async1();

new Promise(function(resolve) {
  console.log('promise1');      // 4
    resolve();
  }).then(function() {
      console.log('promise2');  // 7
  });

console.log('script end');      // 5

看代码，写结果

async function async1() {
console.log('async1 start')
await async2()
console.log('async1 end')
}

async function async2() {
console.log('async2')
}

console.log('script start')
setTimeout(function() {
console.log('setTimeout')
}, 0)

async1();

new Promise( function( resolve ) {
console.log('promise1')
resolve();
} ).then( function() {
console.log('promise2')
} )

console.log('script end')

解题思路

9步骤完成Linux 环境安装Git环境

https://github.com/fecommunity — Sat, 21 Sep 2024 15:00:04 GMT

1、安装 git 安装包

wget  https://github.com/git/git/archive/v2.22.0.tar.gz；

2、开始解压下载好的文件；

 tar -zxvf  v2.22.0.tar.gz

3、安装编译源码所需依赖，耐心等待安装，出现提示输入 y 即可；

 yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils-MakeMaker

4、如果，你之前安装过 git，那么需要先移除之前版本的 git，出现提示，直接 y 即可；

yum remove git

5、进入解压后的文件夹执行如下命令，等待编译即可；

cd git-2.22.0
make prefix=/usr/local/git all

6、安装 Git 至 /usr/local/git 路径，命令为；

 make prefix=/usr/local/git install

7. 添加环境变量，打开环境变量配置文件 vim /etc/profile：

vim /etc/profile

在最后添加:

PATH=$PATH:/usr/local/git/bin 
export PATH

8、记得刷新配置文件；

source  /etc/profile

9、git --version，查看自己安装的 git 版本，结束！

【JS相关】开发环境

https://github.com/fecommunity — Fri, 20 Sep 2024 03:26:21 GMT

开发环境

3.1 Git操作

3.1.1 Git的基本命令有哪些

git add .
git checkout xxx
git commit -m 'xxx'
git push origin master
git pull origin master
git branch
git checkout -b xxx / git checkout xxx(文件名)
git merge xxx
git diff
--------------git多人协作：
git branch                   查看当前分支
git checkout -v dev          创建新的分支
git checkout dev             切换当前分支
git push origin dev          提交代码到dev分支（修改bug…
git checkout matser          切换到已有的分支
git merge dev                合并dev分支到master分支
git push origin master       推送修改的内容到远程仓库

3.1.2 git rebase和git merge的区别？

git merge：将两个分支，合并提交为一个新提交，并且新提交有2个parent。把公共分支和你当前的commit 合并在一起，形成一个新的 commit 提交

git rebase：会取消分支中的每个提交，并把他们临时存放，然后把当前分支更新到最新的origin分支，最后再吧所有提交应用到分支上。

3.1.3 git上线回滚的流程？

上线流程：

将测试完成的代码提交到git版本库的master分支
将当前服务器的代码全部打包并记录版本号，备份
将master分支的代码提交覆盖到线上服务器，生效新的版本号回滚流程：
将当前服务器的代码打包并记录版本号，备份
【将备份的上一个版本号解压，覆盖到线上服务器】，生成新的版本号

3.2 模块化

3.2.1 谈一下你对JS模块化的理解

3.2.2 AMD和CommonJS规范的区别和使用场景

AMD规范：

require.js requirejs.org
全局定义了define函数
全局定义了require函数
依赖JS会自动、异步加载 CommonJS规范：
这是nodejs的模块化规范，现在被广泛应用于前端
前端开发依赖的插件和库，都可以从npm中获取
构建工具的高度自动化，使得使用npm的成本非常低
CommonJS不会异步加载JS，而是同步一次性加载进来使用场景：
需要异步加载JS，使用AMD
使用了npm之后建议使用commonjs规范

3.3 构建工具

3.3.1 Webpack的基本配置流程

[!NOTE] 主要是掌握Webpack的基本配置，包括文件的打包和压缩、CSS文件的处理和模块化、图片文件的处理以及一些开发环境的常用配置和性能优化知识点，理解打包的底层实现原理。

具体配置可参考：https://www.jianshu.com/p/11e8f9668c0e

3.3.2 Gulp的基本配置流程，与webpack的区别？

[!NOTE] 需要掌握基本的配置流程和打包过程，底层实现原理。

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require("browser-sync").create(), //自动刷新
    reload = browserSync.reload;
const filter = require('gulp-filter');
// gulp-filter 包， 以确保只有 *.css 文件响应 .reload - 这样一来，
// 您还是会得到CSS注入，而不是整个页面重载。
const useref = require('gulp-useref'); //合并JS
const uglify = require('gulp-uglify'); //js压缩
const minifyCSS = require('gulp-minify-css'); //压缩css

var gulpIf = require('gulp-if');

var del = require('del');

var runSequence = require('run-sequence');//组织任务执行顺序,未使用

var rename = require('gulp-rename');//重命名

var watch=require('gulp-watch');//监视

var minifyHtml = require("gulp-minify-html");//压缩html

var babel = require("gulp-babel");
// npm install --save-dev gulp-babel@7 babel-core babel-preset-env

var jshint = require("gulp-jshint");//js检查
var imagemin = require('gulp-imagemin');//压缩图片文件
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
var connect=require('gulp-connect');//引入gulp-connect模块 浏览器刷新
var cache = require('gulp-cache');//压缩图片可能会占用较长时间，使用 gulp-cache 插件可以减少重复压缩。
var RevAll = require("gulp-rev-all");//md5后缀

gulp.task('html',function(){//编译html
    return gulp.src('app/*.html')
    .pipe(gulp.dest('app/dist'))
    .pipe(connect.reload());
})

gulp.task('css',function(){//编译scss
    return gulp.src('app/scss/**/*.scss')
    .pipe(sass())//编译scss
    // .pipe(gulp.dest('app/css')) //当前对应css文件
    .pipe(gulp.dest('app/dist/css')) //当前对应css文件
    .pipe(connect.reload());//更新
})

gulp.task('js',function(){//编译ES6并且压缩
    return gulp.src('app/js/**/*.js')
    .pipe(jshint())//检查代码
    .pipe(babel({//编译ES6
        presets: ['es2015']
    }))
    .pipe(uglify())//压缩js
    .pipe(gulp.dest('app/dist/js'))
    .pipe(connect.reload());
})

gulp.task('fonts', function() {
    return gulp.src('app/fonts/**/*')
        .pipe(gulp.dest('app/dist/fonts'))
})

gulp.task('images', function() {
    return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
        // Caching images that ran through imagemin
        .pipe(cache(imagemin({//压缩图片文件
        interlaced: true,
        })))
        .pipe(gulp.dest('dist/images'))
});

gulp.task('clean:app/dist', function() {//删除之前生成的文件
    return del(['app/dist']);
});

gulp.task('clean:dist', function() {//异步清理除dist目录图片以外的文件
     return del(['app/dist/**/*', '!dist/images', '!dist/images/**/*']);
});

gulp.task('minFs', function() {//压缩文件
    return gulp.src('app/dist/*.html')
        .pipe(useref())//合并js
        .pipe(
            gulpIf('*.js',uglify())//压缩js
        )
        .pipe(gulpIf('*.css', minifyCSS()))//压缩css
        .pipe(RevAll.revision({//不被重命名
            dontRenameFile:[/^\/favicon.ico$/g, ".html"]
        }))  
        .pipe(gulp.dest('dist'));
});

gulp.task('connect:app',function(){
    connect.server({
        root:'app',//根目录
        // ip:'192.168.11.62',//默认localhost:8080
        livereload:true,//自动更新
        port:9998//端口
    })
})

gulp.task('connect:dist',function(cb){
    connect.server({
        root:'app',//根目录
        // ip:'192.168.11.62',//默认localhost:8080
        livereload:true,//自动更新
        port:9999//端口
    })
    cb()//执行回调，表示这个异步任务已经完成，起通作用,这样会执行下个任务
})

gulp.task('watchs',function(){//监听变化执行任务
    //当匹配任务变化才执行相应任务
    gulp.watch('app/*.html',gulp.series('html'));
    gulp.watch('app/scss/**/*.scss',gulp.series('css'));
    gulp.watch('app/js/**/*.js',gulp.series('js'));
    gulp.watch('app/fonts/**/*',gulp.series('fonts'));
    gulp.watch('app/images/**/*',gulp.series('images'));
})

//gulp.series|4.0 依赖顺序执行
//gulp.parallel|4.0 多个依赖嵌套'html','css','js'并行

//下面1和2分别运行

//1.自动监测文件变化并刷新浏览器

//初始生成app/dist目录
gulp.task('init',gulp.series('clean:app/dist',gulp.parallel('html','css','js','fonts','images')));

//启动任务connect:app服务，并监控变化
gulp.task('run',gulp.series('init','connect:app','watchs'));

//2.生成打包文件
gulp.task('build',gulp.series('clean:dist',gulp.parallel('init'),'minFs'));

//启动任务connect:dist服务，生成打包文件后，监控其变化
gulp.task('serve',gulp.series('connect:dist','build','clean:app/dist','watchs'));

3.4 Linux环境基本命令

可参见开发环境下的Linux面试题相关章节。

【JS相关】md

https://github.com/fecommunity — Mon, 09 Sep 2024 22:02:03 GMT

JS面试题总结

变量

【CSS相关】Bootstrap

https://github.com/fecommunity — Thu, 05 Sep 2024 21:58:18 GMT

Bootstrap

1.Bootstrap 的优缺点？

优点：CSS代码结构合理，现成的代码可以直接使用（响应式布局）
缺点：定制流程较为繁琐，体积大

2.如何实现响应式布局？

原理：通过media query设置不同分辨率的class
使用：为不同分辨率选择不同的class

3.如何定制自己的bootstrap样式?

使用CSS同名类覆盖（门槛低，见效快，可能会有bug）
修改源码重新构建（一次性彻底解决）
[
bootstrap.scss是入口文件，修改这个文件内容之后，使用node-sass重新编译scss文件
node-sass --output-style expanded bootstrap/custom/scss/bootstrap.scss > bootstrap/custom/dist/css/bootstrap.css
]
引用Scss源文件，修改变量(类似于预处理器的使用方式, 徐亚什么模块引入什么模块，会更加灵活，推荐)
[
1. 创建一个自己的custom.scss文件
$primary: greed; @import './botstrap-custom/scss/bootstrap.scss'
]

4.如何实现一个响应式布局框架？

[!NOTE]
面试常考考点，要求模拟实现boostrap的底层实现原理。

上面的[!NOTE]是行匹配模式，默认情况下支持类型NOTE，TIP，WARNING和DANGER。

4.1 JS的模拟实现

4.2 CSS的模拟实现

[!NOTE]
关键点：mediaQuery, 浮动，响应式布局，resize事件

【性能优化】其他技术

https://github.com/fecommunity — Sun, 01 Sep 2024 21:08:57 GMT

虚拟滚动技术

1. 插入几万个 DOM，如何实现页面不卡顿？（面试加分项）

肯定不能一次性把几万个 DOM 全部插入，这样肯定会造成卡顿，所以解决问题的重点应该是如何分批次部分渲染 DOM。部分人应该可以想到通过 requestAnimationFrame 的方式去循环的插入 DOM，其实还有种方式去解决这个问题：虚拟滚动（virtualized scroller）。
这种技术的原理就是只渲染可视区域内的内容，非可见区域的那就完全不渲染了，当用户在滚动的时候就实时去替换渲染的内容。

从上图中我们可以发现，即使列表很长，但是渲染的 DOM 元素永远只有那么几个，当我们滚动页面的时候就会实时去更新 DOM，这个技术就能顺利解决这发问题。如果你想了解更多的内容可以了解下这个 react-virtualized。

【流行框架】Vue相关

https://github.com/fecommunity — Sun, 25 Aug 2024 18:23:30 GMT

Vue相关

1. v-bind和v-model的区别？

v-bind用来绑定数据和属性以及表达式，缩写为'：'
v-model使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用

2. Vue 中三要素的是什么？

2.1 响应式

    // 如何让实现响应式的呢？
    let obj = {};
    let name = 'zhangsan';
    Object.defineProperties(obj, name, {get : function() {
      console.log('name' , name)
    }, set : function() {
        console.log('name' , name)
    }})


    // 1. 关键是理解Object.defineProperty
    // 2. 将data的属性代理到vm上面的
    let mv = {};
        let data = {
            price: 100,
            name: 'zhangsan'
        };
        for (let key in data) {
            (function (key) {
                Object.defineProperty(mv, key, {
                    get: function () {
                        console.log('get val');
                        return data[key];
                    },
                    set: function (val) {
                        console.log('set val');
                        data[key] = val;
                    }
                })
            })(key);
        }

2.2 Vue中如何解析模板？

2.2.1 模板是什么？

 // 1(*****). 模板实际上就是一个字符串………………(vue中的模板的本质)
 // 2. 模板有逻辑，如v-if, v-for
 // 3. 与html格式很像，但是有很大的区别
 // 4. 最终还是要转换为html来显示
 // 5(*****). 模板最终必须转换成JS代码，因为：
 //   （1）有逻辑(v-if v-for)：必须用JS才能实现（图灵完备）
 //    (2) 转换成HTML来渲染页面，必须用JS才能实现
 //    (3) 因此，模板最终要转换成为一个JS函数（render函数）

2.3 render函数？

2.3.1 with的用法

var obj = {
    name: 'zhangsan',
    age: 20,
    getAddress(){
        alert('shanghai');
    }
}

// 不使用with
function fn() {
  alert(obj.name);
  alert(obj.age);
  obj.getAddress();
}

// 使用with(代码不易维护！！！)
function fn1() {
  with(obj){
      alert(name);
      alert(age);
      getAddress();
  }
}

fn();
fn1();

2.3.2 render函数的实现机制？


    {{price}}


// 使用with限制这个作用域里面的this
with(this) {
    return _c(                          // this._c
        'div',
        {
            attrs: {"id" : "app"}       // id=app
        },
        [
            _c('p', [_v(_s(price))])    // this._c('p', [_v(_s(price))])
        ]
    )
}


// 实现一个自己的render函数
var vm = new Vue({
        el: '#app',
        data: {
            price: 100
        }
    });

    function render() {
        with (vm) {
            return _c(
                'div',
                {
                    attrs: {'id': 'app'}
                },
                [
                    _c('p', [_v(_s(price))])
                ]
            );
        }
    }

    function render() {
        return vm._c(
            'div',
            {
                attrs: {'id': 'app'}
            },
            [
                // vm._v 转换为一个文本节点
                // vm._s 转换为一个字符串
                // vm._c 转换为一个DOM节点
                vm._c('p', [vm._v(vm._s(price))])
            ]

        );
    }

2.3.3 render函数与vdom?

with (this) {
    // this 就是vm
    return _c(
        'div',
        {attrs: {"id": "app"}},
        [
            _c('div',
                [
                    _c('input', {
                        directives: [{
                            name: "model",
                            rawName: "v-model",
                            value: (title),
                            expression: "title"
                        }],
                        attrs: {"type": "text"},
                        domProps: {"value": (title)},
                        on: {
                            "input": function ($event) {
                                if ($event.target.composing) return;
                                title = $event.target.value
                            }
                        }
                    }),
                    _v(" "),
                    _c('button',
                        {
                            on: {
                                "click": add
                            }
                        },
                        [_v("submit")]
                    )
                ]
            ),
            _v(" "),
            _c('div',
                [
                    _c(
                        'ul',
                        // 这里返回的是一个数组（li标签组成的数组）
                        _l((list), function (item) {
                            return _c('li', [_v(_s(item))])
                        }), 0
                    )
                ]
            )
        ]
    )
}

// view --->  data ---> 使用input的事件绑定 ---> 更新页面数据到data
// data --->  view ---> defineProperty --->  同步数据到页面

2.3.4 vm._c是什么，render函数返回了什么？

vdom: 使用js模拟DOm结构

snabbdom: h函数和patch函数 Vue中的v_c：就是相当于snabbdom函数的h函数 patch函数：

 vm._update(vnode) {
     const prevNode = vm._vnode;
     vm._vnode = vnode;
     if (!prevNode) {
         // 首次渲染的时候
         vm.$el = vm.__patch__(vm.$el, vnode);
     }
     else{
         vm.$el = vm.__patch__(prevNode, vnode);
     }
 }

 // 开始更新vue组件（修改data的属性的时候，Object.defineProperty）
 function updateComponent() {
   vm._update(vm._render());
 }

**（问题总结）

1. vue模板：字符串，有逻辑，嵌入JS变量……
1. 模板必须转换为JS代码（有逻辑的，渲染html，js变量）
1. render函数是什么样子的
1. render函数的执行结果是返回的vnode
1. updateComponent

3. Vue的整个实现流程源码解读？？？（总结点）

3.1 解析模板成render函数

     --->>> render 函数

[!NOTE]

with函数的使用

模板中的所有信息都被render函数包含

模板中用到的data中的属性，都变成了JS变量

模板中的v-model v-for v-on都变成了JS逻辑

render函数返回vnode

3.2 响应式开始监听数据

Object.defineProperty

将data的属性代理到vm上

    with(vm) {

    }

3.3 首次渲染，显示页面，且绑定依赖

[!NOTE]

初次渲染，执行updateComponent, 执行vm._render()

执行render函数，会访问到vm.list和vm.title属性

会被响应式的get方法监听到(Object.defineProperty)

    Object.defineProperty(mv, key, {
        get: function() {
          return data[key];
        }
    })

执行updateComponent, 会执行vdom的patch方法

patch将vnode渲染成DOM，初次渲染完成

3.4 为何要监听get, 直接监听set不行吗？

[!NOTE]

data中有很多属性，有些会被用到，有些可能不被用到

被用到的会走到get, 不被用到的不会走到get

未走到get中的属性，set的时候我们也无需关心

避免不必要的重复渲染（关键点）

    vm._update(vnode) {
        const prevNode = vm._vnode;
        vm._vnode = vnode;
        if (!prevNode) {
            // 首次渲染的时候
            vm.$el = vm.__patch__(vm.$el, vnode);
        }
        else{
            vm.$el = vm.__patch__(prevNode, vnode);
        }
    }

    // 开始更新vue组件（修改data的属性的时候，Object.defineProperty）
    function updateComponent() {
      vm._update(vm._render());
    }

3.5 data属性变化，触发rerender函数

    Object.defineProperty(mv, key, {
        set: function(newVal) {
          data[key] = newVal;
          // 开始执行
          updateComponnet()
        }
    })

[!NOTE]

修改属性，被响应式的set监听到

set中执行updateComponnet

updateComponent重新执行vm._render()

生成的vnode和preVnode, 通过patch进行对比

渲染到html中去

4. 说一下从使用jQuery和使用框架的区别？

数据和视图的分离（代码解耦）---开房封闭原则
数据驱动视图，只关系数据变化，DOM操作被封装

5. 说一下对MVVM的理解？

MVC
MVVM
关于ViewModel

6. Vue中如何实现响应式的呢？

响应式
模板引擎
渲染（首次渲染，后面的渲染）

Object.defineProperty

data的属性代理到vm上面（with）

7. Vue中是如何解析模板的呢？

模板的本质就是字符串（有逻辑）
模板必须要转换为JS代码
render函数的实现（返回的是一个vnode）
updateComponnet(patch函数)

8. 说一下Vue的整体实现流程？

解析模板成为render函数
响应式开始监听数据
首次渲染，显示页面，且绑定依赖
data属性数据发生变化，重新触发惹人的人、函数

9. vue的数据劫持以及操作数组的坑？

给data添加新属性的时候vm.$set(vm.info,'newKey','newValue')
data上面属性值是数组的时候，需要用数组的方法操作数组，而不能通过index或者length属性去操作数组，因为监听不到属性操作的动作。

10. 谈一下对mvvm和mvc的理解？

mvc其实是model view Model传统所有逻辑在controller,难以维护。用户输入 => 控制器 => 数据改变，如果数据变了需要获取dom，操作属性，再渲染到视图上。
mvvm其实是model view viewModel数据变化驱动视图。数据变了，不需要你获取dom，然后改变dom的内容。这边数据变了，vm负责监听，视图那边自动发生变化。最明显的是不需要document.querySelector之类的了。

11. vm的实质?

[!NOTE] 上面说了vm负责让数据变了，视图能自动发生变化。这么神奇魔术背后的原理是Object.defineProperty。其实就是属性的读取和设置操作都进行了监听，当有这样的操作的时候，进行某种动作。来一个demo玩下。

    // 对obj上面的属性进行读取和设置监听
    let obj = {
        name:'huahua',
        age:18
    }
    function observer(obj){
        if(typeof obj === 'object'){
            for (const key in obj) {
                defineReactive(obj,key,obj[key])
            }
        }
    }
    // get的return的值才是最终你读取到的值。所以设的值是为读取准备的。
    // set传的参数是设置的值，注意这里不要有obj.name = newVal 这样又触发set监听，会死循环的。
    function defineReactive(obj,key,value){
        Object.defineProperty(obj,key,{
            get:function(){
                console.log('你在读取')
                // happy的话这边可以value++，这样你发现读取的值始终比设置的大一个，因为return就是读取到的值
                return value
            },
            set:function(newVal){
                console.log('数据更新了')
                value = newVal
            }

        })
    }
    observer(obj)
    obj.age = 2
    console.log(obj.age)

12. defineReactive的实现(响应式手写实现)?

[!NOTE] 在浏览器执行的时候，控制台随手也可以obj.name="hua1"类似的操作，发现都监听到了。但是如果更深一步，obj.name={firstname:'hua',lastname:'piaoliang'};obj.name.lastname='o'就不能监听到属性修改了。因为并没有将新的赋值对象监听其属性。所以函数需要改进。

需要在defineReactive的第一行加上observer(value)。设置值的时候如果是对象的话，也需要将这个对象数据劫持。同理，set那边也需要加这行。

12.1 基础实现

    function defineReactive(obj,key,value){
       // 注意这里！！！！！！！
        observer(value)
        Object.defineProperty(obj,key,{
            get:function(){
                return value
            },
            set:function(newVal){
                // 注意这里！！！！！！！
                observer(newVal)
                console.log('数据更新了')
                value = newVal
            }

        })
    }

12.2 数组方法的劫持

如果obj.name=[1,2,3];obj.name.push(4)发现又没有通知了，这是因为Object.defineProperty不支持监听数组变化。所以需要重写数组上面的方法。

        // 把数组上大部分方法重写了，这里不一一列举。但是如果你 [1,2].length--，这是捕捉不到的
        let arr = ['push','slice','split']
        arr.forEach(method=>{
            let oldPush = Array.property[method]
            Array.property[method] = function(value){
                console.log('数据更新')
                oldPush.call(this, value)
            }
        })

12.3 vue 的双向绑定的原理是什么(常考)

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化
第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:
- 在自身实例化时往属性订阅器(dep)里面添加自己
- 自身必须有一个 update()方法
- 待属性变动 dep.notice()通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。
第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。

13. Vue如何监听数组数据变化？

13.1 vm.$set方法

因为是一开始就数据劫持了。所以后来如果新绑定属性，是没有数据劫持的。如果需要调用 vm.$set(vm.info,'newKey','newValue')，vm是vue的实例。

13.2 使用数组的方法

当属性值是数组，数组变化的时候，跟踪不到变化。因为数组虽然是对象，但是Object.defineProperty不支持数组，所以vue改写了数组的所有方法，当调用数组方法的时候，就调动变动事件。但是不能通过属性或者索引控制数组，比如length，index。

[!NOTE] 总结：data上，绑定所有属性避免后期加新属性。如果是数组，只能通过数组方法修改数组。如下例子，控制台vm.arr--发现视图并不会变化，vm.arr.push(4)就能变化

    {{msg}}{{arr}}

14. vue 的优点和缺点是什么？

14.1 优点

低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的"View"上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用 Expression Blend 可以很容易设计界面并生成 xml 代码。
可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

14.2 缺点（面试常考）

网站SEO问题
浏览器兼容性问题
海量数据节点的渲染问题

15. 请详细说下你对 vue 生命周期的理解？

总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后：在 beforeCreate 阶段，vue 实例的挂载元素 el 还没有, created阶段。
载入前/后：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。
更新前/后：当 data 变化时，会触发beforeUpdate 和 updated方法。
销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在

16. Vue组件之间的传值？

16.1. 父组件与子组件传值

//父组件通过标签上面定义传值




//子组件通过props方法接受数据

16.2 子组件向父组件传递数据

//子组件通过$emit方法传递参数




//

17. Vue路由相关问题

17.1 active-class 是哪个组件的属性？

vue-router 模块的 router-link 组件。

17.2 嵌套路由怎么定义？

在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 index.html，只有一个路由出口

main.js，路由的重定向，就会在页面一加载的时候，就会将 home 组件显示出来，因为重定向指向了 home 组件，redirect 的指向与 path 的必须一致。children 里面是子路由，当然子路由里面还可以继续嵌套子路由。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//引入两个组件

import home from "./home.vue"
import game from "./game.vue"
//定义路由
const routes = [
    { path: "/", redirect: "/home" },//重定向,指向了home组件
    {
        path: "/home", component: home,
        children: [
            { path: "/home/game", component: game }
        ]
    }
]
//创建路由实例
const router = new VueRouter({routes})

new Vue({
    el: '#app',
    data: {
    },
    methods: {
    },
    router
})

home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，否则子路由无法显示。

17.3 路由之间跳转？

声明式（标签跳转）
编程式（ js 跳转） router.push('index')

17.4 懒加载（按需加载路由）（常考）

webpack 中提供了 require.ensure()来实现按需加载。以前引入路由是通过 import 这样的方式引入，改为 const 定义的方式进行引入。

17.4.1 不进行页面按需加载引入方式

import  home   from '../../common/home.vue'

17.4.2 进行页面按需加载的引入方式

const  home = r => require.ensure( [], () => r (require('../../common/home.vue')))

17.5 vue-router 有哪几种导航钩子?

全局导航钩子
- router.beforeEach(to, from, next),
- router.beforeResolve(to, from, next),
- router.afterEach(to, from ,next)
组件内钩子
- beforeRouteEnter,
- beforeRouteUpdate,
- beforeRouteLeave
单独路由独享组件
- beforeEnter

18. Vux相关问题

18.1 vuex 是什么？怎么使用？哪种功能场景使用它？

vue 框架中状态管理。在 main.js 引入 store，注入。新建了一个目录 store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

// 新建 store.js
import vue from 'vue'
import vuex form 'vuex'
vue.use(vuex)
export default new vuex.store({
    //...code
})

//main.js
import store from './store'
...

18.2 vuex 有哪几种属性？

有 5 种，分别是 state、getter、mutation、action、module

18.3 vuex 的 store 特性是什么

vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data
state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新
它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

18.4 vuex 的 getter 特性是什么

getter 可以对 state 进行计算操作，它就是 store 的计算属性
虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用
如果一个状态只在一个组件内使用，是可以不用 getters

18.5 vuex 的 mutation 特性是什么

action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态
action 可以包含任意异步操作

18.6 vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中

如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里

如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回

18.7 不用 vuex 会带来什么问题

可维护性会下降，你要修改数据，你得维护 3 个地方
可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的
增加耦合，大量的上传派发，会让耦合性大大的增加，本来 Vue 用 Component 就是为了减少耦合，现在这么用，和组件化的初衷相背

18.8 vuex 原理

vuex 仅仅是作为 vue 的一个插件而存在，不像 Redux,MobX 等库可以应用于所有框架，vuex 只能使用在 vue 上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，

vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件；

18.9 扩展问题

18.9.1 使用 Vuex 只需执行 Vue.use(Vuex)，并在 Vue 的配置中传入一个 store 对象的示例，store 是如何实现注入的？

美团

Vue.use(Vuex) 方法执行的是 install 方法，它实现了 Vue 实例对象的 init 方法封装和注入，使传入的 store 对象被设置到 Vue 上下文环境的$store 中。因此在 Vue Component 任意地方都能够通过 this.$store 访问到该 store。

18.9.2 state 内部支持模块配置和模块嵌套，如何实现的？

美团

在 store 构造方法中有 makeLocalContext 方法，所有 module 都会有一个 local context，根据配置时的 path 进行匹配。所以执行如 dispatch('submitOrder', payload)这类 action 时，默认的拿到都是 module 的 local state，如果要访问最外层或者是其他 module 的 state，只能从 rootState 按照 path 路径逐步进行访问。

18.9.3 在执行 dispatch 触发 action(commit 同理)的时候，只需传入(type, payload)，action 执行函数中第一个参数 store 从哪里获取的？

美团

store 初始化时，所有配置的 action 和 mutation 以及 getters 均被封装过。在执行如 dispatch('submitOrder', payload)的时候，actions 中 type 为 submitOrder 的所有处理方法都是被封装后的，其第一个参数为当前的 store 对象，所以能够获取到 { dispatch, commit, state, rootState } 等数据。

18.9.4 Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的？

美团

Vuex 中修改 state 的唯一渠道就是执行 commit('xx', payload) 方法，其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true，然后才能修改 state，修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state，但是并没有修改_committing 标志位，所以只要 watch 一下 state，state change 时判断是否_committing 值为 true，即可判断修改的合法性。

18.9.5 调试时的"时空穿梭"功能是如何实现的？

美团

devtoolPlugin 中提供了此功能。因为 dev 模式下所有的 state change 都会被记录下来，'时空穿梭' 功能其实就是将当前的 state 替换为记录中某个时刻的 state 状态，利用 store.replaceState(targetState) 方法将执行 this._vm.state = state 实现。

19. 指令相关

19.1 自定义指令(v-check, v-focus) 的方法有哪些? 它有哪些钩子函数? 还有哪些钩子函数参数

全局定义指令：在 vue 对象的 directive 方法里面有两个参数, 一个是指令名称, 另一个是函数。
组件内定义指令：directives
钩子函数: bind(绑定事件出发)、inserted(节点插入时候触发)、update(组件内相关更新)
钩子函数参数： el、binding

19.2 说出至少 4 种 vue 当中的指令和它的用法

v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)

20. axios

20.1 axios 是什么？怎么使用？描述使用它实现登录功能的流程

[!NOTE] 思路：使用Vue的router.beforeEach钩子函数结合axios的拦截器功能来实现。

20.2 axios与ajax, fetch的区别和优缺点？

参考文章：https://blog.csdn.net/qq_36407875/article/details/84642060

【微信小程序开发】栀子手作花花微信小程序商城开发最佳实践

https://github.com/fecommunity — Sat, 24 Aug 2024 10:28:56 GMT

本文介绍了通过 uniapp 技术实现了一套栀子手作在线购物商城系统。包含首页、分类、我的等常用功能入口。

https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG350-2-768x1024.jpg 768w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG350-2-225x300.jpg 225w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG350-2-1152x1536.jpg 1152w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG350-2-1536x2048.jpg 1536w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG350-2-scaled.jpg 1920w"sizes="(max-width: 768px) 100vw, 768px" />

一、功能演示

首页：包含了商品介绍，领劵中心和商品列表区域。

商品分类：支持不同的商品分类和商品搜素。

商品详情：包含了商品详细的描述信息，透出了分享、首页、客服等入口。

我的：包含了账户的常见的个人操作信息，知乎此领劵，在线客服，钱包管理等入口。

H5 端在线体验地址：https://wx.gaoredu.com/

微信小程序：可以直接搜索“栀子手作”进入在线体验。

https://www.gaoredu.com/wp-content/uploads/2024/08/flower.jpg 430w, https://www.gaoredu.com/wp-content/uploads/2024/08/flower-300x300.jpg 300w"sizes="(max-width: 430px) 100vw, 430px" />

二、开发流程

2.1 项目准备与搭建

1. 环境搭建

首先，确保你已经安装了 Node.js 和 HBuilderX，因为 uniapp 的项目可以通过 HBuilderX 来方便地创建和管理。安装 HBuilderX 后，在官网（https://www.dcloud.io/hbuilderx.html）下载并安装。

2. 创建 uniapp 项目

启动 HBuilderX，点击菜单栏中的“文件”→“新建”→“项目”，选择“uni-app”类型，输入项目名称（如“huahuaMall”），选择项目保存路径，点击“创建”按钮。项目创建成功后，你会看到一个基本的项目结构，包括 pages、static、components 等目录。

2.2 首页设计

这里是栀子手作的小店的首页设计：

https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG19-461x1024.jpg 461w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG19-135x300.jpg 135w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG19-768x1707.jpg 768w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG19-691x1536.jpg 691w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG19-922x2048.jpg 922w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG19.jpg 1080w"sizes="(max-width: 461px) 100vw, 461px" />

1. 页面布局

首页是商城的门户，通常包含轮播图、搜索框、热门商品列表等功能模块。

轮播图 ：使用和组件展示。
搜索框 ：自定义一个搜索组件，可以放置在中。
商品列表 ：使用循环遍历商品数据，每个商品使用展示。

2. 示例代码

2.3 分类页面设计

https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG20-461x1024.jpg 461w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG20-135x300.jpg 135w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG20-768x1707.jpg 768w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG20-691x1536.jpg 691w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG20-922x2048.jpg 922w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG20.jpg 1080w"sizes="(max-width: 461px) 100vw, 461px" />

2.4 商品详情页面设计

https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG21-1-461x1024.jpg 461w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG21-1-135x300.jpg 135w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG21-1-768x1707.jpg 768w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG21-1-691x1536.jpg 691w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG21-1-922x2048.jpg 922w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG21-1.jpg 1080w"sizes="(max-width: 461px) 100vw, 461px" />

2.4 我的页面设计

https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG22-461x1024.jpg 461w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG22-135x300.jpg 135w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG22-768x1707.jpg 768w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG22-691x1536.jpg 691w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG22-922x2048.jpg 922w, https://www.gaoredu.com/wp-content/uploads/2024/08/WechatIMG22.jpg 1080w"sizes="(max-width: 461px) 100vw, 461px" />

三、项目总结

由于篇幅原因，更多信息和源码可直接联系本人微信（red_tea_v2），代码和服务部署可以提供技术支持，其他问题可直接在文章下面评论。

【JS相关】正则

https://github.com/fecommunity — Fri, 23 Aug 2024 17:39:40 GMT

正则表达式

1.正则表达式基础

1.1 创建正则表达式

1.1.1 使用一个正则表达式字面量

const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi;

1.1.2 调用RegExp对象的构造函数

const regex = new RegExp(pattern, [, flags])

1.1.3 特殊字符

 - ^ 匹配输入的开始
 - $ 匹配输入的结束
 - \* 0次或多次  {0，}
 - \+ 1次或多次  {1，}
 - ?
   - 0次或者1次 {0,1}。
   - 用于先行断言
   - 如果紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪
     - 对 "123abc" 用 /\d+/ 将会返回 "123"，
     - 用 /\d+?/,那么就只会匹配到 "1"。
 - . 匹配除换行符之外的任何单个字符
 - (x)  匹配 'x' 并且记住匹配项
 - (?:x)  匹配 'x' 但是不记住匹配项
 - x(?=y)  配'x'仅仅当'x'后面跟着'y'.这种叫做正向肯定查找。
 - x(?!y)  匹配'x'仅仅当'x'后面不跟着'y',这个叫做正向否定查找。
 - x|y  匹配‘x’或者‘y’。
 - {n}  重复n次
 - {n, m}  匹配至少n次，最多m次
 - [xyz]   代表 x 或 y 或 z
 - [^xyz]  不是 x 或 y 或 z
 - \d  数字
 - \D  非数字
 - \s  空白字符，包括空格、制表符、换页符和换行符。
 - \S  非空白字符
 - \w  单词字符（字母、数字或者下划线）  [A-Za-z0-9_]
 - \W  非单字字符。[^A-Za-z0-9_]
 - \3  表示第三个分组
 - \b   词的边界
   - /\bm/匹配“moon”中得‘m’；
 - \B   非单词边界

1.2 使用正则表达式的方法

exec 一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）。
test 一个在字符串中测试是否匹配的RegExp方法，它返回true或false。
match 一个在字符串中执行查找匹配的String方法，它返回一个数组或者在未匹配到时返回null。
search 一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。
replace 一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。
split 一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的String方法。

1.2.1 正则对象的三个方法

        //①test()判断字符串中是否出现某个字符串，返回布尔值
        var re = /abc/;
        var str = '00abc66';
        console.log(re.test(str));  // true
        //②exec()查找并返回字符串中指定的某个字符串，只匹配一次
        var re = /abc/;
        var str = 'a0bc88abc00abc';
        console.log(re.exec(str));  // ["abc", index: 6, input: "a0bc88abc00abc", groups: undefined]
        //③compile()方法用于改变正则匹配的内容
        var re = /ab/;
        var str = "aabcdef";
        console.log(re.test(str));  //true
        re.compile(/bd/);
        console.log(re.test(str));  //false
        re.compile('66');
        console.log(re.test(str));  //false

1.2.2 字符串中与正则相关的方法

        //①search()方法，返回符合条件的字符串首次出现的位置（下标）
        var re = /abc/;
        var str = '00abc66';
        console.log(str.search(re));        // 2
        //②match()方法，返回查找的结果，如果查询不到返回NULL
        console.log(str.match(re));         // ["abc", index: 2, input: "00abc66", groups: undefined]
        //③replace()方法，将匹配到的内容替换成指定内容
        console.log(str.replace(re, "*"));
        //④split()方法，将字符串分割成字符串数组
        console.log(str.split(re));

1.3 正则表达式子表达式相关

1.3.1 子表达式

在正则表达式中，通过一对圆括号括起来的内容，我们就称之为“子表达式”。如：var re = /\d(\d)\d/;

1.3.2 捕获

在正则表达式中，子表达式匹配到相应的内容时，系统会自动捕获这个行为，然后将子表达式匹配到的内容放入系统的缓存区中。我们把这个过程就称之为“捕获”。

1.3.3 反向引用

在正则表达式中，我们可以使用\n（n>0，正整数，代表系统中的缓冲区编号）来获取缓冲区中的内容，我们把这个过程就称之为“反向引用”。

    var str = "d1122jj7667h6868s9999";
    //查找AABB型的数字
    console.log(str.match(/(\d)\1(\d)\2/)); //1122
    //查找ABBA型的数字
    console.log(str.match(/(\d)(\d)\2\1/)); //7667
    //查找ABAB型的数字
    console.log(str.match(/(\d)(\d)\1\2/)); //6868
    //查找四个连续相同的数字
    console.log(str.match(/(\d)\1\1\1/));   //9999

1.4 限定符

[!NOTE] 限定符可以指定正则表达式的一个给定字符必须要出现多少次才能满足匹配。

    *：匹配前面的子表达式零次或多次，0到多
    +：匹配前面的子表达式一次或多次，1到多
    ?：匹配前面的子表达式零次或一次，0或1
    {n}：匹配确定的 n 次 
    {n,}：至少匹配 n 次 
    {n,m}：最少匹配 n 次且最多匹配 m 次

[!WARNING] 注意：针对于{n,m}，正则在匹配到一个符合多种次数的字符串时，优先匹配次数多的，即能匹配到m次就不会匹配n次，这就是贪婪模式（默认）。

如果在其后加?即{n,m}?则会更改为非贪婪模式（惰性模式），则此时正则优先匹配n次。

    var str = "aa1a22a333a6a8a";
    console.log(str.match(/a\d*/));      //a
    console.log(str.match(/a\d+/));      //a1
    console.log(str.match(/a\d?/));      //a
    console.log(str.match(/a\d{3}/));    //a333
    console.log(str.match(/a\d{2,}/));   //a22
    console.log(str.match(/a\d{1,3}/));  //a1
    console.log(str.match(/a\d{1,3}?/)); //a1

    //贪婪模式加深理解，案例如下：
    //贪婪模式下最开始的'a2就符合条件'，但是它会返回'a22'
    //注意：它是在遇到一个同时符合多个次数条件的字符串时，取符合次数多字符串
    var str = "a22aa1a333a6a8a";
    console.log(str.match(/a\d{1,3}/));   //a22
    console.log(str.match(/a\d{1,3}/g));  //a22 a1 a333 a6 a8
    console.log(str.match(/a\d{1,3}?/));  //a2
    console.log(str.match(/a\d{1,3}?/g)); //a2 a1 a3 a6 a8

1.5 定位符

[!NOTE] 定位符可以将一个正则表达式固定在一行的开始或结束。也可以创建只在单词内或只在单词的开始或结尾处出现的正则表达式。

^ (脱字符)：匹配输入字符串的开始位置
$：匹配输入字符串的结束位置
\b：匹配一个单词边界
\B：匹配非单词边界

1.6 正则表达式的匹配模式（修饰符）

[!NOTE] 表示正则匹配的附加规则，放在正则模式的最尾部。修饰符可以单个使用，也可以多个一起使用。

①g全局匹配，找到所有匹配，而不是在第一个匹配后停止
②i匹配全部大小写
③m多行，将开始和结束字符（^和$）视为在多行上工作（也就是，分别匹配每一行的开始和结束（由\n或\r分割），而不只是只匹配整个输入字符串的最开始和最末尾处。

④s与m相反，单行匹配

  var re = /^[a-z]/gim;   //可组合使用

1.7 转义字符

[!NOTE] 因为在正则表达式中 . + \ 等属于表达式的一部分，但有时也需要匹配这些特殊字符，所以，需要使用反斜杠对特殊字符进行转义。

   需要转义的字符：
   点号.
   小括号()
   中括号[]
   左斜杠/
   右斜杠\
   选择匹配符|

   * 
   ?
   {}
   + 
   $
   ^

2. 正则练习题

2.1 匹配结尾的数字

/\d+$/g

2.2 统计空格个数

字符串内如有空格，但是空格的数量可能不一致，通过正则将空格的个数统一变为一个。

let reg = /\s+/g
str.replace(reg, " ");

2.3 判断字符串是不是由数字组成

str.test(/^\d+$/);

2.4 电话号码正则

区号必填为3-4位的数字
区号之后用“-”与电话号码连接电话号码为7-8位的数字
分机号码为3-4位的数字，非必填，但若填写则以“-”与电话号码相连接
```
/^\d{3,4}-\d{7,8}(-\d{3,4})?$/
```

2.5 手机号码正则表达式

正则验证手机号，忽略前面的0，支持130-139，150-159。忽略前面0之后判断它是11位的。

/^0*1(3|5)\d{9}$/

2.6 使用正则表达式实现删除字符串中的空格

funtion trim(str) {
  let reg = /^\s+|\s+$/g
  return str.replace(reg, '');
}

2.7 限制文本框只能输入数字和两位小数点等等

/^\d*\.\d{0,2}$/

2.8 只能输入小写的英文字母和小数点，和冒号，正反斜杠(：./)

/^[a-z\.:\/\\]*$/

2.9 替换小数点前内容为指定内容

例如：infomarket.php?id=197 替换为 test.php?id=197

var reg = /^[^\.]+/;
var target = '---------';
str = str.replace(reg, target)

2.10 只匹配中文的正则表达式

/[\u4E00-\u9FA5\uf900-\ufa2d]/ig

2.11 返回字符串的中文字符个数

先去掉非中文字符，再返回length属性。

function cLength(str){
  var reg = /[^\u4E00-\u9FA5\uf900-\ufa2d]/g;
  //匹配非中文的正则表达式
  var temp = str.replace(reg,'');
  return temp.length;
}

2.12 正则表达式取得匹配IP地址前三段

只要匹配掉最后一段并且替换为空字符串就行了

function getPreThrstr(str) {
  let reg = /\.\d{1,3}$/;
  return str.replace(reg,'');
}

2.13 匹配ul标签之间的内容

/[\s\S]+?
/i

2.14 用正则表达式获得文件名

c:\images\tupian\006.jpg

可能是直接在盘符根目录下，也可能在好几层目录下，要求替换到只剩文件名。首先匹配非左右斜线字符0或多个，然后是左右斜线一个或者多个。

function getFileName(str){
  var reg = /[^\\\/]*[\\\/]+/g;
  // xxx\ 或是 xxx/
  str = str.replace(reg,'');
  return str;
}

2.15 绝对路径变相对路径

"http://23.123.22.12/image/somepic.gif"转换为："/image/somepic.gif"

var reg = /http:\/\/[^\/]+/;
str = str.replace(reg,"");

2.16 用户名正则

用于用户名注册，，用户名只能用中文、英文、数字、下划线、4-16个字符。

/^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/

2.17 匹配英文地址

规则如下: 包含 "点", "字母","空格","逗号","数字"，但开头和结尾不能是除字母外任何字符。

/^[a-zA-Z][\.a-zA-Z,0-9]*[a-zA-Z]$/

2.18 正则匹配价格

开头数字若干位，可能有一个小数点，小数点后面可以有两位数字。

/^\d+(\.\d{2})?$/

2.19 身份证号码的匹配

身份证号码可以是15位或者是18位，其中最后一位可以是X。其它全是数字

/^(\d{14}|\d{17})(X|x)$/

2.20 单词首字母大写

每单词首字大写，其他小写。如blue idea转换为Blue Idea，BLUE IDEA也转换为Blue Idea

function firstCharUpper(str) {
  str = str.toLowerCase();
  let reg = /\b(\w)/g;
  return str.replace(reg, m => m.toUpperCase());
}

2.21 正则验证日期格式

yyyy-mm-dd格式, 4位数字，横线，1或者2位数字，再横线，最后又是1或者2位数字。

/^\d{4}-\d{1,2}-\d{1,2}$/

2.22 去掉文件的后缀名

www.abc.com/dc/fda.asp 变为 www.abc.com/dc/fda

function removeExp(str) {
  return str.replace(/\.\w$/,'')
}

2.23 验证邮箱的正则表达式

开始必须是一个或者多个单词字符或者是-，加上@，然后又是一个或者多个单词字符或者是-。然后是点“.”和单词字符和-的组合，可以有一个或者多个组合。

/^[\w-]+@\w+\.\w+$/

2.24 正则判断标签是否闭合

标签可能有两种方式闭合，自闭和或者对称闭合的方式。

/<([a-z]+)(\s*\w*?\s*=\s*".+?")*(\s*?>[\s\S]*?(<\/\1>)+|\s*\/>)/i

2.25 正则判断是否为数字与字母的混合

不能小于12位，且必须为字母和数字的混合

/^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i

2.26 将阿拉伯数字替换为中文大写形式

function replaceReg(reg,str){
  let arr=["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"];
  let reg = /\d/g;
  return str.replace(reg,function(m){return arr[m];})
}

2.27 去掉标签的所有属性

***
变成没有任何属性的
***

思路：非捕获匹配属性，捕获匹配标签，使用捕获结果替换掉字符串。正则如下：

/()/

2.28 驼峰表示

String.prototype.camelCase = function () {
        // .*?是非贪婪的匹配，点可以匹配任意字符，星号是前边的字符有0-n个均匹配，问号是则是0-1；
        // (^\w{1}): 用于匹配第一个首字母
        // (.*)：用于匹配任意个的前面的字符，.表示的就是任意字符

        // - param 1: 匹配到的字符串
        // - param 2: 匹配的的子字符串
        // - param 3: 匹配的子字符串
        // - param的位置
        // - param 5: 原始字符串 4: 匹配到的字符串在字符串中

        return this.replace(/(^\w{1})(.*)/g, function (match, g1, g2) {
            return g1.toUpperCase() + g2.toLowerCase();
        });
    }

2.29 模板字符串

// str = 'name: @(name), age:@(age)'
       // data = {name : 'xiugang', age : 18}
       /**
        * 实现一个简单的数据绑定
        * @param str
        * @param data
        * @return {*}
        */
       String.prototype.formateString = function (data) {
           return this.replace(/@\((\w+)\)/g, function (match, key) {
               // 注意这里找到的值必须返回出去(如果是undefined，就是没有数据)
               // 注意：判断一个值的类型是不是undefined，可以通过typeof判断
               console.log(typeof data[key] === 'undefined');
               return data[key] === 'undefined' ? '' : data[key];
           });

       }

2.30 去掉两边的空格

/**
        * 去掉两边的空格
        * @param str
        * @return {*}
        */
       String.prototype.trim = function () {
           return this.replace(/(^\s*)|(\s*$)/g, '');
       }

2.31 获取url参数: 使用replace保存到一个数组里面，然后从数组里面取出数据

'http://www.189dg.com/ajax/sms_query.ashx?undefined&undefined&undefined-06-27&undefined-06-27'
 url.replace(/(\w+)=(\w+)/g, function(a, b, c){
   console.log(a, b, c)
 })
action=smsdetail action smsdetail
sid=22 sid 22
stime=2014 stime 2014
etime=2014 etime 2014


// 封装为一个函数
var url = "http://127.0.0.1/e/action/ShowInfo.php?classid=9&id=2";
function parse_url(_url){
 var pattern = /(\w+)=(\w+)/ig;
 var parames = {};
 url.replace(pattern, function(a, b, c){
   parames[b] = c;
 });
 return parames;
}
var parames = parse_url(url);
alert(parames['classid'] + ", " + parames['id']);

【编程题与分析题】数组去重

https://github.com/fecommunity — Fri, 23 Aug 2024 07:23:32 GMT

数组去重

// 数组去重方法总结
// v1. 双层循环去重
function unique(arr) {
    let res = [];
    // 外层循环遍历原始数组
    for (var i = 0, arrLen = arr.length; i < arrLen; i++) {
        // 内层循环遍历res数组
        for (var j = 0, resLen = res.length; j < resLen; j++) {
            if (arr[i] === res[j]) {
                break;
            }
        }
        // 关键点：遍历完毕之后，如果arr[i]是唯一的，那么必定满足j===resLen
        if (j === resLen) {
            res.push(arr[i]);
        }
    }
    return res;
}
// 优点： 兼容性好


// v2. indexOf去重
function unique(arr) {
    var res = [];
    for (var i = 0, len = arr.length; i < len; i++) {
        var cur = arr[i];
        if (res.indexOf(cur) === -1) {
            res.push(cur);
        }
    }
    return res;
}
// 优点：使用indexOf可以简化内层循环


// v3. 先排序，然后去重
function unique(arr){
    var res = [];
    // 排序之后的数组
    var sortedArr = arr.concat().sort();
    // seen表示的是当前的比较项
    var seen;
    // v1
    /*for (var i = 0, len = sortedArr.length; i < len; i++) {
        // 从第一个元素开始，比较相邻的元素是否相同
        if (!i  || seen !== sortedArr[i]) {
            res.push(sortedArr[i]);
        }
        seen = sortedArr[i];
    }*/

    // v2
    for (var i = 0, len = sortedArr.length; i < len; i++) {
        // 最后一个和undefined比较
        if (sortedArr[i] !== sortedArr[i+1]) {
            res.push(sortedArr[i]);
        }
    }
    return res;

}

// v4. 封装一个unique的API【重点掌握】
function unique(arr, isSorted){
    var res = [];
    var seen = [];

    for (var i = 0, len = arr.length; i < len; i++) {
        var value = arr[i];
        // 根据是否排序选择去重方式
        if (isSorted) {
            // 这个排序方法要学会
            if (!i || seen !== value) {
                res.push(value);
            }
            seen = value;
        }
        else if (res.indexOf(value) === -1) {
            res.push(value);
        }
    }
    return res;
}

// TODO: 如何把字母的大小写视为一致，比如'a'和'A'，保留一个就可以了?
// v5: 去重API增强
/**
 * 去重API增强
 * @param arr 表示要去重的数组，必填
 * @param isSorted 表示函数传入的数组是否已排过序，如果为 true，将会采用更快的方法进行去重
 * @param iteratee 传入一个函数，可以对每个元素进行重新的计算，然后根据处理的结果进行去重
 * @return {Array}
 */
function unique(arr, isSorted, iteratee){
    var res = [];
    var seen = [];

    for (var i = 0, len = arr.length; i < len; i++) {
        var value = arr[i];
        // 处理iteratee参数
        var computed = iteratee ? iteratee(value, i, arr) : value;
        if (isSorted) {
            if (!i || seen !== value) {
                res.push(value);
            }
            // 更新为最新的computed数据(是经过iteratee这个函数处理之后的结果)
            seen = computed;
        }
        else if (iteratee) {
            // 处理iteratee的核心逻辑
            if (seen.indexOf(computed) === -1) {
                // seen里面放的是转换处理之后的数值
                seen.push(computed);
                // 结果里面放入的始终是数组的原始值，而不是经过转换之后的数值
                res.push(value);
            }
        } else if (res.indexOf(value) === -1) {
            // 常规去重方法
            res.push(value);
        }
    }
    return res;
}


// TODO: 使用filter函数简化外层循环？
// v6. filter简化去重逻辑
// 使用indexOf简化
function unique(arr){
    var res = arr.filter(function (item, index, self) {
        // indexOf实际上找到的是第一次出现的位置
        return self.indexOf(item) === index;
    });
    return res;
}

// 使用排序去重的方法
function unique(arr) {
    return arr.concat().sort().filter(function (item, index, self) {
        // 后面的一项和前面的项进行比较
        return !index || item !== self[index - 1];
    });
}


// v7. 使用Object键值对去重(推荐使用，可以去重所有的数据类型)
function unique(arr) {
    var obj = {};
    var res =  arr.filter(function (item) {
        // 问题1： 无法区分1和'1'
        // return obj.hasOwnProperty(item) ? false : (obj[item] = true);


        // 问题2: 无法区分{value: 1}和{value: 2}
        // { number1: true,
        //   stringa: true,
        //   stringA: true,
        //   number2: true,
        //   stringb: true,
        //   stringc: true,
        //   number3: true }
        // return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true);


        // 最终解决方案：使用JSON.stringfy, 先把对象序列化处理
        let temp = typeof item + JSON.stringify(item);
        return obj.hasOwnProperty(temp) ? false : (obj[temp] = true);
    });
    console.log('obj now:', obj)
    return res;
}


// v8: ES6去重大法
function unique(arr){
    return Array.from(new Set(arr));
}
// 代码简化1
function unique(arr){
    return [...new Set(arr)];
}
// 代码简化2
var unique = (a) => [...new Set(a)];

// 使用Map去重
function unique(arr){
    const seen = new Map();
    return arr.filter(a => !seen.has(a) && seen.set(a, 1));
}



console.log(unique([1, 2, 3, 2, '1']))
console.log(unique([1, '1', 2, 3], true))
console.log(unique([1, 1, 'a', 'A', 2, 'b', 'c', 3, '1', {value : 1}, {value: 2}, {value: 1}], false, function (item, index, arr) {
    return typeof item === 'string' ? item.toLowerCase() : item;
}))

var array = [1, 1, '1', '1', null, null, undefined, undefined, new String('1'), new String('1'), /a/, /a/, NaN, NaN];
console.log(unique(array));

【NodeJS相关】中间件

https://github.com/fecommunity — Sun, 18 Aug 2024 14:05:41 GMT

NOdeJS 中间件

1. 中间件到底是个什么东西呢？

[!NOTE] 中间件其是一个函数，在响应发送之前对请求进行一些操作

    function middleware(req,res,next){
        // 做该干的事

        // 做完后调用下一个函数
        next();
    }

这个函数有些不太一样，它还有一个next参数，而这个next也是一个函数，它表示函数数组中的下一个函数

2. 函数数组又是什么呢?

[!NOTE] express内部维护一个函数数组，这个函数数组表示在发出响应之前要执行的所有函数，也就是中间件数组

使用app.use(fn)后，传进来的fn就会被扔到这个数组里，执行完毕后调用next()方法执行函数数组里的下一个函数，如果没有调用next()的话，就不会调用下一个函数了，也就是说调用就会被终止

3. 如何实现一个中间件呢？

    function express() {
      // 函数数组用于存放所有的中间件函数
      let fns = [];

      let app = function(req, res) {
        let i = 0;

        function next() {
          // 取出数组中的下一个函数
          let task = fns[i++];
          // 如果函数存在的u啊
          if (task) {
              // 就先去执行这个用户自定义的函数里面的业务逻辑(每次把当前的next继续向后传递)
              task(req, res, next);
          }
        }

        // 用户首次调用的执行第一个
        next();
      }

      // 使用use的时候就把用户指定的这个函数放入到一个函数数组里面去
      app.use = function(task) {
        fns.push(task);
      }

      return app;
    }

4. 模拟实现一个异步按顺序执行的函数？（面试重点）

    function fn1(next) {
      next();
    }

    function fn2(next) {
      next();
    }

    function fn3(next) {
      next();
    }


    // 类似于一个异步的迭代器
    function nextRegister(...tasks) {
      let i = 0;


      function next() {
        let task = tasks[i];
        if (!task || typeof task !== 'function') {
            return ;
        }
        task(next);
      }

      // 第一次调用
      next();
    }

    // 开始注册三个异步函数
    nextRegister(fn1, fn2, fn3);

5. 描述一下express或者koa的技术架构？

[!NOTE] 关键在于解释清楚对路由中间件的理解，可以以koa的洋葱模型讲解为例。

【前端面试题】移动APP开发

https://github.com/fecommunity — Fri, 16 Aug 2024 12:37:57 GMT

移动Web开发面试题

如何实现移动端适配？
移动端300ms延迟和解决方法？
移动端点击穿透事件的原因和解决方法？
移动web开发现有的解决方案有哪些？
移动端常用类库及优缺点？
Zepto库和JQ区别？
移动端最小触控区域是多大？

【JS相关】JS基础知识

https://github.com/fecommunity — Mon, 12 Aug 2024 01:00:38 GMT

JS基础知识

1 变量类型和计算

1.1 值类型和引用类型的区别？

值类型：每个变量都会存储各自的值。不会相互影响
引用类型：不同变量的指针执行了同一个对象（数组，对象，函数）

1.2 typeof可以及检测的数据类型有哪些？

[!NOTE]

基本数据类型：Undefined null bool string number

关键点：typeof只能区分值类型，不能区分引用类型

JS中的基本数据类型：null, undefined, bool, string, number（typeof可以区分除了null以外的四种值类型）
typeof 6种类型：Object({},[],null), Undefined, Boolean, Number, Function, String
typeof可以区分值类型，typeof null = Object

1.3 JS中===和==的区别？

1.3.1 区别?

== 会进行强制类型转换之后再比较，=== 不会进行强制类型转换的

1.3.2 应用场景?

（用于判断对象属性是否存在）：if (obj == null) ===>>> 等价于if (obj == null || obj == undefined),可以简化代码，其他情形都使用===进行比较
用于判断函数的参数是否存在： function(a, b){ if(a == null) { // ... }}
对于函数内部或者是一个对象的参数进行判断只会出现undefined，而不会报错（慎用）

1.3.3 其他?

js中类型转换为false的有哪些(6种)：null, undefined, NaN, '', false, 0

1.4 JS中的内置函数有哪些？

[!NOTE]

内置函数： Object Array Boolean Number String Function Date RegExp Error

内置对象：Math, JSON

2 原型和原型链

2.1 原型链的5条规则

所有的引用类型（数组，对象，函数），都是具有对象特性的，即可以自由扩展属性（除了null以外）
所有的引用类型（数组、对象、函数），都有一个proto 属性（隐式原型），这个属性的值是一个普通对象
所有的函数，都有一个prototype属性（显式原型），这个属性值是一个普通的对象
所有的引用类型（数组、对象、函数），proto的属性值指向（完全相等）它的构造函数的“prototype”的属性值
当试图得到一个对象的某一个属性的时候，如果一个对象本身没有这个属性的话，就会去它的proto( 也就是它的构造函数中去寻找这个属性)

2.2 JS中寻找对象属性的过程

当一个对象没有这个toString()这个属性的时候，就回去自己的隐式原型proto中去寻找这个属性，也就是去自己额构造函数的显示原型prototype中寻找这个属性（对象自身的隐式原型就是他的构造函数的显式原型）
发现FOO.prototype中也没有这个toString属性，这也是一个对象，name就去这个对象{}的proto中寻找toString()这个属性

2.3 instanceof的作用？

是用于判断【引用类型】属于哪个【构造函数】的方法 [!NOTE] 总结：f.proto 一层一层向上寻找，能否找到FOO.prototype，找到为true，否则为false

2.4 写一个原型继承的例子

/**
     * 动物类
     * @constructor
     * */
    function Animal (name){
        this.name = name;
        this.eat = function () {
            console.log('My name is ', name, ' I am eating Foods…………');
        }
    }

    /**
     * 小狗类
     * @constructor
     */
    function Dog(){
        this.bark = function () {
            console.log("I am a dog, I am barking……");
        }
    }

    // 如何让这个小狗继承这个Animal的属性呢？
    // 实现思路：每一个函数都有一个prototype属性，这个属性值是一个普通的对象
    Dog.prototype = new Animal();
    var dog = new Dog();
    // 这个小狗有eat() 这个属性吗？发现自身没有，那么就会去dog这个对象的__proto__里面去寻找，也就是他的构造函数Dog的prototype上面去寻找
    // 发现这个对象Dog构造函数的prototype的值是一个对象new Animal(), 这个对象里面是有eat这个属性的，因此就找到了
    dog.eat(); // My name is  undefined  I am eating Foods…………
    console.log(dog.__proto__ === Dog.prototype);       // tru

2.5 描述一下new一个对象的过程

[!NOTE]

创建一个新对象

this指向这个新对象

执行代码（对this赋值）

返回this

  // v1
  function objectFactory() {
      var obj = new Object(),
          // 因为 shift 会修改原数组，所以 arguments 会被去除第一个参数
          Constructor = [].shift.call(arguments);     // 拿到伪数组中的第一个参数
      // 取出参数中的第一个参数，就是我们要传入的构造函数，建立继承关系
      obj.__proto__ = Constructor.prototype;
      Constructor.apply(obj, arguments);
      return obj;
  }

  // v2 : 还需要判断返回的值是不是一个对象，如果是一个对象，我们就返回这个对象，如果没有，我们该返回什么就返回什么。
  function objectFactory() {
      var obj = new Object(),
          Constructor = [].shift.call(arguments);
      // 建立继承关系(二者之间的关系)
      obj.__proto__ = Constructor.prototype;
      // 开始执行这个构造函数
      var ret = Constructor.apply(obj, arguments);
      // 看一下构造函数的返回值，是对象还是一个基本数据类型?
      return typeof ret === 'object' ? ret : obj;
  }


  // v4：Object.create的原理
    // var obj = Object.create(Constructor.prototype);
    // 等价于：
    // var obj = new Object();
    // obj.__proto__ = Constructor.prototype;
    const _new = function () {
        var Constructor = [].shift.call(arguments);
        // 1. 创建一个对象，这个对象要继承与构造函数的原型对象
        var obj = Object.create(Constructor.prototype);
        // 2. 执行这个构造函数
        var ret = Constructor.apply(obj, arguments);
        return typeof ret === 'object' ? ret || obj : obj;
    }

    // v5: 实现一个自己的new构造函数
    const _new = function() {
        // 从Object.prototype上克隆一个对象 
        var obj = new Object();
        // 取出来外部传入的构造器
        var Constructor = [].shift.call(arguments);

        // 使用一个中间的函数来维护原型的关系
        var F = function(){};
        F.prototype = Constructor.prototype;
        obj = new F();

        // 开始执行这个构造函数
        var res = Constructor.apply(obj, arguments);
        // 确保构造器总是返回一个对象(使用res || obj 的方式来防止返回null参数)
        return typeof res === 'object' ? res || obj : obj;
    }

2.6 zepto或其他框架中是如何实现原型链的？

var Zepto = (function(){
    var $,
        zepto = {}

    // ...省略N行代码...

    zepto.Z = function(dom, selector) {
      dom = dom || []
      dom.__proto__ = $.fn
      dom.selector = selector || ''
      return dom
    }

    zepto.init = function(selector, context) {
        var dom

        // 针对参数情况，分别对dom赋值

        // 最终调用 zepto.Z 返回的数据
        return zepto.Z(dom, selector)
    }

    $ = function(selector, context){
        return zepto.init(selector, context)
    }

    $.fn = {
        // 里面有若干个工具函数
    }

    // ...省略N行代码...

    return $
})()

window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)

3 作用域和闭包

3.1 函数表达式和函数声明的区别？

函数声明中函数名是必须的，函数表达式中则是可选的。
用函数声明定义的函数，函数可以在函数声明之前调用，而用函数表达式定义的函数则只能在声明之后调用。

var handsome='handsome';
function handsomeToUgly(){
    alert(handsome);
    var handsome='ugly';
    alert(handsome);
}
handsomeToUgly();

// 正常的解析编译流程如下：
var handsome='handsome';
function handsomeToUgly(){
    var handsome;
    alert(handsome);
    var handsome='ugly';
    alert(handsome);
}
handsomeToUgly();

[!NOTE] 总结：（根本原因在于解析器对于这两种定义方式读取的顺序不同：解析器会实现读取函数声明，即函数声明放在任意位置都可以被调用；而对于函数表达式，解析器只有在读到函数表达式所在那一行时才会开始执行）

3.2 对执行上下文的理解？

[!NOTE] 执行上下文可以理解为当前代码的执行环境，它会形成一个作用域。JavaScript中的运行环境大概包括三种情况。

a. 全局环境：JavaScript代码运行起来会首先进入的环境
b. 函数环境：当函数被调用执行时，会进入被调用的函数中执行代码
c. eval（不推荐使用会对JS的执行效率产生影响）

因此在一个JavaScript程序中，必定会产生多个执行上下文，JavaScript引擎会以栈的方式来处理它们，这个栈，我们称其为函数调用栈(call stack)。栈底永远都是全局上下文，而栈顶就是当前正在执行的上下文。当代码在执行过程中，遇到以上三种情况，都会生成一个执行上下文，放入栈中，而处于栈顶的上下文执行完毕之后，就会自动出栈。

function f1(){
    var n=999;
    function f2(){
        alert(n);
    }
    return f2;
}
var result=f1();
result(); // 999

上面代码函数调用栈的过程：参考：https://www.cnblogs.com/ashen137/p/11422136.html

3.3 对this的理解？

作为构造函数执行
作为对象属性执行
作为普通函数执行
call apply bind

3.3.1 setTimeout、setInterval中的this

var obj ={ 
    fn:function(){
        console.log(this);
    }
}
function fn2(){
    console.log(this);
}
setTimeout(obj.fn, 0);   //Window
setTimeout(fn2, 0);//Window
setInterval( obj.fn,1000 );//Window

从上述例子中可以看到setTimeout,setInterval中函数内的this是指向了window对象，这是由于setTimeout()，setInterval()调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。

3.3.2 严格模式下的this

（1）全局作用域中的this

"use strict"
console.log("this === window",this === window);   //true

在严格模式下的全局作用域中 this 指向window对象

（2）全局作用域中函数中的this

"use strict"
function fn(){
    console.log('fn的this:'+this);
    function fn2(){
        console.log('fn2的this:'+this);
    }
    fn2();    
}
fn();

// fn的this:undefined
// fn2的this:undefined

严格模式下：在全局作用域中函数的 this 指向 undefined

（3）对象的方法中的this

"use strict"
let name = 'zhaosi';
let obj = {
    name: 'liuneng',
    fn:function(){
        console.log(this.name)
        console.log(this);
    }
}
obj.fn();
//  liuneng
// {name: "liuneng", fn: ƒ}

严格模式下，对象的函数中的this指向该对象

（4）构造函数中的this

"use strict"
function Person( name){
    this.name = name;
    this.say = function(){
        console.log('my name is:'+this.name);
        console.log(this);
    }
}
var lzx = new Person('lzx');
lzx.say();  
//my name is lzx
//Person { name:"lzx", say:f }

严格模式下，构造函数中的this指向new出来的对象

（5）事件处理函数中的this

"use strict"
var oBtn = document.getElementById("btn");
oBtn.onclick = fn;
function fn(){
    console.log(this);
}
//

3.3.3 箭头函数中的this

首先，箭头函数没有自己的this，箭头函数中的this是在定义函数的时候绑定，它会捕获其所在的上下文的this作为自己的this，而不像普通函数那样是在执行函数的时候绑定。

 var a = 10;
var obj = {
    a: 99,
    fn1:()=>{ console.log(this.a) },
    fn2:function(){ console.log(this.a) }
}
obj.fn1(); //10
obj.fn2(); //99

箭头函数this指向它定义时的上下文（在这里是window），而普通函数的this则指向调用它的对象参考博文：https://blog.csdn.net/lizhengxv/article/details/84639342

3.4 call,apply,bind的区别

3.4.1 相同点

三个函数都会改变this的指向（调用这三个函数的函数内部的this）

3.4.2 不同点

1)、bind会产生新的函数，（把对象和函数绑定死后，产生新的函数）

2)、call和apply不会产生新的函数，只是在调用时，绑定一下而已。

3)、call和apply的区别，第一个参数都是要绑定的this，apply第二个参数是数组（是函数的所有参数），call把apply的第二个参数单列出来。

3.5 对JS中作用域的理解？

[!NOTE] 注意点：JS是没有块级作用域的，只有函数和全局作用域

3.6 什么是自由变量和作用域链？

[!NOTE] 自由变量：当前作用域没有定义的变量，就是‘自由变量’, 这里的变量是一个aaaaa，发现这个函数作用域里面没有定义这个变量，就开始去父级作用域中寻找aaaaa这个变量（全局作用域中），发现还是没有找到这个变量的定义，最终就会报错。

作用域链：实际上就是函数作用域中没有定义的变量，会去它的父级作用域中寻找的过程。

// 实际开发中闭包的应用场景（判断用户传递的参数是否已经传递过来）
// 闭包主要应用于封装变量，收敛权限
function isFirstLoad() {
    // 这里的目的实际上就是把_list 封装为一个变量（自由变量）
    // 防止暴露为一个全局变量，外部无法拿到这个变量，外部是无法修改的，从而达到了一个封装变量的作用
    var _list = [];
    return function (id) {
        // _list 就是一个自由变量，而且全局只有这一个（函数作用域范围中这一个）
        if (_list.indexOf(id) >= 0)
            return false;
        else
            _list.push(id);
        return true;
    }
}

3.7 闭包的使用场景有哪些？

3.7.1 函数作为返回值

一个函数的返回值是一个函数，父级作用域是指，定义时候的作用域，而不是执行的作用域

3.7.2 函数作为参数传递

【重点】：函数作用域中的自由变量会在声明的父级作用域中去寻找，而不是去执行的时候的作用域中去寻找变量

3.8 创建10个a标签，点击的时候，弹出对应的序号

// 使用立即函数+闭包实现的
function createHrefElementsTwo() {
    for (var i = 0; i < 10; i++) {
        // 一个函数就是一个作用域，这里相当于是创建了10个函数作用域，每一个作用域里面都是有自己的一歌变量i的，这是当用户需要这个自由变量的时候，
        // 就会直接去这个这个函数作用域范围内寻找这个变量，每一个里面就是一个单独的函数作用域
        (function (i) {
            // 这里面的就是单独的一个函数作用域
            var a = document.createElement('a');
            a.innerText = '我是立即函数中的' + i;
            a.href = '#'
            a.addEventListener('click', function (e) {
                e.preventDefault();
                // 分析：由这个for循环可以发现，这个i实际上是一个函数作用域的变量，这个i一直是变化的，当i等于9的时候，创建完毕最后一个元素，
                // 最后执行完毕i++, i的最终结果就是10，因此对于每一个a标签点击都是一个10
                alert(i);                   // 这里的i最后可以实现点击就弹出对应的编号吗？
            })
            document.body.appendChild(a);
            document.body.appendChild(document.createElement('br'));
        })(i);      //  这里的i和这个里面的状态信息保持一致的
    }
}

3.9 对函数curry化的理解？

需求：要实现一个这样的加法函数，使得：add(1,2,3)(1)(2)(3)(4,5,6)(7,8)() === 42

分析这个函数的特点: 当这个函数有参数的时候，返回的是一个函数

如果没有参数的时候，就会去执行这个函数，得到计算的结果

// 1. 函数curry化的实现：console.log(add(1, 2, 3)(1)(2)(3)(4, 5, 6)(7, 8)());//42
    function add() {
        // 思路：当传递参数的时候，开始计算；没有参数的时候，返回计算结果
        let _list = [];
        _list = _list.concat([].slice.call(arguments))
        return function () {
            let args = [].slice.call(arguments),
                len = args.length;
            // 这里也是需要接受参数的
            if (len !== 0) {
                // 说明用户又传递参数进来了
                // this.callee();
                // 把每次传递的数字全局记录下来
                _list = _list.concat(args);

                // 继续回调，返回一个函数
                // 这里返回一个函数(这里也是可以直接返回一个函数表达式的引用的)
                return arguments.callee;
            } else {
                // 开始遍历数组，计算结果, reduce 返回的也是一个最终的计算结果
                return _list.reduce((a, b) => {
                    return a + b
                })
            }
        }
    }

// 测试：
console.log(add(1, 2, 3)(1)(2)(3)(4, 5, 6)(7, 8)());

3.10 如何实现一个bind函数？

Function.prototype._bind = function () {
        // 思路：bind函数实际上每次返回的是一个函数
        // bind 函数的第一个参数是this的指向，其他参数是传递的参数
        // 1. 接受参数，解析this和args
        let _bindthis = arguments[0],
            _self = this,
            _args = [].slice.call(arguments).shift();        // 删除第0个元素之后剩余的元素数组


        return function () {
            // 处理用户传递的参数,arguments 就是用户传递给我的函数参数
            let args = arguments;
            console.log('用户传递的函数参数', args);
            // 修改this的指向, 没有修改之前，由于bind这个函数是fn调用的，因此this指向的是fn
            _self.apply(_bindthis, [].slice.call(args).concat(_args));
        }
    }
// 测试：
// 实际上第一个调用的函数参数在第二个函数参数也是可以直接一起使用的
    console.log(minus._bind({name: 'zhangsan'}, 2)(7, 8));

4 异步和单线程

4.1 什么是异步？前端使用异步的场景有哪些？

console.log(100);
setTimeout(function () {            
    // 异步执行的代码不会阻塞下面代码的执行
        console.log(200);
}, 1000)
console.log(300);


// 上面的代码执行流程如下：
// 1. 执行第一行，输出100；
// 2. 执行setTimeout函数后，传入setTimeout里面的函数function(){console.log(200)}会被暂存起来（放入到事件队列里面），
//    不会立即执行该函数（单线程的特点，不会立即干两件事）；
// 3. 执行最后一行代码，输出100；
// 4. 等待所有的同步代码执行完毕之后，处于空闲状态的时候，会从事件队列中取出之前暂存的函数；
// 5. 发现暂存起来的setTimeout中的暂存函数，需要等待1s之后才会执行，该函数就会等待1s之后才会执行
// 使用异步的场景：
// 1. 定时任务： setTimeout, setInterval
// 2. 网络请求： ajax请求, 动态加载
// 3. 事件绑定
// 同步和异步的区别：
// 同步会【阻塞】代码的执行，异步不会；alert是一个同步的例子，setTimeout是一个异步的例子

4.2 如何实现一个自己的ajax？

// 创建对象
    var xhr = new XMLHttpRequest();
    // 打开连接GET请求，请求地址，是否同步
    xhr.open('GET', '/JS-Professional/data.json', false);
    xhr.onreadyStateChange = function () {
// readyState状态码：
        // 0- （未初始化）：还没有调用send（）方法
        // 1- （载入）：已经调用send（）方法，正在发送请求
        // 2- （载入完成）：send（）方法执行完成，已经接收到全部响应内容
        // 3. （交互）正在解析响应的内容
        // 4. （完成）响应内容解析完成，可以在客户端调用了

        // 2** - 表示成功处理请求，如200
        // 3** - 需要重定向，浏览器直接跳转，如301
        // 4** - 客户端请求错误，如404
        // 5** - 服务端错误，如500

        if (xhr.readyState === 4){
            //  此时表示请求已经发送成功(已经接受到服务端返回的信息)
            if (xhr.status === 200){
                console.log('请求发送成功', xhr.responseText)
            }
        }
    }
    xhr.send(null);

5 其他知识点

5.1 如何获取2017-06-10 格式的日期？

function formatDate(date) {
        var dt = date || new Date(),
            year = dt.getFullYear(),
            month = (dt.getMonth() + 1).toString(),
            day = dt.getDate().toString();
        month = month.length === 1 ? '0' + month : month;
        day = day.length === 1 ? '0' + day : day;
        return year + '-' + month + '-' + day;
    }
// 注意点：月是从0开始计数的

5.2 如何获取一个长度一致的随机字符串？

[!NOTE] 思路：使用一个长度固定的字符串，如“00000000”作为后缀，然后进行字符串截取。

// 获取一个长度一致的字符串的随机数字
function randomStr(str) {
    var random = str || Math.random();
    random = random + '0000000000';     // 小技巧：防止程序报错
    random = random.slice(0, 10);
    return random;
}
randomStr();

5.3 写一个能遍历对象和数组通用的forEach函数

function forEach(obj, fn) {
        if (typeof obj === 'object') {
            // 对象遍历
            for (var key in obj) {
                // console.log(key, obj[key]);
                // 这里只去输出自己的属性，原型链上面的属性信息不用管（继承父类的属性信息是不会输出的）
                if (obj.hasOwnProperty(key))
                    fn(key, obj[key]);          // 直接执行这个函数
            }
        } else if (obj instanceof Array) {
            // 数组遍历
            obj.forEach(function (item, index) {
                fn(index, item);
            })
        }
    }

5.4 数组中常用的方法有哪些？

forEach 遍历所有的元素
every 判断所有的元素是否都符合条件
some 判断是否至少有一个元素符合条件
sort 排序
map 对数组中的元素重新组装，生成一个新的数组
filter 过滤符合条件的元素

[!WARNING] 注意点:splice,concat,sprt是直接在原地操作数组的。

【JS相关】ES6专题系列

https://github.com/fecommunity — Sun, 11 Aug 2024 14:31:48 GMT

ES6专题系列

1.如何搭建ES6的webpack开发环境？

安装Node环境 node -v // 10.14.1
安装NPM环境 npm -v // 6.4.1
安装babel npm install @babel/core babel-preset-es2015 babel-preset-latest
创建.babelrc文件 npm install babel-cli -g babel --version
babel ./src/index.js // 测试babel的编译结构
Webpack---模块化工具安装 npm install webpack babel-loader --save-dev // 安装webpack，babel-loader
配置webpack.config.js
配置package.json中的scripts
运行n npm start

1.1 常见错误
```
 0x01产生原因
 babel-loader和babel-core版本不对应所产生的，
 babel-loader 8.x对应babel-core 7.x
 babel-loader 7.x对应babel-core 6.x
```
1.2 安装环境注意事项
- 1. 这里的安装的版本必须是@babel/core,否则会出现版本不兼容的错误
- 1. 建议先安装webpack，然后安装loader

2.谈一下JS的模块化？

最开始的时候JS是没有模块化的
AMD（Async module define）成为标准，require.js（CMD--common-module-define）
前端打包工具，使得nodejs模块化可以被使用 (Grunt, Gulp, Webpack……)
ES6的出现，想统一现在所有的模块化标准
nodejs（服务器端）积极支持，浏览器（需要打包为ES5/4）尚未统一
可以自造库lib，但是不要自造标准

2.1 rollup的使用

1. 功能单一，可集成，可扩展
1. rollup + gulp的结合
安装 npm install rollup rollup-plugin-node-resolve roll-up-plugin-babel babel-plugin-external-helpers babel-preset-latest --save-dev
配置 .babelrc
配置 rollup.config.js
修改 package.json scripts
运行命令：npm start

2.2 rollup特点

rollup功能单一，webpack功能强大
参考设计原则和《Linux/Unix设计思想》
工具要尽量功能单一，可以继集成，可扩展
可以使用gulp + rollup（主流框架VUE和React使用的就是rollup进行模块化的）

3.class和JS普通构造函数的区别？

console.log(typeof MathHandle, typeof  MathHandle.prototype.constructor);   // function function
// 1. 构造函数的原型里面默认会有一个constructor属性，这个属性的值等于这个构造函数本身
console.log(MathHandle === MathHandle.prototype.constructor)        // true
console.log(MathHandle.prototype);
// 2. 所有实例的隐式原型__proto__和这个构造函数的显示原型prototype是相同的
console.log(m.__proto__ === MathHandle.prototype);      // true

console.log('-------------------------------------------------------------')
console.log(typeof MathHandler, typeof  MathHandler.prototype.constructor)         // 'function'
console.log(MathHandler === MathHandler.prototype.constructor)  // true
console.log(MathHandler.prototype);
console.log(mm.__proto__=== MathHandler.prototype);

[!NOTE]

class 在语法上更加贴合面向对象的写法

class 实现继承更加易读，易理解
更加易于些java等后端语言的使用
class【本质】还是语法糖，实际上还是使用的是prototype

4. 写实现一个Promise?

先看看Promise是怎么用的

new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(1)
  }, 0)
}).then(value => {
  console.log(value)
})

在Promise的构造器中传入一个函数，这个函数有两个参数 resolve和reject，这两个参数都是Promise的回调函数，不需要自己写，在需要的时候调用就可以了，他们分别是成功的回调resolve和失败的回调reject。

4.1 简易版 Promise

第一步，先来搭建构建函数的大体框架

const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'

function MyPromise(fn){
  const that = this
  that.state = PENDING
  that.value = null
  that.resolvedCallbacks = []
  that.rejectedCallbacks = []
  // 待完善 resolve 和 reject 函数
  // 待完善执行 fn 函数
}

首先创建三个常量用于表示状态，对于经常使用的一些值应该通过常量来管理，便于开发及后期维护
在函数体内部首先创建常量that，因为代码可能会异步执行，用于获取正确的this对象
一开始Promise的状态是 pending
value 变量用于保存resolve或者reject中传入的值
resolvedCallbacks和rejectedCallback用于保存then中的回调，因为当执行完Promise时状态可能还是等待中，这时候应该把then中的回调保存起来用于状态改变时使用

第二步，完善resolve和reject函数，添加在 MyPromise 函数体内部

function resolve(value) {
  if(that.state === PENDING) {
    that.state = RESOLVED
    that.value = value
    that.resolvedCallbacks.map(cb => cb(that.value))
  }
}

function reject(value) {
  if(that.state === PENDING){
    that.state = REJECTED
    that.value = value;
    that.rejectedCallbacks.map(cb => cb(that.value));
  }
}

首先两个函数都得判断当前状态是否为等待中，因为规范规定只有等待态才可以改变状态
将当前状态更改为对应状态，并且将传入的值赋值给 value
遍历回调数组并执行

第四步，实现如何执行 Promise 中传入的函数了

try {
  fn(resolve, reject)
} catch (e) {
  reject(e)
}

实现很简单，执行传入的参数并且将之前两个函数当做参数传进去
要注意的是，可能执行函数过程中会遇到错误，需要捕获错误并且执行 reject 函数

第五步，实现较为复杂的 then 函数。

then函数是在Promise构造器中成功状态下调用的resolve方法的回调。

then函数是可以接收两个参数的，一个是用户自定义的成功处理，另一个是用户自定义的错误处理，第二个参数可不传。

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  const that = this
  //对传入的两个参数做判断，如果不是函数将其转为函数
  onFulfilled =
    typeof onFulfilled === 'function'
    ? onFulfilled
    : v => v  // onFulfilled = v => v
  onRejected =
    typeof onRejected === 'function'
    ? onRejected
    : r => {
      throw r
    }

  if(that.state === PENDING) {
    that.resolvedCallbacks.push(onFulfilled)
    that.rejectedCallbacks.push(onRejected)
  }
  else if(that.state === RESOLVED) {
    onFulfilled(that.value)
  }
  else {
    onRejected(that.value)
  }
}

首先判断两个参数是否为函数类型，因为这两个参数是可选参数

当参数不是函数类型时，需要创建一个函数赋值给对应的参数，同时也实现了透传，比如如下代码

// 该代码目前在简单版中会报错
// 只是作为一个透传的例子
Promise.resolve(4).then().then((value) => console.log(value))

接下来就是一系列判断状态的逻辑，当状态不是等待态时，就去执行相对应的函数。如果状态是等待态的话，就往回调函数中 push 函数，比如如下代码就会进入等待态的逻辑
- 可参考：https://www.cnblogs.com/minigrasshopper/p/9141307.html

5.ES6中常用的功能有哪些？

let/const
多行字符串/模板变量
解构赋值
块级作用域？【重点理解】
函数默认参数
箭头函数（this指向问题）

5.1 var、let 及 const 区别？

var声明的变量会挂载在window上，而let和const不会
var声明变量存在变量提升，let和const不会
let、const 的作用范围是块级作用域，而var的作用范围是函数作用域
同一作用域下let和const不能声明同名变量，而var可以
同一作用域下在let和const声明前使用会存在暂时性死区
const
- 一旦声明必须赋值,不能使用null占位
- 声明后不能再修改
- 如果声明的是复合类型数据，可以修改其属性

5.2 Proxy

[!NOTE] Proxy 是 ES6 中新增的功能，它可以用来自定义对象中的操作。 Vue3.0 中将会通过 Proxy 来替换原本的 Object.defineProperty 来实现数据响应式。

let p = new Proxy(target, handler)

target 代表需要添加代理的对象，handler 用来自定义对象中的操作，比如可以用来自定义 set 或者 get 函数。

let onWatch = (obj, setBind, getLogger) => {
  let handler = {
    set(target, property, value, receiver) {
      setBind(value, property)
      return Reflect.set(target, property, value)
    },
    get(target, property, receiver) {
      getLogger(target, property)
      return Reflect.get(target, property, receiver)
    }
  }
  return new Proxy(obj, handler)
}

let obj = { a: 1 }
let p = onWatch(
  obj,
  (v, property) => {
    console.log(`监听到属性${property}改变为${v}`)
  },
  (target, property) => {
    console.log(`'${property}' = ${target[property]}`)
  }
)
p.a = 2 // 控制台输出：监听到属性a改变
p.a // 'a' = 2

[!NOTE] 自定义 set 和 get 函数的方式，在原本的逻辑中插入了我们的函数逻辑，实现了在对对象任何属性进行读写时发出通知。

当然这是简单版的响应式实现，如果需要实现一个 Vue 中的响应式，需要我们在 get 中收集依赖，在 set 派发更新，之所以 Vue3.0 要使用 Proxy 替换原本的 API 原因在于 Proxy 无需一层层递归为每个属性添加代理，一次即可完成以上操作，性能上更好，并且原本的实现有一些数据更新不能监听到，但是 Proxy 可以完美监听到任何方式的数据改变，唯一缺陷可能就是浏览器的兼容性不好了。

5.3 数组方法

5.3.1 map

[!NOTE] map 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后返回一个新数组，原数组不发生改变。

map 的回调函数接受三个参数，分别是当前索引元素，索引，原数组

var arr = [1,2,3];
var arr2 = arr.map(item => item + 1)    
arr   //[ 1, 2, 3 ]
arr2  // [ 2, 3, 4 ]

['1','2','3'].map(parseInt)
// -> [ 1, NaN, NaN ]

第一个 parseInt('1', 0) -> 1
第二个 parseInt('2', 1) -> NaN
第三个 parseInt('3', 2) -> NaN

5.3.2 filter

[!NOTE] filter 的作用也是生成一个新数组，在遍历数组的时候将返回值为 true 的元素放入新数组，我们可以利用这个函数删除一些不需要的元素

filter 的回调函数接受三个参数，分别是当前索引元素，索引，原数组

5.3.3 reduce

[!NOTE] reduce 可以将数组中的元素通过回调函数最终转换为一个值。

如果我们想实现一个功能将函数里的元素全部相加得到一个值，可能会这样写代码

const arr = [1, 2, 3]
let total = 0
for (let i = 0; i < arr.length; i++) {
  total += arr[i]
}
console.log(total) //6

但是如果我们使用 reduce 的话就可以将遍历部分的代码优化为一行代码

const arr = [1, 2, 3]
const sum = arr.reduce((acc, current) => acc + current, 0)
console.log(sum)

对于 reduce 来说，它接受两个参数，分别是回调函数和初始值，接下来我们来分解上述代码中 reduce 的过程

首先初始值为 0，该值会在执行第一次回调函数时作为第一个参数传入
回调函数接受四个参数，分别为累计值、当前元素、当前索引、原数组，后三者想必大家都可以明白作用，这里着重分析第一个参数
在一次执行回调函数时，当前值和初始值相加得出结果 1，该结果会在第二次执行回调函数时当做第一个参数传入
所以在第二次执行回调函数时，相加的值就分别是 1 和 2，以此类推，循环结束后得到结果 6。

5.4 Es6中箭头函数与普通函数的区别？

普通function的声明在变量提升中是最高的，箭头函数没有函数提升
箭头函数没有属于自己的this，arguments
箭头函数不能作为构造函数，不能被new，没有property
call和apply方法只有参数，没有作用域

5.5 Promise

Promise 翻译过来就是承诺的意思，这个承诺会在未来有一个确切的答复，并且该承诺有三种状态，这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了。

等待中（pending）
完成了（resolved）
拒绝了（rejected）

当我们在构造 Promise 的时候，构造函数内部的代码是立即执行的。

new Promise((resolve, reject) => {
  console.log('new Promise')
  resolve('success')
})
console.log('finifsh')

// 先打印new Promise， 再打印 finifsh

Promise 实现了链式调用，也就是说每次调用 then 之后返回的都是一个 Promise，并且是一个全新的 Promise，原因也是因为状态不可变。如果你在 then 中使用了 return，那么 return 的值会被 Promise.resolve() 包装。

Promise.resolve(1)
  .then(res => {
    console.log(res) // => 1
    return 2 // 包装成 Promise.resolve(2)
  })
  .then(res => {
    console.log(res) // => 2
  })

当然了，Promise 也很好地解决了回调地狱的问题

ajax(url)
  .then(res => {
      console.log(res)
      return ajax(url1)
  }).then(res => {
      console.log(res)
      return ajax(url2)
  }).then(res => console.log(res))

其实它也是存在一些缺点的，比如无法取消 Promise，错误需要通过回调函数捕获。

5.6 async 和 await

一个函数如果加上 async ，那么该函数就会返回一个 Promise

async function test() {
  return "1"
}
console.log(test())
// -> Promise {: "1"}

async 就是将函数返回值使用 Promise.resolve() 包裹了下，和 then 中处理返回值一样，并且 await 只能配套 async 使用。

async function test() {
  let value = await sleep()
}

async 和 await 可以说是异步终极解决方案了，相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码，毕竟写一大堆 then 也很恶心，并且也能优雅地解决回调地狱问题。

当然也存在一些缺点，因为 await 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低。

async function test() {
  // 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式
  // 如果有依赖性的话，其实就是解决回调地狱的例子了
  await fetch(url)
  await fetch(url1)
  await fetch(url2)
}

看一个使用 await 的例子：

let a = 0
let b = async () => {
  a = a + await 10
  console.log('2', a)
}
b()
a++
console.log('1', a)

//先输出  ‘1’, 1
//在输出  ‘2’, 10

首先函数 b 先执行，在执行到 await 10 之前变量 a 还是 0，因为 await 内部实现了 generator ，generator 会保留堆栈中东西，所以这时候 a = 0 被保存了下来
因为 await 是异步操作，后来的表达式不返回 Promise 的话，就会包装成 Promise.reslove(返回值)，然后会去执行函数外的同步代码
同步代码 a++ 与打印 a 执行完毕后开始执行异步代码，将保存下来的值拿出来使用，这时候 a = 0 + 10

[!NOTE] 上述解释中提到了 await 内部实现了 generator，其实 await 就是 generator 加上 Promise 的语法糖，且内部实现了自动执行 generator。

5.7 Generator 生成器

function *foo(x) {
  let y = 2 * (yield (x + 1))
  let z = yield (y / 3)
  return (x + y + z)
}
let it = foo(5)
console.log(it.next())   // => {value: 6, done: false}
console.log(it.next(12)) // => {value: 8, done: false}
console.log(it.next(13)) // => {value: 42, done: true}

首先 Generator 函数调用和普通函数不同，它会返回一个迭代器
当执行第一次 next 时，传参会被忽略，并且函数暂停在 yield (x + 1) 处，所以返回 5 + 1 = 6
当执行第二次 next 时，传入的参数等于上一个 yield 的返回值，如果你不传参，yield 永远返回 undefined。此时 let y = 2 * 12，所以第二个 yield 等于 2 * 12 / 3 = 8
当执行第三次 next 时，传入的参数会传递给 z，所以 z = 13, x = 5, y = 24，相加等于 42

5.8 生成器原理

[!NOTE] 当yeild产生一个值后，生成器的执行上下文就会从栈中弹出。但由于迭代器一直保持着队执行上下文的引用，上下文不会丢失，不会像普通函数一样执行完后上下文就被销毁

5.9 ES Module

[!NOTE] ES Module 是原生实现的模块化方案，与 CommonJS 有以下几个区别

CommonJS 支持动态导入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案
CommonJS 是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响
CommonJS 在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是 ES Module 采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化
ES Module 会编译成 require/exports 来执行的

// 引入模块 API
import XXX from './a.js'
import { XXX } from './a.js'
// 导出模块 API
export function a() {}
export default function() {}

6. 箭头函数和普通函数的8点区别？

6.1 不能作为构造函数

箭头函数作为匿名函数,是不能作为构造函数的,不能使用new

6.2 无arguments

箭头函数不绑定arguments,取而代之用rest参数…解决

function A(a){
    console.log(arguments); // 1
}

var BBB = (aaa)=>{
    console.log(arguments); // 2
}

var CCC = (a, ...rest)=>{
    console.log(a, '-----', rest);         // 1, ---- [2 3 4]
}

A(1);
BBB(2);
CCC(1, 2, 3, 4);

6.3 没有自己的this

箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值

var obj = {
    a: 10,
    b: function(){
        console.log(this.a); //10
    },
    c: function() {
        // 在c方法里面return的这个箭头函数捕获的是c:function(){}这个环境的this，而这个环境的this是obj【找出块作用域的外部一层就是他的环境】
        return ()=>{
            console.log(this.a); //10
        }
    }
}
obj.b();
obj.c()();

6.4 this环境

箭头函数当方法使用的时候没有定义this绑定

var obj = {
    a: 10,
    b: () => {
        // 因为箭头函数捕获的是obj{}这个对象的环境，然后这个环境的this指向的是window【找出块作用域的外部一层就是他的环境】
        console.log(this.a); //undefined
        console.log(this); //window
    },
    c: function() {
        console.log(this.a); //10
        console.log(this); //obj{...}
    }
}
obj.b();
obj.c();

6.5 this不可以被修改

使用call()和apply()调用, 通过 call() 或 apply() 方法调用一个函数时，只是传入了参数而已，对 this并没有什么影响

var obj = {
    a: 10,
    b: function(n){
        var f = (v) => v + this.a;
        /*function f(v) {
            return v+this.a;
        }*/
        return f(n);
    },
    c: function(n) {
        var f = (v) => v + this.a;
        var m = {a:20};
        return f.call(m,n);
    }
}

console.log(obj.b(1)); //11
console.log(obj.c(1)); //11

6.6 箭头函数没有原型属性

var a = ()=>{
    return 1;
}

function b(){
    return 2;
}

console.log(a.prototype);//undefined
console.log(b.prototype);//object{...}

6.7 不能当做Generator函数

箭头函数不能当做Generator函数,不能使用yield关键字

var a = ()
    // =>1; //SyntaxError: Unexpected token =>

6.8 箭头函数的this指向

箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向，如call(), bind(), apply(),普通函数的this指向调用它的那个对象

var obj = {
    say: function () {
        // 箭头函数
        var f1 = () => {
            console.log(this); // obj
            setTimeout(() => {
                console.log(this); // obj
            })
        };
        f1();
    }
}

var obj = {
    say: function () {
        // 普通函数
        var f1 = function () {
            console.log(this);    // window, f1调用时,没有宿主对象,默认是window
            setTimeout(() => {
                console.log(this); // window
            })
        };
        f1();
    }

【编程题与分析题】搜索算法

https://github.com/fecommunity — Sat, 10 Aug 2024 11:47:48 GMT

二分搜索

递归实现

// 递归对区间[l, r]的元素使用二分查找算法
function __binarySearch(arr, l, r, e){
    // 1. 递归终止的条件
    if (l > r) {
        return;
    }

    // 2. 开始对左右区间进行递归搜索
    var middle = Math.floor(l + (r - l) / 2);
    console.log('finding ……', middle, e, arr[middle]);
    if (e < arr[middle]) {
        // 使用递归的方法进行二分查找的时候，需要将每次递归的时候的结果返回给下一个循环调用
        return __binarySearch(arr, l, middle - 1, e);

    } else if (e > arr[middle]) {
        return __binarySearch(arr, middle + 1, r, e);
    } else {
        return middle;
    }

    // 找不到的情况的处理
    return -1;
}


function binarySearch(arr, e){
    // 实现二分查找算法(arr[0, arr.length - 1])
    return __binarySearch(arr, 0, arr.length - 1, e);
}

var arr = [1, 2, 3, 4, 5];
var res = binarySearch(arr, 5);
console.log('find ok : ', res);

非递归实现

function binary_search(arr, key) {
    var low = 0,
        high = arr.length - 1;
    while(low <= high){
        var mid = parseInt((high + low) / 2);
        if(key == arr[mid]) {
            return  mid;
        } else if(key > arr[mid]) {
            low = mid + 1;
        } else if(key < arr[mid]) {
            high = mid -1;
        } else{
            return -1;
        }
    }
};
var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
var result = binary_search(arr, 10);
console.log(result); // 9

【计算机网络】Nginx

https://github.com/fecommunity — Thu, 01 Aug 2024 16:36:39 GMT

nginx代理

1. 介绍一下Nginx代理的原理？

1.1 代理的原理

正向代理(forward)是一个位于客户端【用户A】和原始服务器(origin server)【服务器B】之间的服务器【代理服务器Z】，为了从原始服务器取得内容，用户A向代理服务器Z发送一个请求并指定目标(服务器B)，然后代理服务器Z向服务器B转交请求并将获得的内容返回给客户端。客户端必须要进行一些特别的设置才能使用正向代理

正向代理就是代理服务器替代访问方【用户A】去访问目标服务器【服务器B】

1.2 反向代理的原理

反向代理结论与正向代理正好相反，对于客户端而言它就像是原始服务器，并且客户端不需要进行任何特别的设置。客户端向反向代理的命名空间(name-space)中的内容发送普通请求，接着反向代理将判断向何处(原始服务器)转交请求，并将获得的内容返回给客户端，就像这些内容原本就是它自己的一样

1.3 nginx基本代理

server {
  listen        80;
  # 访问的域名
  server_name   test.com;
  # 代理请求
  location / {
    proxy_pass http://127.0.0.1:8888;
    # 设置HTTP头中修改host为test.com
    proxy_set_header Host $host;
  }
}

1.4 nginx配置缓存

# 写在server外
proxy_cache_path  cache levels=1:2 keys_zoom=my_cache:10m

cache
- 文件夹名
levels=1:2
- 设置二级文件夹来存缓存，因为随着文件的越来越多查找速度会越来越慢
keys_zoom=my_cache:10m
- 申请10兆内存来缓存内容

server {
  listen        80;
  server_name   test.com;
  location / {
    proxy_cache   my_cache; #在这里写缓存
    proxy_pass http://127.0.0.1:8888;
    proxy_set_header Host $host;
  }
}

【编程题与分析题】this指向

https://github.com/fecommunity — Tue, 30 Jul 2024 20:17:32 GMT

this指向

头条一面

请分别写出下面题目的答案。

function Foo() {
    getName = function() {
        console.log(1);
    };
    return this;
}
Foo.getName = function() {
    console.log(2);
};
Foo.prototype.getName = function() {
    console.log(3);
};
var getName = function() {
    console.log(4);
};

function getName() {
    console.log(5);
}

//请写出以下输出结果：
Foo.getName();      //-> 2    Foo对象上的getName() ，这里不会是3，因为只有Foo的实例对象才会是3，Foo上面是没有3的
getName();          //-> 4    window上的getName，console.log(5)的那个函数提升后，在console.log(4)的那里被重新赋值
Foo().getName();    //-> 1    在Foo函数中，getName是全局的getName，覆盖后输出 1（当前的这个函数在调用的时候才会执行里面的语句）
getName();          //-> 1    window中getName();
new Foo.getName();  //-> 2    Foo后面不带括号而直接 '.'，那么点的优先级会比new的高，所以把 Foo.getName 作为构造函数
new Foo().getName();//-> 3    此时是Foo的实例，原型上会有输出3这个方法

函数表达式和函数声明的区分（函数提升比变量提升的优先级高）

函数在运行的瞬间，生成一个活动对象（Active Object），简称AO

参考博客：https://www.cnblogs.com/libin-1/p/6101185.html
分析参数函数接收形式参数，添加到AO的属性，并且这个时候值为undefine,例如AO.age=undefine 接收实参，添加到AO的属性，覆盖之前的undefine
分析变量声明，如var age;或var age=23; 如果上一步分析参数中AO还没有age属性，则添加AO属性为undefine，即AO.age=undefine 如果AO上面已经有age属性了，则不作任何修改
分析函数的声明，如果有function age(){} 把函数赋给AO.age ,覆盖上一步分析的值

箭头函数中的this 判断

箭头函数里面的this是继承它作用域父级的this，即声明箭头函数处的this

let a = {
  b: function() {
    console.log(this)
  },
  c: () => {
    console.log(this)
  }
}

a.b()   // a： 普通函数的this是在调用的时候决定的
a.c()   // window：箭头函数的this看外层的是否有函数， 如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window。

let d = a.b
d()     // window

this判断下面输出为多少？

var name1 = 1;

function test() {
    let name1 = 'kin';
    let a = {
        name1: 'jack',
        fn: () => {
      var name1 = 'black'
      console.log(this.name1)       // 看当前外部，有函数，外层的this就是内部的this，没有的话就是window(JS只有全局作用域和函数作用域)
    }
  }
    return a;
}

test().fn() // ?

答案：输出1

因为fn处绑定的是箭头函数，箭头函数并不创建this，它只会从自己的作用域链的上一层继承this。这里它的上一层是test()，非严格模式下test中this值为window。

在非严格模式下，由于this必须是一个对象，所以就默认为指向全局对象window，在严格模式下this为undefined
如果在绑定fn的时候使用了function，那么答案会是 'jack'
如果第一行的 var 改为了 let，那么答案会是 undefind，因为let不会挂到window上

【编程题与分析题】call、bind、apply的实现

https://github.com/fecommunity — Fri, 26 Jul 2024 12:16:09 GMT

call, apply, bind的模拟实现

call的模拟实现

    // 使用原生的ES3语法实现的call
    Function.prototype._call = function() {
      var context = context || window;
      context.fn = this;

      var args = [];
      for (var i = 1, len = arguments.length; i < len; i++) {
            args.push('arguments['+ i +']')
      }
      var res = eval('context.fn('+ args +')');

      delete context.fn;
      return res;
    }

    // 使用ES6语法实现一个call
    Function.prototype._call = function() {
      let context = arguments[0];
      context.fn = this;

      let args = [];
      for (let i = 0, len = arguments.length; i < len; i++) {
          args.push(arguments[i]);
      }

      // 把数组转换为一个伪数组
      let res = context.fn({...args});

      delete context.fn;
      return res;
    }

apply的模拟实现

    // 原生JS实现
    Function.prototype._apply = function(context, arr) {
      var context = Object(context) || window;
      context.fn = this;

      let res;
      if (!arr) {
          res = context.fn();
      }
      else {
          var args = [];
          for (var i = 0, len = arr.length; i < len; i++) {
              args.push('arr['+i+']');
          }
          res = eval('context.fn('+args+')');
      }
      delete context.fn;
      return res;
    }

    // 使用ES6语法实现的apply
    Function.prototype._apply = function(context) {
      context = context || window;
      context.fn = this;

      let res;
      if (arguments[1]) {
          // array
          res = context.fn(...arguments[1]);
      }
      else {
          // none args
          res = context.fn();
      }

      delete context.fn;
      return res;
    }

bind的模拟实现

    // 原生JS 的实现
    Function.prototype._bind = function(context) {
        if (typeof this !== 'function') {
            throw new Error('error callback');
        }

        var self = this;
        var args = Array.prototype.slice.call(arguments, 1);
        // 注意：这里如果直接将 fBound.prototype = this.prototype
        // ，我们直接修改 fBound.prototype 的时候，也会直接修改绑定函数的 prototype。
        // 解决方案：这个时候，我们可以通过一个空函数来进行中转
        var fnOP = function() {};

        var fnBind = function() {
            var bindArgs = Array.prototype.slice.call(arguments);
            return self.apply(this instanceof fnOP
                            ? this
                            : context
                            , args.concat(bindArgs));
        }
        // 通过间接地去修改这个中间函数的原型对象，new 的方式来避免直接修改原型上面的属性和对象参数信息
        fnOP.prototype = this.prototype;
        // 这里不就是原型链继承的实现吗？
        fnBind.prototype = new fnOP();
        return fnBind;
    }

    // ES6的写法一
    Function.prototype._bind = function(context, ...args) {
      let self = this;
      return function() {
        self.apply(context, args.concat(Array.prototype.slice.call(arguments)));
      }
    }

    // ES6的写法二
    Function.prototype._bind = function(context) {
      context = context || window;
      let args = Array.prototype.slice.call(arguments, 1);
      let self = this;
      // 构建一个中间的函数，维护原型之间的关系
      let temp = function(){};
      let F = function() {
        self.apply(this instanceof temp
                    ? this
                    : context
                    , args.concat(Array.prototype.slice.call(arguments)))
      }
      // 通过中间函数维护原型关系
      temp.prototype = this.prototype;
      F.prototype = new temp();

      return F;
    }

【面经系列】百度面经

https://github.com/fecommunity — Fri, 26 Jul 2024 11:51:59 GMT

百度面经系列

react和vue的区别
JS的数据类型
null和undefined的区别
![]的结果
闭包的使用场景
微任务和宏任务
实现JSONP
手写节流
路由两种模式使用场景
数组和链表区别
链表的使用场景
实现点击按钮输出input中字符串的反转
PWA
跨域
缓存策略
缓存位置
前端安全
白屏的处理
按需加载
HTTP
闭包
websocket
socket
写一个函数判断页面两个矩形是否相交
介绍项目，介绍项目的难点与创新点
前端项目打包方式
项目前端方面引用技术
React的生命周期
React的虚拟DOM
事件循环（EventLoop）
解构赋值
箭头函数
Promise（写一个promise的实例）
写Promise.all的实现源码
跨域及实现的方式，及比较
同源策略在浏览器具体的表现
回流与重绘，以及如何避免
浏览器的缓存机制
介绍强缓存与协商缓存
对前端工程化方面的理解
介绍一个你自己的项目？
说一下Vue的缺点有哪些？
Eventloop循环说一下？
Node中的Worker说一下？Node中如何创建多个线程？Node中如何实现开启守护进程？
说一下Express的架构和实现原理？
说一下中间件的实现原理？
Express和Koa的区别呢？
说一下Diff算法的本质？abc, acb是如何改变的呢？
说一下红黑树和他的应用场景？
Nginx的应用场景说一下？
app.use和app.get的区别？
node的路由实现原理？
Node如何读取大数据量下的数据？
介绍一下项目，项目中的用到的一些技术
移动端的性能优化，rem的原理
点透事件：H5开发中可能遇到的特有的问题
项目后台用的技术栈是什么
跨域问题
常见的http状态码
$documnent.ready() VS window.onload() 两种方式的区别（哪个先执行）
ES6的新特性
箭头函数与普通函数的区别
let与var的区别
对vue熟悉吗？（不能算是熟悉，所以vue是硬伤）
vue的生命周期
对闭包的理解
常见的git命令
项目中所有人都在master分支上开发吗？还是都有自己的分支？
http状态码
输入一个URL的过程
es6，promise讲一下
冒泡算法、二分查找、快排，以及时间复杂度、最坏情况
同源策略
跨域
xss攻击和预防
import和link的区别
水平居中的方式，包括块和文本
css3的新特性，说一下单行文本溢出和多行文本溢出
less了解吗
设计模式，实现一个登录框，不让用户重复点击弹出多个登录框（使用单例模式）
原型链
优化方法
git提交冲突如何解决
实现一个repeat(str,count)函数，str是一个字符串，count是重复的次数。
三个盒子里有一块糖，你挑了一个盒子，然后拿走一个空盒子，问是否更换盒子？
一个为n的台阶，小明可以一次走一步、两步或者五步，问一共几种走法？

【编程题与分析题】new的实现原理

https://github.com/fecommunity — Wed, 24 Jul 2024 05:56:01 GMT

new一个对象的原理是怎样的呢？

用new Object() 的方式新建了一个对象 obj
取出第一个参数，就是我们要传入的构造函数。此外因为 shift 会修改原数组，所以 arguments 会被去除第一个参数
将 obj 的原型指向构造函数，这样 obj 就可以访问到构造函数原型中的属性
使用 apply，改变构造函数 this 的指向到新建的对象，这样 obj 就可以访问到构造函数中的属性
返回 obj

// v1
  function objectFactory() {
      var obj = new Object(),
          // 因为 shift 会修改原数组，所以 arguments 会被去除第一个参数
          Constructor = [].shift.call(arguments);     // 拿到伪数组中的第一个参数
      // 取出参数中的第一个参数，就是我们要传入的构造函数，建立继承关系
      obj.__proto__ = Constructor.prototype;
      Constructor.apply(obj, arguments);
      return obj;
  }

  // v2 : 还需要判断返回的值是不是一个对象，如果是一个对象，我们就返回这个对象，如果没有，我们该返回什么就返回什么。
  function objectFactory() {
      var obj = new Object(),
          Constructor = [].shift.call(arguments);
      // 建立继承关系(二者之间的关系)
      obj.__proto__ = Constructor.prototype;
      // 开始执行这个构造函数
      var ret = Constructor.apply(obj, arguments);
      // 看一下构造函数的返回值，是对象还是一个基本数据类型?
      return typeof ret === 'object' ? ret : obj;
  }


  // v4：Object.create的原理
    // var obj = Object.create(Constructor.prototype);
    // 等价于：
    // var obj = new Object();
    // obj.__proto__ = Constructor.prototype;
    const _new = function () {
        var Constructor = [].shift.call(arguments);
        // 1. 创建一个对象，这个对象要继承与构造函数的原型对象
        var obj = Object.create(Constructor.prototype);
        // 2. 执行这个构造函数
        var ret = Constructor.apply(obj, arguments);
        return typeof ret === 'object' ? ret || obj : obj;
    }

    // v5: 实现一个自己的new构造函数
    const _new = function() {
        // 从Object.prototype上克隆一个对象 
        var obj = new Object();
        // 取出来外部传入的构造器
        var Constructor = [].shift.call(arguments);

        // 使用一个中间的函数来维护原型的关系
        var F = function(){};
        F.prototype = Constructor.prototype;
        obj = new F();

        // 开始执行这个构造函数
        var res = Constructor.apply(obj, arguments);
        // 确保构造器总是返回一个对象(使用res || obj 的方式来防止返回null参数)
        return typeof res === 'object' ? res || obj : obj;
    }

【前端面试题】JS基础

https://github.com/fecommunity — Mon, 22 Jul 2024 10:14:32 GMT

JS基础知识

1. javascript的typeof返回哪些数据类型

   alert(typeof [1, 2]); //object
    alert(typeof 'leipeng'); //string
    var i = true; 
    alert(typeof i); //boolean
    alert(typeof 1); //number
    var a; 
    alert(typeof a); //undefined
    function a(){;};
alert(typeof a) //function
typeof isNaN  function
检测数组的几种方式：
Array.isArray(arr);   es5
Object.toString.call([]) === ‘object Array’
arr instanceof Array
arr.constructor === Array

2. 例举3种强制类型转换和2种隐式类型转换?

强制（parseInt(),parseFloat(),Number()）隐式（== ,!!）

3. split() 、join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串

4. 数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除 Unshift()头部添加 shift()头部删除

5. 事件绑定和普通事件有什么区别

普通添加事件的方法：

var btn = document.getElementById("hello");
btn.onclick = function(){
    alert(1);
}
btn.onclick = function(){
    alert(2);
}
执行上面的代码只会alert 2 

事件绑定方式添加事件：
var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
    alert(1);
},false);
btn.addEventListener("click",function(){
    alert(2);
},false);
执行上面的代码会先alert 1 再 alert 2
1.    普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。
2.    普通事件绑定不支持DOM事件流，事件捕获-目标元素-事件冒泡（可以把事件绑定在不同的阶段去执行）
3.    addEventListener不兼容低版本IE，第三个参数默认为false，表示在事件冒泡阶段执行
普通事件无法取消；第三个参数为true的时候表示在事件捕获的阶段执行；不需要on前缀；
addEventLisntener还支持事件冒泡+事件捕获；
4.    addEventLisntener同一个元素绑定完全相同的事件并不会覆盖掉前面的事件
5.    attachEvent只支持事件冒泡，不支持事件捕获。

6. IE和DOM事件流的区别

1.执行顺序不一样、 2.参数不一样 3.事件加不加on 4.this指向问题

7. IE和标准下有哪些兼容性的写法

Var ev = ev || window.event； // 获取触发事件对象 Var target = ev.srcElement||ev.target // 获取触发事件的源对象 document.documentElement.clientWidth || document.body.clientWidth

8. call和apply的区别

call方法: 语法：call(thisObj，Object1,Object2...) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。说明： call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

apply方法：语法：apply(thisObj，[argArray]) 定义：应用某一对象的一个方法，用另一个对象替换当前对象。说明：如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj，并且无法被传递任何参数。

9. b继承a的方法

原型链继承借用构造函数继承原型+构造函数组合继承寄生式继承

function A( age, name ){ 
  this.age = age; 
  this.name = name; 
} 

A.prototype.show = function(){ 
  alert('父级方法'); 
} 

function B(age,name,job){ 
  A.apply( this, arguments ); 
  this.job = job; 
} 

B.prototype = new A();
var b = new A(14,'侠客行'); 
var a = new B(15,'狼侠','侠客');

10. 如何阻止事件冒泡和默认事件

canceBubble()只支持IE,return false,stopPropagation()

11. JS创建对象的几种方式？

对象字面量 / Object构造函数构造函数纯构造函数空构造函数 + 原型混合构造函数 + 原型动态原型

// 动态原型的使用
    function Person(name, work) {
        this.name = name;

        // JS中通过if条件动态给一个对象添加属性或者方法的过程就是动态原型
        if (work) {
            Person.prototype.working = function () {
                console.log('我的工作是：', work);
            }
        }
    }
寄生构造函数
Object.create()

12. this指针，闭包，作用域

闭包：收敛权限，避免变量全局污染；可以实现模块化（jQuery）

// 立即执行函数
    var common = (function () {
        var name = 'common module';
        function initPage() {
            console.log(name);
        }

        // 向外暴露一个对象
        return {
            initpage : initPage
        }
    })();

    common.initpage();
// 使用闭包函数实现点击弹出真实索引
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        (function (i) {
            lis[i].addEventListener('click', function () {
                alert(i);
            })
        })(i);
    }

13. 添加删除替换插入到某个接点的方法

obj.appendChid()
obj.insertBefore()
obj.replaceChild()
obj.removeChild()

14. javascript的本地对象，内置对象和宿主对象

本地对象为array obj regexp等可以new实例化内置对象为gload Math 等不可以实例化的宿主对象为浏览器自带的document,window 等

15. window.onload 和document ready的区别

window.onload 是在dom文档树加载完和所有文件加载完之后执行一个函数Document.ready原生种没有这个方法，jquery中有 $().ready(function),在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。 $(document).ready要比window.onload先执行 window.onload只能出来一次，$(document).ready可以出现多次

16. ”==”和“===”的不同

前者会自动转换类型后者不会

17. javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、议和端口号的组合。 Ajax跨域的实现，JSONP的底层实现原理，如何解决跨域请求

18. JavaScript是一门什么样的语言，它有哪些特点？

没有标准答案。 javaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。JavaScript兼容于ECMA标准，因此也称为ECMAScript。基本特点 1．是一种解释性脚本语言（代码不进行预编译）。 2．主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。 3．可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。 4．跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

19. JavaScript的数据类型都有什么？

基本数据类型：String,boolean,Number,Undefined, Null 引用数据类型：Object(Array,Date,RegExp,Function) 那么问题来了，如何判断某变量是否为数组数据类型？方法一.判断其是否具有“数组性质”，如slice()方法。可自己给该变量定义slice方法，故有时会失效方法二.obj instanceof Array 在某些IE版本中不正确方法三.方法一二皆有漏洞，在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性，最好的方法如下：

    if(typeof Array.isArray==="undefined")
{
  Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]"
    };  
}

20. 已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)

document.getElementById(“ID”).value

21. 希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

    var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length;　　//缓存到局部变量
while (len--) {　　//使用while的效率会比for循环更高
　　if (domList[len].type == ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
}

22. 设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)

var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”

23. 当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？

直接在DOM里绑定事件：

在JS里通过onclick绑定：xxx.onclick = test 通过事件添加进行绑定：addEventListener(xxx, ‘click’, test) 那么问题来了，Javascript的事件流模型都有什么？ “事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播 “事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的 “DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

24. 看下列代码输出为何？解释原因。

var a;
alert(typeof a); // undefined
alert(b); // 报错

解释：Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

25. 看下列代码,输出什么？解释原因。

var a = null;
alert(typeof a); //object

解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。

26. 看下列代码,输出什么？解释原因。

var undefined;
undefined == null; // true
1 == true;   // true
2 == true;   // false
0 == false;  // true
0 == '';     // true
NaN == NaN;  // false
[] == false; // true
[] == ![];   // true

• undefined与null相等，但不恒等（===）一个是number一个是string时，会尝试将string转换为number 尝试将boolean转换为number，0或1 尝试将Object转换成number或string，取决于另外一个对比量的类型所以，对于0、空字符串的判断，建议使用 “===” 。“===”会先判断两边的值类型，类型不匹配时为false。那么问题来了，看下面的代码，输出什么，foo的值为什么？

var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);   // number

执行完后foo的值为111，foo的类型为number。

27. 看代码给答案。

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);

答案：2（考察引用数据类型细节）

28. 已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。

答案：alert(stringArray.join(“ ”)) // 注意中间的空格

29. 已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。

    function combo(msg){
    var arr=msg.split("-");
    for(var i=1;i


30.    var numberArray = [3,6,2,4,1,5]; （考察基础API）
1) 实现对该数组的倒排，输出[5,1,4,2,6,3]
numberArray.reverse()
2) 实现对该数组的降序排列，输出[6,5,4,3,2,1]
numberArray.sort(function(a,b){return b-a})
31.    输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26
var d = new Date();
// 获取年，getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? '0' + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);
32.    将字符串”{$id}{$name}”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）
答案："{$id}{$id}_{$name}".replace(/{$id}/g, '10').replace(/{$name}/g, 'Tony');
33.    为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义
    function escapeHtml(str) {
return str.replace(/[<>”&]/g, function(match) {
    switch (match) {
                   case “<”:
                      return “<”;
                   case “>”:
                      return “>”;
                   case “&”:
                      return “&”;
                   case “\””:
                      return “"”;
      }
  });
}
34.    foo = foo||bar ，这行代码是什么意思？为什么要这样写？
答案：if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。
35.    看下列代码，将会输出什么?(变量声明提升)
    var foo = 1;
(function(){
    console.log(foo);
    var foo = 2;
    console.log(foo);
})()
答案：输出undefined 和 2。上面代码相当于：
    var foo = 1;
(function(){
    var foo;
    console.log(foo); //undefined
    foo = 2;
    console.log(foo); // 2;   
})()
函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。
36.    用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。
    function randomNub(aArray, len, min, max) {
               if (len >= (max - min)) {
                   return '超过' + min + '-' + max + '之间的个数范围' + (max - min - 1) + '个的总数';
               }
               if (aArray.length >= len) {
                   aArray.sort(function(a, b) {
                       return a - b
                   });
                   return aArray;
               }
               var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);
               for (var j = 0; j < aArray.length; j++) {
                   if (nowNub == aArray[j]) {
                       randomNub(aArray, len, min, max);
                       return;
                   }
               }
               aArray.push(nowNub);
               randomNub(aArray, len, min, max);
               return aArray;
           }
var arr=[];
randomNub(arr,10,10,100);
37.    把两个数组合并，并删除第二个元素。
var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);
38.    怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）
1）创建新节点
createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点
2）添加、移除、替换、插入
appendChild()      //添加
removeChild()      //移除
replaceChild()      //替换
insertBefore()      //插入
3）查找
getElementsByTagName()    //通过标签名称
getElementsByName()     //通过元素的Name属性的值
getElementById()        //通过元素Id，唯一性
39.    有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。
答案：
    function serilizeUrl(url) {
    var urlObject = {};
    if (/\?/.test(url)) {
        var urlString = url.substring(url.indexOf("?") + 1);
        var urlArray = urlString.split("&");
        for (var i = 0, len = urlArray.length; i < len; i++) {
            var urlItem = urlArray[i];
            var item = urlItem.split("=");
            urlObject[item[0]] = item[1];
        }
        return urlObject;
    }
    return null;
}
40.    正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？
答案：当使用RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\表示一个\）。使用正则表达字面量的效率更高。 
邮箱的正则匹配：
    var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;



【流行框架】Angular相关
https://github.com/fecommunity — Sun, 21 Jul 2024 09:38:57 GMT
Angular相关面试题
1. ng-show/ng-hide 与 ng-if的区别？

ng-show/ng-hide实际上是通过display来进行隐藏和显示的。2. 而ng-if实际上控制dom节点的增删除来实现的。
因此如果我们是根据不同的条件来进行dom节点的加载的话，那么ng-if的性能好过ng-show.

2.解释下什么是$rootScrope以及和$scope的区别？
通俗的说$rootScrope 页面所有$scope的父亲。
我们来看下如何产生$rootScope和$scope吧。

step1:Angular解析ng-app然后在内存中创建$rootScope。
step2:angular回继续解析，找到{}表达式，并解析成变量。
step3:接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。

3. 表达式 {{yourModel}}是如何工作的？
它依赖于 $interpolation服务，在初始化页面html后，它会找到这些表达式，并且进行标记，于是每遇见一个{}，则会设置一个$watch。而$interpolation会返回一个带有上下文参数的函数，最后该函数执行，则算是表达式$parse到那个作用域上。
4. Angular中的digest周期是什么？
每个digest周期中，angular总会对比scope上model的值，一般digest周期都是自动触发的，我们也可以使用$apply进行手动触发。
5. 如何取消 $timeout, 以及停止一个$watch()?
停止 $timeout我们可以用cancel：
var customTimeout = $timeout(function () {  
  // your code
}, 1000);

$timeout.cancel(customTimeout);
停掉一个$watch：

// .$watch() 会返回一个停止注册的函数
function that we store to a variable  
var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty’, function (newVal) {  
  if (newVal) {
    // we invoke that deregistration function, to disable the watch
    deregisterWatchFn();
    ...
  }
});
6. Angular Directive中restrict 中分别可以怎样设置？scope中@,=,&有什么区别？
restrict中可以分别设置:
A匹配属性
E匹配标签
C匹配class
M 匹配注释
当然你可以设置多个值比如AEC,进行多个匹配。
在scope中，@,=,&在进行值绑定时分别表示
@获取一个设置的字符串，它可以自己设置的也可以使用{{yourModel}}进行绑定的;
= 双向绑定，绑定scope上的一些属性；
& 用于执行父级scope上的一些表达式，常见我们设置一些需要执行的函数
angular.module('docsIsolationExample', [])  
.controller('Controller', ['$scope', function($scope) {
  $scope.alertName = function() {
      alert('directive scope &');
  }
}])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      clickHandle: '&'
    },
    template: '',
    controller: function($scope) {

      $scope.testClick = function() {
        $scope.clickHandle();

      }  
    }
  };
});
  
  
  
  
 
7. 列出至少三种实现不同模块之间通信方式？
Service
events,指定绑定的事件
使用 $rootScope
controller之间直接使用$parent, $$childHead等
directive 指定属性进行数据绑定
8. 有哪些措施可以改善Angular 性能

[!NOTE]
官方提倡的，关闭debug,$compileProvider


使用一次绑定表达式即{{yourModel}}
减少watcher数量
在无限滚动加载中避免使用ng-repeat
使用性能测试的小工具去挖掘你的angular性能问题，我们可以使用简单的console.time()也可以借助开发者工具以及Batarang

myApp.config(function ($compileProvider) {  
  $compileProvider.debugInfoEnabled(false);
});

console.time("TimerName");  
//your code
console.timeEnd("TimerName");  
9. 你认为在Angular中使用jQuery好么？

angular自带了很多api可以完全替代掉jQuery中常用的api，我们可以使用angular.element，$http,$timeout,ng-init等。

我们不妨再换个角度，如果业务需求，而对于一个新人（比较熟悉jQuery）的话，或许你引入jQuery可以让它在解决问题，比如使用插件上有更多的选择，当然这是通过影响代码组织来提高工作效率，随着对于angular理解的深入，在重构时会逐渐摒弃掉当初引入jquery时的一些代码。

所以我觉得两种框架说完全不能一起用肯定是错的，但是我们还是应该尽力去遵循angular的设计。


10. 如何进行angular的单元测试

[!NOTE]
我们可以使用karam＋jasmine 进行单元测试,我们通过ngMock引入angular app然后自行添加我们的测试用例。 一段简单的测试代码：

describe('calculator', function () {

  beforeEach(module('calculatorApp'));

  var $controller;

  beforeEach(inject(function(_$controller_){
    $controller = _$controller_;
  }));

  describe('sum', function () {
        it('1 + 1 should equal 2', function () {
            var $scope = {};
            var controller = $controller('CalculatorController', { $scope: $scope });
            $scope.x = 1;
            $scope.y = 2;
            $scope.sum();
            expect($scope.z).toBe(3);
        });    
    });

});
11.  请解释Angular 2应用程序的生命周期hooks是什么？

Angular 2组件/指令具有生命周期事件。是由@angular/core管理的。

@angular/core会创建组件。渲染它。创建并呈现它的后代。当@angular/core的数据绑定属性更改时，处理就会更改，在从DOM中删除其模板之前，就会销毁掉它。Angular提供了一组生命周期hooks（特殊事件）。能够被分接到生命周期中，并在须要时执行操作。

构造函数会在全部生命周期事件之前执行。

每一个接口都有一个前缀为ng的hook方法。比如，ngOnint界面的OnInit方法，这种方法必须在组件中实现。 

一部分事件适用于组件/指令，而少数事件仅仅适用于组件。



ngOnChanges：当Angular设置其接收当前和上一个对象值的数据绑定属性时响应。

ngOnInit：在第一个ngOnChange触发器之后，初始化组件/指令。
这是最经常使用的方法。用于从后端服务检索模板的数据。

ngDoCheck：检測并在Angular上下文发生变化时执行。
每次更改检測执行时，会被调用。

ngOnDestroy：在Angular销毁指令/组件之前清除。取消订阅可观察的对象并脱离事件处理程序，以避免内存泄漏。


组件特定hooks：

ngAfterContentInit：组件内容已初始化完毕
ngAfterContentChecked：在Angular检查投影到其视图中的绑定的外部内容之后。
ngAfterViewInit：Angular创建组件的视图后。
ngAfterViewChecked：在Angular检查组件视图的绑定之后。

12.  使用Angular 2，和使用Angular 1相比。有什么优势？

Angular 2是一个平台，不仅是一种语言
更好的速度和性能
更简单的依赖注入
模块化。跨平台
具备ES6和Typescript的优点。
灵活的路由，具备延迟载入功能
更easy学习

13.  Angular 2中的路由工作原理是什么？

路由是能够让用户在视图/组件之间导航的机制。Angular 2简化了路由，并提供了在模块级（延迟载入）下配置和定义的灵活性。 


Angular应用程序具有路由器服务的单个实例。而且每当URL改变时。对应的路由就与路由配置数组进行匹配。在成功匹配时，它会应用重定向，此时路由器会构建ActivatedRoute对象的树。同一时候包括路由器的当前状态。在重定向之前，路由器将通过执行保护（CanActivate）来检查是否同意新的状态。

Route Guard仅仅是路由器执行来检查路由授权的接口方法。

保护执行后，它将解析路由数据并通过将所需的组件实例化到router-outlet中来激活路由器状态。



扩展阅读

https://www.codeproject.com/Articles/1164813/Angular-Routing 
https://vsavkin.com/angular-2-router-d9e30599f9ea#.kt4z1v957

14.  什么是事件发射器？它是怎样在Angular 2中工作的？

Angular 2不具有双向digest cycle。这是与Angular 1不同的。

在Angular2中，组件中发生的不论什么改变总是从当前组件传播到其全部子组件中。假设一个子组件的更改须要反映到其父组件的层次结构中，我们能够通过使用事件发射器api来发出事件。

简而言之，EventEmitter是在@ angular/core模块中定义的类。由组件和指令使用。用来发出自己定义事件。


@output() somethingChanged = new EventEmitter();
我们使用somethingChanged.emit（value）方法来发出事件。
这通经常使用在setter中，当类中的值被更改完毕时。
能够通过模块的不论什么一个组件，使用订阅方法来实现事件发射的订阅。
myObj.somethingChanged.subscribe(val) => this.myLocalMethod(val));

扩展阅读

http://stackoverflow.com/questions/36076700/what-is-the-proper-use-of-an-eventemitter
https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.HTML

15.  怎样在Angular 2应用程序中使用codelyzer？

全部企业应用程序都会遵循一组编码惯例和准则。以更好的方式维护代码。Codelyzer是一个开源工具。用于执行和检查是否遵循了提前定义的编码准则。Codelyzer仅对Angular和TypeScript项目进行静态代码分析。


Codelyzer执行在tslint的顶部，其编码约定通常在tslint.json文件里定义。Codelyzer能够直接通过Angularcli或npm执行。

像Visual Studio Code和Atom这种编辑器也支持codelyzer，仅仅须要通过做一个主要的设置就能实现。

要在Visual Studio代码中设置codelyzer，我们能够在文件 - >选项 - >用户设置中加入tslint规则的路径。


{

    "tslint.rulesDirectory": "./node_modules/codelyzer",

    "typescript.tsdk": "node_modules/typescript/lib"

}

从cli中执行的代码：ng lint。

从npm中执行的代码： npm run lint



扩展阅读

https://github.com/mgechev/codelyzer
https://www.youtube.com/watch?v=bci-Z6nURgE

16.  什么是延迟载入？怎样在Angular 2中启用延迟载入？

大多数企业应用程序包括用各式各样的用于特定业务案例的模块。


捆绑整个应用程序代码并完毕载入，会在初始调用时。产生巨大的性能开销。

延迟载入使我们仅仅载入用户正在交互的模块，而其余的模块会在执行时按需载入。

延迟载入通过将代码拆分成多个包并以按需载入的方式，来加速应用程序初始载入过程。

每一个Angular应用程序必须有一个叫AppModule的主模块。代码应该依据应用程序业务案例分为不同的子模块（NgModule）。


启用延迟载入的Plunkr演示样例： 

我们不须要在根模块中导入或声明延迟载入模块。
将路由加入到顶层路由（app.routing.ts）并设置loadChildren。loadChildren会从根目录中获取绝对路3. 径。RouterModule.forRoot（）会获取routes数组并配置路由器。
在子模块中导入模块特定路由。
在子模块路由中，将路径指定为空字符串“”，也就是空路径。
RouterModule.forChild会再次採用路由数组为子模块组件载入并配置路由器。
然后，导出const路由：ModuleWithProviders = RouterModule.forChild（routes）;


17.  在Angular 2应用中，我们应该注意哪些安全威胁？

就像不论什么其他client或Web应用程序一样，Angular 2应用程序也应该遵循一些基本准则来减轻安全风险。


避免为你的组件使用/注入动态HTML内容。
假设使用外部HTML，也就是来自数据库或应用程序之外的地方。那么就须要清理它。
不要将外部网址放在应用程序中，除非它是受信任的。避免网址重定向。除非它是可信的。
考虑使用AOT编译或离线编译。
通过限制api。选择使用已知或安全环境/浏览器的app来防止XSRF攻击。


扩展阅读

https://angular.io/docs/ts/latest/guide/security.HTML#!#best-practices

18.  怎样优化Angular 2应用程序来获得更好的性能？

[!NOTE]
优化取决于应用程序的类型和大小以及更多因素。


考虑AOT编译。
确保应用程序已经经过了捆绑。uglify和tree shaking。
确保应用程序不存在不必要的import语句。
确保应用中已经移除了不使用的第三方库。
全部dependencies 和dev-dependencies都是明白分离的。
假设应用程序较大时，我会考虑延迟载入而不是全然捆绑的应用程序。


扩展阅读


https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294#.pw4m2srmr



https://www.lucidchart.com/techblog/2016/05/04/angular-2-best-practices-change-detector-performance/



19.  怎样实现不出现编辑器警告的自己定义类型？

在大多数的情况下。第三方库都带有它的.d.ts 文件，用于类型定义。


在某些情况下，我们须要通过向现有类型提供一些更多的属性来扩展现有类型，或者假设我们须要定义其他类型以避免TypeScript警告。

假设我们须要扩展外部库的类型定义，一个好的做法是，我们并不是对node_modules或现有的typings目录进行修改，而是创建一个命名为“自己定义类型”的新目录。来存储全部的自己定义类型。

要定义应用程序（JavaScript / Typescript）对象的类型。我们应该在应用程序对应模块的models目录中，定义接口和实体类。

对于这些情况，我们能够通过创建我们自己的“ .d.ts”文件来实现定义或扩展类型。



扩展阅读

https://www.typescriptlang.org/docs/handbook/declaration-merging.HTML
https://typescript.codeplex.com/wikipage?title=Writing%20Definition%20%28.d.ts%29%20Files
http://stackoverflow.com/questions/32948271/extend-interface-defined-in-d-ts-file

20. 什么是Shadow DOM？它怎样帮助Angular 2更好地执行？

Shadow DOM是HTML规范的一部分。它同意开发者封装自己的HTML标记，CSS样式和JavaScript。

Shadow DOM以及其他一些技术，使开发者能够像标签一样构建自己的一级标签。Web组件和API。总的来说，这些新的标签和API被称为Web组件。Shadow DOM通过提供了更好的关注分离，通过其他的HTML DOM元素实现了更少的样式与脚本的冲突。

由于shadow DOM本质上是静态的。同一时候也是开发者无法訪问的，所以它是一个非常好的候选对象。由于它缓存的DOM将在浏览器中呈现得更快，并提供更好的性能。此外。还能够相对非常好地管理shadow DOM。同一时候检測Angular 2应用的改变，而且能够有效地管理视图的又一次绘制。



扩展阅读

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM
https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
https://code.tutsplus.com/tutorials/intro-to-shadow-dom--net-34966

21. 什么是AOT编译？它有什么优缺点？

AOT编译代表的是Ahead Of Time编译，当中Angular编译器在构建时，会将Angular组件和模板编译为本机JavaScript和HTML。编译好的HTML和JavaScript将会部署到Webserver，以便浏览器能够节省编译和渲染时间。

21.1 优点

更快的下载：由于应用程序已经编译。很多Angular编译器相关库就不再须要捆绑，应用程序包变得更小，所以该应用程序能够更快地下载。

更少的Http请求数：假设应用程序没有捆绑来支持延迟载入（或不论什么原因），对于每一个关联的HTML和CSS，都会有一个单独的server请求。可是预编译的应用程序会将全部模板和样式与组件对齐，因此到server的Http请求数量会更少。

更快的渲染：假设应用程序不是AOT编译，那么应用程序全然载入时，编译过程会发生在浏览器中。这须要等待下载全部必需的组件。然后等待编译器花费时间来编译应用程序。

在构建时检測错误：由于预先编译，能够检測到很多编译时错误，能够为应用程序提供更好的稳定性。


21.2 缺点

仅适用于HTML和CSS，其他文件类型须要前面的构建步骤
没有watch模式。必须手动完毕（bin / ngc-watch.js）并编译全部文件
须要维护AOT版本号的bootstrap文件（使用cli等工具时不须要）
在编译之前，须要清理步骤


扩展阅读

https://angular.io/docs/ts/latest/cookbook/aot-compiler.HTML

22. Observables和Promises的核心差别是什么？
22.1 Promise

返回单个值
不可取消

22.2 Observables

能够使用多个值
可取消
支持map，filter，reduce和相似的操作符
ES 2016提议的功能
使用反应式扩展（RxJS）
依据时间的变化，数组成员能够异步获取


参考文章：https://www.cnblogs.com/mfmdaoyou/p/7389012.html




【编程题与分析题】闭包问题
https://github.com/fecommunity — Sat, 20 Jul 2024 18:22:31 GMT
闭包问题
循环中赋值为引用的问题
for (var i = 1; i < 5; i++) {
  setTimeout(function timer() {
    console.log(i)
  }, i * 1000)
}
解决方法有3种
第一种，使用立即执行函数方式
for (var i = 1; i < 5; i++) {
  (fuction(j){
    setTimeout(function timer() {
      console.log(j)
    }, j * 1000)
  })(i)
}
第二种，使用ES6的let
for (let i = 1; i < 5; i++) {
  setTimeout(function timer() {
    console.log(i)
  }, i * 1000)
}
第三种，使用setTimeout的第三个参数
for (var i = 1; i < 5; i++) {
  setTimeout(function timer(j) {
    console.log(j)
  }, i * 1000, i)
}
计数器
实现一个foo函数 可以这么使用:
a = foo();b = foo();c = foo();
// a === 1;b === 2;c === 3;
foo.clear();d = foo(); //d === 1;
function myIndex() {
    var index = 1;

    function foo(){
        return index++;
    }

    foo.clear = function() {
        index = 1;
    }
    return foo;
}

var foo = myIndex();



【NodeJS相关】基础知识
https://github.com/fecommunity — Thu, 18 Jul 2024 13:30:45 GMT
NodeJS基础知识
1. Node的全局对象和全局变量
1.1 全局对象：所有模块都可以调用的

global：表示Node所在的全局环境，类似于浏览器的window对象。

process：该对象表示Node所处的当前进程，允许开发者与该进程互动。

console：指向Node内置的console模块，提供命令行环境中的标准输入、标准输出功能。


1.2 全局函数

定时器函数：共有4个，分别是setTimeout(), clearTimeout(), setInterval(), clearInterval()；
require：用于加载模块；
Buffer()：用于操作二进制数据。

1.3 全局变量

__filename：指向当前运行的脚本文件名。
__dirname：指向当前运行的脚本所在的目录。

2. Node的三大特点
2.1 单线程
    Node.js不为每个客户连接创建一个新的线程，而仅仅使用一个线程。当有用户连接了，就触发一个内部事件，通过非阻塞I/O、事件驱动机制，让Node.js程序宏观上也是并行的。
        
2.2 非阻塞I/O  

由于Node.js中采用了非阻塞型I/O机制，因此在执行了访问数据库的代码之后，将立即转而执行其后面的代码，把数据库返回结果的处理代码放在回调函数中，从而提高了程序的执行效率。

当某个I/O执行完毕时，将以事件的形式通知执行I/O操作的线程，线程执行这个事件的回调函数。为了处理异步I/O，线程必须有事件循环，不断的检查有没有未处理的事件，依次予以处理。

阻塞模式下，一个线程只能处理一项任务，要想提高吞吐量必须通过多线程。而非阻塞模式下，一个线程永远在执行计算操作，这个线程的CPU核心利用率永远是100%。所以，这是一种特别有哲理的解决方案：与其人多，但是好多人闲着；还不如一个人玩命，往死里干活儿。


2.3 事件驱动event-driven

在Node中，在一个时刻，只能执行一个事件回调函数，但是在执行一个事件回调函数的中途，可以转而处理其他事件（比如，又有新用户连接了），然后返回继续执行原事件的回调函数，这种处理机制，称为“事件环”机制。

Node.js底层是C++（V8也是C++写的）。底层代码中，近半数都用于事件队列、回调函数队列的构建。


3. Node技术架构
3.1 Node底层架构

nodejs组成部分：v8 engine, libuv, builtin modules, native modules以及其他辅助服务。



v8 engine：主要有两个作用 
  1.虚拟机的功能，执行js代码（自己的代码，第三方的代码和native modules的代码）。
  2.提供C++函数接口，为nodejs提供v8初始化，创建context，scope等。

libuv：它是基于事件驱动的异步IO模型库，我们的js代码发出请求，最终由libuv完成，而我们所设置的回调函数则是在libuv触发。

builtin modules：它是由C++代码写成各类模块，包含了crypto，zlib, file stream etc 基础功能。（v8提供了函数接口，libuv提供异步IO模型库，以及一些nodejs函数，为builtin modules提供服务）。

native modules：它是由js写成，提供我们应用程序调用的库，同时这些模块又依赖builtin modules来获取相应的服务支持



[!NOTE]
总结：如果把nodejs看做一个黑匣子，起暴露给开发者的接口则是native modules，当我们发起请求时，请求自上而下，穿越native modules，通过builtin modules将请求传送至v8，libuv和其他辅助服务，请求结束，则从下回溯至上，最终调用我们的回调函数。

3.2 Node函数调用机制


v8执行js代码 server.listen()时，会通过一些基础服务到TCPWrap::listen(),TCPWrap是nodejs的內建模块，其通过libuv的api uv_listen()的方式，由libuv来完成异步调用。

图中1,2,3,4,5步骤标明了调用和返回的路径，这几步很快结束，留下callback TCPWrap::OnConnection()等着所需要的数据准备好后被调用。

libuv在得到所需要的请求后，会调用callback TCPWrap::OnConnection()，在该函数最后通过 tcp_wrap->MakeCallback(env->onconnection_string(), ARRAY_SIZE(argv), argv) 调用V8 engine中的JavaScript callback。

Node.js内建模块http其实是建立在模块net之上的。如果看net.js代码会发现，其通过 new TCP() 返回的类对象完成后续的TCP connect, bind, open等socket动作。

可以看到Node.js做的工作像是一座桥。左手V8，右手libuv，将2者有机连接在一起。例如HandleWrap::HandleWrap()中记录了V8 instance中的JavaScript对象以及TCPWrap对象。这样在TCPWrap::OnConnection()中可以拿到这两个对象，执行后续的callback调用。



参考文章

https://www.cnblogs.com/peiyu1988/p/8192066.html




【JS相关】组件化和React
https://github.com/fecommunity — Tue, 16 Jul 2024 07:25:52 GMT
组件化和React
1. 说一下使用jQuery和使用框架的区别？

数据和视图的分离，（jQuery数据和视图混在一起，代码耦合）-------开放封闭原则
以数据驱动视图（只关注数据变化，DOM操作被封装）

2.说一下对MVVM的理解？

先说MVC：Model, View, Controller（主要用于后端）
MVVM: Model, View, ViewModel[中间连接者，连接view和和model]
关于ViewModel

MVVM在React中对应关系


1） M(odel)：对应组件的方法或生命周期函数中实现的业务逻辑和this.state中保存的本地数据，如果React集成了redux +react-redux，那么组件中的业务逻辑和本地数据可以完全被解耦出来单独存放当做M层，如业务逻辑放在Reducer和Action中。
2） V(iew)-M(odel)：对应组件中的JSX，它实质上是Virtual DOM的语法糖。React负责维护 Virtual DOM以及对其进行diff运算，而React-dom 会把Virtual DOM渲染成浏览器中的真实DOM
3） View：对应框架在浏览器中基于虚拟DOM生成的真实DOM（并不需要我们自己书写）以及我们书写的CSS
4）绑定器：对应JSX中的命令以及绑定的数据，如className={ this.props.xxx }、{this.props.xxx}等等

MVVM的双绑和单绑区别


1） 一般，只有UI表单控件才存在双向数据绑定，非UI表单控件只有单向数据绑定。
2） 单向数据绑定是指：M的变化可以自动更新到ViewModel，但ViewModel的变化需要手动更新到M（通过给表单控件设置事件监听）
3） 双向数据绑定是指念：M的变化可以自动更新到ViewModel，ViewModel的变化也可以自动更新到M
4） 双向绑定 = 单向绑定 + UI事件监听。双向和单向只不过是框架封装程度上的差异，本质上两者是可以相互转换的。
5） 优缺点：在表单交互较多的情况下，单向数据绑定的优点是数据更易于跟踪管理和维护，缺点是代码量较多比较啰嗦，双向数据绑定的优缺点和单向绑定正好相反。

3.说一下对组件化的理解？

组件的封装
a. 视图的封装
b. 数据的封装
c. 变化逻辑（数据驱动视图变化，setState）


组件的复用
a. 使用props来传递数据（同一个组件传递不同飞数据）
b. 组件的复用（同一个组件使用不同的数据）



4.JSX的本质是什么？

[!NOTE]

JSX语法（标签、JS表达式，判断，循环，事件绑定）
JSX是语法糖, 需要被解析成JS才能运行（h函数的使用）
JSX是独立的标准，可以被其他项目使用


   // 下面的代码实际执行流程：
    // JSX 代码
    const user = {
        firstName : 'xiugang',
        lastName : 'zhang'
    }
    var profile = 
        
        {[user.firstName, user.lastName].join(' ')}
    

    // 解析结果(重点掌握)，关键点：是使用了一个React.createElement来创建节点的
    var profile = React.createElement('div', null, [
        React.createElement('img', {src : 'a.jpg', className : 'profile'}),
        React.createElement('h3', null, [[user.firstName, user.lastName].join(' ')])
])

/* @jsx h*/
// 1. 使用插件：cnpm install babel-plugin-transform-react-jsx
// 2. 开始编译JSX： babel --plugins transform-react-jsx demo.js
// 3. 可以自定义React.createElement变为一个h函数： /* @jsx h*/

5.JSX和VDOM的关系？
5.1 分析为何需要VDOM

VDOM是React初次推广开来的，结合JSX
JSX就是模板渲染成HTML
初次渲染 + 修改state之后的re-render
正好符合VDOM的应用场景5.2 React.createElement和h函数
5.3 何时patch？

初次渲染----   ReactDOM.render(, container)

会触发patch(container, vnode)函数
re-render-- setState
会触发patch(vNode, newVNode)5.4    自定义组件的解析？


5.4.1 自定义组件的解析（TODOInput和TODOList组件的解析）

‘div’可以直接渲染即可，vdom可以实现
TodoInput和TodoList是自定义组件（class），vdom不认识
因此Input和List定义的时候必须声明render函数
根据props属性初始化实例，然后执行实例的render函数
render函数返回的还是vnode的对象

React.createElement(TodoInput, { addTitle: this.addTitle.bind(this) }),
    React.createElement(TodoList, { data: this.state.list })

    // 上面的代码相当于是先去创建一个TodoList实例对象
    var list = new TodoList({ data: this.state.list });
    // 然后再去调用这个函数的render方法（返回的是一个JSX，然后对当前的这个JSX渲染为VDOM）
    var vnode = list.render();
6.说一下setState的过程？
    // 1. 每个组件实例，都有renderComponent方法
    class Component {
        constructor(){

        }

        // 每个组件都有这个函数
        renderComponent(){
            // 获取上一次的vNode
            const prevVnode = this._vnode;

            // render函数只需之后，得到的还是一个新的node
            const newVnode = this.render();

            // 开始对比，找出差异
            patch(prevVnode, newVnode);

            // 更新node为最新的node
            this._vnode = newVnode;
        }
    }

    // 2. 执行renderComponent会重新执行实例的render方法
    // 3. render函数返回newVnode，然后拿到prevNode（也就是上次的vnode）----多次执行setState视图最终也只会渲染一次
    // 4. 执行patch（preVnode, newVNode）

[!NOTE]

setState通过一个队列机制实现state更新，当执行setState时，会将需要更新的state很后放入状态队列，而不会立即更新this.state，队列机制可以高效地批量更新state。如果不通过setState而直接修改this.state的值    
那么该state将不会被放入状态队列中。当下次调用setState并对状态队列进行合并时，就会忽略之前修改的state，造成不可预知的错误
同时，也利用了队列机制实现了setState的异步更新，避免了频繁的重复更新state


7.7.    阐述自己对React和Vue的认识？

两者的本质区别：
vue本质是MVVM框架，由MVC发展而来
React本质是前端组件化框架，由后端组件化发展而来
并不妨碍两者都能实现相同的功能


模板的区别
vue-使用模板（最初由angular提出）
React-使用JSX
模板语法上，我更倾向于JSX
模板分离上，我更倾向于Vue
模板应该和JS逻辑分离
“开放封闭原则”


组件化的区别
React本身就是组件化，没有组件哈就不是React
vue也支持组件化，不过是在MVVM上的扩展
查阅vue组件化的文档
组件化更适合选择React


两者的共同点
都支持组件化
都是数据驱动视图


如何选择
国内使用，首推vue。文档更易读，易学，社区够大
如果团队水平较高，推荐使用React，组件化和JSX






【前端面试题】HTML5 CSS3
https://github.com/fecommunity — Sat, 13 Jul 2024 16:22:33 GMT
HTML5 CSS3
1.CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器  多背景 rgba 
在CSS3中唯一引入的伪元素是 ::selection.
媒体查询，多栏布局
border-image

2.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
新特性：

拖拽释放(Drag and drop) API 
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search  
新的技术webworker, websocket, Geolocation

移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：
IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：


如何区分： 

DOCTYPE声明新增的结构元素、功能元素
3.本地存储（Local Storage ）和cookies（储存在用户本地终端上的数据）之间的区别是什么？
Cookies:服务器和客户端都可以访问；大小只有4KB左右；有有效期，过期后将会删除；

本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器；每个域5MB；没有过期数据，它将保留知道用户从浏览器清除或者使用Javascript代码移除
4.如何实现浏览器内多个标签页之间的通信?
调用 localstorge、cookies 等本地存储方式
5.你如何对网站的文件和资源进行优化？
文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用
6.什么是响应式设计？
它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常    
7.新的 HTML5 文档类型和字符集是？
答：HTML5文档类型：

    HTML5使用的编码
8.HTML5 Canvas 元素有什么用？
答：Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。
9.HTML5 存储类型有什么区别？
答：Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API
10用H5+CSS3解决下导航栏最后一项掉下来的问题
11.    CSS3新增伪类有那些？
p:first-of-type 选择属于其父元素的首个  元素的每个 
 元素。
p:last-of-type  选择属于其父元素的最后 
 元素的每个 
 元素。
p:only-of-type  选择属于其父元素唯一的 
 元素的每个 
 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 
 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个  元素。
:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。
12.    请用CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明。
css属性的熟练程度和实践经验
13.    描述下CSS3里实现元素动画的方法
动画相关属性的熟悉程度
14.    html5\CSS3有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，地理定位等功能的增加。

绘画 canvas 元素

用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search

CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器  多背景 rgba

新的技术webworker, websockt, Geolocation

移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；
是IE8/IE7/IE6支持通过document.createElement方法产生的标签，

可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式：
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架


15.    你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?

首先划分成头部、body、脚部；。。。。。 
实现效果图是最基本的工作，精确到2px；

与设计师，产品经理的沟通和项目的参与

做好的页面结构，页面重构和用户体验

处理hack，兼容、写出优美的代码格式

针对服务器的优化、拥抱 HTML5。

16.    你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

　　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。　

　　“优雅降级”观点

　　“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

　　在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

　　“渐进增强”观点

　　“渐进增强”观点则认为应关注于内容本身。

　　内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
　　那么问题了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？
17.    为什么利用多个域名来存储网站资源会更有效？
CDN缓存更方便 

突破浏览器并发限制 

节约cookie带宽 

节约主域名的连接数，优化页面响应速度 

防止不必要的安全问题
18.    请谈一下你对网页标准和标准制定机构重要性的理解。
　　（无标准答案）网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。
19.    请描述一下cookies，sessionStorage和localStorage的区别？　　
　　sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
20.    知道css有个content属性吗？有什么作用？有什么应用？
知道。css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。

//一种常见利用伪类清除浮动的代码
.clearfix:after {
    content:"."; //这里利用到了content属性
    display:block; 
    height:0;
    visibility:hidden; 
    clear:both; }
.clearfix { 
    *zoom:1; 
}

after伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用clear:both清除浮动。

　　那么问题继续还有，知道css计数器（序列数字字符自动递增）吗？如何通过css content属性实现css计数器？

答案：css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。 
21.    如何在 HTML5 页面中嵌入音频?
HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：
 
   
   Your browser does'nt support audio embedding feature. 

22.    如何在 HTML5 页面中嵌入视频？
和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg：
 
   
   Your browser does'nt support video embedding feature. 

23    HTML5 引入什么新的表单属性？
Datalist   datetime   output   keygen  date  month  week  time  number   range   emailurl
24.CSS3新增伪类有那些？
p:first-of-type 选择属于其父元素的首个 
 元素的每个 
 元素。

    p:last-of-type  选择属于其父元素的最后 
 元素的每个 
 元素。

    p:only-of-type  选择属于其父元素唯一的 
 元素的每个 
 元素。

    p:only-child    选择属于其父元素的唯一子元素的每个 
 元素。

    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 
 元素。

    :enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。
25.    (写)描述一段语义的html代码吧。
（HTML5中新增加的很多标签（如：
、、和等）

就是基于语义化设计原则）  

< div id="header">

< h1>标题< /h1>

< h2>专注Web前端技术< /h2>

< /div>

语义 HTML 具有以下特性：
文字包裹在元素中，用以反映内容。例如：

段落包含在 
 元素中。
顺序表包含在
元素中。
从其他来源引用的大型文字块包含在元素中。
HTML 元素不能用作语义用途以外的其他目的。例如：
包含标题，但并非用于放大文本。
包含大段引述，但并非用于文本缩进。
空白段落元素 ( 
 ) 并非用于跳行。

文本并不直接包含任何样式信息。例如：

不使用  或  等格式标记。

类或 ID 中不引用颜色或位置。
26.    cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage区别
sessionStorage和localStorage的存储空间更大；

sessionStorage和localStorage有更多丰富易用的接口；

sessionStorage和localStorage各自独立的存储空间；
27.    html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas  

用于媒介回放的 video 和 audio 元素 

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section 

表单控件，calendar、date、time、email、url、search  

新的技术webworker, websockt, Geolocation
移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，

可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式：
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架


28.如何区分： DOCTYPE声明\新增的结构元素\功能元素
29.语义化的理解？
用正确的标签做正确的事情！

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
30.    HTML5的离线储存？
localStorage    长期存储数据，浏览器关闭后数据不丢失；

sessionStorage  数据在浏览器关闭后自动删除。
31.    写出HTML5的文档声明方式
 

32.    HTML5和CSS3的新标签
HTML5： nav, footer, header, section, hgroup, video, time, canvas, audio...

CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image, 

border-color, transform…;
33.    自己对标签语义化的理解
在我看来，语义化就是比如说一个段落， 那么我们就应该用 标签来修饰，标题就应该用 标签等。符合文档语义的标签。



【操作系统】基础知识
https://github.com/fecommunity — Fri, 12 Jul 2024 11:23:07 GMT
操作系统基础知识
1.操作系统分类

批处理操作系统（单道，多道）
分时操作系统（Unix）
实时操作系统（MsgOS）
网络操作系统
分布式操作系统
微机操作系统（Linux、Windows、IOS等）
嵌入式操作系统（Android，iOS）

2.操作系统的4个特征?
2.1 并发性
区别于并行性，并发是指：多个事件在同一时间间隔内发生，并行是指：多个事件在同一时刻发生
2.2 共享性
一般的共享是指某种资源可以被大家使用，在os下的资源共享称为资源复用，具体含义是：系统中的资源可供内存中多个并发的执行的进程共同使用
2.3 虚拟性
通过某种技术将一个物理实体变为若干个逻辑上的对应物的功能即是虚拟
2.4 不确定性（异步）
每道程序完成的时间都是不可预知的，进程是以人们不可预知的速度向前推进的
3.操作系统的功能
3.1 处理机管理
也称进程管理。实质上是对处理机执行时间进行管理，采用多道程序等技术将CPU的时间真正合理地分配给每个任务。主要包括进程管理、进程同步、进程通信和进程调度。
3.2 文件管理
又称信息管理。主要包括文件存储空间管理、目录管理、文件的读写管理和存取管理。
3.3 存储管理
是对主存储器空间的管理。主要包括存储分配与回收、存储保护、地址映射（变换）和主存扩充。（即内存管理）
3.4 设备管理
实质上是对硬件设备进行管理，其中包括输入输出设备的分配、启动、完成和回收。
3.5 作业管理
包括人物、人机交互和用户界面管理等。
4.处理机管理
4.1 线程与进程
4.1.1 基本概念

[!NOTE]


进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动，是系统进行资源分配和调度的一个独立单位。

线程是进程的一个实体，是CPU调度和分派的基本单位，它是比进程更小的能独立运行的基本单位。线程自己基本上不拥有系统资源，只拥有一点在运行中必不可少的资源(如程序计数器，一组寄存器和栈)，但是它可与同属一个进程的其他的线程共享进程所拥有的全部资源。也有就绪、运行、阻塞三态。



PCB：为了便于系统描述和管理进程，在OS的核心位每个进程专门定义了一个数据结构，进程控制块PCB。PCB是进程的唯一标志

一个线程可以创建和撤销另一个线程;同一个进程中的多个线程之间可以并发执行。相对进程而言，线程是一个更加接近于执行体的概念，它可以与同进程中的其他线程共享数据，但拥有自己的栈空间，拥有独立的执行序列。
4.1.2 区别

1) 简而言之,一个程序至少有一个进程,一个进程至少有一个线程.
2) 线程的划分尺度小于进程，使得多线程程序的并发性高。
3) 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
4) 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
5) 从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

4.1.3 优缺点

[!NOTE]
线程执行开销小，但不利于资源的管理和保护；而进程正相反。同时，线程适合于在SMP机器上运行，而进程则可以跨机器迁移。

4.2 程序顺序执行的特征

顺序性：每一操作必须在下一操作开始之前结束
封闭性：程序运行时独占全机资源，资源的状态（除初始状态外）只有本程序才能改变，程序一旦执行，其结果不受外界影响
可再现性：程序执行环境和初始条件相同，重复执行时，结果相同

4.3 程序并发执行的特征

间断性：程序并发运行时，共享系统资源，为完成同一任务相互合作，会形成相互制约关系，导致并发程序具有“执行-暂停-执行”这种间断性的活动规律
失去封闭性：程序并发执行时，资源状态由多个程序改变，某程序执行时，会受到其他程序影响，失去封闭性
不可再现性：失去封闭性，导致失去可再现性

4.4 进程的特征

结构特征：程序段、相关数据段和PCB三部分构成进程实体
动态性：进程实体的一次执行过程，具有生命期，而程序是有序指令集合，是静态的
并发性：多个进程同时存于内存，在一段时间内同时运行
独立性：进程实体是一个能独立运行、独立分配资源和独立接受调度的基本单位
异步性：进程按各自独立的、不可预知的速度向前推进

4.5 进程的状态
三态模型（左图）、五态模型（右图）

4.6 进程间的通信（同步与互斥）

[!NOTE]
由于多个进程可以并发执行，所以进程间必然存在资源共享和相互合作的问题。进程通信是指各个进程交换信息的过程。

同步是合作进程间直接制约问题，互斥是申请临界资源进程间的间接制约问题。（临界资源（Critical Resource, CR）：在同一时间只能供一个进程使用的资源，例如：打印机，磁带机等硬件资源）
4.6.1 临界区管理4条原则
（临界区：每个进程中访问临界资源的那段代码）

有空即进：
无空则等：
有限等待：要求访问临界区的进程，保证有限时间内进入临界区，避免死等
让权等待：进程不能进入临界区时，应立即释放处理机，避免忙等

4.7 信号量机制
即利用PV操作来对信号量进行处理。

[!NOTE]
信号量（semaphore）的数据结构为一个值和一个指针，指针指向等待该信号量的下一个进程。信号量的值与相应资源的使用情况有关。

当它的值大于0时，表示当前可用资源的数量；
当它的值小于0时，其绝对值表示等待使用该资源的进程个数。
注意，信号量的值仅能由PV操作来改变。
　

[!NOTE]
一般来说，信号量S >= 0时，S表示可用资源的数量。执行一次P操作意味着请求分配一个单位资源，因此S的值减1；当S < 0时，表示已经没有可用资源，请求者必须等待别的进程释放该类资源，它才能运行下去。而执行一个V操作意味着释放一个单位资源，因此S的值加1；若S <= 0，表示有某些进程正在等待该资源，因此要唤醒一个等待状态的进程，使之运行下去。

4.8 进程调度
如何分配CPU。

[!NOTE]
调度方法分为可剥夺和不可剥夺两种。即当有更高优先级的进程到来时，是否可以将正在运行进程的CPU分配给高优先级的进程，可以则为可剥夺，否则为不可剥夺的。

在某些操作系统中，一个作业从提交到完成需要经历高、中、低三级调度。
4.8.1 高级调度
又称长调度或作业调度。它决定处于输入池中的哪个后备作业可以调入主系统做好运行的准备，成为一个或一组就绪进程。系统中一个作业（程序）只需经过一次高级调度。
4.8.2 中级调度
又称短程调度或对换调度。它决定处于交换区中的就绪进程哪个可以调入内存，以便直接参与对CPU的竞争。在内存资源紧张时，为了将进程调入内存，必须将内存中处于阻塞状态的进程调出交换区，以便为调入进程腾出空间。
4.8.3 低级调度
又称短程调度或进程调度。它决定处于内存中的就绪进程中的哪个可以占用CPU。最活跃、最重要的调度程序，对系统影响也是最大的。
4.9 常见的进程调度算法

先来先服务（FCFS）
短作业优先
时间片轮转（固定时间片、可变时间片）
优先级调度（静态优先级、动态优先级）
多级反馈调度（时间片轮转+优先级调度）。

4.10 死锁
4.10.1 基本概念

[!NOTE]
两个以上的进程互相要求对方释放已经占有的资源导致无法继续运行下去的现象

例如：一个系统有一台扫描仪R1，一台刻录机R2，有两个进程P1，P2，他们都准备将扫描的文档刻录到CD上，P1先请求R1并成功，P2先请求R2并成功，后来，P1又请求R2，但却因为已经分配而阻塞，P2请求R1，也因分配而阻塞，此时，双方都被阻塞，都希望对方释放自己所需的资源，但又谁都不能得到自己所需的资源而继续进行，从而一直占有自己所占的资源，就形成死锁
4.10.2 可抢占性资源和不可抢占性资源

前者：某进程获得这类资源后，该资源可以在被其他进程或系统抢占。
后者：一旦系统把资源分配给一个进程以后，就不能把他强行收回，只能等它用完自行释放

4.10.3 产生死锁的原因

（1） 竞争不可抢占性资源

（2） 进程运行推进的顺序不合适。

（3） 竞争可消耗资源


如果系统资源充足，进程的资源请求都能够得到满足，死锁出现的可能性就很低，否则就会因争夺有限的资源而陷入死锁。其次，进程运行推进顺序与速度不同，也可能产生死锁。
4.10.4 产生死锁的四个必要条件
互斥条件、请求与保持条件、不剥夺条件、循环等待条件。

（1） 互斥条件：一个资源每次只能被一个进程使用。
（2） 请求与保持条件：一个进程因请求资源而阻塞时，对已获得的资源保持不放。
（3） 不剥夺条件:进程已获得的资源，在末使用完之前，不能强行剥夺。
（4） 循环等待条件:若干进程之间形成一种头尾相接的循环等待资源关系。

　　这四个条件是死锁的必要条件，只要系统发生死锁，这些条件必然成立，而只要上述条件之一不满足，就不会发生死锁。
4.10.5 解决死锁的4种处理策略

鸵鸟策略（即不理睬策略）
预防策略
避免策略
检测与解除策略

死锁预防
预先静态分配法（破坏不可剥夺条件）、资源有序分配法（将资源分类按顺序排列，保证不形成环路）。
死锁避免
银行家算法（对每个资源请求进行检测，确保安全。需要很大的系统开销）。
死锁解除
资源剥夺法、撤销进程法。
4.11 内存池和进程池

[!NOTE]
所谓池的概念， 一般是指应用提前向内核批量申请资源，用于接下来的使用和回收再利用， 减少资源的初始化和销毁次数等开销， 以达到提高系统性能的目标。

4.11.1 内存池
真正使用前申请一片内存区域，有新需求时取出其中一部分使用，不够用时再重新申请新内存。
4.11.2 进程池
应用预先创建一组子进程，所有子进程运行相同代码，拥有相同属性，比如PGID和优先级等；
4.11.3 常见两种工作方式：

主进程通过随机或round robin算法来选择子进程作为新任务的服务进程；
通过一个共享队列来进行同步，所有子进程从该队列中获取任务，不过同时只能有一个子进程能成功获得新任务处理权。

4.11.4 线程池：
主要应用于任务小而多，处理时间短的场景，比如简单网页请求等。
5.存储器管理
5.1 存储器的层次

[!NOTE]
在存储层次中，层次越高（越接近CPU），存储介质的访问速度越快，价格越高，存储容量也越小


5.1.1 主存储器
简称内存或主存，是计算机系统中的主要部件，用于保存进程运行时的程序和数据，也称可执行存储器
5.1.2 寄存器
寄存器与处理机的速度，寄存器的字长一般是32或是64位。
5.1.3 高速缓存
介于寄存器和主存储器之间的存储器，主要用来备份内存中常用的数据，以减少处理机对内存的访问次数，这样可以大幅的提高速度
5.1.4 磁盘缓存
由于磁盘的I/O速度远低于内存的速度，所以用磁盘缓存来暂时存放一些磁盘数据和信息，它本身并不是一种实际存在的存储器，而是利用内存中的部分存储空间赞数存放一些信息
5.2程序的装入和链接

5.3连续分配存储管理方式
5.3.1 地址重定位
指将逻辑地址变换成物理地址的过程。分为静态重定位和动态重定位。
5.3.2 存储管理方案

[!NOTE]
分区存储管理（固定分区、可变分区、可重定位分区）、分页存储管理（将一个进程的地址空间划分为若干个大小相等的区域，成为页，相应地，将主存空间划分成与页相同大小的若干个物理块，称为块。至少需要两次访问主存）、分段存储管理、段页式存储管理（地址结构：段号+段内页号+页内地址）、虚拟存储管理。

可变分区的请求和释放主要算法：最佳适应算法、最差适应算法、首次适应算法、循环首次适应算法。

快表：在页式存储管理中将当前最活跃的少数几页的物理块号保存在高速存储器中，用以提高页式存储管理的性能。（不用两次访问主存）

页面置换算法：最佳置换算法（最长时间内不再被访问的页面置换出去）、先进先出置换算法、最近最少未使用置换算法、最近未用置换算法。


6.设备管理

[!NOTE]
设备管理的目标是如何提高设备的利用率，为用户提供方便统一的界面。

6.1 设备管理采用的缓冲技术
通道技术、DMA技术、缓冲技术、Spooling技术。
6.2 磁盘调度算法

先来先服务（FCFS）
最短寻道时间（SSTF）
扫描算法（SCAN）（先由里向外，到达最外后由外向里）
单向扫描调度算法（CSCAN）（无法换向，只能由里向外）。

7.文件管理
7.1 文件的逻辑结构

有结构的记录式文件（由一个以上的记录构成。记录分为定长记录、不定长记录）
无结构的流式文件（由一串顺序的字符流构成的文件，不划分记录）

7.2 文件的物理结构
顺序结构、链接结构、索引结构、多个物理块的索引表。
7.3 Unix的三级索引结构
7.3.1 文件的存取方法
顺序存取法、随机存取法。
7.3.2 文件的存储空间管理
外存空闲空间管理的数据结构通常称为磁盘分配表。常用的空闲空间的管理方法：位示图（用一个bit为的0、1表示一个物理块的空闲情况）、空闲区表、空闲块链、成组链接法（每100块为一组进行记录空闲的块号和大小）。
7.3.3 文件链接

[!NOTE]
硬链接（两个文件目录表目指向同一个索引节点，即指不同的文件名与同一个文件实体的链接）、符号链接（在建立的新文件或目录并与原来的文件或目录的路径名进行映射）。

7.3.3.1 硬连接
原文件名和连接文件名都指向相同的物理地址。目录不能有硬连接；硬连接不能跨越文件系统（不能跨越不同的分区）文件在磁盘中只有一个拷贝，节省硬盘空间；由于删除文件要在同一个索引节点属于唯一的连接时才能成功，因此可以防止不必要的误删除。
7.3.3.2 符号连接
用ln -s命令建立文件的符号连接符号连接是linux特殊文件的一种，作为一个文件，它的数据是它所连接的文件的路径名。类似windows下的快捷方式。可以删除原有的文件而保存连接文件，没有防止误删除功能。
8.作业管理
8.1 作业状态

提交（通过输入设备送入计算机）
后备（通过Spooling系统将作业输入到计算机系统的后备存储器中，等待作业调度程序调度）
执行
完成。

8.2 常用的作业调度算法

先来先服务
短作业优先
响应比高优先
优先级调度算法
均衡调度算法。


参考文章

https://blog.csdn.net/Song_JiangTao/article/details/79670805




【CSS相关】CSS工程化方案
https://github.com/fecommunity — Thu, 11 Jul 2024 10:01:52 GMT
CSS工程化方案
1.如何解决CSS的模块化问题？

使用Less，Sass等CSS预处理器
使用PostCSS插件（postcss-import/precss）
使用webpack处理CSS（css-loader + style-loader）

2.PostCSS是什么？

PostCSS是一个平台，具体要取决于这个平台上面的插件可以做什么
常用的插件如下
js
//  1. 可以添加属性前缀，适应所有的浏览器
    const autoprefixer = require('autoprefixer');
    // 2. 将所有的import 导入进来的模块全部合并为一个文件
    // const atImport = require('postcss-import');
    // 3.  实现代码的压缩优化
    // const cssnano = require('postcss-cssnano');
    // 4. cssnext提前使用CSS的高级语法
    // const cssnext = require('postcss-cssnext');
    // 5. precss 类似于sass的语法处理
    // const precss = require('precss')

import实现模块的合并（模块分开，提前合并）
CSS语法检查，兼容性检查
压缩文件

3.CSS modules是什么？如何使用?

解决类名冲突的问题
使用PostCSS或者Webpack等构建工具进行编译
在HTML模板中使用编译过程产生的类名（对象.类名的方式来获取）

4.为什么使用JS来引用，加载CSS？

JS作为入口，管理资源具有天然优势（HTML，CSS本身是无法管理模块和资源的）
将组件的结果、样式、行为封装到一起，增强组件内聚（减少代码耦合）
可以做更多的处理（webpack，使用CSS Modules 解决了命名的冲突问题）

5. PostCSS的实现原理说一下？

  [!NOTE]

  PostCSS是一个通过JS插件转换样式表的工具，它本身并不是一门新的CSS语言，而是一个平台或者是生态心态，提供插件扩展服务即JS API，开发者可以根据这些接口，定制开发插件，

  目前比较流行的插件工具如：Autoprefixer 、Stylelint 、CSSnano。

5.1 解析步骤

将CSS解析成抽象语法树(AST树)
将AST树”传递”给任意数量的插件处理
将处理完毕的AST树重新转换成字符串

5.2 处理机制
Source string → Tokenizer → Parser → AST → Processor → Stringifier
5.2.1 Tokenizer

  [!NOTE]

  将源css字符串进行分词

举个例子：

.className { color: #FFF; }

通过Tokenizer后结果如下：
[
    ["word", ".className", 1, 1, 1, 10]
    ["space", " "]
    ["{", "{", 1, 12]
    ["space", " "]
    ["word", "color", 1, 14, 1, 18]
    [":", ":", 1, 19]
    ["space", " "]
    ["word", "#FFF" , 1, 21, 1, 23]
    [";", ";", 1, 24]
    ["space", " "]
    ["}", "}", 1, 26]
]

以word类型为例，参数如下：
const token = [
     // token 的类型，如word、space、comment
    'word',

    // 匹配到的词名称
    '.className',

    // 代表该词开始位置的row以及column，但像 type为`space`的属性没有该值
    1, 1,

    // 代表该词结束位置的row以及column，
    1, 10
]

5.2.2 Parser

  [!NOTE]

  经过Tokenizer之后，需要Parser将结果初始化为AST

this.root = {
    type: 'root',
    source: { input: {css: ".className { color: #FFF; }", hasBOM: false, id: ""},
                   start: { line: 1, column: 1 } ,
                  end: { line: 1, column: 27 }
    },
   raws:{after: "", semicolon: false}
   nodes // 子元素
}

5.2.3 Processor
经过AST之后，PostCSS提供了大量JS API给插件用
5.2.4 Stringifier
插件处理后，比如加浏览器前缀，会被重新Stringifier.stringify为一般CSS。
6.谈一下你对前端工程化的理解？
参考博客：

https://www.cnblogs.com/fsyz/p/8274727.html
https://www.cnblogs.com/onebox/p/9570518.html



【开发环境】Git相关
https://github.com/fecommunity — Tue, 09 Jul 2024 20:48:08 GMT
Git
1. Git的三种状态

已提交 committed
已暂存 staged
已修改 modified

2. Git的三个区域

Git仓库
是 Git 用来保存项目的元数据和对象数据库的地方。 这是 Git 中最重要的部分，从其它计算机克隆仓库时，拷贝的就是这里的数据。


暂存区域
暂存区域是一个文件，保存了下次将提交的文件列表信息，一般在 Git 仓库目录中。 有时候也被称作`‘索引’'，不过一般说法还是叫暂存区域。


工作目录
工作目录是对项目的某个版本独立提取出来的内容。 这些从 Git 仓库的压缩数据库中提取出来的文件，放在磁盘上供你使用或修改。



3. 基本的 Git 工作流程

在工作目录修改文件
暂存文件，将文件的快照放入暂存区
提交更新，找到暂存去文件，将快照永久性存储到 Git 仓库目录。

3.1 用户信息

[!NOTE]
当安装完 Git 应该做的第一件事就是设置你的用户名称与邮件地址。 这样做很重要，因为每一个 Git 的提交都会使用这些信息，并且它会写入到你的每一次提交中，不可更改。

git config --global user.name "huyaocode"
git config --global user.email johndoe@example.com
3.2 加入暂存区
git add 文件名或路径
3.3 忽略文件
创建一个.gitignore文件，可描述需要忽略的文件。 参考
# no .a files
*.a
# but do track lib.a, even though you're ignoring .a files above
!lib.a
# 只忽略当前文件夹下已 TODO 为名的文件
/TODO
# 忽略当前目录下 build 这个文件夹
build/
# ignore doc/notes.txt, but not doc/server/arch.txt
doc/*.txt
# ignore all .pdf files in the doc/ directory
doc/**/*.pdf
3.4 状态修改
git status -s将每个修改状态以一行展示，也可以用git status多行展示。

A 新添加到暂存区中的文件
M 修改过的文件
D 被删除的文件
MM 出现在右边的 M 表示该文件被修改了但是还没放入暂存区，出现在靠左边的 M 表示该文件被修改了并放入了暂存区。
?? 未跟踪

3.5 查看修改

要查看尚未暂存的文件更新了哪些部分，不加参数直接输入 git diff
要查看已暂存的将要添加到下次提交里的内容，可以用 git diff --cached 或 git diff --staged

3.6 提交修改
运行git commit，会出现如下情况。这种方式会启动文本编辑器，开头还有一空行，供你输入提交说明。下面的行是被注释了的，也可以取消这些注释。
一般是vim 或 emacs。当然也可以按照 起步 介绍的方式，使用 git config --global core.editor 命令设定你喜欢的编辑软件。
也可以使用git commit -m "修改描述" 这种直接输入描述的方式提交修改。
 git commit 加上 -a 选项，Git 就会自动把所有已经跟踪过的文件暂存起来一并提交，从而跳过 git add 步骤
3.7 移除文件
要从 Git 中移除某个文件，就必须要从已跟踪文件清单中移除（确切地说，是从暂存区域移除），然后提交。
可以用 git rm 命令完成此项工作，并连带从工作目录中删除指定的文件，这样以后就不会出现在未跟踪文件清单中了。
运行 git rm记录此次移除文件的操作。下一次提交时，该文件就不再纳入版本管理了。 如果删除之前修改过并且已经放到暂存区域的话，则必须要用强制删除选项 -f（译注：即 force 的首字母）。 这是一种安全特性，用于防止误删还没有添加到快照的数据，
这样的数据不能被 Git 恢复。
想把文件从 Git 仓库中删除（亦即从暂存区域移除），但仍然希望保留在当前工作目录中。(不想让Git跟踪)
git rm --cached 某文件
3.8 文件更名
git mv file_from file_to
其实，运行 git mv 就相当于运行了下面三条命令：
mv README.md README
git rm README.md
git add README
3.9 查看提交历史

[!NOTE]
git loggit log 会按提交时间列出所有的更新，最近的更新排在最上面。 正如你所看到的，这个命令会列出每个提交的 SHA-1 校验和、作者的名字和电子邮件地址、提交时间以及提交说明。

使用 -p 用来限制展示条数。git log -p -2
使用 --stat 选项看到每次提
使用format，定制要显示的记录格式。
使用--graph可形象地展示你的分支、合并历史。
$ git log --pretty=format:"%h %s" --graph
* 2d3acf9 ignore errors from SIGCHLD on trap
* 5e3ee11 Merge branch 'master' of git://github.com/dustin/grit
|\
| * 420eac9 Added a method for getting the current branch.
* | 30e367c timeout code and tests
* | 5a09431 add timeout protection to grit
* | e1193f8 support for heads with slashes in them
|/
* d6016bc require time for xmlschema
* 11d191e Merge branch 'defunkt' into local
3.10 重新提交

[!NOTE]
有时候我们提交完了才发现漏掉了几个文件没有添加，或者提交信息写错了。 此时，可以运行带有 --amend 选项的提交命令尝试重新提交。

git commit --amend
这个命令会将暂存区中的文件提交。 如果自上次提交以来你还未做任何修改（例如，在上次提交后马上执行了此命令），那么快照会保持不变，而你所修改的只是提交信息。
文本编辑器启动后，可以看到之前的提交信息。 编辑后保存会覆盖原来的提交信息。
例如，你提交后发现忘记了暂存某些需要的修改，可以像下面这样操作：
git commit -m 'initial commit'
git add forgotten_file
git commit --amend
最终你只会有一个提交 - 第二次提交将代替第一次提交的结果。
3.11 取消暂存的文件
使用 git reset HEAD  来取消暂存。在调用时加上 --hard 选项可以令 git reset 成为一个危险的命令（译注：可能导致工作目录中所有当前进度丢失！）
3.12 撤消对文件的修改
使用git checkout --  可以撤销修改（未保存到暂存区）
4.  什么是 Git 复刻（fork）？复刻（fork）、分支（branch）和克隆（clone）之间有什么区别？

复刻（fork） 是对存储仓库（repository）进行的远程的、服务器端的拷贝，从源头上就有所区别。复刻实际上不是 Git 的范畴。它更像是个政治/社会概念。
克隆（clone）不是复刻，克隆是个对某个远程仓库的本地拷贝。克隆时，实际上是拷贝整个源存储仓库，包括所有历史记录和分支。
分支（branch） 是一种机制，用于处理单一存储仓库中的变更，并最终目的是用于与其他部分代码合并。

5. “拉取请求（pull request）”和“分支（branch）”之间有什么区别？

分支（branch） 是代码的一个独立版本。
拉取请求（pull request） 是当有人用仓库，建立了自己的分支，做了些修改并合并到该分支（把自己修改应用到别人的代码仓库）。

6. “git pull”和“git fetch”之间有什么区别？

简单来说，git pull 是 git fetch + git merge。

当你使用 pull，Git 会试着自动为你完成工作。它是上下文（工作环境）敏感的，所以 Git 会把所有拉取的提交合并到你当前处理的分支中。pull 则是 自动合并提交而没有让你复查的过程。如果你没有细心管理你的分支，你可能会频繁遇到冲突。

当你 fetch，Git 会收集目标分支中的所有不存在的提交，并将这些提交存储到本地仓库中。但Git 不会把这些提交合并到当前分支中。这种处理逻辑在当你需要保持仓库更新，在更新文件时又希望处理可能中断的事情时，这将非常实用。而将提交合并到主分支中，则该使用 merge。


7. 如在 Git 恢复先前的提交？
假设你的情形是这样，其中 C 是你的 HEAD，(F) 是你文件的状态。
   (F)
A-B-C
    ↑
  master

   (F)
A-B-C
    ↑
  master
要修改提交中的更改：
git reset --hard HEAD~1
1
git reset --hard HEAD~1
现在B是 HEAD，因为你使用了 --hard，所以你的文件将重置到提交 B 时的状态。

要撤销提交但保留更改：
git reset HEAD~1
1
git reset HEAD~1
现在我们告诉 Git 将 HEAD 指针移回（后移）一个提交（B），并保留文件原样，然后你可以 git status 来显示你已经检入 C 的更改。

撤销提交但保留文件和索引：
git reset --soft HEAD~1
1
git reset --soft HEAD~1
执行此操作后，git status，你讲看到索引中的文件跟以前一致。
8. 什么是“git cherry-pick”？

[!NOTE]
命令 git cherry-pick 通常用于把特定提交从存储仓库的一个分支引入到其他分支中。常见的用途是从维护的分支到开发分支进行向前或回滚提交。

这与其他操作（例如：合并（merge）、变基（rebase））形成鲜明对比，后者通常是把许多提交应用到其他分支中。
小结：
git cherry-pick 
1
git cherry-pick 
9. 解释 Forking 工作流程的优点?

Forking 工作流程 与其他流行的 Git 工作流程有着根本的区别。它不是用单个服务端仓库充当“中央”代码库，而是为每个开发者提供自己的服务端仓库。Forking 工作流程最常用于公共开源项目中。

Forking 工作流程的主要优点是可以汇集提交贡献，又无需每个开发者提交到一个中央仓库中，从而实现干净的项目历史记录。开发者可以推送（push）代码到自己的服务端仓库，而只有项目维护人员才能直接推送（push）代码到官方仓库中。

当开发者准备发布本地提交时，他们的提交会推送到自己的公共仓库中，而不是官方仓库。然后他们向主仓库提交请求拉取（pull request），这会告知项目维护人员有可以集成的更新。


10. 告诉我 Git 中 HEAD、工作树和索引之间的区别？

该工作树/工作目录/工作空间是你看到和编辑的（源）文件的目录树。
该索引/中转区（staging area）是个在 /.git/index，单一的、庞大的二进制文件，该文件列出了当前分支中所有文件的 SHA1 检验和、时间戳和文件名，它不是个带有文件副本的目录。
HEAD是当前检出分支的最后一次提交的引用/指针。

11. 你能解释下 Gitflow 工作流程吗？

[!NOTE]
Gitflow 工作流程使用两个并行的、长期运行的分支来记录项目的历史记录，分别是 master 和 develop 分支。


Master，随时准备发布线上版本的分支，其所有内容都是经过全面测试和核准的（生产就绪）。
Hotfix，维护（maintenance）或修复（hotfix）分支是用于给快速给生产版本修复打补丁的。修复（hotfix）分支很像发布（release）分支和功能（feature）分支，除非它们是基于 master 而不是 develop 分支。
Develop，是合并所有功能（feature）分支，并执行所有测试的分支。只有当所有内容都经过彻底检查和修复后，才能合并到 master 分支。
Feature，每个功能都应留在自己的分支中开发，可以推送到 develop 分支作为功能（feature）分支的父分支。

12. 什么时候应使用 “git stash”？

[!NOTE]
git stash 命令把你未提交的修改（已暂存（staged）和未暂存的（unstaged））保存以供后续使用，以后就可以从工作副本中进行还原。

回顾：
$ git status
On branch master
Changes to be committed:
new file: style.css
Changes not staged for commit:
modified: index.html
$ git stash
Saved working directory and index state WIP on master: 5002d47 our new homepage
HEAD is now at 5002d47 our new homepage
$ git status
On branch master
nothing to commit, working tree clean

$ git status
On branch master
Changes to be committed:
new file: style.css
Changes not staged for commit:
modified: index.html
$ git stash
Saved working directory and index state WIP on master: 5002d47 our new homepage
HEAD is now at 5002d47 our new homepage
$ git status
On branch master
nothing to commit, working tree clean
我们可以使用暂存（stash）的一个地方是，如果我们发现在上次提交中忘记了某些内容，并且已经开始在同一分支中处理下一个提交了：

# Assume the latest commit was already done
# start working on the next patch, and discovered I was missing something

# stash away the current mess I made
$ git stash save

# some changes in the working dir

# and now add them to the last commit:
$ git add -u
$ git commit --ammend

# back to work!
$ git stash pop

# Assume the latest commit was already done
# start working on the next patch, and discovered I was missing something

# stash away the current mess I made
$ git stash save

# some changes in the working dir

# and now add them to the last commit:
$ git add -u
$ git commit --ammend

# back to work!
$ git stash pop
13. 如何从 git 中删除文件，而不将其从文件系统中删除？
如果你在 git add 过程中误操作，你最终会添加不想提交的文件。但是，git rm 则会把你的文件从你暂存区（索引）和文件系统（工作树）中删除，这可能不是你想要的。
换成 git reset 操作：
git reset filename          # or
echo filename >> .gitingore # add it to .gitignore to avoid re-adding it
1
2
git reset filename          # or
echo filename >> .gitingore # add it to .gitignore to avoid re-adding it
上面意思是，git reset  是 git add  的逆操作。
14. 是么时候使用“git rebase”代替“git merge”？

[!NOTE]
这两个命令都是把修改从一个分支集成到另一个分支上，它们只是以非常不同的方式进行。

考虑一下场景，在合并和变基前：
A <- B <- C    [master]
^
 
  D <- E       [branch]
1
2
3
4
A <- B <- C    [master]
^
 
  D <- E       [branch]
在 git merge master 之后：
A <- B <- C
^         ^
 \         
  D <- E <- F
1
2
3
4
A <- B <- C
^         ^
 \         
  D <- E <- F
在 git rebase master 之后：
A <- B <- C <- D <- E
1
A <- B <- C <- D <- E
使用变基时，意味着使用另一个分支作为集成修改的新基础。
14.1 何时使用
如果你对修改不够果断，请使用合并操作。
根据你希望的历史记录的样子，而选择使用变基或合并操作。
14.2 更多需要考虑的因素

分支是否与团队外部的开发人员共享修改（如开源、公开项目）？如果是这样，请不要使用变基操作。变基会破坏分支，除非他们使用 git pull --rebase，否则这些开发人员将会得到损坏的或不一致的仓库。
你的开发团队技术是否足够娴熟？变基是一种破坏性操作。这意味着，如果你没有正确使用它，你可能会丢失提交，并且/或者会破坏其他开发者仓库的一致性。
分支本身是否代表有用的信息？一些团队使用功能分支（branch-per-feature）模式，每个分支代表一个功能（或错误修复，或子功能等）。在此模式中，分支有助于识别相关提交的集合。在每个开发人员分支（branch-per-developer）模式中，分支本身不会传达任何其他信息（提交信息已有作者）。则在这种模式下，变基不会有任何破坏。
是否无论如何都要还原合并？恢复（如在撤销中）变基，是相当困难的，并且/或者在变基中存在冲突时，是不可能完成的。如果你考虑到日后可能需要恢复，请使用合并操作。


参考资料

Git在线学习：https://learngitbranching.js.org/?NODEMO
参考博客：https://www.cnblogs.com/ludashi/p/8323617.html




【编程题与分析题】函数curry化
https://github.com/fecommunity — Tue, 09 Jul 2024 15:59:05 GMT
函数柯西化（经典面试题）
// 实现一个add方法，使计算结果能够满足如下预期：
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;

function add() {
    // 第一次执行时，定义一个数组专门用来存储所有的参数
    var _args = Array.prototype.slice.call(arguments);

    // 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
    var _adder = function() {
        _args.push(...arguments);
        return _adder;
    };

    // 利用toString隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
    _adder.toString = function () {
        return _args.reduce(function (a, b) {
            return a + b;
        });
    }
    return _adder;
}

add(1)(2)(3)                // 6
add(1, 2, 3)(4)             // 10
add(1)(2)(3)(4)(5)          // 15
add(2, 6)(1)                // 9
加强理解版本
// v1: 实现一个精简版的curry函数
function curry(fn, ...args) {
    return function () {
        return fn.apply(this, args.concat([].slice.call(arguments)));
    }
}
function add(a, b) {
    return a + b;
}

var addCurry = curry(add, 1, 2);
console.log(addCurry());// 3
//或者
var addCurry = curry(add, 1);
console.log(addCurry(2)); // 3
//或者
var addCurry = curry(add);
console.log(addCurry(1, 2)); // 3


// v2: 上面的代码优化
function sub_curry(fn) {
    let args = [].slice.call(arguments, 1);
    return function () {
        return fn.apply(this, args.concat([].slice.call(arguments)));
    }
}

function curry(fn, length) {
    length = length || fn.length;
    let slice = Array.prototype.slice;

    return function () {

    }
}


// 容易理解的版本
function curryFn(fn, args) {
    let length = fn.length;         // 获取fn这个函数的参数数量
    args = args || [];              // 参数

    return function () {
        let _args = args.slice(0);

        for (let i = 0; i < arguments.length; i++) {
            _args.push(arguments[i]);
        }

        if (_args.length < length) {
            return curryFn.call(this, fn, _args);
        }
        else {
            return fn.apply(this, _args);
        }
    }
}


let fn = curryFn(function(a, b, c) {
    console.log([a, b, c]);
});

fn("a", "b", "c") // ["a", "b", "c"]
fn("a", "b")("c") // ["a", "b", "c"]
fn("a")("b")("c") // ["a", "b", "c"]
fn("a")("b", "c") // ["a", "b", "c"]



【面经系列】美团面经
https://github.com/fecommunity — Mon, 08 Jul 2024 09:37:43 GMT
美团面经系列

meta的用法？
input标签的type有哪些类型？
语义化标签写一个头部信息，章节，尾部信息
说一些H5的语义化标签以及他们的作用和在浏览器的表现
知道BFC和IFC吗
less和scss用过吗？区别是啥？
水平垂直居中
margin坍塌---> BFC 问题
css动画
grid的所有属性
三栏布局
position定位
rem以及如何实现移动端适配
实现一个上中下左右的经典布局
实现一个类似百度的搜索框，点击后下面出现一个div，我要怎么让我点到旁边的时候他消失
三个不同高度的div使其在一排垂直居中的方法
盒模型
层叠上下文
flex了解吗？讲一下
display属性有哪些？
position属性有哪些？每一个属性的作用，使用？
css中引入样式有哪几种方法，不考虑预处理和正常的三种方法，有没有其他的方法？
css选择器优先级，说说有几种方法可以超过id选择器？
position的几个属性？分别对应的使用场景（布局），如何去使用？
实现一个可以设置样式的弹框组件
栅格系统，CSS大概怎么分的
promise如何取消？
co模块内部是如何运行的？
await内部的原理？
JS中substr与substring的区别？
javascript中childNodes与children的区别？
HTMLCollection和NodeList的差异？
map和foreach的区别，像foreach一样影响原数组的有哪些方法？
getElementsByName和querySelectorAll的区别？

实现一个on和emit


事件模型，捕获与冒泡，哪些事件没有冒泡，没有冒泡的原因是什么
事件代理，中间一个不需要事件怎么办，代理的元素内部还有元素怎么办
input事件传播
原型链
ajax怎么请求数据的，reayState
防抖节流
const
说一些常用array的api
class interface function的区别
面向对象的三大特性
addEventLinsener与普通事件绑定的区别
stopPropagation包括捕获吗
在原型链上添加一个方法让他每隔两秒就打印一次name属
一个数组怎么实现下标每隔3倒序输出一次
Event loop是什么
箭头函数和普通函数区别
原生dom,输出每一个li里的内容（手写）
用settimeout实现一个setinterval （在实现这个过程中，为什么settimeout不会发生栈溢出现象）
解释一下instanceOf的原理（手动实现一个instanceOf）
解释一下hasownproperty
JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别
ES6新特性有哪些？
异步的解决方案？async与await的使用？
实现一个自己的迭代器
如何使用Promise实现一个多异步任务顺序执行呢？？？(掌握)
判断数据类型的方法
typeof可以得到什么
call，apply，bind bind怎么实现的
cookie的操作封装
双向数据绑定和单(双)向数据流
vue组件通信
spa应用，v-dom，diff算法，mvvm，组件化开发
eventBus跟vuex的区别
抛开react的diff算法，怎么实现dom对比
vue响应式原理，defineproperty，proxy，对比一下两者
vuex
keep-alive
闭包
computed watch
使用路由做前端拦截的具体实现是什么？
vue-router实现的几种方式和原理？
vuex的有哪些作用和使用场景，实现原理是什么？
axios的使用？原理简单讲一下？
浏览器的同源策略？
跨域有哪些方法？document.domain的限制是啥？CORS的实现原理？
跨域问题。手写jsonp。说说代理服务器具体那种。
回流重绘
实现页面多ajax请求完成后渲染页面
CSS文件没下载完会影响CSS树吗？
浏览器机制
浏览器存储的几种方式？每一种存储方式的使用场景，有什么注意点？
浏览器安全上的几种问题？如何解决？（这里我觉得需要将安全问题的始末讲出来，最好不要解释概念，每一种措施实施的根据是什么？）
词法分析变成抽象语法树的原因
es6如何转换es5？babel的原理是啥？
http能取消吗？如何取消？
http2与http1.1的区别？
url的定义，规范？
tcp过程，http过程，两者啥关系
http报文组成（比如cookie设置哪些，生命周期，http-only，又追问xss。connection取值。缓存机制相关的，哪些字段是游览器缓存哪些是代理服务器缓存优先级如何）
http状态码
post传值都有哪些类型，如果请求参数错了会有什么提示  
ip层和网络层是干什么的
强缓存和协商缓存
http和https
冯诺依曼计算机结构
进程跟线程
死锁
git工作流程，常用的git命令有哪些，rebase的原理？
git合并，发生冲突之后怎么处理
长列表性能优化？
从url输入到前端页面展示的过程？
lru是啥？
网页上边出现广告的现象见没见过，什么原因。
页面白屏如何处理，想到的场景以及处理办法
工程化的理解
设计模式还有哪些
如果打包的js文件过大如何进行优化
node的Stream和Buffer区别。
快排
求1到N之间的素数，方法要求复杂度为O（n）
乱序输出一个数组，要求输出每个数字的概率相同
O（n）方法找出有序数组第一个指定数字
实现一个乱序
实现一个函数，对一个已排序的且含有重复数字的数组，找到重复数字第一次出现的位置（二分查找）




【性能优化】performance性能监控
https://github.com/fecommunity — Sat, 06 Jul 2024 17:29:58 GMT
前端性能监控指标
1. 前端性能统计的指标有哪些？

白屏时间：从打开网站到有内容渲染出来的时间节点；
首屏时间：首屏内容渲染完毕的时间节点；
用户可操作时间节点：domready触发节点；
总下载时间：window.onload的触发节点。

2. 如何统计前端的性能（量化统计）？
下面介绍几种以上几个数据的统计方案。
2.1 常规统计方案
使用注入代码监控的方式统计以上指标，在没有一些浏览器新API（如下文将提到的timing API）的支持下，得到的数据大都是估值，虽然不准确，但也有一定的参考价值。
2.1.1 白屏时间
白屏时间节点指的是从用户进入网站（输入url、刷新、跳转等方式）的时刻开始计算，一直到页面有内容展示出来的时间节点。这个过程包括dns查询、建立tcp连接、发送首个http请求（如果使用https还要介入TLS的验证时间）、返回html文档、html文档head解析完毕。
使用注入代码监控无法获取解析html文档之前的时间信息，目前普遍使用的白屏时间统计方案是在html文档的head中所有的静态资源以及内嵌脚本/样式之前记录一个时间点，在head最底部记录另一个时间点，两者的差值作为白屏时间。如下：



    
    
    
    
    




上述代码中的end_time和start_time的差值一般作为白屏时间的估值，但理论上来讲，这个差值只是浏览器解析html文档head的时间，并非准确的白屏时间。
2.1.2 首屏时间
首屏时间的统计比较复杂，目前应用比较广的方案是将首屏的图片、iframe等资源添加onload事件，获取最慢的一个。
这种方案比较适合首屏元素数量固定的页面，比如移动端首屏不论屏幕大小都展示相同数量的内容，响应式得改变内容的字体、尺寸等。但是对于首屏元素不固定的页面，这种方案并不适用，最典型的就是PC端页面，不同屏幕尺寸下展示的首屏内容不同。上述方案便不适用于此场景。
2.1.3 可操作时间
用户可操作的时间节点即dom ready触发的时间，使用jquery可以通过$(document).ready()获取此数据，如果不使用jQuery可以参考这里通过原生方法实现dom ready。
2.1.4 总下载时间

[!NOTE]
总下载时间即window.onload触发的时间节点。

目前大多数web产品都有异步加载的内容，比如图片的lazyload等。如果总下载时间需要统计到这些数据，可以借鉴AOP的理念，在请求异步内容之前和之后分别打点，最后计算差值。不过通常来讲，我们说的总下载时间并不包括异步加载的内容。
2.2 使用window.performance API

[!NOTE]
window.performance 是W3C性能小组引入的新的API，目前IE9以上的浏览器都支持。

一个performance对象的完整结构包括：

memory字段代表JavaScript对内存的占用。

navigation字段统计的是一些网页导航相关的数据：

redirectCount:重定向的数量（只读），但是这个接口有同源策略限制，即仅能检测同源的重定向；

type 返回值应该是0,1,2 中的一个。分别对应三个枚举值:

0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面，比如点一个链接，或者一般的get方式)
1 : TYPE_RELOAD (用户通过刷新，包括JS调用刷新接口等方式访问页面)
2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)
最重要的是timing字段的统计数据，它包含了网络、解析等一系列的时间数据。



2.2.1 timing API
timing的整体结构包括：


startTime：有些浏览器实现为navigationStart，代表浏览器开始unload前一个页面文档的开始时间节点。比如我们当前正在浏览baidu.com，在地址栏输入google.com并回车，浏览器的执行动作依次为：unload当前文档（即baidu.com）->请求下一文档（即google.com）。navigationStart的值便是触发unload当前文档的时间节点。

如果当前文档为空，则navigationStart的值等于fetchStart。


redirectStart和redirectEnd：如果页面是由redirect而来，则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点；

unloadEventStart和unloadEventEnd：如果前一个文档和请求的文档是同一个域的，则unloadEventStart和unloadEventEnd分别代表浏览器unload前一个文档的开始和结束时间节点。否则两者都等于0；

fetchStart是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart之间，浏览器会检查当前文档的缓存；

domainLookupStart和domainLookupEnd分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询（比如使用了cache），则两者的值都等于fetchStart；

connectStart和connectEnd分别代表TCP建立连接和连接成功的时间节点。如果浏览器没有进行TCP连接（比如使用持久化连接webscoket），则两者都等于domainLookupEnd；

secureConnectionStart：可选。如果页面使用HTTPS，它的值是安全连接握手之前的时刻。如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0；

requestStart代表浏览器发起请求的时间节点，请求的方式可以是请求服务器、缓存、本地资源等；

responseStart和responseEnd分别代表浏览器收到从服务器端（或缓存、本地资源）响应回的第一个字节和最后一个字节数据的时刻；

domLoading代表浏览器开始解析html文档的时间节点。我们知道IE浏览器下的document有readyState属性，domLoading的值就等于readyState改变为loading的时间节点；

domInteractive代表浏览器解析html文档的状态为interactive时的时间节点。domInteractive并非DOMReady，它早于DOMReady触发，代表html文档解析完毕（即dom tree创建完成）但是内嵌资源（比如外链css、js等）还未加载的时间点；

domContentLoadedEventStart：代表DOMContentLoaded事件触发的时间节点：

页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件，HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。

domContentLoadedEventEnd：代表DOMContentLoaded事件完成的时间节点，此刻用户可以对页面进行操作，也就是jQuery中的domready时间；

domComplete：html文档完全解析完毕的时间节点；

loadEventStart和loadEventEnd分别代表onload事件触发和结束的时间节点


2.2.2 计算性能指标

[!NOTE]
可以使用Navigation.timing 统计到的时间数据来计算一些页面性能指标，比如DNS查询耗时、白屏时间、domready等等。


DNS查询耗时 = domainLookupEnd - domainLookupStart
TCP链接耗时 = connectEnd - connectStart
request请求耗时 = responseEnd - responseStart
解析dom树耗时 = domComplete - domInteractive
白屏时间 = domloadng - fetchStart
domready时间 = domContentLoadedEventEnd - fetchStart
onload时间 = loadEventEnd - fetchStart

2.2.3 统计代码
// 计算加载时间
function getPerformanceTiming () { 
    var performance = window.performance;

    if (!performance) {
        // 当前浏览器不支持
        console.log('你的浏览器不支持 performance 接口');
        return;
    }

    var t = performance.timing;
    var times = {};

    //【重要】页面加载完成的时间
    //【原因】这几乎代表了用户等待页面可用的时间
    times.loadPage = t.loadEventEnd - t.navigationStart;

    //【重要】解析 DOM 树结构的时间
    //【原因】反省下你的 DOM 树嵌套是不是太多了！
    times.domReady = t.domComplete - t.responseEnd;

    //【重要】重定向的时间
    //【原因】拒绝重定向！比如，http://example.com/ 就不该写成 http://example.com
    times.redirect = t.redirectEnd - t.redirectStart;

    //【重要】DNS 查询时间
    //【原因】DNS 预加载做了么？页面内是不是使用了太多不同的域名导致域名查询的时间太长？
    // 可使用 HTML5 Prefetch 预查询 DNS ，见：[HTML5 prefetch](http://segmentfault.com/a/1190000000633364)           
    times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;

    //【重要】读取页面第一个字节的时间
    //【原因】这可以理解为用户拿到你的资源占用的时间，加异地机房了么，加CDN 处理了么？加带宽了么？加 CPU 运算速度了么？
    // TTFB 即 Time To First Byte 的意思
    // 维基百科：https://en.wikipedia.org/wiki/Time_To_First_Byte
    times.ttfb = t.responseStart - t.navigationStart;

    //【重要】内容加载完成的时间
    //【原因】页面内容经过 gzip 压缩了么，静态资源 css/js 等压缩了么？
    times.request = t.responseEnd - t.requestStart;

    //【重要】执行 onload 回调函数的时间
    //【原因】是否太多不必要的操作都放到 onload 回调函数里执行了，考虑过延迟加载、按需加载的策略么？
    times.loadEvent = t.loadEventEnd - t.loadEventStart;

    // DNS 缓存时间
    times.appcache = t.domainLookupStart - t.fetchStart;

    // 卸载页面的时间
    times.unloadEvent = t.unloadEventEnd - t.unloadEventStart;

    // TCP 建立连接完成握手的时间
    times.connect = t.connectEnd - t.connectStart;

    return times;
}



【数据结构与算法】数据结构
https://github.com/fecommunity — Sat, 06 Jul 2024 01:44:47 GMT
数据结构
1. 数组和链表的区别?

从逻辑结构上来看，数组必须实现定于固定的长度，不能适应数据动态增减的情况，即数组的大小一旦定义就不能改变。当数据增加是，可能超过原先定义的元素的个数；当数据减少时，造成内存浪费；链表动态进行存储分配，可以适应数据动态地增减的情况，且可以方便地插入、删除数据项。

从内存存储的角度看；数组从栈中分配空间（用new则在堆上创建），对程序员方便快速，但是自由度小；链表从堆中分配空间，自由度大但是申请管理比较麻烦。

从访问方式类看，数组在内存中是连续的存储，因此可以利用下标索引进行访问；链表是链式存储结构，在访问元素时候只能够通过线性方式由前到后顺序的访问，所以访问效率比数组要低。


2. 简述快速排序过程

[!NOTE]
掌握所有常见的排序算法的手写实现，以及复杂度相关细节知识。


选择一个基准元素,通常选择第一个元素或者最后一个元素,

通过一趟排序将待排序的记录分割成独立的两部分，其中一部分记录的元素值均比基准元素值小。另一部分记录的元素值比基准值大。

此时基准元素在其排好序后的正确位置

然后分别对这两部分记录用同样的方法继续进行排序，直到整个序列有序。


3. 各类排序算法对比（熟练掌握）

3.1 时间复杂度来说

平方阶(O(n2))排序
　　各类简单排序:直接插入、直接选择和冒泡排序；

线性对数阶(O(nlog2n))排序
　　
快速排序、堆排序和归并排序；

O(n1+§))排序,§是介于0和1之间的常数。
希尔排序

线性阶(O(n))排序
　　基数排序，此外还有桶、箱排序。


说明：

当原表有序或基本有序时，直接插入排序和冒泡排序将大大减少比较次数和移动记录的次数，时间复杂度可降至O（n）；

而快速排序则相反，当原表基本有序时，将蜕化为冒泡排序，时间复杂度提高为O（n2）；

原表是否有序，对简单选择排序、堆排序、归并排序和基数排序的时间复杂度影响不大。


3.2 稳定性

[!NOTE]
排序算法的稳定性:若待排序的序列中，存在多个具有相同关键字的记录，经过排序，这些记录的相对次序保持不变，则称该算法是稳定的；若经排序后，记录的相对次序发生了改变，则称该算法是不稳定的。 

3.2.1 稳定的排序算法
冒泡排序、插入排序、归并排序和基数排序
3.2.2 不是稳定的排序算法
选择排序、快速排序、希尔排序、堆排序
3.3 选择排序算法准则
一般而言，需要考虑的因素有以下四点：
设待排序元素的个数为n.

当n较大，则应采用时间复杂度为O(nlog2n)的排序方法：快速排序、堆排序或归并排序序。

当n较大，内存空间允许，且要求稳定性：归并排序

当n较小，可采用直接插入或直接选择排序。
 直接插入排序：当元素分布有序，直接插入排序将大大减少比较次数和移动记录的次数。
 直接选择排序 ：元素分布有序，如果不要求稳定性，选择直接选择排序

一般不使用或不直接使用传统的冒泡排序。

基数排序
它是一种稳定的排序算法，但有一定的局限性：



关键字可分解。
记录的关键字位数较少，如果密集更好
如果是数字时，最好是无符号的

4. 解决哈希冲突的方法（面试重点）

[!NOTE]
需要对HashTable的底层实现有深入的理解，知道哈希冲突的产生原因和解决方法。

哈希表（Hash table，也叫散列表），是根据关键码值(Key value)而直接进行访问的数据结构。
1） 线性探测法
2） 平方探测法
3） 伪随机序列法
4） 拉链法
5. B树（了解）

[!NOTE]
如果对数据库有了解的话，该知识点需要深入理解。

根据B类树的特点，构造一个多阶的B类树，然后在尽量多的在结点上存储相关的信息，保证层数尽量的少，以便后面我们可以更快的找到信息，磁盘的I/O操作也少一些，而且B类树是平衡树，每个结点到叶子结点的高度都是相同，这也保证了每个查询是稳定的。
B树和B+树的区别，以一个m阶树为例。

关键字的数量不同；B+树中分支结点有m个关键字，其叶子结点也有m个，其关键字只是起到了一个索引的作用，但是B树虽然也有m个子结点，但是其只拥有m-1个关键字。

存储的位置不同；B+树中的数据都存储在叶子结点上，也就是其所有叶子结点的数据组合起来就是完整的数据，但是B树的数据存储在每一个结点中，并不仅仅存储在叶子结点上。

分支结点的构造不同；B+树的分支结点仅仅存储着关键字信息和儿子的指针（这里的指针指的是磁盘块的偏移量），也就是说内部结点仅仅包含着索引信息。

查询不同；B树在找到具体的数值以后，则结束，而B+树则需要通过索引找到叶子结点中的数据才结束，也就是说B+树的搜索过程中走了一条从根结点到叶子结点的路径。





【JS相关】异步
https://github.com/fecommunity — Wed, 03 Jul 2024 19:44:08 GMT
异步
1. 为什么JavaScript是单线程？

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。


2. Event Loop
参考地址:Event Loop 这个循环你晓得么？(附 GIF 详解)-饿了么前端
3. 任务队列的本质

所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。
一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步。

4. 异步任务有哪些？

setTimeOut、setInterval
DOM 事件
Promise

5. JavaScript 实现异步编程的方法？

回调函数
事件监听
发布/订阅
Promises 对象
Async 函数[ES7]

6. 关于 setTimeOut、setImmediate、process.nextTick()的比较
6.1 setTimeout()

将事件插入到了事件队列，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。
当主线程时间执行过长，无法保证回调会在事件指定的时间执行。
浏览器端每次setTimeout会有4ms的延迟，当连续执行多个setTimeout，有可能会阻塞进程，造成性能问题。

6.2 setImmediate()

事件插入到事件队列尾部，主线程和事件队列的函数执行完成之后立即执行。和setTimeout(fn,0)的效果差不多。
服务端node提供的方法。浏览器端最新的api也有类似实现:window.setImmediate,但支持的浏览器很少。

6.3 process.nextTick()

插入到事件队列尾部，但在下次事件队列之前会执行。也就是说，它指定的任务总是发生在所有异步任务之前，当前主线程的末尾。
大致流程：当前”执行栈”的尾部–>下一次Event Loop（主线程读取”任务队列”）之前–>触发process指定的回调函数。
服务器端node提供的办法。用此方法可以用于处于异步延迟的问题。
可以理解为：此次不行，预约下次优先执行。




【CSS相关】CSS基础
https://github.com/fecommunity — Wed, 03 Jul 2024 01:24:58 GMT
CSS基础
1.CSS样式（选择器）的优先级？
1.1 权重的计算规则

第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。
第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用）
第二等：ID选择器，如：#header，权值为0100.
第三等：类选择器、如：.bar， 权值为0010.
第四等：类型（标签）选择器和伪元素选择器，如：div ::first-line 权值为0001.
通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.
继承的样式没有权值。


[!NOTE]
CSS选择器的优先级：!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 其他

1.2 实际案例



    第一条应该是黄色 
    
    
    第三条应该是黑色
    
    
    第四条应该是红色
    

2.雪碧图的作用？

[!NOTE]
减少HTTP的请求次数，提高加载的性能
在一些情况下可以减少图片的大小
关键在于对background-position概念的理解和使用




    
    购物车特效
    


    
        

    


3.自定义字体的使用场景？

[!NOTE]
宣传/品牌/banner等固定文案
字体图标中使用


4.Base64的使用？
4.1 概念
Base64就是一种基于64个可见字符(26个大写字母，26个小写字母，10个数字，1个+，一个 / 刚好64个字符)来表示二进制数据的表示方法。

[!NOTE]
扩展：不可见字符其实并不是不显示，只是这些字符在屏幕上显示不出来，比如：换行符、回车、退格......字符。

Base64字符表中的字符原本用6个bit就可以表示，现在前面添加2个0，变为8个bit，会造成一定的浪费。因此，Base64编码之后的文本，要比原文大约三分之一
4.2 原理

第一步，将待转换的字符串每三个字节分为一组，每个字节占8bit，那么共有24个二进制位。
第二步，将上面的24个二进制位每6个一组，共分为4组。
第三步，在每组前面添加两个0，每组由6个变为8个二进制位，总共32个二进制位，即四个字节。
第四步，根据Base64编码对照表（见下图）获得对应的值。


[!NOTE]
两个字节：两个字节共16个二进制位，依旧按照规则进行分组。此时总共16个二进制位，每6个一组，则第三组缺少2位，用0补齐，得到三个Base64编码，第四组完全没有数据则用“=”补上。因此，上图中“BC”转换之后为“QKM=”；
一个字节：一个字节共8个二进制位，依旧按照规则进行分组。此时共8个二进制位，每6个一组，则第二组缺少4位，用0补齐，得到两个Base64编码，而后面两组没有对应数据，都用“=”补上。因此，上图中“A”转换之后为“QQ==”；

4.3 作用

用于减少HTTP请求
适用于小图片
base64编码图片之后的体积约为原图的4/3  

5.伪类和伪元素的区别？

伪元素是真的有元素
前者是单冒号，后者是双冒号



    
        111
        222
        333
        444
        555
    

    h1文本
    p文本1
    p文本2
    p文本3
    p文本4



     css1 
     css2 
     css3 
    我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素



6.如何美化CheckBox？

[!NOTE]

label[for]和id
隐藏原生的input
:checked + label 选择器




    
    




【编程题与分析题】排序算法
https://github.com/fecommunity — Tue, 02 Jul 2024 11:19:26 GMT
冒泡排序
////////////////////////////////////////////////////////////////
// bubble sort
function ArrayList(){
    // 私有变量
    var arr = [];

    // 将数组中i，j位置的数组进行交换
    var swap = function(i, j){
        var temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }

    // add element
    this.insert = function(item) {
        arr.push(item);
    }

    // to string
    this.toString = function(){
        //  数组中的join() 方法默认是按照 "," 进行分割的
        return arr.join();
    }

    // v1 : bubble sort（注意：i, j两个变量都是从0开始的）
    this.bubbleSort = function(){
        var len = arr.length;
        for (var i = 0; i < len; i++) {
            // 内层循环从第一位一直迭代到倒数第二位
            for (var j = 0; j < len - i; j++) {
                // 只要前面的元素比后面的元素大的话，就去直接交换
                if (arr[j] > arr[j + 1]) {
                    swap(j, j + 1);
                }
            }
        }
    }




    // v2 : 从内循环减去外循环已经跑过的轮数，可以避免循环中所有不必要的比较
    this.bubbleSort = function (){
        var len = arr.length;
        for (var i = 0; i < len; i++) {
            for (var j = 0; j < len - i - 1; j++) {
                if (arr[j] > arr[j + 1]) {
                    swap(j, j + 1);
                }
            }
        }
    }

}3


/*
 * 创建一个无序数组
 * @ size
 * */
function createNoneSortedArray(size){
    var arr = new ArrayList();
    for (var i = size; i > 0; i--) {
        // 直接给数组初始化一个逆序的数组序列
        arr.insert(i);
    }
    return arr;
}



///////////////////////////////////////////////////////////////////////
// 测试
var arr = createNoneSortedArray(5);
console.log(arr, arr.toString());
// bubble sort
arr.bubbleSort();
console.log(arr.toString());

插入排序
//////////////////////////////////////////////////////////////////////////////////////
// insert sort
function ArrayList(){
    var arr = [];

    var swap = function(i, j){
        var temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }

    this.insert = function (item){
        arr.push(item);
    }

    this.toString = function(){
        return arr.join();
    }

    // v1 : insert sort
    this.insertSort = function(){
        var len = arr.length;
        // 每次直接从当前元素前面的元素进行比较交换
        // 假设用户的手中刚开始的时候已经有了一张扑克牌了
        for (var i = 1; i < len; i++) {
            for (var j = i; j > 0; j--) {
                if (arr[j - 1] > arr[j]) {
                    swap(j - 1, j);
                }/* else {
                    break;
                }*/
            }
        }
    }

    // v2 : 不使用swap函数进行交换，直接使用原地交换的方式进行排序
    this.insertSort = function(){
        var len = arr.length;
        for (var i = 1; i < len; i++) {
            // 1. 先把当前的元素缓存起来
            var e = arr[i];
            // 2. 保存当前元素e应该插入到的位置j
            var j;
            // 注意点：
            // 1. 插入排序的内层循环必须和这个元素e进行比较，而不是和前面的元素进行比较
            // 2. 比较大小的代码必须放在这个内层for循环之内进行比较
            for (j = i; j > 0 && arr[j - 1] > e; j--) {
                arr[j] = arr[j - 1];
            }
            // 3. 执行完毕内层循环之后，j的位置已经是当前的目标插入位置了
            arr[j] = e;
        }
    }
}


function createNoneSortArray(size){
    var arr = new ArrayList();
    for (var i = size; i > 0; i--) {
        arr.insert(i);
    }
    return arr;
}



///////////////////////////////////////////////////////////////////////////////
// 测试
var arr = createNoneSortArray(5);
console.log(arr.toString());
arr.insertSort();
console.log(arr.toString());

选择排序
//////////////////////////////////////////////////////////////////////////////////////
// select sort
function ArrayList(){
    var arr = [];

    var swap = function(i, j){
        var temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }

    this.insert = function (item){
        arr.push(item);
    }


    this.toString = function(){
        return arr.join()
    }

    //  select sort
    this.selectSort = function(){
        var len = arr.length;
        for (var i = 0; i < len; i++) {
            var minIndex = i;
            // 每次从当前位置以后的元素选择一个最小的元素放在第i个位置上面
            for (var j = i; j < len; j++) {
                if (arr[j] < arr[i]) {
                    minIndex = j;
                }
            }
            // 如果当前位置和原始的最小值的标定下标是一样的话，就不处理
            if (i !== minIndex)
                swap(i, minIndex);
        }
    }
}


// 创建一个无序数组序列
function createNoneSortArray(size){
    var arr = new ArrayList();
    for (var i = size; i > 0; i--) {
        arr.insert(i);
    }
    return arr;
}



///////////////////////////////////////////////////////////////////////////////////////
// 测试
var arr = createNoneSortArray(5);
console.log(arr.toString());
arr.selectSort();
console.log(arr.toString());

归并排序
//////////////////////////////////////////////////////////////////////////////////////
// merge sort
function ArrayList(){
    var arr = []

    var swap = function(i, j){
        var temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }


    this.insert = function (item){
        arr.push(item);
    }

    this.toString = function (){
        return arr.join();
    }


    ////////////////////////////////////////////////////////////////////
    // merge sort 辅助函数
    // 开始对区间[l, middle], [middle + 1, r]区间的元素进行归并
    var __merge = function(arr, l, middle, r){
        console.log('merge aray start : ', arr, l, middle, r);
        // 1. 开辟一个临时空间，把原始的数组复制到这个新的数组里面
        // 数组深度克隆： arr.slice(), arr.concat(), for循环， fo (var item in arr)循环
        var aux = arr.concat();
        for (var i = l; i <= r; i++) {
            aux[i - l] = arr[i];
            console.log('copy ', arr[i], aux[i], i, r);
        }

        console.log('aux array now is ', aux, arr);

        // 2. 开始进行归并(i, j位置的初始化)
        var i = l, j = middle + 1;
        for (var k = l; k <= r; k++) {
            // 这里需要进行越界的检查啊
            if (i > middle) {
                // 开始去处理右边的
                arr[k] = aux[j - l];
                j++;
            } else if (j > r) {
                arr[k] = aux[i - l];
                i++;
            }

            // 遍历[l, r]区间内的元素(开始依次比较左右区间内的元素的大小，找出一个最小值, 放在第k个位置)
            else if (aux[i - l] < aux[j - l]) {
                arr[k] = aux[i - l];
                i++;
            } else {
                arr[k] = aux[j - l];
                j++;
            }

        }
    }


    // 递归使用归并排序算法对arr[l, r]这个区间范围内的数据进行排序
    var __mergeSort = function(arr, l, r){
        console.log('sort ……', l, r);
        // 1. 递归终止条件(l必须始终大于r的)
        if (l >= r)
            return ;
        // 2. 计算数组中间的位置
        var middle = Math.floor(l + (r - l) / 2);
        console.log('middle now is ', middle);
        // 2. 开始对左边的区间元素进行归并排序[l, middle]
        __mergeSort(arr, l, middle);
        // 3. 开始对右边的区间元素进行归并排序[middle + 1, r]
        __mergeSort(arr, middle + 1, r);
        console.log('loading……', l, r, middle);

        // 4. 排序完成之后，开始进行归并
        __merge(arr, l, middle, r);

        return arr;
    }

    // v1 : merge sort
    this.mergeSort =  function(){
        // 对区间[0, n - 1]的元素进行归并排序
        arr = __mergeSort(arr, 0, arr.length - 1);         // 将数组中的数据修改为最新的数据信息
        return arr;
    }


}



function createNoneSortArray(size){
    var arr = new ArrayList();
    for (var i = size; i > 0; i--) {
        arr.insert(i);
    }
    return arr;
}



///////////////////////////////////////////////////////////////////////////////////////
// 测试
var arr = createNoneSortArray(5);
console.log('init array : ', arr.toString());
arr.mergeSort();
console.log('caculate result : ', arr.toString());

快速排序
//////////////////////////////////////////////////////////////////////////////////////
// quick sort
function ArrayList(){
    var arr = [];

    var swap = function(i, j){
        var temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }

    this.insert = function (item){
        arr.push(item);
    }

    this.toString = function (){
        return arr.join();
    }

    ///////////////////////////////////////////////////////////////////////////////////////
    // quick sort
    // 求出数组arr在区间[l, r]范围的下标p位置，使得p满足条件, arr[l , p - 1] < arr[p], arr[p + 1, r] > arr[p]
    var __partition = function(arr, l, r){
        // 1. 选择数组中的第一个元素作为标定点
        var v = arr[l];
        // 2. 初始化变量的初始位置, arr[l + 1, i] < v, arr[j, r] >= v
        var i = l + 1, j = r;

        // 3. 开始循环
        while (true) {
            // i 向后移动
            while (i <= r && arr[i] < v){
                i++;
            }

            // j 向前移动
            while (j >= l && arr[j] > v) {
                j--;
            }

            // 交换数据之前需要先来处理一下元素的条件
            if (i > j) {
                break;
            }

            // 此处说明遇到了第一个arr[i] > v && arr[j] < v的元素，直接交换即可
            swap(i, j);

            // 交换完毕之后，开始进入下一个循环
            i++;
            j--;
        }

        // 执行完毕之后，将v元素放在正确的位置
        swap(l, j);
        // 最终j的位置就是标定点的位置
        return j;
    }


    // 实现对区间arr[l, r] 范围内的元素使用快速排序
    var __quickSort = function(arr, l, r){
        // 1. 递归终止的条件
        if (l >= r) {
            return;
        }

        // 2. 开始求出p的位置，使得数组满足条件arr[l, p - 1] < arr[p], arr[p + 1, r] > arr[p]
        var p = __partition(arr, l, r);
        // 3. 继续对arr[l, p - 1], arr[p + 1, r]区间的元素使用快速排序
        __quickSort(arr, l, p - 1);
        __quickSort(arr, p + 1, r);
    }


    this.quickSort = function(){
        // 使用递归实现快速排序
        __quickSort(arr, 0, arr.length - 1);
    }






    function quickSort(arr) {
      __quickSort(arr, 0, arr.length - 1)
    }

    function __quickSort(arr, l, r) {
      if (l >= r) {
          return;
      }

      let p = __partition(arr, l, r);
      __quickSort(arr, l, p - 1);
      __quickSort(arr, P + 1, r)
    }

    function __partition() {
      let v = arr[l];
      let i = l + 1, j = r;
      while (true) {
          while () 
      } 
    }
}


function createNoneSortArray(size){
    var arr = new ArrayList();
    for (var i = size; i > 0; i--) {
        arr.insert(i);
    }
    return arr;
}



//////////////////////////////////////////////////////////////////////////////////
// 测试
var arr = createNoneSortArray(5);
console.log(arr.toString());
arr.quickSort();
console.log(arr.toString());




【性能优化】浏览器缓存
https://github.com/fecommunity — Sat, 08 Jun 2024 20:27:09 GMT
缓存

[!NOTE]
Http 的缓存主要利用 header 里的Cache-control 和 ETag

1.Cache-control
1.1 Cache-control主要字段

public
指HTTP请求返回的资源在所经过的所有路径包括一些中间代理服务器以及发出这个请求的客户端浏览器都可以进行缓存


private
代表发起请求的浏览器才可以进行缓存


no-cache
指可以存缓存，但是每次使用都需要去服务端验证


no-store
本地和代理服务器都不允许去缓存


no-transform
不允许代理/缓存服务器转换文件格式



1.1.1 到期

max-age=
缓存到期时间


s-maxage=
代理服务器专用


max-stale=
指示客户机可以使用超出max-age时间的响应



1.1.2 重新验证

must-revalidate
设置了max-age的资源过期后必须到源服务端验证资源是否还可用


proxy-revalidate
（缓存服务器用）设置了max-age的资源过期后必须到源服务端验证资源是否还可用



1.2 Etag
1.2.1 ETag资源标识码

即用来进行对比缓存，Etag 是服务端资源的一个标识码

当客户端发送第一次请求时服务端会下发当前请求资源的标识码 Etag，下次再请求时，客户端则会通过 header 里的 If-None-Match 将这个标识码 Etag 带上，服务端将客户端传来的 Etag 与最新的资源 Etag 做对比，如果一样，则表示资源没有更新，返回 304。
2. 缓存方案
2.1 需求
有的静态资源会设置一个较长的缓存时间，但是我们希望用户还是能使用最新的资源。
2.2 解决方案
在打包完成的文件名上加上一串哈希码，这个哈希码是根据内容进行的哈希计算。
所以，如果你的内容文件没有变，那么这个hash码不会变，即这个静态资源的url没有变。 而如果内容有变，那么hash码也会变，浏览器就会去请求新的资源请求。
2.3 普通的缓存机制

2.4 资源验证
如果给Cache-Control设置了no-cache后，每次要使用资源时浏览器都要到服务器验证缓存是否过期。 如果直接使用缓存，返回码：304
2.5 如何验证资源是否过期：

Last-Modified（上次修改时间）

配合 If-Modified-Since 或 If-Unmodified-Since 使用
如果请求的资源头中有Last-Modified这个头，这个头指定了一个时间。那么浏览器重新访问资源时就会带上If-Modified-Since这个头，其时间是Last-Modified的时间，服务器就会拿这个时间去对比上次修改的时间，然后告诉浏览器是否可以直接使用。


Etag （数据签名）

资源会依据它的内容产生一个唯一的数据签名，如果资源有更新，那么Etag就会发生变化。
配合 If-Match 或 If-None-Match 使用






【计算机网络】Cookie和Session
https://github.com/fecommunity — Sat, 08 Jun 2024 13:10:50 GMT
cookie和session
1. cookie和session的概念和区别？
1.1 应用场景
1.1.1 cookie
登录网站，第一天输入用户名密码登录了，第二天再打开很多情况下就直接打开了。这个时候用到的一个机制就是cookie。
1.1.2 session
session一个场景是购物车，添加了商品之后客户端处可以知道添加了哪些商品，而服务器端如何判别呢，所以也需要存储一些信息就用到了session。
1.2 cookie

[!NOTE]
服务器通过设置set-cookie这个响应头，将cookie信息返回给浏览器，浏览器将响应头中的cookie信息保存在本地，当下次向服务器发送HTTP请求时，浏览器会自动将保存的这些cookie信息添加到请求头中。

通过cookie，服务器就会识别出浏览器，从而保证返回的数据是这个用户的。

通过set-cookie设置
下次请求会自动带上
键值对，可设置多个

1.2.1 cookie属性

max-age
过期时间有多长
默认在浏览器关闭时失效


expires
到哪个时间点过期


secure
表示这个cookie只会在https的时候才会发送


HttpOnly
设置后无法通过在js中使用document.cookie访问
保障安全，防止攻击者盗用用户cookie


domain
表示该cookie对于哪个域是有效的。 （关键点：cookie默认是不能直接跨域访问的，但是二级域名是可以共享cookie的）
cookie的跨域
通过在www.taobao.com 的server端提供一个获取当前域下所有cookie的 php的请求地址，然后该php获取到cookie之后将期并成 js 代码，也就是以上第二个截 - 图所看到的。然后再在 tmall用 jsonp 的方式跨域加载该 js 代码，从而实现 cookie 的跨域访问。





1.3  session（理解原理）

存放在服务器的一种用来存放用户数据的类似HashTable的结构
浏览器第一次发送请求时，服务器自动生成了HashTable和SessionID来唯一标识这个hash表，并将sessionID存放在cookie中通过响应发送到浏览器。浏览器第二次发送请求会将前一次服务器响应中的sessionID随着cookie发送到服务器上，服务器从请求中提取sessionID，并和保存的所有sessionID进行对比，找到这个用户对应的hash表。
一般这个值是有时间限制的，超时后销毁，默认30min


当用户在应用程序的web页面间挑转时，存储在session对象中的变量不会丢失而是在整个用户会话中一直存在下去。
session依赖于cookie，因为sessionID是存放在cookie中的。

2. sesssion与cookie的区别？（面试重点）

cookie存在客户端，session存在于服务端。
cookie在客户端中存放，容易伪造，不如session安全
session会消耗大量服务器资源，cookie在每次HTTP请求中都会带上，影响网络性能
域的支持范围不一样，比方说a.com的Cookie在a.com下都能用，而www.a.com的Session在api.a.com下都不能用




【front-end-interview】md
https://github.com/fecommunity — Sat, 08 Jun 2024 05:29:10 GMT
前端工程师面试宝典

前端面试宝典，收集于全网最新、最全面的面试资料，帮助各位求职面试者斩获理想Offer。

本书整理了前端工程师在求职面试过程中的前端知识和面经资料，希望各位网友们在学习交流过程中也可以不断丰富完善本书。
本书结构
本书一共分为八大部分。
第一部分：前端知识体系
本章从HTML、CSS、JavaScript、流向框架、Nodejs、性能优化、前端工程化、错误监控、Web安全共九个方面概括总结了前端面试中的主要知识点，帮助读者快速构建前端知识体系。
第二部分：计算机网络
介绍了面试中涉及到的13大常考知识点，涉及到OSI七层参考模型中各层的功能和传输细节，以及跨域和缓存等前端常考知识点。
第三部分：操作系统
简单概括了操作系统的知识体系，并总结了面试中常考的8大考点。
第四部分：数据结构与算法
该章节内容细节待完善，简单介绍了数据结构和算法设计中的常考知识点。
第五部分：开发环境
主要介绍了前端工程师在开发环境中需要掌握的Linux基础命令和Git的基本操作，提高开发效率。
第六部分：编程题与分析题
整理了前端面试中常考的27个经典面试题，涉及到原型链和继承、作用域和闭包、异步和单线程、ES6高级知识和一些简单的算法设计实现等考点。
第七部分：面经系列
目前收集整理了前端工程师在BAT等一线互联网公司的技术面试题，后续读者们可以不断更新完善该章节。
第八部分：结束
由于时间和精力有限，本书很难面面俱到。如果大家在使用本书的过程中有什么问题或建议，欢迎到GitHub前端社区issue区讨论，后续将不断完善本书内容。
目标读者
本书主要面向初中高级前端开发方向的求职者，希望本书能助你一臂之力，祝各位早日成功，未来可期。  
最后
欢迎star :star:,  欢迎补充和完善。


    




  
  
  
  



推荐使用 https://fecommunity.github.io/front-end-interview/index.html 在线阅读，在线阅读内容与本仓库同步一致。这种方式阅读的优势在于：有侧边栏阅读体验更好，GitHub pages 的访问速度相对来说也比较快。
注：如遇在线访问当前仓库速度太慢，可尝试访问加速备用链接点击进入



【计算机网络】CDN
https://github.com/fecommunity — Fri, 07 Jun 2024 15:02:16 GMT
CDN
1.介绍一下CDN和加速的原理？
1.1 基本概念

[!NOTE]
CDN（Content Delivery Network，内容分发网络）是构建在现有互联网基础之上的一层智能虚拟网络，通过在网络各处部署节点服务器，实现将源站内容分发至所有CDN节点，使用户可以就近获得所需的内容。CDN服务缩短了用户查看内容的访问延迟，提高了用户访问网站的响应速度与网站的可用性，解决了网络带宽小、用户访问量大、网点分布不均等问题。

1.2 加速原理
当用户访问使用CDN服务的网站时，本地DNS服务器通过CNAME方式将最终域名请求重定向到CDN服务。CDN通过一组预先定义好的策略(如内容类型、地理区域、网络负载状况等)，将当时能够最快响应用户的CDN节点IP地址提供给用户，使用户可以以最快的速度获得网站内容。使用CDN后的HTTP请求处理流程如下：
1.2.1 CDN节点有缓存场景


用户在浏览器输入要访问的网站域名，向本地DNS发起域名解析请求。
域名解析的请求被发往网站授权DNS服务器。
网站DNS服务器解析发现域名已经CNAME到了www.example.com.c.cdnhwc1.com。
请求被指向CDN服务。
CDN对域名进行智能解析，将响应速度最快的CDN节点IP地址返回给本地DNS。
用户获取响应速度最快的CDN节点IP地址。
浏览器在得到速度最快节点的IP地址以后，向CDN节点发出访问请求。
CDN节点将用户所需资源返回给用户。

1.2.2 CDN节点无缓存场景


用户在浏览器输入要访问的网站域名，向本地DNS发起域名解析请求。
域名解析的请求被发往网站授权DNS服务器。
网站DNS服务器解析发现域名已经CNAME到了www.example.com.c.cdnhwc1.com。
请求被指向CDN服务。
CDN对域名进行智能解析，将响应速度最快的CDN节点IP地址返回给本地DNS。
用户获取响应速度最快的CDN节点IP地址。
浏览器在得到速度最快节点的IP地址以后，向CDN节点发出访问请求。
CDN节点回源站拉取用户所需资源。
将回源拉取的资源缓存至节点。
将用户所需资源返回给用户。


[!NOTE]
PS：CNAME别名解析是将域名指向一个网址（域名）




【开发环境】Linux相关
https://github.com/fecommunity — Mon, 03 Jun 2024 21:35:44 GMT
Linux常见面试题
1. 绝对路径用什么符号表示？当前目录、上层目录用什么表示？主目录用什么表示? 切换目录用什么命令？
答案：

绝对路径： 如/etc/init.d
当前目录和上层目录： ./  ../
主目录： ~/
切换目录： cd

2. 怎么查看当前进程？怎么执行退出？怎么查看当前路径？
答案：

查看当前进程： ps
执行退出： exit
查看当前路径： pwd

3. 怎么清屏？怎么退出当前命令？怎么执行睡眠？怎么查看当前用户 id？查看指定帮助用什么命令？
答案：

清屏： clear
退出当前命令： ctrl+c 彻底退出
执行睡眠 ： ctrl+z 挂起当前进程fg 恢复后台
查看当前用户 id： ”id“：查看显示目前登陆账户的 uid 和 gid 及所属分组及用户名
查看指定帮助： 如 man adduser 这个很全 而且有例子； adduser --help 这个告诉你一些常用参数； info adduesr；

4. Ls 命令执行什么功能？ 可以带哪些参数，有什么区别？
答案：

ls 执行的功能： 列出指定目录中的目录，以及文件
哪些参数以及区别： a 所有文件l 详细信息，包括大小字节数，可读可写可执行的权限等

5. 建立软链接(快捷方式)，以及硬链接的命令。
答案：

软链接： ln -s slink source
硬链接： ln link source

6. 目录创建用什么命令？创建文件用什么命令？复制文件用什么命令？
答案：

创建目录： mkdir
创建文件：典型的如 touch，vi 也可以创建文件，其实只要向一个不存在的文件输出，都会创建文件
复制文件： cp 

7. 文件权限修改用什么命令？格式是怎么样的？

文件权限修改： chmod
格式如下：
chmodu+xfile给file的属主增加执行权限 chmod 751 file 给 file 的属主分配读、写、执行(7)的权限，给 file 的所在组分配读、执行(5)的权限，给其他用户分配执行(1)的权限
chmodu=rwx,g=rx,o=xfile上例的另一种形式 chmod =r file 为所有用户分配读权限
chmod444file同上例 chmod a-wx,a+r file同上例
$ chmod -R u+r directory 递归地给 directory 目录下所有文件和子目录的属主分配读的权限



8. 查看文件内容有哪些命令可以使用？
答案：

vi 文件名 #编辑方式查看，可修改
cat 文件名 #显示全部文件内容
more 文件名 #分页显示文件内容
less 文件名 #与 more 相似，更好的是可以往前翻页
tail 文件名 #仅查看尾部，还可以指定行数
head 文件名 #仅查看头部,还可以指定行数

9. 随意写文件命令？怎么向屏幕输出带空格的字符串，比如”hello world”?
答案：

写文件命令：vi

向屏幕输出带空格的字符串:echo hello world


10. 终端是哪个文件夹下的哪个文件？黑洞文件是哪个文件夹下的哪个命令？
答案：

终端  /dev/tty

黑洞文件  /dev/null


11. 移动文件用哪个命令？改名用哪个命令？
答案：

mv 
mv

12. 复制文件用哪个命令？如果需要连同文件夹一块复制呢？如果需要有提示功能呢？
答案：
> cp cp -r  ？？？？
13. 删除文件用哪个命令？如果需要连目录及目录下文件一块删除呢？删除空文件夹用什么命令？
答案：
> rm rm -r rmdir
14. Linux 下命令有哪几种可使用的通配符？分别代表什么含义?
答案：

“？”可替代单个字符。

“*”可替代任意多个字符。

方括号“[charset]”可替代 charset 集中的任何单个字符，如[a-z]，[abABC]


15. 用什么命令对一个文件的内容进行统计？(行号、单词数、字节数)
答案：

wc 命令 - c 统计字节数 - l 统计行数 - w 统计字数。

16. Grep 命令有什么用？ 如何忽略大小写？ 如何查找不含该串的行?
答案：

[!NOTE]
是一种强大的文本搜索工具，它能使用正则表达式搜索文本，并把匹 配的行打印出来。

grep [stringSTRING] filename grep [^string] filename
17. Linux 中进程有哪几种状态？在 ps 显示出来的信息中，分别用什么符号表示的？
答案：

不可中断状态：进程处于睡眠状态，但是此刻进程是不可中断的。不可中断， 指进程不响应异步信号。
暂停状态/跟踪状态：向进程发送一个 SIGSTOP 信号，它就会因响应该信号 而进入 TASK_STOPPED 状态;当进程正在被跟踪时，它处于 TASK_TRACED 这个特殊的状态。

正在被跟踪指的是进程暂停下来，等待跟踪它的进程对它进行操作。
3. 就绪状态：在 run_queue 队列里的状态

运行状态：在 run_queue 队列里的状态
可中断睡眠状态：处于这个状态的进程因为等待某某事件的发生（比如等待 socket 连接、等待信号量），而被挂起
zombie 状态（僵尸）：父亲没有通过 wait 系列的系统调用会顺便将子进程的尸体（task_struct）也释放掉
退出状态


D 不可中断 Uninterruptible（usually IO）
R 正在运行，或在队列中的进程
S 处于休眠状态
T 停止或被追踪
Z 僵尸进程
W 进入内存交换（从内核 2.6 开始无效）
X 死掉的进程

18. 怎么使一个命令在后台运行?
答案：
一般都是使用 & 在命令结尾来让程序自动运行。(命令后可以不追加空格)
19. 利用 ps 怎么显示所有的进程? 怎么利用 ps 查看指定进程的信息？
答案：
ps -ef (system v 输出) 

ps -aux bsd 格式输出

ps -ef | grep pid
20. 哪个命令专门用来查看后台任务?
答案：
job -l
21. 把后台任务调到前台执行使用什么命令?把停下的后台任务在后台执行起来用什么命令?
答案：

把后台任务调到前台执行 fg

把停下的后台任务在后台执行起来 bg


22. 终止进程用什么命令? 带什么参数?
答案：
kill [-s <信息名称或编号>][程序] 或 kill [-l <信息编号>] 

kill-9 pid
23. 怎么查看系统支持的所有信号？
答案：
kill -l
24. 搜索文件用什么命令? 格式是怎么样的?
答案：
find <指定目录> <指定条件> <指定动作>
whereis 加参数与文件名
locate 只加文件名
find 直接搜索磁盘，较慢。
find / -name "string*"
25. 查看当前谁在使用该主机用什么命令? 查找自己所在的终端信息用什么命令?
答案：
查找自己所在的终端信息：who am i
查看当前谁在使用该主机：who
26. 使用什么命令查看用过的命令列表?
答案：
history
27. 使用什么命令查看磁盘使用空间？ 空闲空间呢?
答案：
df -hl
文件系统 容量 已用 可用 已用% 挂载点
Filesystem Size Used Avail Use% Mounted on /dev/hda2 45G 19G 24G 44% /
/dev/hda1 494M 19M 450M 4% /boot
28. 使用什么命令查看网络是否连通?
答案：
netstat
29. 使用什么命令查看 ip 地址及接口信息？
答案：
ifconfig
30. 查看各类环境变量用什么命令?
答案：
查看所有 env
查看某个，如 home： env $HOME
31. 通过什么命令指定命令提示符?
答案：
\u：显示当前用户账号
\h：显示当前主机名
\W：只显示当前路径最后一个目录
\w：显示当前绝对路径（当前用户目录会以~代替）
$PWD：显示当前全路径
$：显示命令行’$'或者’#'符号
#：下达的第几个命令
\d：代表日期，格式为week day month date，例如："MonAug1"
\t：显示时间为24小时格式，如：HH：MM：SS
\T：显示时间为12小时格式
\A：显示时间为24小时格式：HH：MM
\v：BASH的版本信息 如export PS1=’[\u@\h\w#]$‘
32. 查找命令的可执行文件是去哪查找的? 怎么对其进行设置及添加?
答案：
whereis [-bfmsu][-B <目录>...][-M <目录>...][-S <目录>...][文件...]

[!NOTE]
补充说明：whereis 指令会在特定目录中查找符合条件的文件。这些文件的烈性应属于原始代码，二进制文件，或是帮助文件。

-b   只查找二进制文件。
-B<目录> 只在设置的目录下查找二进制文件。 -f 不显示文件名前的路径名称。
-m   只查找说明文件。
-M<目录> 只在设置的目录下查找说明文件。 -s 只查找原始代码文件。
-S<目录> 只在设置的目录下查找原始代码文件。 -u 查找不包含指定类型的文件。
which 指令会在 PATH 变量指定的路径中，搜索某个系统命令的位置，并且返回第一个搜索结果。
-n 指定文件名长度，指定的长度必须大于或等于所有文件中最长的文件名。
-p 与-n 参数相同，但此处的包括了文件的路径。 -w 指定输出时栏位的宽度。
-V   显示版本信息
33. 通过什么命令查找执行命令?
答案：
which 只能查可执行文件
whereis 只能查二进制文件、说明文档，源文件等
34. 怎么对命令进行取别名？
答案：
alias la='ls -a'
35. du 和 df 的定义，以及区别？
答案：
du 显示目录或文件的大小
df 显示每个<文件>所在的文件系统的信息，默认是显示所有文件系统。

[!NOTE]
（文件系统分配其中的一些磁盘块用来记录它自身的一些数据，如 i 节点，磁盘分布图，间接块，超级块等。这些数据对大多数用户级的程序来说是不可见的，通常称为 Meta Data。） du 命令是用户级的程序，它不考虑 Meta Data，而 df 命令则查看文件系统的磁盘分配图并考虑 Meta Data。

df 命令获得真正的文件系统数据，而 du 命令只查看文件系统的部分情况。
36. awk 详解
答案：
awk '{pattern + action}' {filenames}
#cat /etc/passwd |awk -F ':' '{print 1"\t"7}' //-F 的意思是以':'分隔 root /bin/bash
daemon /bin/sh 搜索/etc/passwd 有 root 关键字的所有行

#awk -F: '/root/' /etc/passwd root:x:0:0:root:/root:/bin/bash
37. 当你需要给命令绑定一个宏或者按键的时候，应该怎么做呢？
答案：

可以使用bind命令，bind可以很方便地在shell中实现宏或按键的绑定。

在进行按键绑定的时候，我们需要先获取到绑定按键对应的字符序列。

比如获取F12的字符序列获取方法如下：先按下Ctrl+V,然后按下F12 .我们就可以得到F12的字符序列 ^[[24~。

接着使用bind进行绑定。
[root@localhost ~]# bind ‘”\e[24~":"date"'


[!WARNING]
注意：相同的按键在不同的终端或终端模拟器下可能会产生不同的字符序列。

【附】也可以使用showkey -a命令查看按键对应的字符序列。
38. 如果一个linux新手想要知道当前系统支持的所有命令的列表，他需要怎么做？
答案：
使用命令compgen -c，可以打印出所有支持的命令列表。
[root@localhost ~]$ compgen -c

l.

ll

ls

which

if

then

else

elif

fi

case

esac

for

select

while

until

do

done

…
39. 如果你的助手想要打印出当前的目录栈，你会建议他怎么做？
答案：
使用Linux 命令dirs可以将当前的目录栈打印出来。
[root@localhost ~]# dirs

/usr/share/X11

[!NOTE]
【附】：目录栈通过pushd popd 来操作。

40. 你的系统目前有许多正在运行的任务，在不重启机器的条件下，有什么方法可以把所有正在运行的进程移除呢？
答案：
使用linux命令 ’disown -r ’可以将所有正在运行的进程移除。
41. bash shell 中的hash 命令有什么作用？
答案：

[!NOTE]
linux命令’hash’管理着一个内置的哈希表，记录了已执行过的命令的完整路径, 用该命令可以打印出你所使用过的命令以及执行的次数。

[root@localhost ~]# hash

hits command

2 /bin/ls

2 /bin/su
42. 哪一个bash内置命令能够进行数学运算。
答案：
bash shell 的内置命令let 可以进行整型数的数学运算。
#! /bin/bash
…
…
let c=a+b
…
…
43. 怎样一页一页地查看一个大文件的内容呢？
答案：

通过管道将命令”cat file_name.txt” 和 ’more’ 连接在一起可以实现这个需要.

[root@localhost ~]# cat file_name.txt | more
44. 数据字典属于哪一个用户的？
答案：
数据字典是属于’SYS’用户的，用户‘SYS’ 和 ’SYSEM’是由系统默认自动创建的
45. 怎样查看一个linux命令的概要与用法？假设你在/bin目录中偶然看到一个你从没见过的的命令，怎样才能知道它的作用和用法呢？
答案：

[!NOTE]
使用命令whatis 可以先出显示出这个命令的用法简要，比如，你可以使用whatis zcat 去查看‘zcat’的介绍以及使用简要。

[root@localhost ~]# whatis zcat

zcat [gzip] (1) – compress or expand files
46. 使用哪一个命令可以查看自己文件系统的磁盘空间配额呢？
答案：

[!NOTE]
使用命令repquota 能够显示出一个文件系统的配额信息

【附】只有root用户才能够查看其它用户的配额。



【操作系统】面试题
https://github.com/fecommunity — Fri, 31 May 2024 17:19:51 GMT
面试题
1. 进程与线程的区别？(高频面试题)
1.1 概念
进程：是并发执行的程序在执行过程中分配和管理资源的基本单位，是一个动态概念，竞争计算机系统资源的基本单位。
线程：是进程的一个执行单元，是进程内科调度实体。比进程更小的独立运行的基本单位。线程也被称为轻量级进程。
一个程序至少一个进程，一个进程至少一个线程。
1.2 为什么会有线程？

[!NOTE]
每个进程都有自己的地址空间，即进程空间，在网络或多用户换机下，一个服务器通常需要接收大量不确定数量用户的并发请求，为每一个请求都创建一个进程显然行不通（系统开销大响应用户请求效率低），因此操作系统中线程概念被引进。


线程的执行过程是线性的，尽管中间会发生中断或者暂停，但是进程所拥有的资源只为改线状执行过程服务，一旦发生线程切换，这些资源需要被保护起来。
进程分为单线程进程和多线程进程，单线程进程宏观来看也是线性执行过程，微观上只有单一的执行过程。多线程进程宏观是线性的，微观上多个执行操作。
线程的改变只代表CPU的执行过程的改变，而没有发生进程所拥有的资源的变化。　

1.3 进程线程的区别?

地址空间：同一进程的线程共享本进程的地址空间，而进程之间则是独立的地址空间。
资源拥有：同一进程内的线程共享本进程的资源如内存、I/O、cpu等，但是进程之间的资源是独立的。
一个进程崩溃后，在保护模式下不会对其他进程产生影响，但是一个线程崩溃整个进程都死掉。所以多进程要比多线程健壮。
进程切换时，消耗的资源大，效率高。所以涉及到频繁的切换时，使用线程要好于进程。同样如果要求同时进行并且又要共享某些变量的并发操作，只能用线程不能用进程


执行过程：每个独立的进程程有一个程序运行的入口、顺序执行序列和程序入口。但是线程不能独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
线程是处理器调度的基本单位，但是进程不是。
两者均可并发执行。

1.4 优缺点

线程执行开销小，但是不利于资源的管理和保护。线程适合在SMP机器（双CPU系统）上运行。
进程执行开销大，但是能够很好的进行资源管理和保护。进程可以跨机器前移。

1.5 何时使用多进程，何时使用多线程？

对资源的管理和保护要求高，不限制开销和效率时，使用多进程。
要求效率高，频繁切换时，资源的保护管理要求不是很高时，使用多线程。

2. 进程有哪几种状态？

就绪状态：进程已获得除处理机以外的所需资源，等待分配处理机资源
运行状态：占用处理机资源运行，处于此状态的进程数小于等于CPU数
阻塞状态： 进程等待某种条件，在条件满足之前无法执行


3. 线程同步的方式及原因?

互斥量：采用互斥对象机制，只有拥有互斥对象的线程才有访问公共资源的权限。因为互斥对象只有一个，所以可以保证公共资源不会被多个线程同时访问。
信号量：它允许同一时刻多个线程访问同一资源，但是需要控制同一时刻访问此资源的最大线程数量。
事件（信号）：通过通知操作的方式来保持多线程同步，还可以方便的实现多线程优先级的比较操作。

4. 线程间的通信机制？

管道（pipe）及命名管道（named pipe）：管道可用于具有亲缘关系的父子进程间的通信，有名管道除了具有管道所具有的功能外，它还允许无亲缘关系进程间的通信；

信号（signal）：信号是一种比较复杂的通信方式，用于通知接收进程某个事件已经发生；

消息队列：消息队列是消息的链接表，它克服了上两种通信方式中信号量有限的缺点，具有写权限得进程可以按照一定得规则向消息队列中添加新信息；对消息队列有读权限得进程则可以从消息队列中读取信息；

共享内存：可以说这是最有用的进程间通信方式。它使得多个进程可以访问同一块内存空间，不同进程可以及时看到对方进程中对共享内存中数据得更新。这种方式需要依靠某种同步操作，如互斥锁和信号量等；

信号量：主要作为进程之间及同一种进程的不同线程之间得同步和互斥手段；

套接字：这是一种更为一般得进程间通信机制，它可用于网络中不同机器之间的进程间通信，应用非常广泛。


5. 守护、僵尸、孤儿进程的概念?

[!NOTE]
在操作系统领域中，孤儿进程指的是在其父进程执行完成或被终止 后仍继续运行的一类进程。

5.1 基本概念

在类UNIX系统中，僵尸进程是指完成执行（通过 exit 系统调用，或运行时发生致命错误或收到终止信号所致）但在操作系统的进程表中仍然有一个表项（进程控制块PCB），处于"终止状态 "的进程。

在一個多工的電腦作業系統中，守护进程（英语：daemon，英语发音：/ˈdiːmən/或英语发音：/ˈdeɪmən/）是一種在后台执行的电脑程序。 此类程序会被以进程的形式初始化。 守护进程程序的名称通常以字母“d”结尾：例如，syslogd就是指管理系统日志的守护进程。


个人理解：

一般情况下，子进程是由父进程创建，而子进程和父进程的退出是无顺序的，两者之间都不知道谁先退出。正常情况下父进程先结束会调用 wait 或者 waitpid 函数等待子进程完成再退出，而一旦父进程不等待直接退出，则剩下的子进程会被init(pid=1)进程接收，成会孤儿进程。（进程树中除了init都会有父进程）。

如果子进程先退出了，父进程还未结束并且没有调用 wait 或者 waitpid 函数获取子进程的状态信息，则子进程残留的状态信息（ task_struct 结构和少量资源信息）会变成僵尸进程。

守护进程（ daemon) 是指在后台运行，没有控制终端与之相连的进程。它独立于控制终端，通常周期性地执行某种任务 。 守护进程脱离于终端是为了避免进程在执行过程中的信息在任何终端上显示并且进程也不会被任何终端所产生的终端信息所打断 。


5.2 危害
孤儿进程结束后会被 init 进程善后，并没有危害，而僵尸进程则会一直占着进程号，操作系统的进程数量有限则会受影响。
5.3 解决
一般僵尸进程的产生都是因为父进程的原因，则可以通过 kill 父进程解决，这时候僵尸进程就变成了孤儿进程，被 init 进程接收
6. 什么是死锁？死锁产生的条件？如何避免死锁

[!NOTE]
多个进程在运行过程中因争夺资源而造成的一种僵局。当一个进程请求资源时，如果该资源不能立即获得，那么进程就会进入等待状态。如果一个处于等待状态的进程 P1，由于所等待的资源被另一个处于等待状态的进程 p2 所占有，而 p2 所请求的资源又被 p1 占有，这样它们所请求的资源都不会获得，两进程一直处于等待状态，形成死锁。

6.1 死锁产生的原因？

因为系统资源不足。
进程运行推进的顺序不合适。
资源分配不当等。

6.2 死锁产生的条件？

（1）互斥条件（Mutual exclusion）：资源不能被共享，只能由一个进程使用。
（2）请求与保持条件（Hold and wait）：已经得到资源的进程可以再次申请新的资源。
（3）非剥夺条件（No pre-emption）：已经分配的资源不能从相应的进程中被强制地剥夺。
（4）循环等待条件（Circular wait）：系统中若干进程组成环路，该环路中每个进程都在等待相邻进程正占用的资源。

6.3 如何避免死锁？

（1）打破互斥条件：改造独占性资源为虚拟资源，大部分资源已无法改造。
（2）打破不可抢占条件：当一进程占有一独占性资源后又申请一独占性资源而无法满足，则退出原占有的资源。
（3）打破占有且申请条件：采用资源预先分配策略，即进程运行前申请全部资源，满足则运行，不然就等待，这样就不会占有且申请。
（4）打破循环等待条件：实现资源有序分配策略，对所有设备实现分类编号，所有进程只能采用按序号递增的形式申请资源

7. 操作系统的调度算法有哪些？

[!NOTE]
FCFS(先来先服务)，优先级，时间片轮转，多级反馈


先来先服务（FCFS）:此算法的原则是按照作业到达后备作业队列（或进程进入就绪队列）的先后次序选择作业（或进程）
短作业优先（SJF:Shortest Process First）：这种算法主要用于作业调度，它从作业后备序列中挑选所需运行时间最短的作业进入主存运行。
**时间片轮转调度算法：当某个进程执行的时间片用完时，调度程序便终止该进程的执行，并将它送到就绪队列的末尾，等待分配下一时间片再执行。然后把处理机分配给就绪队列中新的队首进程，同时也让它执行一个时间片。这样就可以保证队列中的所有进程，在已给定的时间内，均能获得一时间片处理机执行时间。
高响应比优先：按照高响应比（已等待时间+要求运行时间）/要求运行时间 优先的原则，在每次选择作业投入运行时，先计算此时后备作业队列中每个作业的响应比RP。选择最大的作业投入运行。
优先权调度算法：按照进程的优先权大小来调度。使高优先权进程得到优先处理的调度策略称为优先权调度算法。注意：优先数越多，优先权越小。
多级队列调度算法：多队列调度是根据作业的性质和类型的不同，将就绪队列再分为若干个队列，所有的作业（进程）按其性质排入相应的队列中，而不同的就绪队列采用不同的调度算法。

8. 系统调用与库函数的区别?

系统调用是最底层的应用，是面向硬件的。而库函数的调用是面向开发的，相当于应用程序的API(即预先定义好的函数)接口；

各个操作系统的系统调用是不同的，因此系统调用一般是没有跨操作系统的可移植性，而库函数的移植性良好(c库在Windows和Linux环境下都可以操作)；

库函数属于过程调用，调用开销小；系统调用需要在用户空间和内核上下文环境切换，开销较大；

库函数调用函数库中的一段程序，这段程序最终还是通过系统调用来实现的；系统调用调用的是系统内核的服务。





函数库调用
系统调用



在所有的ANSI C编译器版本中，C库函数是相同的
各个操作系统的系统调用是不同的


它调用函数库中的一段程序（或函数）
它调用系统内核的服务


与用户程序相联系
是操作系统的一个入口点


在用户地址空间执行
在内核地址空间执行


它的运行时间属于“用户时间”
它的运行时间属于“系统”时间


属于过程调用，调用开销较小
需要在用户空间和内核上下文环境间切换，开销较大


在C函数库libc中有大约300个函数
在UNIX中大约有90个系统调用


典型的C函数库调用：system fprintf malloc
典型的系统调用：chdir fork write brk；





【JS相关】正则 copy
https://github.com/fecommunity — Wed, 29 May 2024 04:27:55 GMT
正则表达式
1.正则表达式基础
1.1 创建正则表达式
1.1.1 使用一个正则表达式字面量
const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi;
1.1.2 调用RegExp对象的构造函数
const regex = new RegExp(pattern, [, flags])
1.1.3 特殊字符

^ 匹配输入的开始
$ 匹配输入的结束
* 0次或多次  {0，}
+ 1次或多次  {1，}
?
0次或者1次 {0,1}。
用于先行断言
如果紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪
对 "123abc" 用 /\d+/ 将会返回 "123"，
用 /\d+?/,那么就只会匹配到 "1"。




. 匹配除换行符之外的任何单个字符
(x)  匹配 'x' 并且记住匹配项
(?:x)  匹配 'x' 但是不记住匹配项
x(?=y)  配'x'仅仅当'x'后面跟着'y'.这种叫做正向肯定查找。
x(?!y)  匹配'x'仅仅当'x'后面不跟着'y',这个叫做正向否定查找。
x|y  匹配‘x’或者‘y’。
{n}  重复n次
{n, m}  匹配至少n次，最多m次
[xyz]   代表 x 或 y 或 z
[^xyz]  不是 x 或 y 或 z
\d  数字
\D  非数字
\s  空白字符，包括空格、制表符、换页符和换行符。
\S  非空白字符
\w  单词字符（字母、数字或者下划线）  [A-Za-z0-9_]
\W  非单字字符。[^A-Za-z0-9_]
\3  表示第三个分组
\b   词的边界
/\bm/匹配“moon”中得‘m’；


\B   非单词边界

1.2 使用正则表达式的方法

exec    一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）。
test    一个在字符串中测试是否匹配的RegExp方法，它返回true或false。
match    一个在字符串中执行查找匹配的String方法，它返回一个数组或者在未匹配到时返回null。
search    一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。
replace    一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。
split    一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的String方法。

1.2.1 正则对象的三个方法
        //①test()判断字符串中是否出现某个字符串，返回布尔值
        var re = /abc/;
        var str = '00abc66';
        console.log(re.test(str));  // true
        //②exec()查找并返回字符串中指定的某个字符串，只匹配一次
        var re = /abc/;
        var str = 'a0bc88abc00abc';
        console.log(re.exec(str));  // ["abc", index: 6, input: "a0bc88abc00abc", groups: undefined]
        //③compile()方法用于改变正则匹配的内容
        var re = /ab/;
        var str = "aabcdef";
        console.log(re.test(str));  //true
        re.compile(/bd/);
        console.log(re.test(str));  //false
        re.compile('66');
        console.log(re.test(str));  //false
1.2.2 字符串中与正则相关的方法
        //①search()方法，返回符合条件的字符串首次出现的位置（下标）
        var re = /abc/;
        var str = '00abc66';
        console.log(str.search(re));        // 2
        //②match()方法，返回查找的结果，如果查询不到返回NULL
        console.log(str.match(re));         // ["abc", index: 2, input: "00abc66", groups: undefined]
        //③replace()方法，将匹配到的内容替换成指定内容
        console.log(str.replace(re, "*"));
        //④split()方法，将字符串分割成字符串数组
        console.log(str.split(re));
1.3 正则表达式子表达式相关
1.3.1 子表达式
在正则表达式中，通过一对圆括号括起来的内容，我们就称之为“子表达式”。如：var re = /\d(\d)\d/;
1.3.2 捕获
在正则表达式中，子表达式匹配到相应的内容时，系统会自动捕获这个行为，然后将子表达式匹配到的内容放入系统的缓存区中。我们把这个过程就称之为“捕获”。
1.3.3 反向引用
在正则表达式中，我们可以使用\n（n>0，正整数，代表系统中的缓冲区编号）来获取缓冲区中的内容，我们把这个过程就称之为“反向引用”。
    var str = "d1122jj7667h6868s9999";
    //查找AABB型的数字
    console.log(str.match(/(\d)\1(\d)\2/)); //1122
    //查找ABBA型的数字
    console.log(str.match(/(\d)(\d)\2\1/)); //7667
    //查找ABAB型的数字
    console.log(str.match(/(\d)(\d)\1\2/)); //6868
    //查找四个连续相同的数字
    console.log(str.match(/(\d)\1\1\1/));   //9999
1.4 限定符

[!NOTE]
限定符可以指定正则表达式的一个给定字符必须要出现多少次才能满足匹配。

    *：匹配前面的子表达式零次或多次，0到多
    +：匹配前面的子表达式一次或多次，1到多
    ?：匹配前面的子表达式零次或一次，0或1
    {n}：匹配确定的 n 次 
    {n,}：至少匹配 n 次 
    {n,m}：最少匹配 n 次且最多匹配 m 次

[!WARNING]
注意：针对于{n,m}，正则在匹配到一个符合多种次数的字符串时，优先匹配次数多的，即能匹配到m次就不会匹配n次，这就是贪婪模式（默认）。


如果在其后加?即{n,m}?则会更改为非贪婪模式（惰性模式），则此时正则优先匹配n次。

    var str = "aa1a22a333a6a8a";
    console.log(str.match(/a\d*/));      //a
    console.log(str.match(/a\d+/));      //a1
    console.log(str.match(/a\d?/));      //a
    console.log(str.match(/a\d{3}/));    //a333
    console.log(str.match(/a\d{2,}/));   //a22
    console.log(str.match(/a\d{1,3}/));  //a1
    console.log(str.match(/a\d{1,3}?/)); //a1

    //贪婪模式加深理解，案例如下：
    //贪婪模式下最开始的'a2就符合条件'，但是它会返回'a22'
    //注意：它是在遇到一个同时符合多个次数条件的字符串时，取符合次数多字符串
    var str = "a22aa1a333a6a8a";
    console.log(str.match(/a\d{1,3}/));   //a22
    console.log(str.match(/a\d{1,3}/g));  //a22 a1 a333 a6 a8
    console.log(str.match(/a\d{1,3}?/));  //a2
    console.log(str.match(/a\d{1,3}?/g)); //a2 a1 a3 a6 a8
1.5 定位符

[!NOTE]
定位符可以将一个正则表达式固定在一行的开始或结束。也可以创建只在单词内或只在单词的开始或结尾处出现的正则表达式。

^ (脱字符)：匹配输入字符串的开始位置
$：匹配输入字符串的结束位置
\b：匹配一个单词边界
\B：匹配非单词边界
1.6 正则表达式的匹配模式（修饰符）

[!NOTE]
表示正则匹配的附加规则，放在正则模式的最尾部。修饰符可以单个使用，也可以多个一起使用。


①g全局匹配，找到所有匹配，而不是在第一个匹配后停止
②i匹配全部大小写
③m多行，将开始和结束字符（^和$）视为在多行上工作（也就是，分别匹配每一行的开始和结束（由\n或\r分割），而不只是只匹配整个输入字符串的最开始和最末尾处。
④s与m相反，单行匹配  var re = /^[a-z]/gim;   //可组合使用


1.7 转义字符

[!NOTE]
因为在正则表达式中 . + \ 等属于表达式的一部分，但有时也需要匹配这些特殊字符，所以，需要使用反斜杠对特殊字符进行转义。

   需要转移的字符：
   点号.
   小括号()
   中括号[]
   左斜杠/
   右斜杠\
   选择匹配符|

   * 
   ?
   {}
   + 
   $
   ^
2. 正则练习题
2.1 匹配结尾的数字
/\d+$/g
2.2 统计空格个数
字符串内如有空格，但是空格的数量可能不一致，通过正则将空格的个数统一变为一个。
let reg = /\s+/g
str.replace(reg, " ");
2.3 判断字符串是不是由数字组成
str.test(/^\d+$/);
2.4 电话号码正则

区号必填为3-4位的数字
区号之后用“-”与电话号码连接电话号码为7-8位的数字
分机号码为3-4位的数字，非必填，但若填写则以“-”与电话号码相连接/^\d{3,4}-\d{7,8}(-\d{3,4})?$/


2.5 手机号码正则表达式
正则验证手机号，忽略前面的0，支持130-139，150-159。忽略前面0之后判断它是11位的。
/^0*1(3|5)\d{9}$/
2.6 使用正则表达式实现删除字符串中的空格
funtion trim(str) {
  let reg = /^\s+|\s+$/g
  return str.replace(reg, '');
}
2.7 限制文本框只能输入数字和两位小数点等等
/^\d*\.\d{0,2}$/
2.8 只能输入小写的英文字母和小数点，和冒号，正反斜杠(：./)
/^[a-z\.:\/\\]*$/
2.9 替换小数点前内容为指定内容

例如：infomarket.php?id=197 替换为 test.php?id=197

var reg = /^[^\.]+/;
var target = '---------';
str = str.replace(reg, target)
2.10 只匹配中文的正则表达式
/[\u4E00-\u9FA5\uf900-\ufa2d]/ig
2.11 返回字符串的中文字符个数

先去掉非中文字符，再返回length属性。

function cLength(str){
  var reg = /[^\u4E00-\u9FA5\uf900-\ufa2d]/g;
  //匹配非中文的正则表达式
  var temp = str.replace(reg,'');
  return temp.length;
}
2.12 正则表达式取得匹配IP地址前三段

只要匹配掉最后一段并且替换为空字符串就行了

function getPreThrstr(str) {
  let reg = /\.\d{1,3}$/;
  return str.replace(reg,'');
}
2.13 匹配与
之间的内容
/[\s\S]+?
/i
2.14 用正则表达式获得文件名

c:\images\tupian\006.jpg

可能是直接在盘符根目录下，也可能在好几层目录下，要求替换到只剩文件名。
首先匹配非左右斜线字符0或多个，然后是左右斜线一个或者多个。
function getFileName(str){
  var reg = /[^\\\/]*[\\\/]+/g;
  // xxx\ 或是 xxx/
  str = str.replace(reg,'');
  return str;
}
2.15 绝对路径变相对路径

"http://23.123.22.12/image/somepic.gif"转换为："/image/somepic.gif"

var reg = /http:\/\/[^\/]+/;
str = str.replace(reg,"");
2.16 用户名正则

用于用户名注册，，用户名只 能用 中文、英文、数字、下划线、4-16个字符。

/^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/
2.17 匹配英文地址

规则如下:
包含 "点", "字母","空格","逗号","数字"，但开头和结尾不能是除字母外任何字符。

/^[a-zA-Z][\.a-zA-Z,0-9]*[a-zA-Z]$/
2.18 正则匹配价格
开头数字若干位，可能有一个小数点，小数点后面可以有两位数字。
/^\d+(\.\d{2})?$/
2.19 身份证号码的匹配
身份证号码可以是15位或者是18位，其中最后一位可以是X。其它全是数字
/^(\d{14}|\d{17})(X|x)$/
2.20 单词首字母大写

每单词首字大写，其他小写。如blue idea转换为Blue Idea，BLUE IDEA也转换为Blue Idea

function firstCharUpper(str) {
  str = str.toLowerCase();
  let reg = /\b(\w)/g;
  return str.replace(reg, m => m.toUpperCase());
}
2.21 正则验证日期格式

yyyy-mm-dd格式, 4位数字，横线，1或者2位数字，再横线，最后又是1或者2位数字。

/^\d{4}-\d{1,2}-\d{1,2}$/
2.22 去掉文件的后缀名

www.abc.com/dc/fda.asp 变为 www.abc.com/dc/fda

function removeExp(str) {
  return str.replace(/\.\w$/,'')
}
2.23 验证邮箱的正则表达式

开始必须是一个或者多个单词字符或者是-，加上@，然后又是一个或者多个单词字符或者是-。然后是点“.”和单词字符和-的组合，可以有一个或者多个组合。

/^[\w-]+@\w+\.\w+$/
2.24 正则判断标签是否闭合

例如：p的内容，同样也是没闭合的标签。


标签可能有两种方式闭合， 或者是
 xxx 
。

/<([a-z]+)(\s*\w*?\s*=\s*".+?")*(\s*?>[\s\S]*?(<\/\1>)+|\s*\/>)/i
2.25 正则判断是否为数字与字母的混合

不能小于12位，且必须为字母和数字的混合

/^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i
2.26 将阿拉伯数字替换为中文大写形式
function replaceReg(reg,str){
  let arr=["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"];
  let reg = /\d/g;
  return str.replace(reg,function(m){return arr[m];})
}
2.27 去掉标签的所有属性
***
变成没有任何属性的
***

思路：非捕获匹配属性，捕获匹配标签，使用捕获结果替换掉字符串。正则如下：

/()/
2.28 驼峰表示
String.prototype.camelCase = function () {
        // .*?是非贪婪的匹配，点可以匹配任意字符，星号是前边的字符有0-n个均匹配，问号是则是0-1；
        // (^\w{1}): 用于匹配第一个首字母
        // (.*)：用于匹配任意个的前面的字符，.表示的就是任意字符

        // - param 1: 匹配到的字符串
        // - param 2: 匹配的的子字符串
        // - param 3: 匹配的子字符串
        // - param的位置
        // - param 5: 原始字符串 4: 匹配到的字符串在字符串中

        return this.replace(/(^\w{1})(.*)/g, function (match, g1, g2) {
            return g1.toUpperCase() + g2.toLowerCase();
        });
    }
2.29 模板字符串
// str = 'name: @(name), age:@(age)'
       // data = {name : 'xiugang', age : 18}
       /**
        * 实现一个简单的数据绑定
        * @param str
        * @param data
        * @return {*}
        */
       String.prototype.formateString = function (data) {
           return this.replace(/@\((\w+)\)/g, function (match, key) {
               // 注意这里找到的值必须返回出去(如果是undefined，就是没有数据)
               // 注意：判断一个值的类型是不是undefined，可以通过typeof判断
               console.log(typeof data[key] === 'undefined');
               return data[key] === 'undefined' ? '' : data[key];
           });

       }
2.30 去掉两边的空格
/**
        * 去掉两边的空格
        * @param str
        * @return {*}
        */
       String.prototype.trim = function () {
           return this.replace(/(^\s*)|(\s*$)/g, '');
       }
2.31 获取url参数: 使用replace保存到一个数组里面，然后从数组里面取出数据
'http://www.189dg.com/ajax/sms_query.ashx?undefined&undefined&undefined-06-27&undefined-06-27'
 url.replace(/(\w+)=(\w+)/g, function(a, b, c){
   console.log(a, b, c)
 })
action=smsdetail action smsdetail
sid=22 sid 22
stime=2014 stime 2014
etime=2014 etime 2014


// 封装为一个函数
var url = "http://127.0.0.1/e/action/ShowInfo.php?classid=9&id=2";
function parse_url(_url){
 var pattern = /(\w+)=(\w+)/ig;
 var parames = {};
 url.replace(pattern, function(a, b, c){
   parames[b] = c;
 });
 return parames;
}
var parames = parse_url(url);
alert(parames['classid'] + ", " + parames['id']);



【前端工程化】Webpack常见面试题
https://github.com/fecommunity — Sat, 25 May 2024 12:38:34 GMT
1. webpack3和webpack4的区别？

mode/–mode参数: 新增了mode/--mode参数来表示是开发还是生产（development/production）; production 侧重于打包后的文件大小，development侧重于构建速度
移除loaders，必须使用rules（在3版本的时候loaders和rules 是共存的但是到4的时候只允许使用rules）
移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替
支持es6的方式导入JSON文件，并且可以过滤无用的代码

2. 什么是webpack，和grunt和gulp有什么不同？

Webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。
他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD，ESM，CommonJs)、全局分析。

3. 什么是bundle,什么是chunk，什么是module?

bundle是由webpack打包出来的文件
chunk是指webpack在进行模块的依赖分析的时候，代码分割出来的代码块
module是开发中的单个模块。

4. 什么是Loader?什么是Plugin?

loader是使wenbpack拥有加载和解析非js文件的能力
plugin 可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果

5. Webpack的构建流程？

初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数
开始编译：用合并得到的参数初始化complier对象，加载是所有配置的插件，执行run方法开始编译
确定入口，通过entry找到入口文件
编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理
完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系
输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每个chunk转换成一个单独的文件加载到输出列表
输出完成，确定输出的路径和文件名，把内容写到文件系统中

6. 如何利用webpack来优化前端性能

提取公共代码。webpack4移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替
压缩代码。（development和production）
使用loader的时候，使用exclude排除node_modules中的文件
配置extractTextWebpackPlugin插件
使用TreeShaking插件：Tree-shaking 概念最早由Rollup.js 提出，后来在webpack2中被引入进来，但是这个这一特性能够被支持得益于ES6 modules的静态特性。ES6的模块声明相比于传统CommonJS的同步require有着本质区别。这种modules设计保证了依赖关系是提前确定的，使得静态分析成为了可能，与运行时无关。（除那些引用的但却没有使用的代码）

// 一、.babelrc 中添加
"presets": [
 [
   "es2015", {
     "modules": false,
   }
 ],
 "stage-2"
],
// 或者在babel loader中的options里面添加同样的代码, modules:false 表示的是不对ES6进行处理

// 二、使用uglifyjs-webpack-plugin
plugins: [
    new UglifyJsPlugin(),
...
]

[!NOTE]
想要代码配置tree-shaking,必须采用es6的模块语法，因为es6的模块采用的是静态分析，也就是从字面量对代码进行分析。之前的require是动态分析，必须代码执行到才知道引用的什么模块。

7. 如何可以自动生成webpack配置？
答案： webpack-cli /vue-cli /etc ...脚手架工具
8. webpack-dev-server和http服务器如nginx有什么区别?

webpack-dev-server使用内存来存储webpack开发环境下的打包文件
并且可以使用模块热更新
他比传统的http服务对开发更加简单高效。

9. 什么是模块热更新？
答案:模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。
10. 什么是长缓存？在webpack中如何做到长缓存优化？
答案：

浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。
在webpack中可以在output纵输出的文件指定chunkhash,并且分离经常更新的代码和框架代码。
通过NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。

11. 什么是Tree-shaking?CSS可以Tree-shaking吗？
答案：

Tree-shaking是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。
在webpack中Tree-shaking是通过uglifySPlugin来Tree-shaking JS
Css需要使用Purify-CSS。




【编程题与分析题】继承的多种实现方式
https://github.com/fecommunity — Tue, 21 May 2024 04:32:48 GMT
Javascript 之继承的多种实现方式和优缺点

[!NOTE]
能熟练掌握每种继承方式的手写实现，并知道该继承实现方式的优缺点。

原型链继承
    function Parent() {
      this.name = 'zhangsan';
      this.children = ['A', 'B', 'C'];
    }
    Parent.prototype.getName = function() {
      console.log(this.name);
    }

    function Child() {

    }
    Child.prototype = new Parent();
    var child = new Child();
    console.log(child.getName());

[!NOTE]
主要问题：
    1. 引用类型的属性被所有实例共享(this.children.push('name'))
    2. 在创建Child的实例的时候，不能向Parent传参

借用构造函数（经典继承）
    function Parent(age) {
      this.names = ['zhangsan', 'lisi'];
      this.age = age;

      this.getName = function() {
        return this.names;
      }

      this.getAge = function() {
        return this.age;
      }
    }

    function Child(age) {
      Parent.call(this, age);
    }
    var child = new Child(18);
    child.names.push('haha');
    console.log(child.names);

    var child2 = new Child(20);
    child2.names.push('yaya');
    console.log(child2.names);

[!NOTE]
优点：
    1. 避免了引用类型的属性被所有实例共享
    2. 可以直接在Child中向Parent传参
缺点：
    方法都在构造函数中定义了，每次创建实例都会创建一遍方法

组合继承(原型链继承和经典继承双剑合璧)
    /**
    * 父类构造函数
    * @param name
    * @constructor
    */
    function Parent(name) {
      this.name = name;
      this.colors = ['red', 'green', 'blue'];
    }

    Parent.prototype.getName = function() {
      console.log(this.name);
    }

    // child
    function Child(name, age) {
      Parent.call(this, name);
      this.age = age;
    }

    Child.prototype = new Parent();
    // 校正child的构造函数
    Child.prototype.constructor = Child;

    // 创建实例
    var child1 = new Child('zhangsan', 18);
    child1.colors.push('orange');
    console.log(child1.name, child1.age, child1.colors);    // zhangsan 18 (4) ["red", "green", "blue", "orange"]

    var child2 = new Child('lisi', 28);
    console.log(child2.name, child2.age, child2.colors);    // lisi 28 (3) ["red", "green", "blue"]

[!NOTE]
优点: 融合了原型链继承和构造函数的优点，是Javascript中最常用的继承模式

------ 高级继承的实现
原型式继承
    function createObj(o) {
      function F(){};
      // 关键：将传入的对象作为创建对象的原型
      F.prototype = o;
      return new F();
    }

    // test
    var person = {
        name: 'zhangsan',
        friends: ['lisi', 'wangwu']
    }
    var person1 = createObj(person);
    var person2 = createObj(person);

    person1.name = 'wangdachui';
    console.log(person1.name, person2.name);  // wangdachui, zhangsan

    person1.friends.push('songxiaobao');
    console.log(person2.friends);       // lisi wangwu songxiaobao

[!WARNING]
缺点：
    对于引用类型的属性值始终都会共享相应的值，和原型链继承一样

寄生式继承
    // 创建一个用于封装继承过程的函数，这个函数在内部以某种形式来增强对象
    function createObj(o) {
      var clone = Object.create(o);
      clone.sayName = function() {
        console.log('say HelloWorld');
      }
      return clone;
    }

[!WARNING]
缺点：与借用构造函数模式一样，每次创建对象都会创建一遍方法

寄生组合式继承
基础版本
    function Parent(name) {
      this.name = name;
      this.colors = ['red', 'green', 'blue'];
    }

    Parent.prototype.getName = function() {
      console.log(this, name);
    }

    function Child(name, age) {
      Parent.call(this, name);
      this.age = age;
    }

    // test1:
    // 1. 设置子类实例的时候会调用父类的构造函数
    Child.prototype = new Parent();
    // 2. 创建子类实例的时候也会调用父类的构造函数
    var child1 = new Child('zhangsan', 18);   // Parent.call(this, name);


    // 思考：如何减少父类构造函数的调用次数呢？
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();

    // 思考：下面的这一句话可以吗？
    /* 分析：因为此时Child.prototype和Parent.prototype此时指向的是同一个对象，
            因此部分数据相当于此时是共享的(引用)。
            比如此时增加 Child.prototype.testProp = 1; 
            同时会影响 Parent.prototype 的属性的。
          如果不模拟，直接上 es5 的话应该是下面这样吧
          Child.prototype = Object.create(Parent.prototype);*/
    Child.prototype = Parent.prototype;

    // 上面的三句话可以简化为下面的一句话
    Child.prototype = Object.create(Parent.prototype);



    // test2:
    var child2 = new Child('lisi', 24);
优化版本
    // 自封装一个继承的方法
    function object(o) {
      // 下面的三句话实际上就是类似于：var o = Object.create(o.prototype)
      function F(){};
      F.prototype = o.prototype;
      return new F();
    }

    function prototype(child, parent) {
      var prototype = object(parent.prototype);
      // 维护原型对象prototype里面的constructor属性
      prototype.constructor = child;
      child.prototype = prototype;
    }

    // 调用的时候
    prototype(Child, Parent)
创建对象的方法

字面量创建
构造函数创建
Object.create()

var o1 = {name: 'value'};
var o2 = new Object({name: 'value'});

var M = function() {this.name = 'o3'};
var o3 = new M();

var P = {name: 'o4'};
var o4 = Object.create(P)
原型

JavaScript 的所有对象中都包含了一个 __proto__ 内部属性，这个属性所对应的就是该对象的原型
JavaScript 的函数对象，除了原型 __proto__ 之外，还预置了 prototype 属性
当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 __proto__。




原型链
任何一个实例对象通过原型链可以找到它对应的原型对象，原型对象上面的实例和方法都是实例所共享的。
一个对象在查找以一个方法或属性时，他会先在自己的对象上去找，找不到时，他会沿着原型链依次向上查找。
注意： 函数才有prototype，实例对象只有有proto， 而函数有的proto是因为函数是Function的实例对象
instanceof原理
判断实例对象的proto属性与构造函数的prototype是不是用一个引用。如果不是，他会沿着对象的proto向上查找的，直到顶端Object。
判断对象是哪个类的直接实例
使用对象.construcor直接可判断
构造函数，new时发生了什么？
   var obj  = {}; 
   obj.__proto__ = Base.prototype;
   Base.call(obj);  

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

类
类的声明
// 普通写法
function Animal() {
  this.name = 'name'
}

// ES6
class Animal2 {
  constructor () {
    this.name = 'name';
  }
}
继承
借用构造函数法
在构造函数中 使用Parent.call(this)的方法继承父类属性。
原理： 将子类的this使用父类的构造函数跑一遍 
缺点： Parent原型链上的属性和方法并不会被子类继承
function Parent() {
  this.name = 'parent'
}

function Child() {
  Parent.call(this);
  this.type = 'child'
}
原型链实现继承
原理：把子类的prototype（原型对象）直接设置为父类的实例
缺点：因为子类只进行一次原型更改，所以子类的所有实例保存的是同一个父类的值。
当子类对象上进行值修改时，如果是修改的原始类型的值，那么会在实例上新建这样一个值；
但如果是引用类型的话，他就会去修改子类上唯一一个父类实例里面的这个引用类型，这会影响所有子类实例
function Parent() {
  this.name = 'parent'
  this.arr = [1,2,3]
}

function Child() {
  this.type = 'child'
}

Child.prototype = new Parent();
var c1 = new Child();
var c2 = new Child();
c1.__proto__ === c2.__proto__
组合继承方式
组合构造函数中使用call继承和原型链继承。
原理： 子类构造函数中使用Parent.call(this);的方式可以继承写在父类构造函数中this上绑定的各属性和方法； 
使用Child.prototype = new Parent()的方式可以继承挂在在父类原型上的各属性和方法
缺点：  父类构造函数在子类构造函数中执行了一次，在子类绑定原型时又执行了一次
function Parent() {
  this.name = 'parent'
  this.arr = [1,2,3]
}

function Child() {
  Parent.call(this);
  this.type = 'child'
}

Child.prototype = new Parent();
组合继承方式 优化1：
因为这时父类构造函数的方法已经被执行过了，只需要关心原型链上的属性和方法了
Child.prototype = Parent.prototype;
缺点：

因为原型上有一个属性为constructor，此时直接使用父类的prototype的话那么会导致 实例的constructor为Parent，即不能区分这个实例对象是Child的实例还是父类的实例对象。
子类不可直接在prototype上添加属性和方法，因为会影响父类的原型

注意：这个时候instanseof是可以判断出实例为Child的实例的，因为instanceof的原理是沿着对象的proto判断是否有一个原型是等于该构造函数的原型的。这里把Child的原型直接设置为了父类的原型，那么: 实例.proto === Child.prototype === Child.prototype
组合继承方式 优化2 - 添加中间对象【最通用版本】：
function Parent() {
  this.name = 'parent'
  this.arr = [1,2,3]
}

function Child() {
  Parent.call(this);
  this.type = 'child'
}

Child.prototype = Object.create(Parent.prototype); //提供__proto__
Child.prototype.constrctor = Child;
Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的proto
创建JS对象的多种方式总结
工厂模式

    /**
    * 工厂模式创建对象
    * @param name
    * @return {Object}
    */
    function createPerson(name){
        var o = new Object();
        o.name = name;
        o.getName = function() {
          console.log(this.name);
        }
        return o;
    }
    var person = createPerson('zhangsan');
    console.log(person.__proto__ === Object.prototype); // true

缺点：无法识别当前的对象，因为创建的所有对象实例都指向的是同一个原型

构造函数模式
构造函数创建对象基础版本
    /**
    * 使用构造函数的方式来创建对象
    * @param name
    * @constructor
    */
    function Person(name) {
      this.name = name;
      this.getName = function() {
        console.log(this.name)
      }
    }
    var person = new Person('lisi');
    console.log(person.__proto__ === Person.prototype)

优点：实例剋识别伪一个特定的类型
缺点：每次创建实例对象的时候，每个方法都会被创建一次

构造函数模式优化
    function Person(name) {
      this.name = name;
      this.getName = getName;
    }

    function getName() {
      console.log(this.name);
    }

    var person = new Person('zhangsan');
    console.log(person.__proto__ === Person.prototype);

优点：解决了每个方法都要被重新创建的问题
缺点：不合乎代码规范……

原型模式
原型模式基础版
    function Person(name) {

    }
    Person.prototype.name = 'lisi';
    Person.prototype.getName = function() {
      console.log(this.name);
    }
    var person = new Person();
    console.log(Person.prototype.constructor)       // Person

优点：方法不会被重新创建
缺点：1. 所有的属性和方法所有的实例上面都是共享的；2. 不能初始化参数

原型模式优化版本一
    function Person(name) {

    }
    Person.prototype = {
        name: 'lisi',
        getName: function() {
          console.log(this.name);
        }
    }
    var person = new Person();
    console.log(Person.prototype.constructor)       // Object
    console.log(person.constructor == person.__proto__.constructor) // true

优点：封装性好了一些
缺点：重写了Person的原型prototype属性,丢失了原始的prototype上的constructor属性

原型模式优化版本二
    function Person(name) {

    }
    Person.prototype = {
        constructor: Person,
        name: 'lisi',
        getName: function() {
          console.log(this.name)
        }
    }
    var person = new Person();

优点：实例可以通过constructor属性找到所属的构造函数
缺点：所有的属性和方法都共享，而且不能初始化参数

组合模式
    function Person(name) {
      this.name = name;
    }
    Person.prototype = {
        constructor: Person,
        getName: function() {
          console.log(this.name)
        }
    }
    var person = new Person('zhangsan');

优点：基本符合预期，属性私有，方法共享，是目前使用最广泛的方式
缺点：方法和属性没有写在一起，封装性不是太好

动态原型莫模式
    // 第一种创建思路：
    function Person(name) {
       this.name = name;
       if (typeof this.getName !== 'function') {
           Person.prototype.getName = function() {
             console.log(this.name);
           }
       }
    }
    var person = new Person();

    // 第二种创建的思路：使用对象字面量重写原型上的方法
    function Person(name) {
      this.name = name;
      if (typeof this.getName !== 'function') {
          Person.prototype = {
              constructor: Person,
              getName: function() {
                console.log(this.name)
              }
          }
          return new Person(name);
      }
    }

    var person1 = new Person('zhangsan');
    var person2 = new Person('lisi');
    console.log(person1.getName());
    console.log(person2.getName());

寄生构造函数模式
    /**
    * 寄生构造函数模式
    * @param name
    * @return {Object}
    * @constructor
    */
   function Person(name){
        var o = new Object();
        o.name = name;
        o.getName = function() {
          console.log(this.name)
        }
        return o;
   }
   var person = new Person('zhangsan');
   console.log(person instanceof Person);   // false
   console.log(person instanceof Object);   // true


   // 使用寄生-构造函数-模式来创建一个自定义的数组
   /**
    * 特殊数组的构造器
    * @constructor
    */
   function SpecialArray() {
     var values = new Array();
     /*for (var i = 0, len = arguments.length; i < len; i++) {
         values.push(arguments[i]);
     }*/
     // 开始添加数据(可以直接使用apply的方式来优化代码)
     values.push.apply(values, arguments);

     // 新增的方法
     values.toPipedString = function(){
         return this.join('|');
     }

     return values;
   }

   // 使用new来创建对象
   var colors1 = new SpecialArray('red1', 'green1', 'blue1');
   // 不使用new来创建对象
   var colors2 = SpecialArray('red2', 'green2', 'blue2');

   console.log(colors1, colors1.toPipedString());
   console.log(colors2, colors2.toPipedString());
稳妥构造函数模式
    /**
    * 稳妥的创建对象的方式
    * @param name
    * @return {number}
    * @constructor
    */
    function Person(name){
        var o = new Object();
        o.sayName = function() {
           // 这里有点类似于在一个函数里面使用外部的变量
           // 这里直接输出的是name
          console.log(name);
        }
        return o;
    }
    var person =  Person('lisi');
    person.sayName();
    person.name = 'zhangsan';
    person.sayName();
    console.log(person instanceof Person);      // false
    console.log(person instanceof Object);      // false

[!NOTE]
与寄生的模式的不同点：1. 新创建的实例方法不引用this 2.不使用new操作符调用构造函数
优点：最适合一些安全的环境中使用
缺点：和工厂模式一样，是无法识别对象的所属类型的




【编程题与分析题】通用的forEach函数
https://github.com/fecommunity — Mon, 20 May 2024 19:52:28 GMT
封装实现通用的forEach函数
// v1. 实现一个自己的forEach 函数
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]必须存在(符合条件的类数组对象是一定存在最后一个元素的)

}


// v1. 实现一个遍历的函数
function each(obj, callback) {
    let len, i = 0;

    // 伪数组和数组类型
    if (isArrayLike(obj)) {
        len = obj.length;
        for (; i < len; i++) {
            callback(i, obj[i]);
        }
    }
    // 对象类型
    else {
        for (i in obj) {
            callback(i, obj[i]);
        }
    }

    return obj;
}


// v2. 实现终止循环的功能
function each(obj, callback) {
    let len, i = 0;
    if (isArrayLike(obj)) {
        len = obj.length;
        for (; i < len; i++) {
            // 退出循环的条件
            if (callback(i, obj[i]) === false) {
                break;
            }
        }
    }
    else {
        for (i in obj) {
            // 退出循环的条件
            if (callback(i, obj[i]) === false) {
                break;
            }
        }
    }
}

// v3. 实现this的绑定, 使用call来绑定一个this对象
function each(obj, callback) {
    let len, i = 0;
    if (isArrayLike(obj)) {
        len = obj.length;
        for (; i < len; i++) {
            // 退出循环的条件
            if (callback.call(obj[i], i, obj[i]) === false) {
                break;
            }
        }
    }
    else {
        for (i in obj) {
            // 退出循环的条件
            if (callback.call(obj[i], i, obj[i]) === false) {
                break;
            }
        }
    }
}


[!NOTE]
TODO : for的性能要比封装的each函数性能好，原因是使用了call实际上是会降低性能的




【编程题与分析题】判断两个对象相等
https://github.com/fecommunity — Mon, 20 May 2024 00:24:57 GMT
如何判断两个对象相等？(0.1+0.2问题引申)

[!NOTE]

0.1 + 0.2 = 0.3 吗？
TODO 因为 JavaScript 采用了IEEE_754 浮点数表示法(几乎所有现代编程语言所采用)，这是一种二进制表示法


// v1: 用于过滤掉简单的类型比较，复杂的对象使用deepEq处理
function eq(a, b) {
    // 区别+0 和 -0
    if (a === b) return a !== 0 || 1 / a === 1 / b;

    // 如果有一个为null，退出函数（null === null, true; undefined === undefined, true）
    if (a == null || b == null) return false;

    // 判断NaN(a, b都不和自身相等的话，就为NaN)
    if (a !== a) return b !== b;

    // a是基础数据类型，b是对象的话
    let typeOfA = typeof a;
    if (typeOfA !== 'function' && typeOfA !== 'object' && typeof b !== 'object') {
        return false;
    }

    // 对于其他复杂的对象类型，开始进行进一步的比较
    return deepEq(a, b);
}


// v2: 对象的比较
const toString = Object.prototype.toString;

function isFunction(obj) {
    return toString.call(obj) === '[object Function]';
}

function deepEq(a, b) {
    let className = toString.call(a);
    if (className !== toString.call(b)) return false;

    switch (className) {
        case '[object RegExp]':
        case '[object String]':
            return '' + a === '' + b;
        case '[object Number]':
            // NaN
            if (+a !== +a) return +b !== +b;
            // +0, -0
            return +a === 0 ? 1 / +a === 1 / b : +a === +b;
        case '[object Date]':
        case '[object Boolean]':
            return +a === +b;
    }

    // 构造函数的实例如何判断呢？
    let isArray = className === '[object Array]';
    if (!isArray) {
        // 如果不是数组的话（过滤掉函数的情况）
        if (typeof a != 'object' || typeof b != 'object') return false;

        // 看a，b的构造函数
        let aConstructor = a.constructor;
        let bConstructor = b.constructor;

        // aCtor 和 bCtor 必须都存在并且都不是 Object 构造函数的情况下，aCtor 不等于 bCtor， 那这两个对象就真的不相等啦
        if (
            aConstructor !== bConstructor
            && !(
                isFunction(aConstructor)
                && aConstructor instanceof aConstructor
                && isFunction(bConstructor)
                && bConstructor instanceof bConstructor
            )
            && (
            'constructor' in a
            && 'constructor' in b)
        ) {
            return false;
        }
    }

    // 如果是数组的话
    else if (isArray) {
        let length = a.length;
        if (length !== b.length) return false;

        // 比较数组的每一项是否相同
        while (length--) {
            if (!eq(a[length], b[length])) {
                return false;
            }
        }
    }
    else {
        let keys = Object.keys(a), key;
        length = keys.length;

        if (Object.keys(b).length !== length) return false;

        while (length--) {
            key = keys[length];
            if (!(b.hasOwnProperty(key)) && eq(a[key], b[key])) {
                return false;
            }
        }

    }
    return true;
}

// v3. 循环引用问题？？？
let a, b;

a = { foo: { b: { foo: { c: { foo: null } } } } };
b = { foo: { b: { foo: { c: { foo: null } } } } };
a.foo.b.foo.c.foo = a;
b.foo.b.foo.c.foo = b;


// a 和 b是否相等呢？
/**
 *  aStack 和 bStack，用来储存 a 和 b 递归比较过程中的 a 和 b 的值
 * @param a
 * @param b
 * @param aStack
 * @param bStack
 * @return {boolean|boolean|*}
 */
function eq(a, b, aStack, bStack) {
    if (typeof a === 'number') {
        return a === b;
    }

    return deepEq(a, b, aStack, bStack);
}

function deepEq(a, b, aStack, bStack) {
    aStack = aStack || [];
    bStack = bStack || [];

    let length = aStack.length;

    while (length--) {
        if (aStack[length] === a) {
            return bStack[length] === b;
        }
    }

    aStack.push(a);
    bStack.push(b);

    let keys = Object.keys(a), key;
    length = keys.length;

    while (length--) {
        key = keys[length]

        console.log(a[key], b[key], aStack, bStack)

        if (!eq(a[key], b[key], aStack, bStack)) return false;
    }

    // aStack.pop();
    // bStack.pop();
    return true;
}


console.log(eq(a, b))


// v5. 最终版本
var toString = Object.prototype.toString;

function isFunction(obj) {
    return toString.call(obj) === '[object Function]'
}

function eq(a, b, aStack, bStack) {

    // === 结果为 true 的区别出 +0 和 -0
    if (a === b) return a !== 0 || 1 / a === 1 / b;

    // typeof null 的结果为 object ，这里做判断，是为了让有 null 的情况尽早退出函数
    if (a == null || b == null) return false;

    // 判断 NaN
    if (a !== a) return b !== b;

    // 判断参数 a 类型，如果是基本类型，在这里可以直接返回 false
    var type = typeof a;
    if (type !== 'function' && type !== 'object' && typeof b != 'object') return false;

    // 更复杂的对象使用 deepEq 函数进行深度比较
    return deepEq(a, b, aStack, bStack);
};

function deepEq(a, b, aStack, bStack) {

    // a 和 b 的内部属性 [[class]] 相同时 返回 true
    var className = toString.call(a);
    if (className !== toString.call(b)) return false;

    switch (className) {
        case '[object RegExp]':
        case '[object String]':
            return '' + a === '' + b;
        case '[object Number]':
            if (+a !== +a) return +b !== +b;
            return +a === 0 ? 1 / +a === 1 / b : +a === +b;
        case '[object Date]':
        case '[object Boolean]':
            return +a === +b;
    }

    var areArrays = className === '[object Array]';
    // 不是数组
    if (!areArrays) {
        // 过滤掉两个函数的情况
        if (typeof a != 'object' || typeof b != 'object') return false;

        var aCtor = a.constructor,
            bCtor = b.constructor;
        // aCtor 和 bCtor 必须都存在并且都不是 Object 构造函数的情况下，aCtor 不等于 bCtor， 那这两个对象就真的不相等啦
        if (aCtor !== bCtor && !(isFunction(aCtor) && aCtor instanceof aCtor && isFunction(bCtor) && bCtor instanceof bCtor) && ('constructor' in a && 'constructor' in b)) {
            return false;
        }
    }


    aStack = aStack || [];
    bStack = bStack || [];
    var length = aStack.length;

    // 检查是否有循环引用的部分
    while (length--) {
        // 比较aStack中的每一项数据和bStack中的每一项数据，分别与a, b 比较
        if (aStack[length] === a) {
            return bStack[length] === b;
        }
    }

    aStack.push(a);
    bStack.push(b);

    // 数组判断
    if (areArrays) {

        length = a.length;
        if (length !== b.length) return false;

        while (length--) {
            if (!eq(a[length], b[length], aStack, bStack)) return false;
        }
    }
    // 对象判断
    else {

        var keys = Object.keys(a),
            key;
        length = keys.length;

        if (Object.keys(b).length !== length) return false;
        while (length--) {

            key = keys[length];
            if (!(b.hasOwnProperty(key) && eq(a[key], b[key], aStack, bStack))) return false;
        }
    }

    aStack.pop();
    bStack.pop();
    return true;

}

console.log(eq(0, 0)) // true
console.log(eq(0, -0)) // false

console.log(eq(NaN, NaN)); // true
console.log(eq(Number(NaN), Number(NaN))); // true

console.log(eq('Curly', new String('Curly'))); // true

console.log(eq([1], [1])); // true
console.log(eq({ value: 1 }, { value: 1 })); // true

var a, b;

a = { foo: { b: { foo: { c: { foo: null } } } } };
b = { foo: { b: { foo: { c: { foo: null } } } } };
a.foo.b.foo.c.foo = a;
b.foo.b.foo.c.foo = b;

console.log(eq(a, b)) // true



【编程题与分析题】Promise实现原理
https://github.com/fecommunity — Wed, 15 May 2024 04:38:17 GMT
Promise的模拟实现
const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'

function MyPromise(fn){
  const that = this
  that.state = PENDING
  that.value = null
  that.resolvedCallbacks = []
  that.rejectedCallbacks = []

  function resolve(value) {
    if(that.state === PENDING) {
      that.state = RESOLVED
      that.value = value
      that.resolvedCallbacks.map(cb => cb(that.value))
    }
  }

  function reject(value) {
    if(that.state === PENDING){
      that.state = REJECTED
      that.value = value;
      that.rejectedCallbacks.map(cb => cb(that.value));
    }
  }
  try {
    fn(resolve, reject)
  } catch (e) {
    reject(e)
  }
}

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  const that = this
  //对传入的两个参数做判断，如果不是函数将其转为函数
  onFulfilled = 
    typeof onFulfilled === 'function'
    ? onFulfilled 
    : v => v  // onFulfilled = v => v
  onRejected = 
    typeof onRejected === 'function'
    ? onRejected
    : r => {
      throw r
    }

  if(that.state === PENDING) {
    that.resolvedCallbacks.push(onFulfilled)
    that.rejectedCallbacks.push(onRejected)
  }
  else if(that.state === RESOLVED) {
    onFulfilled(that.value)
  }
  else {
    onRejected(that.value)
  }
}

new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功的回调数据')
  }, 1000)
}).then(value => {
  console.log('Promise.then:  ', value)
})



【JS相关】JS-Web-API
https://github.com/fecommunity — Wed, 15 May 2024 04:29:18 GMT
JS-Web-API
2.1 DOM操作
2.1.1 DOM的本质是什么？

    /*
                   // 告诉浏览器以哪一种类型进行解析
    
        
    
     */

                                          // 以html类型进行解析文档内容
    
        

        
    
2.1.2 DOM操作的常用API有哪些？
节点查找API

document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；
document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法；
document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。
document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。
document.querySelector ：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。
document.querySelectorAll ：返回一个 NodeList ，IE8+(含）。
document.forms ：获取当前页面所有form，返回一个 HTMLCollection ；

节点创建API

createElement创建元素
createTextNode创建文本节点
cloneNode 克隆一个节点
createDocumentFragment

节点修改API

appendChild
insertBefore
insertAdjacentHTML
Element.insertAdjacentElement()
removeChild
replaceChild

节点关系API

1、父关系API

parentNode ：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment；
parentElement ：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null；

2、子关系API

children ：返回一个实时的 HTMLCollection ，子节点都是Element，IE9以下浏览器不支持；
childNodes ：返回一个实时的 NodeList ，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等；
firstChild ：返回第一个子节点，不存在返回null，与之相对应的还有一个 firstElementChild ；
lastChild ：返回最后一个子节点，不存在返回null，与之相对应的还有一个 lastElementChild ；

3、兄弟关系型API

previousSibling ：节点的前一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。
nextSibling ：节点的后一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。
previousElementSibling ：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。
nextElementSibling ：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持。
元素属性型API
1、setAttribute 给元素设置属性：
2、getAttribute
3、hasAttribute
样式操作API（面试考点）

1、直接修改元素的样式
elem.style.color = 'red';  
elem.style.setProperty('font-size', '16px');  
elem.style.removeProperty('color');  

2、动态添加样式规则
var style = document.createElement('style');  
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';  
document.head.appendChild(style);  

3、classList获取样式属性

[!NOTE]
了解dom节点样式(classList)的remove, add, toggle, contains, replace等方法的使用。




4、window.getComputedStyle
通过 element.sytle.xxx 只能获取到内联样式，借助 window.getComputedStyle 可以获取应用到元素上的所有样式，IE8或更低版本不支持此方法。

var style = window.getComputedStyle(element[, pseudoElt]);  
2.1.3 DOM节点的attr和proerty的区别
// proprty------>>>获取nodeName和nodeType（property实际上就是JS对象的一个属性）如：text : 3(#text), p : 1(p)
    console.log(pList[0].nodeName);         // p
    console.log(pList[0].nodeType);         // 1
// attribute------>>> 获取一个HTML标签的属性信息（设置和修改）
    var a = document.getElementsByTagName('a')[0];
    console.log(a.getAttribute('data-origin'));
    console.log(a.getAttribute("href_name"));           // 可以给一个HTML标签设置任意的属性名称，无论这个属性内部是否存在
a.    setAttribute('sex', 'male')
// 区别：
// (JS对象&HTML标签)property实际上是一个普通JS对象本身的基本属性，但是attribute实际上是一个HTML标签上面的属性信息

[!NOTE]
区别：(JS对象&HTML标签)property实际上是一个普通JS对象本身的基本属性，但是attribute实际上是一个HTML标签上面的属性信息

2.2 BOM操作
2.2.1 如何检测浏览器的类型？
var ua = navigator.userAgent;
    var isChrome = ua.indexOf('Chrome');
    console.log('is Chrome?', isChrome > 0, navigator.userAgent);
    console.log('电脑屏幕大小：', screen.width, screen.height)

2.2.2 如何拆解URL的各个部分？
// location
    console.log(location.href);                 // 完整的url地址，http://localhost:8080/JS-Professional/begin/02-%E5%9F%BA%E7%A1%80%E8%BF%9B%E9%98%B6/01-%E4%BB%8E%E5%9F%BA%E7%A1%80%E5%88%B0%E8%BF%9B%E9%98%B6.html?_ijt=i8ctmkc87dvh03tdaf51rn5v1i
    console.log(location.protocol)              // http/https
    console.log(location.host, location.hostname)                  // www.52tech.tech
    console.log(location.pathname);             // host之后的全部内容，JS-Professional/begin/02-%E5%9F%BA%E7%A1%80%E8%BF%9B%E9%98%B6/01-%E4%BB%8E%E5%9F%BA%E7%A1%80%E5%88%B0%E8%BF%9B%E9%98%B6.html
    console.log(location.search);               // search就是？之后的全部内容，?_ijt=i8ctmkc87dvh03tdaf51rn5v1i（包括？）
    console.log(location.hash);                 // #后面的内容（包括#）

2.3 事件操作
2.3.1 编写一个通用的事件监听函数
    function bindEvent(ele, type, selector, fn){
        if (fn == null) {
            fn = selector;
            selector = null;
        }

        // addEventListener 的最后一个参数默认是false, 表示的是事件冒泡，自下向上去捕获事件，true：表示事件捕获，表示事件自外向里的方式
        ele.addEventListener(type, function(e){
            if (selector) {
                // 使用的是代理的方式的话
                if (e.target.matches(selector)){            // 这里需要去判断当前点击的那个对象是不是我点击的那个对象
                    fn.call(e.target, e);
                }
            } else {
                // 不使用代理的话
                fn(e);
            }
        });
    }


    // 这里表示对这个div1 内部的所有的a标签使用事件冒泡
    bindEvent(document.getElementById('div4'), 'click', 'p', function (e) {
        console.log(this.innerHTML + 'hahaah')
    })
版本2：
/**
     * 实现一个通用的事件绑定函数（代码简洁，减少了浏览器的占用）
     * @param element
     * @param type
     * @param selector
     * @param fn
     */
    function bindEvent(element, type, selector, fn) {
        // if (fn === null || fn === undefined)        // 这里可以直接优化为fn == null
        if (fn == null){
            // 只有3个参数的话
            fn = selector;
            selector = null;
        }

        element.addEventListener(type, function (e) {
            var target;
            // 如果selector有的话，说明此事element就是一个代理
            if (selector) {
                target = e.target;
                // 如果当前的target满足这个选择器的话
                // 如果元素被指定的选择器字符串选择，Element.matches()  方法返回true; 否则返回false。
                // document.getElementById('div1').matches('div')    true
                // matches里面的参数实际上是一个HTML标签：a, p, div …………， 内容也是不区分大小写的，有点类似于nodeName 或者nodeType 这样的判断
                if (target.matches(selector)){
                    // 修改this的指向
                    fn.call(target, e);
                }
            }else {
                fn(e);
            }
        });
    }

2.3.2 描述事件冒泡的流程

[!NOTE]
"DOM2级事件”规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。

事件冒泡：
按照DOM树形结构向上冒泡(p --- >>> div --- >>> body --- >>> document), 
事件捕获
（document—>—>—>的顺序进行传播的）


2.3.3 对于一个无线下拉图片的页面，如何给每一个图片绑定一个事件
// 代理（div3里面的所有a标签都需要进行事件的监听）
    var div3 = document.getElementById('div3');
    bindEvent(div3, 'click', function (e) {
        e.preventDefault();
        e.stopPropagation()
        // 可以获取真实触发的那个元素
        var target = e.target;
        console.log(target.nodeName, target.nodeType);      // 每一种页面标签实际上都有一个自己专属的nodeName
        // 这里的目的主要是用于过滤，只处理a标签的事件处理
        if ('A' === target.nodeName) {
            //  如果当前点击的a标签就是自己
            alert(target.innerHTML)
        }
    })

2.4 Ajax操作
2.4.1 手动编写一个ajax，不依赖第三方库
2.4.2 跨域的几种实现方式以及底层的实现原理

服务器端的使用：response.setHeader(Access-Control-Allow-Origin, "http://www.baidu.com, http://www.52tech.tech")允许跨域
使用JSONP

2.4.3 JSONP的实现原理

[!NOTE]
跨域：浏览器有同源策略，不允许ajax访问其他域接口

跨域条件：协议、域名、端口，有一个不同就是跨域


可以跨域加载资源的3个标签：
, , 

这里我们把静态资源放到异域上进行优化加载，经过分析发现，跨域之后window.onerror是无法捕获异常信息的，所以统一返回Script error.，解决方案便是script属性配置crossorigin=”anonymous”并且服务器添加Access-Control-Allow-Origin。


[!NOTE]
一般的CDN网站都会将Access-Control-Allow-Origin配置为*，意思是所有域都可以访问。

1.2 sourceMap

[!NOTE]
解决跨域或者将脚本存放在同域之后，你可能会将代码压缩一下再发布，这时候便出现了压缩后的代码无法找到原始报错位置的问题。

我们用webpack将代码打包压缩成bundle.js：
// webpack.config.js
var path = require('path');

// webpack 4.1.1
module.exports = {
    mode: 'development',
    entry: './client/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'client')
    }
}
最后我们页面引入的脚本文件是这样的：
!function(e){var o={};function n(r){if(o[r])return o[r].exports;var t=o[r]={i:r,l:!1,exports:{}}...;
所以我们看到的异常信息是这样的：

lineNo可能是一个非常小的数字，一般是1，而columnNo会是一个很大的数字，这里是730，因为所有代码都压缩到了一行。

那么该如何解决呢？聪明的童鞋可能已经猜到启用source-map了，没错，我们利用webpack打包压缩后生成一份对应脚本的map文件就能进行追踪了，在webpack中开启source-map功能：
module.exports = {
    ...
    devtool: '#source-map',
    ...
}
打包压缩的文件末尾会带上这样的注释：
!function(e){var o={};function n(r){if(o[r])return o[r].exports;var t=o[r]={i:r,l:!1,exports:{}}...;
//# sourceMappingURL=bundle.js.map
意思是该文件对应的map文件为bundle.js.map。下面便是一个source-map文件的内容，是一个JSON对象：
version: 3, // Source map的版本
sources: ["webpack:///webpack/bootstrap", ...], // 转换前的文件
names: ["installedModules", "__webpack_require__", ...], // 转换前的所有变量名和属性名
mappings: "aACA,IAAAA,KAGA,SAAAC...", // 记录位置信息的字符串
file: "bundle.js", // 转换后的文件名
sourcesContent: ["// The module cache var installedModules = {};..."], // 源代码
sourceRoot: "" // 转换前的文件所在的目录
1.3 MVVM框架

现在越来越多的项目开始使用前端框架，在MVVM框架中如果你一如既往的想使用window.onerror来捕获异常，那么很可能会竹篮打水一场空，或许根本捕获不到，因为你的异常信息被框架自身的异常机制捕获了。

比如Vue 2.x中我们应该这样捕获全局异常：
Vue.config.errorHandler = function (err, vm, info) {
    let { 
        message, // 异常信息
        name, // 异常名称
        script,  // 异常脚本url
        line,  // 异常行号
        column,  // 异常列号
        stack  // 异常堆栈信息
    } = err;

    // vm为抛出异常的 Vue 实例
    // info为 Vue 特定的错误信息，比如错误所在的生命周期钩子
}

目前script、line、column这3个信息打印出来是undefined，不过这些信息在stack中都可以找到，可以通过正则匹配去进行获取，然后进行上报。


同样的在react也提供了异常处理的方式，在 React 16.x 版本中引入了 Error Boundary：

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    componentDidCatch(error, info) {
        this.setState({ hasError: true });

        // 将异常信息上报给服务器
        logErrorToMyService(error, info); 
    }

    render() {
        if (this.state.hasError) {
            return '出错了';
        }

        return this.props.children;
    }
}
然后我们就可以这样使用该组件：

    

详见官方文档：Error Handling in React 16

1.4 异常上报
1.4.1 sourceMap解析

[!NOTE]
其实source-map格式的文件是一种数据类型，既然是数据类型那么肯定有解析它的办法，目前市面上也有专门解析它的相应工具包，在浏览器环境或者node环境下比较流行的是一款叫做’source-map’的插件。

通过require该插件，前端浏览器可以对map文件进行解析，但因为前端解析速度较慢，所以这里不做推荐，我们还是使用服务器解析。如果你的应用有node中间层，那么你完全可以将异常信息提交到中间层，然后解析map文件后将数据传递给后台服务器，中间层代码如下：
const express = require('express');
const fs = require('fs');
const router = express.Router();
const fetch = require('node-fetch');
const sourceMap = require('source-map');
const path = require('path');
const resolve = file => path.resolve(__dirname, file);

// 定义post接口
router.post('/errorMsg/', function(req, res) {
    let error = req.body; // 获取前端传过来的报错对象
    let url = error.scriptURI; // 压缩文件路径

    if (url) {
        let fileUrl = url.slice(url.indexOf('client/')) + '.map'; // map文件路径

        // 解析sourceMap
        let smc = new sourceMap.SourceMapConsumer(fs.readFileSync(resolve('../' + fileUrl), 'utf8')); // 返回一个promise对象

        smc.then(function(result) {

            // 解析原始报错数据
            let ret = result.originalPositionFor({
                line: error.lineNo, // 压缩后的行号
                column: error.columnNo // 压缩后的列号
            });

            let url = ''; // 上报地址

            // 将异常上报至后台
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    errorMessage: error.errorMessage, // 报错信息
                    source: ret.source, // 报错文件路径
                    line: ret.line, // 报错文件行号
                    column: ret.column, // 报错文件列号
                    stack: error.stack // 报错堆栈
                })
            }).then(function(response) {
                return response.json();
            }).then(function(json) {
                res.json(json);         
            });
        })
    }
});

module.exports = router;
这里我们通过前端传过来的异常文件路径获取服务器端map文件地址，然后将压缩后的行列号传递给sourceMap返回的promise对象进行解析，通过originalPositionFor方法我们能获取到原始的报错行列号和文件地址，最后通过ajax将需要的异常信息统一传递给后台存储，完成异常上报。



【计算机网络】TCP
https://github.com/fecommunity — Sat, 11 May 2024 14:31:08 GMT
TCP
1. TCP概念相关

[!NOTE]
TCP（Transmission Control Protocol），又叫传输控制协议。
TCP协议是面向连接的，可靠的，基于字节流的传输协议。在基于 TCP 进行通信时，通信双方需要先建立一个 TCP 连接，建立连接需要经过三次握手，断开连接的时候需要经过四次挥手。

1.1 TCP头部

对于 TCP 头部来说，以下几个字段是很重要的:

序列号 （Sequence number），这个序号保证了 TCP 传输的报文都是有序的，对端可以通过序号顺序的拼接报文

确认号 （Acknowledgement Number），这个序号表示数据接收端期望接收的下一个字节的编号是多少，同时也表示上一个序号的数据已经收到

窗口大小 （Window Size），表示还能接收多少字节的数据，用于流量控制

标识符

ACK=1 ：该字段为一表示确认号字段有效。此外，TCP 还规定在连接建立后传送的所有报文段都必须把 ACK 置为一。
SYN=1：当SYN=1，ACK=0时，表示当前报文段是一个连接请求报文。当SYN=1，ACK=1时，表示当前报文段是一个同意建立连接的应答报文。
FIN=1：该字段为一表示此报文段是一个释放连接的请求报文。
URG=1 :  该字段为一表示本数据报的数据部分包含紧急信息，是一个高优先级数据报文，此时紧急指针有效。紧急数据一定位于当前数据包数据部分的最前面，紧急指针标明了紧急数据的尾部。
PSH=1 ：该字段为一表示接收端应该立即将数据 push 给应用层，而不是等到缓冲区满后再提交。
RST=1：该字段为一表示当前 TCP 连接出现严重问题，可能需要重新建立 TCP 连接，也可以用于拒绝非法的报文段和拒绝连接请求。



1.2 三次握手

简单的说：

第一次握手

SYN = 1， seq(client) = x
客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态。


第二次握手

SYN = 1，ACK = 1，确认序号 = x+1, seq(server) = y
服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态


第三次握手

ACK = 1，确认序号 = y+1, seq(client) = x + 1
客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。



1.3 为什么不用两次握手？

[!NOTE]
主要是为了防止已经失效的连接请求报文突然又传送到了服务器，从而产生错误。

假设有这样一种场景, 客户端发送的第一个请求连接并且没有丢失，但是被滞留的时间太长。由于TCP的客户端迟迟没有收到确认报文，以为服务器没有收到，此时重新向服务器发送报文。
而现在第一个请求到达服务端，这个请求已经报废了，但是又会建立连接。
如果采用的是三次握手，就算是那一次失效的报文传送过来了，服务端接受到了那条失效报文并且回复了确认报文，但是客户端不会再次发出确认。由于服务器收不到确认，就知道客户端并没有请求连接。
1.3 为什么建立连接是三次握手，四次不可以吗
第一次握手：
Client什么都不能确认   
Server确认了对方发送正常
第二次握手：
Client确认：自己发送/接收正常，对方发送/接收正常
Server确认：自己接收正常 ，对方发送正常
第三次握手：
Client确认：自己发送/接收正常， 对方发送/接收正常
Server确认：自己发送/接收正常，对方发送/接收正常
所以通过三次握手确认双方收发功能都正常，四次也可以但是显得比较多余
1.4 四次挥手

TCP 是全双工的，在断开连接时两端都需要发送 FIN 和 ACK。

第一次挥手

若客户端 A 认为数据发送完成，则它需要向服务端 B 发送连接释放请求。


第二次挥手

B 收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，表示 A 到 B 的连接已经释放，不接收 A 发的数据了。但是因为 TCP 连接时双向的，所以 B 仍旧可以发送数据给 A。


第三次挥手

B 如果此时还有没发完的数据会继续发送，完毕后会向 A 发送连接释放请求，然后 B 便进入LAST-ACK状态。
PS：通过延迟确认的技术（通常有时间限制，否则对方会误认为需要重传），可以将第二次和第三次握手合并，延迟 ACK 包的发送。


第四次挥手

A 收到释放请求后，向 B 发送确认应答，此时 A 进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有 B 的重发请求的话，就进入 CLOSED 状态。当 B 收到确认应答后，也便进入 CLOSED 状态。



1.5 为什么 A 要进入 TIME-WAIT 状态，等待 2MSL 时间后才进入 CLOSED 状态？
为了保证 B 能收到 A 的确认应答。若 A 发完确认应答后直接进入 CLOSED 状态，如果确认应答因为网络问题一直没有到达，那么会造成 B 不能正常关闭。

如果A发送完ACK应答之后直接进入CLOSED状态的话，如果因为网络延迟问题这个应答丢失或在2MSL内还没有到达B的话，那么B等待超时之后就会重新发送一个FIN包，但是此时A已经关闭了，永远得不到A的响应，从而导致B永远不能正常关闭

1.6 为什么需要TIME_WAIT状态
1.6.1 为实现TCP这种全双工连接的可靠释放
这样可让TCP再次发送最后的ACK以防这个ACK丢失(另一端超时并重发最后的FIN)这种2MSL等待的另一个结果是这个TCP连接在2MSL等待期间，定义这个连接的插口(客户的IP地址和端口号，服务器的IP地址和端口号)不能再被使用。这个连接只能在2MSL结束后才能再被使用。
1.6.2 为使旧的数据包在网络因过期而消失
每个具体TCP实现必须选择一个报文段最大生存时间MSL。它是任何报文段被丢弃前在网络内的最长时间。
1.7 为什么建立连接是三次握手，关闭连接确是四次挥手呢？

建立连接的时候， 服务器在LISTEN状态下，收到建立连接请求的SYN报文后，把ACK和SYN放在一个报文里发送给客户端。

而关闭连接时，服务器收到对方的FIN报文时，仅仅表示对方不再发送数据了但是还能接收数据，而自己也未必全部数据都发送给对方了


2. ARQ （超时重传）协议

[!NOTE]
通过确认和超时机制保证了数据的正确送达，ARQ 协议包含停止等待 ARQ 和连续 ARQ

2.1 停止等待 ARQ
正常传输过程
只要 A 向 B 发送一段报文，都要停止发送并启动一个定时器，等待对端回应，在定时器时间内接收到对端应答就取消定时器并发送下一段报文。
当报文丢失或出错：
报文传输的过程中丢包： 这时候超过定时器设定的时间就会再次发送丢包的数据直到对端响应，所以需要每次都备份发送的数据。
传输过程中报文出错： 对端会抛弃该报文并等待 A 端重传。
PS：一般定时器设定的时间都会大于一个 RTT 的平均时间。
ACK 超时或丢失：
对端传输的应答也可能出现丢失或超时的情况。那么超过定时器时间 A 端照样会重传报文。这时候 B 端收到相同序号的报文会丢弃该报文并重传应答，直到 A 端发送下一个序号的报文。
这个协议的缺点就是传输效率低，在良好的网络环境下每次发送报文都得等待对端的 ACK 。
2.2 连续 ARQ
在连续 ARQ 中，发送端拥有一个发送窗口，可以在没有收到应答的情况下持续发送窗口内的数据，这样相比停止等待 ARQ 协议来说减少了等待时间，提高了效率。
2.2.1 累计确认
连续 ARQ 中，接收端会持续不断收到报文。如果和停止等待 ARQ 中接收一个报文就发送一个应答一样，就太浪费资源了。通过累计确认，可以在收到多个报文以后统一回复一个应答报文。报文中的 ACK 可以用来告诉发送端这个序号之前的数据已经全部接收到了，下次请发送这个序号 + 1的数据。
但是累计确认也有一个弊端。在连续接收报文时，可能会遇到接收到序号 5 的报文后，并未接到序号 6 的报文，然而序号 7 以后的报文已经接收。遇到这种情况时，ACK 只能回复 6，这样会造成发送端重复发送数据，这种情况下可以通过 Sack 来解决。
2.2.2 滑动窗口
上面讲到了发送窗口。在 TCP 中，两端都维护着窗口：分别为发送端窗口和接收端窗口。
发送端窗口包含已发送但未收到应答的数据和可以发送但是未发送的数据。

发送端窗口是由接收窗口剩余大小决定的。接收方会把当前接收窗口的剩余大小写入应答报文，发送端收到应答后根据该值和当前网络拥塞情况设置发送窗口的大小，所以发送窗口的大小是不断变化的。
当发送端接收到应答报文后，会随之将窗口进行滑动
滑动窗口实现了流量控制。接收方通过报文告知发送方还可以发送多少数据，从而保证接收方能够来得及接收数据。

Zero 窗口
在发送报文的过程中，可能会遇到对端出现零窗口的情况。在该情况下，发送端会停止发送数据，并启动 persistent timer 。该定时器会定时发送请求给对端，让对端告知窗口大小。在重试次数超过一定次数后，可能会中断 TCP 链接。
3. 拥塞处理

[!NOTE]
拥塞处理和流量控制不同，后者是作用于接收方，保证接收方来得及接受数据。而前者是作用于网络，防止过多的数据拥塞网络，避免出现网络负载过大的情况。

拥塞处理包括了四个算法，分别为：慢开始，拥塞避免，快速重传，快速恢复。

3.1 慢开始算法

[!NOTE]
慢开始算法，顾名思义，就是在传输开始时将发送窗口从1开始指数级扩大，从而避免一开始就传输大量数据导致网络拥塞。

慢开始算法步骤具体如下

连接初始设置拥塞窗口（Congestion Window） 为 1 MSS（一个分段的最大数据量）
每过一个 RTT (往返时延) 就将窗口大小乘二
指数级增长肯定不能没有限制的，所以有一个阈值限制，当窗口大小大于阈值时就会启动拥塞避免算法

3.2 拥塞避免算法

[!NOTE]
拥塞避免算法相比简单点，每过一个 RTT 窗口大小只加一，这样能够避免指数级增长导致网络拥塞，慢慢将大小调整到最佳值。


在传输过程中可能定时器超时的情况，这时候 TCP 会认为网络拥塞了，会马上进行以下步骤：

将阈值设为当前拥塞窗口的一半
将拥塞窗口设为 1 MSS
启动拥塞避免算法

3.3 快速重传
快速重传一般和快恢复一起出现。一旦接收端收到的报文出现失序的情况，接收端只会回复最后一个顺序正确的报文序号（没有 Sack 的情况下）。如果收到三个重复的 ACK，无需等待定时器超时再重发而是启动快速重传。具体算法分为两种：
4. TCP 小结
4.1 为什么TCP这么复杂?

[!NOTE]
因为既要保证可靠性, 同时又要尽可能提高性能

4.1.1 保证可靠性的机制

校验和
序列号(按序到达)
确认应答
超时重传
连接管理
流量控制
拥塞控制

4.1.2 提高性能的机制

滑动窗口
快速重传
延迟应答
捎带应答

4.2 定时器

超时重传定时器
保活定时器
TIME_WAIT定时器

4.3 基于 TCP 的应用层协议

HTTP
HTTPS
SSH
Telnet
FTP
SMTP




【性能优化】重绘回流
https://github.com/fecommunity — Tue, 07 May 2024 20:46:35 GMT
重绘回流过程
1. 浏览器的渲染过程，DOM 树和渲染树的区别？


HTML 经过解析生成 DOM树； CSS经过解析生成　Style Rules。 二者一结合生成了Render Tree。
通过layout计算出DOM要显示的宽高、位置、颜色。
最后渲染在界面上，用户就看到了

2. 浏览器的渲染过程

解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js
CSS 文件下载完成，开始构建 CSSOM(CSS 树)
CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)
布局(Layout)：计算出每个节点在屏幕中的位置
显示(Painting)：通过显卡把页面画到屏幕上

3. DOM 树 和 渲染树 的区别?

DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素
渲染树不包括 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性

4. CSS会阻塞DOM解析吗？

对于一个HTML文档来说，不管是内联还是外链的css，都会阻碍后续的dom渲染，但是不会阻碍后续dom的解析。

当css文件放在中时，虽然css解析也会阻塞后续dom的渲染，但是在解析css的同时也在解析dom，所以等到css解析完毕就会逐步的渲染页面了。


5. 重绘和回流（重排）的区别和关系？

重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘
回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流
注意：JS 获取 Layout 属性值（如：offsetLeft、scrollTop、getComputedStyle 等）也会引起回流。因为浏览器需要通过回流计算最新值
回流必将引起重绘，而重绘不一定会引起回流

5.1 触发reflow

width/height/border/margin/padding的修改，如width=778px；
动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；
appendChild等DOM元素操作；
font类style的修改；
background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
scroll页面，这个不可避免；
resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。
读取元素的属性（这个无法理解，但是技术达人是这么说的，那就把它当做定理吧）：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；

5.2 触发repaint

color的修改，如color=#ddd；
text-align的修改，如text-align=center；
a:hover也会造成重绘。
:hover引起的颜色等不导致页面回流的style变动。

6. 如何最小化重绘(repaint)和回流(reflow)？
6.1 性能问题
以下操作会导致性能问题：

改变 window 大小
改变字体
添加或删除样式
文字改变
定位或者浮动
盒模型

3.2 解决方法

需要要对DOM元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示
需要创建多个 DOM 节点时，使用 DocumentFragment 创建完后一次性的加入 document，或使用字符串拼接方式构建好对应HTML后再使用innerHTML来修改页面
缓存 Layout 属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
避免用 table 布局（table 元素一旦触发回流就会导致 table 里所有的其它元素回流）
避免使用 css 表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx




【JS相关】原型
https://github.com/fecommunity — Tue, 07 May 2024 16:31:28 GMT
原型
1. Javascript继承
1.1 原型链继承
    function Parent() {
      this.name = 'zhangsan';
      this.children = ['A', 'B', 'C'];
    }
    Parent.prototype.getName = function() {
      console.log(this.name);
    }

    function Child() {

    }
    Child.prototype = new Parent();
    var child = new Child();
    console.log(child.getName());

[!NOTE]
主要问题：


引用类型的属性被所有实例共享(this.children.push('name'))
在创建Child的实例的时候，不能向Parent传参

1.2 借用构造函数（经典继承）
    function Parent(age) {
      this.names = ['zhangsan', 'lisi'];
      this.age = age;

      this.getName = function() {
        return this.names;
      }

      this.getAge = function() {
        return this.age;
      }
    }

    function Child(age) {
      Parent.call(this, age);
    }
    var child = new Child(18);
    child.names.push('haha');
    console.log(child.names);

    var child2 = new Child(20);
    child2.names.push('yaya');
    console.log(child2.names);

[!NOTE]
优点：


避免了引用类型的属性被所有实例共享
可以直接在Child中向Parent传参


[!DANGER]
缺点：


方法都在构造函数中定义了，每次创建实例都会创建一遍方法

1.3 组合继承(原型链继承和经典继承双剑合璧)
    /**
    * 父类构造函数
    * @param name
    * @constructor
    */
    function Parent(name) {
      this.name = name;
      this.colors = ['red', 'green', 'blue'];
    }

    Parent.prototype.getName = function() {
      console.log(this.name);
    }

    // child
    function Child(name, age) {
      Parent.call(this, name);
      this.age = age;
    }

    Child.prototype = new Parent();
    // 校正child的构造函数
    Child.prototype.constructor = Child;

    // 创建实例
    var child1 = new Child('zhangsan', 18);
    child1.colors.push('orange');
    console.log(child1.name, child1.age, child1.colors);    // zhangsan 18 (4) ["red", "green", "blue", "orange"]

    var child2 = new Child('lisi', 28);
    console.log(child2.name, child2.age, child2.colors);    // lisi 28 (3) ["red", "green", "blue"]

[!NOTE]
优点: 融合了原型链继承和构造函数的优点，是Javascript中最常用的继承模式

2. 多种方式实现继承及优缺点总结
2.1  原型式继承
    function createObj(o) {
      function F(){};
      // 关键：将传入的对象作为创建对象的原型
      F.prototype = o;
      return new F();
    }

    // test
    var person = {
        name: 'zhangsan',
        friends: ['lisi', 'wangwu']
    }
    var person1 = createObj(person);
    var person2 = createObj(person);

    person1.name = 'wangdachui';
    console.log(person1.name, person2.name);  // wangdachui, zhangsan

    person1.friends.push('songxiaobao');
    console.log(person2.friends);       // lisi wangwu songxiaobao

[!DANGER]
缺点：


对于引用类型的属性值始终都会共享相应的值，和原型链继承一样

2.2 寄生式继承
    // 创建一个用于封装继承过程的函数，这个函数在内部以某种形式来增强对象
    function createObj(o) {
      var clone = Object.create(o);
      clone.sayName = function() {
        console.log('say HelloWorld');
      }
      return clone;
    }

[!DANGER]
缺点：与借用构造函数模式一样，每次创建对象都会创建一遍方法

2.3 寄生组合式继承
2.3.1 基础版本
    function Parent(name) {
      this.name = name;
      this.colors = ['red', 'green', 'blue'];
    }

    Parent.prototype.getName = function() {
      console.log(this, name);
    }

    function Child(name, age) {
      Parent.call(this, name);
      this.age = age;
    }

    // test1:
    // 1. 设置子类实例的时候会调用父类的构造函数
    Child.prototype = new Parent();
    // 2. 创建子类实例的时候也会调用父类的构造函数
    var child1 = new Child('zhangsan', 18);   // Parent.call(this, name);


    // 思考：如何减少父类构造函数的调用次数呢？
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();

    // 思考：下面的这一句话可以吗？
    /* 分析：因为此时Child.prototype和Parent.prototype此时指向的是同一个对象，
            因此部分数据相当于此时是共享的(引用)。
            比如此时增加 Child.prototype.testProp = 1; 
            同时会影响 Parent.prototype 的属性的。
          如果不模拟，直接上 es5 的话应该是下面这样吧
          Child.prototype = Object.create(Parent.prototype);*/
    Child.prototype = Parent.prototype;

    // 上面的三句话可以简化为下面的一句话
    Child.prototype = Object.create(Parent.prototype);



    // test2:
    var child2 = new Child('lisi', 24);
2.3.2 优化版本
    // 自封装一个继承的方法
    function object(o) {
      // 下面的三句话实际上就是类似于：var o = Object.create(o.prototype)
      function F(){};
      F.prototype = o.prototype;
      return new F();
    }

    function prototype(child, parent) {
      var prototype = object(parent.prototype);
      // 维护原型对象prototype里面的constructor属性
      prototype.constructor = child;
      child.prototype = prototype;
    }

    // 调用的时候
    prototype(Child, Parent)
3. JS创建对象的方法

字面量创建
构造函数创建
Object.create()

var o1 = {name: 'value'};
var o2 = new Object({name: 'value'});

var M = function() {this.name = 'o3'};
var o3 = new M();

var P = {name: 'o4'};
var o4 = Object.create(P)
4. 原型和原型链
4.1 原型

JavaScript 的所有对象中都包含了一个 __proto__ 内部属性，这个属性所对应的就是该对象的原型
JavaScript 的函数对象，除了原型 __proto__ 之外，还预置了 prototype 属性
当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 __proto__。


4.2 原型链

任何一个实例对象通过原型链可以找到它对应的原型对象，原型对象上面的实例和方法都是实例所共享的。

一个对象在查找以一个方法或属性时，他会先在自己的对象上去找，找不到时，他会沿着原型链依次向上查找。



[!NOTE]
注意： 函数才有prototype，实例对象只有有proto， 而函数有的proto是因为函数是Function的实例对象

4.3 instanceof原理

[!NOTE]
判断实例对象的proto属性与构造函数的prototype是不是用一个引用。如果不是，他会沿着对象的proto向上查找的，直到顶端Object。

4.4 判断对象是哪个类的直接实例

[!NOTE]
使用对象.construcor直接可判断

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

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

4.6 类
// 普通写法
function Animal() {
  this.name = 'name'
}

// ES6
class Animal2 {
  constructor () {
    this.name = 'name';
  }
}



【前端面试题】JS高级
https://github.com/fecommunity — Sat, 04 May 2024 01:21:15 GMT
JS高级知识
1、    JQuery一个对象可以同时绑定多个事件，这是如何实现的？
jQuery可以给一个对象同时绑定多个事件，低层实现方式是使用addEventListner或attachEvent兼容不同的浏览器实现事件的绑定，这样可以给同一个对象注册多个事件。
2、    知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
Webkit是浏览器引擎，包括html渲染和js解析功能，手机浏览器的主流内核，与之相对应的引擎有Gecko（Mozilla Firefox 等使用）和Trident（也称MSHTML，IE 使用）。 
对于浏览器的调试工具要熟练使用，主要是页面结构分析，后台请求信息查看，js调试工具使用，熟练使用这些工具可以快速提高解决问题的效率
3、    如何测试前端代码? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
了解BDD行为驱动开发与TDD测试驱动开发已经单元测试相关概念，
4、    前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
Web 模板引擎是为了使用户界面与业务数据（内容）分离而产生的，
Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。
Underscore封装了常用的JavaScript对象操作方法，用于提高开发效率。
Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。
5、    简述一下 Handlebars 的基本用法？
没有用过的话说出它是干什么的即可
6、    简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？
学习技术不仅要会用，还有熟悉它的实现机制，这样在开发中遇到问题时才能更好的解决
7、    用js实现千位分隔符?
原生js的熟练度，实践经验，实现思路
8、    检测浏览器版本版本有哪些方式？
IE与标准浏览器判断，IE不同版本的判断，userAgent  var ie = /@cc_on !@/false;
9、    我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获
对两种事件模型的理解
10、实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制
•    考察点1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚
•    考察点2：是否知道如何判断一个变量是什么类型的
•    考察点3：递归算法的设计
    // 方法一：
Object.prototype.clone = function(){
   var o = this.constructor === Array ? [] : {};
   for(var e in this){
      o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
   }
   return o;
}
//方法二：
     /**
     * 克隆一个对象
     * @param Obj
     * @returns
     */
    function clone(Obj) {   
        var buf;   
        if (Obj instanceof Array) {   
            buf = [];//创建一个空的数组 
            var i = Obj.length;   
            while (i--) {   
                buf[i] = clone(Obj[i]);   
            }   
            return buf;    
        }else if (Obj instanceof Object){   
            buf = {};//创建一个空对象 
            for (var k in Obj) { //为这个对象添加新的属性 
                buf[k] = clone(Obj[k]);   
            }   
            return buf;   
        }else{ //普通变量直接赋值
            return Obj;   
        }   
    }
11、如何消除一个数组里面重复的元素？
    var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
        function deRepeat(){
            var newArr=[];
            var obj={};
            var index=0;
            var l=arr.length;
            for(var i=0;i

12、
小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：
    function Dog() {
      this.wow = function() {
               alert(’Wow’);
      }
      this.yelp = function() {
              this.wow();
      }
}
小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。（继承，原型，setInterval）
    function MadDog() {
    this.yelp = function() {
          var self = this;          
          setInterval(function() {
                self.wow();      
          }, 500);
      }
}
MadDog.prototype = new Dog();         
//for test
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();
13、下面这个ul，如何点击每一列的时候alert其index?（闭包）

这是第一条
这是第二条
这是第三条



14、编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。
/***
 @param selector {String} 传入的CSS选择器。*
 @return {Array}*/
var query = function(selector) {
var reg = /^(#)?(\.)?(\w+)$/img;
var regResult = reg.exec(selector);
var result = [];
//如果是id选择器
if(regResult[1]) {
if(regResult[3]) {
if(typeof document.querySelector === "function") {
result.push(document.querySelector(regResult[3]));
    }else {
      result.push(document.getElementById(regResult[3]));
    }
   }
   }
   //如果是class选择器
   else if(regResult[2]) {
      if(regResult[3]) {
       if(typeof document.getElementsByClassName === 'function') {
         var doms = document.getElementsByClassName(regResult[3]);
         if(doms) {
            result = converToArray(doms);
         }
       }
     //如果不支持getElementsByClassName函数
     else {
        var allDoms = document.getElementsByTagName("*") ;
       for(var i = 0, len = allDoms.length; i < len; i++) {
         if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) {
           result.push(allDoms[i]);
          }
       }
      }
      }
}
  //如果是标签选择器
  else if(regResult[3]) {
    var doms = document.getElementsByTagName(regResult[3].toLowerCase());
    if(doms) {
      result = converToArray(doms);
    }
  }
  return result;
  }
  function converToArray(nodes){
    var array = null;         
    try{        
      array = Array.prototype.slice.call(nodes,0);//针对非IE浏览器         
     }catch(ex){
       array = new Array();         
     for( var i = 0 ,len = nodes.length; i < len ; i++ ) { 
      array.push(nodes[i])         
     }
  }      
  return array;
}
15、请评价以下代码并给出改进意见。
    if(window.addEventListener){
    var addListener = function(el,type,listener,useCapture){
        el.addEventListener(type,listener,useCapture);
  };
}
else if(document.all){
    addListener = function(el,type,listener){
        el.attachEvent("on"+type,function(){
          listener.apply(el);
      });
   }  
}
•    　不应该在if和else语句中声明addListener函数，应该先声明；
•    　不需要使用window.addEventListener或document.all来进行检测浏览器，应该使用能力检测；
•    　由于attachEvent在IE中有this指向问题，所以调用它时需要处理一下
改进如下：
function addEvent(elem, type, handler){
　　if(elem.addEventListener){
　　　　elem.addEventListener(type, handler, false);
　　}else if(elem.attachEvent){
　　　　elem['temp' + type + handler] = handler;
　　　　elem[type + handler] = function(){
　　　　elem['temp' + type + handler].apply(elem);
　　};
　　elem.attachEvent('on' + type, elem[type + handler]);　
  }else{
　　elem['on' + type] = handler;
　　}
}
16、给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：
addSpace(“hello world”) // -> ‘h e l l o  w o r l d’
    String.prototype.spacify = function(){
      return this.split('').join(' ');
    };
接着上述问题答案提问，
1）直接在对象的原型上添加方法是否安全？尤其是在Object对象上。(这个我没能答出？希望知道的说一下。)　
2）函数声明与函数表达式的区别？
答案：在js中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。
17、定义一个log方法，让它可以代理console.log的方法。
可行的方法一：
function log(msg)　{
    console.log(msg);
}
log("hello world!") // hello world!
如果要传入多个参数呢？显然上面的方法不能满足要求，所以更好的方法是：
function log(){
    console.log.apply(console, arguments);
};
到此，追问apply和call方法的异同。
对于apply和call两者在作用上是相同的，即是调用一个对象的一个方法，以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。 如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3]) 。
18、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
假设接第八题题干，我们要给每个log方法添加一个”(app)”前缀，比如’hello world!’ ->’(app)hello world!’。方法如下：
function log(){
      var args = Array.prototype.slice.call(arguments);  //为了使用unshift数组方法，将argument转化为真正的数组
      args.unshift('(app)');
      console.log.apply(console, args);
    };
19、对作用域上下文和this的理解，看下列代码：
var User = {
  count: 1,
  getCount: function() {
    return this.count;
  }
};
console.log(User.getCount());  // what?
var func = User.getCount;
console.log(func());  // what?
问两处console输出什么？为什么？
答案是1和undefined。
func是在winodw的上下文中被执行的，所以会访问不到count属性。
继续追问，那么如何确保Uesr总是能访问到func的上下文，即正确返回1。正确的方法是使用Function.prototype.bind。兼容各个浏览器完整代码如下：
Function.prototype.bind = Function.prototype.bind || function(context){
   var self = this;
   return function(){
      return self.apply(context, arguments);
   };
}
var func = User.getCount.bind(User);
console.log(func());
20、原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？
window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
/*
 * 传递函数给whenReady()
 * 当文档解析完毕且为操作准备就绪时，函数作为document的方法调用
 */
var whenReady = (function() {               //这个函数返回whenReady()函数
    var funcs = [];             //当获得事件时，要运行的函数
    var ready = false;          //当触发事件处理程序时,切换为true
    //当文档就绪时,调用事件处理程序
    function handler(e) {
        if(ready) return;       //确保事件处理程序只完整运行一次
        //如果发生onreadystatechange事件，但其状态不是complete的话,那么文档尚未准备好
        if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {
            return;
        }
        //运行所有注册函数
        //注意每次都要计算funcs.length
        //以防这些函数的调用可能会导致注册更多的函数
        for(var i=0; i

如果上述代码十分难懂，下面这个简化版：
function ready(fn){
    if(document.addEventListener) {//标准浏览器
        document.addEventListener('DOMContentLoaded', function() {
            //注销事件, 避免反复触发
            document.removeEventListener('DOMContentLoaded',arguments.callee, false);
            fn();//执行函数
        }, false);
    }else if(document.attachEvent) {//IE
        document.attachEvent('onreadystatechange', function() {
            if(document.readyState == 'complete') {
                document.detachEvent('onreadystatechange', arguments.callee);
                fn();//函数执行
            }
        });
    }
};
21、（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）
回答出概念即可，下面是几个要点

给需要拖拽的节点绑定mousedown, mousemove, mouseup事件

mousedown事件触发后，开始拖拽

mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置

mouseup时，拖拽结束

需要注意浏览器边界的情况
22、请实现如下功能
function setcookie(name,value,days){  //给cookie增加一个时间变量
　　var exp = new Date(); 
　　exp.setTime(exp.getTime() + days*24*60*60*1000); //设置过期时间为days天
　　document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 
function getCookie(name){
　　var result = "";
　　var myCookie = ""+document.cookie+";"; 
　　var searchName = "+name+"=";
　　var startOfCookie = myCookie.indexOf(searchName);
　　var endOfCookie;
　　if(satrtOfCookie != -1){
　　　　startOfcookie += searchName.length;
　　　　endOfCookie = myCookie.indexOf(";",startOfCookie);
　　　　result = (myCookie.substring(startOfCookie,endOfCookie));
　　}
　　return result;
}
(function(){
　　var oTips = document.getElementById('tips');//假设tips的id为tips
　　var page = {
　　check: function(){//检查tips的cookie是否存在并且允许显示
　　　　var tips = getCookie('tips');
　　　　if(!tips || tips == 'show') return true;//tips的cookie不存在
　　　　if(tips == "never_show_again") return false;
　　},
　　hideTip: function(bNever){
　　　　if(bNever) setcookie('tips', 'never_show_again', 365);
　　　　oTips.style.display = "none";//隐藏
　　},
　　showTip: function(){
　　oTips.style.display = "inline";//显示，假设tips为行级元素
　　},
　　init: function(){
　　　　var _this = this;
　　　　if(this.check()){
　　　　_this.showTip();
　　　　setcookie('tips', 'show', 1);
　　}
　　oTips.onclick = function(){
　　　　_this.hideTip(true);
　　};
　　}
　　};
page.init();
})();
23、说出以下函数的作用是？空白区域应该填写什么？
//define 
(function(window){
function fn(str){
  this.str=str;
}

fn.prototype.format = function(){
  var arg = ______;
  return this.str.replace(_____,function(a,b){
       return arg[b]||"";
});
}
window.fn = fn;
})(window);



//use
(function(){
    var t = new fn('
{1}{2}');
    console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));
})();
答案：访函数的作用是使用format函数将函数的参数替换掉{0}这样的内容，返回一个格式化后的结果：
第一个空是：arguments
第二个空是：/\{(\d+)\}/ig
## 24、    Javascript作用链域?
理解变量和函数的访问范围和生命周期，全局作用域与局部作用域的区别，JavaScript中没有块作用域，函数的嵌套形成不同层次的作用域，嵌套的层次形成链式形式，通过作用域链查找属性的规则需要深入理解。
## 25、    谈谈this对象的理解。
理解不同形式的函数调用方式下的this指向，理解事件函数、定时函数中的this指向，函数的调用形式决定了this的指向。
## 26、    eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2个步骤，一次解析成js语句，一次执行）

## 27、    关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
[1].在IE中,事件对象是作为一个全局变量来保存和维护的.所有的浏览器事件,不管是用户触发的，还是其他事件,都会更新window.event对象.所以在代码中，只要调用window.event就可以获取事件对象， 再event.srcElement就可以取得触发事件的元素进行进一步处理. 
[2].在FireFox中，事件对象却不是全局对象，一般情况下，是现场发生，现场使用，FireFox把事件对象自动传给事件处理程序.
关于事件的兼容性处理要熟练掌握，事件对象具体哪些属性存在兼容性问题，IE与标准事件模型事件冒泡与事件捕获的支持要理解
## 28、    什么是闭包（closure），为什么要用它？
简单的理解是函数的嵌套形成闭包，闭包包括函数本身已经它的外部作用域
使用闭包可以形成独立的空间，延长变量的生命周期，报存中间状态值
## 29、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？
意思是使用严格模式，使用严格模式，一些不规范的语法将不再支持
## 30、如何判断一个对象是否属于某个类？
Instanceof   constructor
## 31、new操作符具体干了什么呢?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
## 32、用原生JavaScript的实现过什么功能吗？
主要考察原生js的实践经验
## 33、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
HasOwnProperty
## 34、对JSON的了解？
轻量级数据交互格式，可以形成复杂的嵌套格式，解析非常方便
## 35、js延迟加载的方式有哪些？
方案一：
        
14. vue 的优点和缺点是什么？
14.1 优点

低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的"View"上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用 Expression Blend 可以很容易设计界面并生成 xml 代码。
可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

14.2 缺点（面试常考）

网站SEO问题
浏览器兼容性问题
海量数据节点的渲染问题

15. 请详细说下你对 vue 生命周期的理解？

总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。


创建前/后： 在 beforeCreate 阶段，vue 实例的挂载元素 el 还没有, created阶段。
载入前/后：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。
更新前/后：当 data 变化时，会触发beforeUpdate 和 updated方法。
销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在

16. Vue组件之间的传值？
16.1. 父组件与子组件传值
//父组件通过标签上面定义传值




//子组件通过props方法接受数据


16.2 子组件向父组件传递数据
//子组件通过$emit方法传递参数




//



17. Vue路由相关问题
17.1 active-class 是哪个组件的属性？
vue-router 模块的 router-link 组件。
17.2 嵌套路由怎么定义？

在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。
index.html，只有一个路由出口


    
    

main.js，路由的重定向，就会在页面一加载的时候，就会将 home 组件显示出来，因为重定向指向了 home 组件，redirect 的指向与 path 的必须一致。children 里面是子路由，当然子路由里面还可以继续嵌套子路由。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//引入两个组件

import home from "./home.vue"
import game from "./game.vue"
//定义路由
const routes = [
    { path: "/", redirect: "/home" },//重定向,指向了home组件
    {
        path: "/home", component: home,
        children: [
            { path: "/home/game", component: game }
        ]
    }
]
//创建路由实例
const router = new VueRouter({routes})

new Vue({
    el: '#app',
    data: {
    },
    methods: {
    },
    router
})
home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，否则子路由无法显示。
17.3 路由之间跳转？

声明式（标签跳转） 
编程式（ js 跳转） router.push('index')

17.4 懒加载（按需加载路由）（常考）

webpack 中提供了 require.ensure()来实现按需加载。以前引入路由是通过 import 这样的方式引入，改为 const 定义的方式进行引入。

17.4.1 不进行页面按需加载引入方式
import  home   from '../../common/home.vue'
17.4.2 进行页面按需加载的引入方式
const  home = r => require.ensure( [], () => r (require('../../common/home.vue')))
17.5 vue-router 有哪几种导航钩子?

全局导航钩子
router.beforeEach(to, from, next),
router.beforeResolve(to, from, next),
router.afterEach(to, from ,next)


组件内钩子
beforeRouteEnter,
beforeRouteUpdate,
beforeRouteLeave


单独路由独享组件
beforeEnter



18. Vux相关问题
18.1 vuex 是什么？怎么使用？哪种功能场景使用它？

vue 框架中状态管理。在 main.js 引入 store，注入。新建了一个目录 store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

// 新建 store.js
import vue from 'vue'
import vuex form 'vuex'
vue.use(vuex)
export default new vuex.store({
    //...code
})

//main.js
import store from './store'
...
18.2 vuex 有哪几种属性？
有 5 种，分别是 state、getter、mutation、action、module
18.3 vuex 的 store 特性是什么

vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data
state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新
它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

18.4 vuex 的 getter 特性是什么

getter 可以对 state 进行计算操作，它就是 store 的计算属性
虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用
如果一个状态只在一个组件内使用，是可以不用 getters

18.5 vuex 的 mutation 特性是什么

action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态
action 可以包含任意异步操作

18.6 vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中
如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里
如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回
18.7 不用 vuex 会带来什么问题

可维护性会下降，你要修改数据，你得维护 3 个地方
可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的
增加耦合，大量的上传派发，会让耦合性大大的增加，本来 Vue 用 Component 就是为了减少耦合，现在这么用，和组件化的初衷相背

18.8 vuex 原理
vuex 仅仅是作为 vue 的一个插件而存在，不像 Redux,MobX 等库可以应用于所有框架，vuex 只能使用在 vue 上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，
vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件；
18.9 扩展问题
18.9.1 使用 Vuex 只需执行 Vue.use(Vuex)，并在 Vue 的配置中传入一个 store 对象的示例，store 是如何实现注入的？
美团
Vue.use(Vuex) 方法执行的是 install 方法，它实现了 Vue 实例对象的 init 方法封装和注入，使传入的 store 对象被设置到 Vue 上下文环境的$store 中。因此在 Vue Component 任意地方都能够通过 this.$store 访问到该 store。
18.9.2  state 内部支持模块配置和模块嵌套，如何实现的？
美团
在 store 构造方法中有 makeLocalContext 方法，所有 module 都会有一个 local context，根据配置时的 path 进行匹配。所以执行如 dispatch('submitOrder', payload)这类 action 时，默认的拿到都是 module 的 local state，如果要访问最外层或者是其他 module 的 state，只能从 rootState 按照 path 路径逐步进行访问。
18.9.3 在执行 dispatch 触发 action(commit 同理)的时候，只需传入(type, payload)，action 执行函数中第一个参数 store 从哪里获取的？
美团
store 初始化时，所有配置的 action 和 mutation 以及 getters 均被封装过。在执行如 dispatch('submitOrder', payload)的时候，actions 中 type 为 submitOrder 的所有处理方法都是被封装后的，其第一个参数为当前的 store 对象，所以能够获取到 { dispatch, commit, state, rootState } 等数据。
18.9.4 Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的？
美团
Vuex 中修改 state 的唯一渠道就是执行 commit('xx', payload) 方法，其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true，然后才能修改 state，修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state，但是并没有修改_committing 标志位，所以只要 watch 一下 state，state change 时判断是否_committing 值为 true，即可判断修改的合法性。
18.9.5 调试时的"时空穿梭"功能是如何实现的？
美团
devtoolPlugin 中提供了此功能。因为 dev 模式下所有的 state change 都会被记录下来，'时空穿梭' 功能其实就是将当前的 state 替换为记录中某个时刻的 state 状态，利用 store.replaceState(targetState) 方法将执行 this._vm.state = state 实现。
19. 指令相关
19.1 自定义指令(v-check, v-focus) 的方法有哪些? 它有哪些钩子函数? 还有哪些钩子函数参数

全局定义指令：在 vue 对象的 directive 方法里面有两个参数, 一个是指令名称, 另一个是函数。
组件内定义指令：directives
钩子函数: bind(绑定事件出发)、inserted(节点插入时候触发)、update(组件内相关更新)
钩子函数参数： el、binding

19.2 说出至少 4 种 vue 当中的指令和它的用法
v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)
20. axios
20.1 axios 是什么？怎么使用？描述使用它实现登录功能的流程

[!NOTE]
思路：使用Vue的router.beforeEach钩子函数结合axios的拦截器功能来实现。

20.2 axios与ajax, fetch的区别和优缺点？

参考文章：https://blog.csdn.net/qq_36407875/article/details/84642060




【编程题与分析题】实现乱序函数
https://github.com/fecommunity — Sat, 27 Apr 2024 02:39:55 GMT
实现乱序函数？（面试常考）
// v1. 基本的实现
var values = [1, 2, 3, 4, 5];
values.sort(function () {
    // Math.random() - 0.5 随机得到一个正数、负数或是 0，如果是正数则降序排列，如果是负数则升序排列，如果是 0 就不变，然后不断的升序或者降序，最终得到一个乱序的数组。
    return Math.random() - 0.5;
})

// test
var times = [0, 0, 0, 0, 0];
for (var i = 0; i < 100000; i++) {
    let arr = [1, 2, 3, 4, 5];
    arr.sort(() => Math.random() - 0.5);
    times[arr[4]-1]++;
}

console.log(times)

// 插入排序
function insertSort(a, from, to) {

}


// v2: 乱序算法加强版
function shuffle(arr) {
    for (let i = arr.length; i > 0; i--) {
        // 遍历数组元素，然后将当前元素与以后随机位置的元素进行交换
        let j = Math.floor(Math.random() * i);
        // arr[i - 1] 就是当前的这个arr数组的最后一个元素
        [arr[i - 1], arr[j]] = [arr[j], arr[j - 1]];
    }
}

[!NOTE]
v8 为例，v8 在处理 sort 方法时，当目标数组长度小于 10 时，使用插入排序；反之，使用快速排序和插入排序的混合排序。




【JS相关】虚拟DOM
https://github.com/fecommunity — Wed, 24 Apr 2024 03:42:03 GMT
虚拟DOM
1.介绍一下vdom?

virtual dom， 虚拟DOM
使用JS来模拟DOM结构
DOM变化的对比，放在JS层来做（图灵完备语言），提高效率
DOM操作非常昂贵（消耗性能）

2.Snabbdom的使用
var snabbdom = window.snabbdom;
// 定义patch
var patch = snabbdom.init([
    snabbdom_class,
    snabbdom_props,
    snabbdom_style,
    snabbdom_eventlisteners
])

// 定义h
var h = snabbdom.h;

var container = document.getElementById('container');
// 生成vnode
var vnode = h('ul#list', {}, [
    h('li.item', {}, 'Item 1'),
    h('li.item', {}, 'Item 2'),
]);

patch(container, vnode)


// 修改DOM内容
document.getElementById('btn-change').addEventListener('click', function () {
    // 生成newVnode
    var newVnode = h('ul#list', {}, [
        h('li.item', {}, 'Item 1'),
        // DOM节点中不同的地方
        h('li.item', {}, 'Item B'),
        h('li.item', {}, 'Item 3'),
    ]);
    patch(vnode, newVnode)
})

[!NOTE]
核心API总结：


h('<标签名称>', { 属性 }, [子元素])
h('<标签名>', {属性}， ‘...’)
patch(container, vnode)
patch(vnode, newNode)

3.介绍一下diff算法?
3.1 Diff算法是什么

Linux中：  diff 文件1.txt 文件2.txt
Git中：    git diff
在线比对工具3.2 去繁就简

diff算法实现非常复杂，实现难度很大，源码量很大
去繁就简，讲明白核心流程，不关心细节（非常高效的手段）
面试官也大部分不清楚细节，但是很关系核心流程的实现3.3 VDOM为何使用diff算法？

DOM操作是昂贵的，因此要尽量减少DOM的操作
找出本次DOM必须更新的节点来更新，其他的不更新
这个找出的过程，就需要使用diff算法（找出两个虚拟DOM的差异）




【计算机网络】UDP
https://github.com/fecommunity — Sun, 21 Apr 2024 08:25:48 GMT
UDP
1. UDP概念相关

[!NOTE]

UDP（User Datagram Protocol），又叫用户数据报协议。
UDP是一个无连接的、不可靠、基于数据报的传输协议。UDP只是报文（报文可以理解为一段段的数据）的搬运工，不会对报文进行任何拆分和拼装操作。


1.1 UDP

在发送端，应用层将数据传递给传输层，UDP只会给数据增加一个UDP头标识一下这是UDP，然后就传递给网络层了，不进行任何拆分。
在接收端，网络层将数据传递给传输层，UDP只取出IP报文头就传递给应用层，不进行任何拼装。

1.2 UDP特点

面向报文
不可靠传输
高效

1.2.1 不可靠性

UDP是无连接的，也就是说通信不需要建立和断开链接。
UDP是不可靠的。它不会去备份数据，也不关心对方是否能收到数据。
UDP没有拥塞控制，一直以恒定的速度发送数据，即使网络条件不好，也不进行速率调整。 造成的弊端就是在网络条件不好时可能导致丢包。

1.2.2 高效性
因为 UDP 没有 TCP 那么复杂，不需要保证数据不丢失且有序到达。所以 UDP 的头部开销小，只有八字节，相比 TCP 的至少二十字节要少得多，在传输数据报文时是很高效的。
1.3 应用场景
当强调输出性能而非完整性时，如音频和多媒体的实时传输。有个视频流传输协议RTP的实时传输就是基于UDP封装而来的。
1.4 UDP报头
UDP包头部包含了以下几个数据

两个十六位的端口号，分别为源端口（可选字段）和目标端口
整个数据报文的长度
整个数据报文的检验和（IPv4 可选 字段），该字段用于发现头部信息和数据中的错误


1.5 传输方式

[!NOTE]
支持一对一，一对多，多对多，多对一的方式，也就是说 UDP 提供了单播，多播，广播的功能。




【编程题与分析题】常见算法
https://github.com/fecommunity — Sun, 21 Apr 2024 04:53:04 GMT
大数相加问题
  function sumString(a, b){
    a = a + '';
    b = n + '';

    var arrA = a.spilt(''),
        arrB = b.spilt(''),
        distance = arrA.length - arrB.length,   // 计算两者的长度差，取最大的那个作为基准点
        len = distance > 0 ? arrA.length : arrB.length,
        carry = 0;        // 表示相加之后的进位

        // 把长度小的那个数组的前面用0补齐，让两者的位数相同
        if (distance > 0){
            for (var i = 0; i < distance; i++) {
              arrB.unshift('0');
            }
        } else {
          for (var i = 0; i < Math.abs(distance); i++) {
            arrA.unshift('0');
          }
        }

        var res = [];
        // 开始从数组的最后一位向前遍历，相同位数对应相加
        for (var i = len - 1; i >= 0; i--) {
          var temp = +arrA[i] + (+arrB[i]) + carry;
          if (temp >= 10) {
            // 6+7=13, 只需要取出最后一位
            carry = 1;
            // 先把数组转换为字符串，然后拿出来最后一位数
            res.push((temp + '')[1]);
          } else {
            carry = 0;
            res.push(temp + '');
          }
        }


        // 将数组转换为字符串输出

        return res.join('').replace(/^0/, '');
  }
URL转换为json对象
// url = ?name=zhangsan&age=18&sex=25
function getQueryObject(url){
  // 参数校验
  url = url == null ? window.location.href : url;
  var search = url.substring(url.lastIndexOf('?') + 1);
  // 开始进行字符串解析name=zhangsan&age=18&sex=25
  // +代表匹配一个或多个，零个肯定是不行的。*代表0个或多个，这里value没有是允许的。那么这里要注意的就是^在单独使用时，代表以什么开头，在中括号里面使用代表不包含的意思
  // 中括号里面的内容相当于是或的意思：表示除了?,&,=这三个字符以外的其他所有字符
  var reg = /([^?&=]+)=([^?&=]*)/g;
  var obj = {};
  // 其中res表示匹配成功的字符串序列，$1，表示第一个（）内所匹配的内容，$2为第二个，依次类推。当我们使用全局匹配时，只要匹配成功的子串最后都会执行一遍function函数
  search.replace(reg, function(res, $1, $2){
    // name=zhangsan,age=18,sex=male
    console.log(res, $1, $2);
    obj[$1] = $2;
  });
  return obj;
}
JSON转换为URL？
 // data={name : 'zhangsan', age : 'lisi'}
  function parseParams(data){
    var key, i, value, tempArr = [];
    for (i in data) {
      key = encodeURIComponent(i);
      value = encodeURIComponent(data[i]);
      tempArr.push(key + '=' + value);
    }
    return tempArr.join('&');
  }
使用两个数组实现一个定长的队列？
JS先奇数后偶数排序
  // v1. 分开写的实现思路
  function sortArray(arr){
    arr.sort((a, b) => {
      // 1. 先把奇数放在前面，把偶数放在后面
      if (a % 2 === 0 && b % 2 === 1) {
        // 如果前面的元素是奇数的话，而且后面的元素是偶数的话，就去交换
        return 1;
      }
    })
    arr.sort((a, b) => {
      // 1. 把前面的那部分奇数，和后面的那部分偶数按照从小到大的顺序排序
      if (a > b && (a % 2 === 1 && b % 2 === 1)) {
        return 1;
      }
      if (a > b && (a % 2 === 0 && b % 2 === 1)) {
        return 1;
      }
    });
  }

  // v2. 代码优化版本
  function sortArray(arr){
    arr.sort((a, b) => {
      if (a % 2 === 0 && b % 2 === 1) {
        return 1;
      }
      if (a > b && (a % 2 === 1 && b % 2 === 1) || (a % 2 === 0 && b % 2 === 1)) {
        return 1;
      }

    });
  }
求数组最长递增子序列长度
/**
 * 求数组最长递增子序列
 * @param arr
 */
function getMaxSequenceNumbers(arr){
    let res = [];
    res.push(arr[0])
    for (let i = 1, len = arr.length; i < len; i++) {
        // 开始处理res
        if (arr[i] > res[res.length - 1]) {
            res.push(arr[i]);
        }
        else {
            // 小于等于的话
            // 需要在res中找到第一个大于arr[i]的元素，然后替换掉这个元素（二分查找）
            let index = binarySearch(res, arr[i]);
            if (index) {
                res[index] = arr[i];
            }
        }
    }

    return res.length;
}

function binarySearch(arr, val) {
    let l = 0, r = arr.length - 1;
    while (l <= r) {
        let mid = Math.floor(l + (r - l) / 2);
        if (val < arr[mid]) {
            r = mid - 1;
        }
        else if (val > arr[mid]) {
            l = mid + 1;
        }
    }

    // 最终的l就是找到的结果,arr中第一个大于val的元素位置
    return l;
}


console.log(getMaxSequenceNumbers([5, 6, 7, 1, 2, 8]));



【编程题与分析题】Generator的执行细节分析
https://github.com/fecommunity — Sat, 13 Apr 2024 02:24:11 GMT
Generator执行细节分析(co库底层实现原理)
// 单个异步任务执行，如何使用generator函数呢？

// v1: 创建一个generator函数
function* gen() {
    let url = 'http://www.baidu.com';
    let res = yield fetch(url);
    console.log(res)
}

// 1. 调用Generator函数，获取遍历器对象
let g = gen();
// 2. 使用next方法，执行异步任务的第一阶段，fetch(url)
let res = g.next();

// 3. res 是一个Promise对象，{ value: Promise {  }, done: false }
res.value.then(data => {
    // 4. 将获取到的数据格式化
    return data.json();
}).then(data => {
    // 5. 然后将格式化之后的数据传进去，调用next函数，会执行输入console.log(res)
    g.next(data);
})


// v2: 如何执行下面的多个异步函数呢
function* gen() {
    // yiled实际上会返回一个Promise对象
    var r1 = yield fetch('https://api.github.com/users/github');
    var r2 = yield fetch('https://api.github.com/users/github/followers');
    var r3 = yield fetch('https://api.github.com/users/github/repos');

    console.log([r1.bio, r2[0].login, r3[0].full_name].join('\n'));
}

// 使用递归的方式来实现
function run(gen) {
    // 1. 执行自己定义的Generator函数
    let g = gen();
    function next(data) {
        let res = g.next(data);

        // 执行完毕
        if (res.done) return;

        res.value.then(data => {
            return data.json();
        }).then(data => {
            next(data)
        });

    }

    // 2. 执行next函数
    next();
}

// 首次执行并调用
run(gen);


// v3: 上面的代码优化
function run(gen) {
    // 1. 获取遍历器对象
    let g = gen();

    function next(data) {
        let res = g.next(data);

        if (res.done) return;

        res.value.then(data => {
            // 继续调用下一个Generator函数
            next(data);
        });
    }

    next();
}

// v4: 实现一个run函数，通用版本
function run(gen) {
    // 1. 获取遍历器对象
    let g = gen();


    // next函数
    function next(data) {
        let res = g.next(data);

        if (res.done) return;

        if (isPromise(res.value)) {
            // 如果是一个Promise对象的话
            res.value.then(data => {
                next(data);
            });
        }
        else {
            res.value(data);
        }

    }

    next();
}

// 可以判断一个对象是不是Promise对象
function isPromise(obj) {
    return typeof obj.then === 'function';
}


// v5. 上面代码继续优化
function run(gen) {
    let g = gen();

    return new Promise((resolve, reject) => {
        let res;
        function next(data) {
            try {
                res = g.next(data);
            }
            catch (e) {
                return reject(e);
            }

            if (res.done) return resolve(res.value);

            let val = toPromise(res.value);

            val.then(data => {
                next(data);
            }, err => {
                reject(err);
            });
        }

        next();
    });
}

// 可以转换任意对象到一个Promise
function toPromise(obj) {
    if (isPromise(obj)) {
        return obj;
    }
    else if ('function' === typeof obj) {
        return thunkToPromise(obj);
    }

    return obj;
}

// 把一个函数转换为Promise对象
function thunkToPromise(fn) {
    return new Promise((resolve, reject) => {
        fn((err, res) => {
            if (err) return reject(err);
            resolve(res);
        })
    });
}


// v6. 上面的代码进一步优化
function run(gen) {

    return new Promise(function(resolve, reject) {
        if (typeof gen == 'function') gen = gen();

        // 如果 gen 不是一个迭代器
        if (!gen || typeof gen.next !== 'function') return resolve(gen)

        onFulfilled();

        function onFulfilled(res) {
            var ret;
            try {
                ret = gen.next(res);
            } catch (e) {
                return reject(e);
            }
            next(ret);
        }

        function onRejected(err) {
            var ret;
            try {
                ret = gen.throw(err);
            } catch (e) {
                return reject(e);
            }
            next(ret);
        }

        function next(ret) {
            if (ret.done) return resolve(ret.value);
            var value = toPromise(ret.value);
            if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
            return onRejected(new TypeError('You may only yield a function, promise ' +
                'but the following object was passed: "' + String(ret.value) + '"'));
        }
    })
}

function isPromise(obj) {
    return 'function' == typeof obj.then;
}

function toPromise(obj) {
    if (isPromise(obj)) return obj;
    if ('function' == typeof obj) return thunkToPromise(obj);
    return obj;
}

function thunkToPromise(fn) {
    return new Promise(function(resolve, reject) {
        fn(function(err, res) {
            if (err) return reject(err);
            resolve(res);
        });
    });
}

module.exports = run;


// v7: co是什么呢？
// co 是大神 TJ Holowaychuk 于 2013 年 6 月发布的一个小模块，用于 Generator 函数的自动执行。
// yield 后是一个 Promise
var fetch = require('node-fetch');
var co = require('co');

function* gen() {
    var r1 = yield fetch('https://api.github.com/users/github');
    var json1 = yield r1.json();
    var r2 = yield fetch('https://api.github.com/users/github/followers');
    var json2 = yield r2.json();
    var r3 = yield fetch('https://api.github.com/users/github/repos');
    var json3 = yield r3.json();

    console.log([json1.bio, json2[0].login, json3[0].full_name].join('\n'));
}

// 可以让Generator里面的函数按顺序执行
co(gen);



【CSS相关】预处理器
https://github.com/fecommunity — Mon, 08 Apr 2024 00:45:58 GMT
CSS预处理器
1.常见的CSS预处理器有哪些？

[!NOTE]
css预处理器：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处

Sass(Scss)：2007,ruby编写
Less: 2009，js编译


1.1 使用流程？

基于CSS的另外一种语言
通过工具编译成CSS
添加了很多CSS不具备的特性
同时CSS文件的组织方式

1.2 预处理器的作用有哪些？

帮助开发者更好组织CSS代码（变量，mixIn）
提高代码的复用性
代码的可维护性增强

2.Less/Sass预处理器的功能？

嵌套： 反映层级和约束
变量和计算： 减少重复代码
Extend和mixIn： 代码片段的抽离
循环: 适用于复杂有规律的样式
import：可以实现CSS文件的模块化

3.CSS预处理器的优缺点？

优点： 提高代码的复用率和可维护性
缺点： 引入了编译的过程，有一定的学习成本


前端工程化：预处理不再是唯一的手段了，可以使用工程化构建工具进行处理

4.scss和less的区别？

编译环境不一样
变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。
输出设置，Less没有输出设置，Sass提供4种输出选项：
Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
引用外部CSS文件
工具库不同




【性能优化】网络优化
https://github.com/fecommunity — Sat, 06 Apr 2024 06:50:40 GMT
网络优化方案
1.合并资源文件，减少HTTP请求
浏览器并发的HTTP请求是由数量限制的（比如桌面浏览器并发请求可能是8个，手机浏览器是6个），如果一下子并发的几十个请求那么会有很多请求会停下来等，等前面的请求好了下一个再进去，这样就延长了整个页面的加载时间
2.压缩资源文件减小请求大小
文件大小越小当然加载速度就越快。
可对代码进行压缩，去掉空格、注释、变量替换，在传输时，使用gzip等压缩方式也可以降低资源文件的大小。
3.利用缓存机制，尽可能使用缓存减少请求
浏览器是有缓存机制的，在返回资源的时候设置一个cache-control设置过期时间，在过期时间内浏览器会默认使用本地缓存。
但缓存机制也存在一定的问题，因为网站开发是阶段性的，隔一段时间会发布一个新的版本。因为HTTP请求是根据url来定位的，如果资源文件名的url没有发生更改那么浏览器还是会使用缓存，这个时候怎么办那？
这时就需要一个缓存更新机制来让修改过的文件具有一个新的名字。
最简单的方法就是在url后加一个时间戳，但是这会导致只要有新的版本发布就会重新获取所有的新资源。
一个现代流行的方法就是根据文件计算一个hash值，这个hash值是根据文件的更新变化而变化的。 当浏览器获取文件时如果这个文件名有更新那么就会请求新的文件。
4.DNS预解析
现代浏览器在 DNS Prefetch 上做了两项工作：

html 源码下载完成后，会解析页面的包含链接的标签，提前查询对应的域名
对于访问过的页面，浏览器会记录一份域名列表，当再次打开时，会在 html 下载的同时去解析 DNS

自动解析
浏览器使用超链接的href属性来查找要预解析的主机名。当遇到a标签，浏览器会自动将href中的域名解析为IP地址，这个解析过程是与用户浏览网页并行处理的。但是为了确保安全性，在HTTPS页面中不会自动解析
手动解析
预解析某域名


强制开启HTTPS下的DNS预解析

5.CDN加速
CDN 的原理是尽可能的在各个地方分布机房缓存数据。
因此，我们可以将静态资源尽量使用 CDN 加载，由于浏览器对于单个域名有并发请求上限，可以考虑使用多个 CDN 域名。并且对于 CDN 加载静态资源需要注意 CDN 域名要与主站不同，否则每次请求都会带上主站的 Cookie，平白消耗流量。
6.预加载

在开发中，可能会遇到这样的情况。有些资源不需要马上用到，但是希望尽早获取，这时候就可以使用预加载。

预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件，可以使用以下代码开启预加载。

预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好。


// 1.使用HTML标签


// 2.使用Image对象


//myPreload.js文件
var image= new Image()
image.src="http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg"

// 3.使用XMLHttpRequest对象,虽然存在跨域问题，但会精细控制预加载过程
    var xmlhttprequest=new XMLHttpRequest();
    xmlhttprequest.onreadystatechange=callback;
    xmlhttprequest.onprogress=progressCallback;
    xmlhttprequest.open("GET","http://image.baidu.com/mouse,jpg",true);
    xmlhttprequest.send();
    function callback(){
      if(xmlhttprequest.readyState==4&& xmlhttprequest.status==200){
        var responseText=xmlhttprequest.responseText;
      }else{
         console.log("Request was unsuccessful:"+xmlhttprequest.status);
      }
    }
    function progressCallback(e){
        e=e || event;
        if(e.lengthComputable){
            console.log("Received"+e.loaded+"of"+e.total+"bytes")
        }
    }
使用预渲染后，只需加载index.html和app.css即可看到页面的部分形式。
预渲染的最佳时间莫过于预渲染骨架屏了。静态的骨架屏预渲染后保存在本地，基本永久使用，只要骨架屏返回并渲染了，用户是看不到白屏的(诸如以上只有topNav的那种)，而骨架屏作为布局简单，样式普通的一个小组件，构建后返回的html在浏览器渲染当然速度也是极快的，用户体验++
7.图片优化

不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。
对于移动端按理说，图片不需要加载原图，可请求裁剪好的图片
小图使用base64格式
将多个图标文件整合到一张图中（雪碧图）
采用正确的图片格式
对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好
色彩很多的使用 JPEG
色彩种类少的使用 PNG，有的可用SVG代替



8.预渲染

[!NOTE]
预渲染：构建阶段生成匹配预渲染路径的 html 文件（注意：每个需要预渲染的路由都有一个对应的 html）。构建出来的 html 文件已有部分内容。

非预渲染需要加载到1(index.html)，2（app.css），3(manifest.js)，4(vender.js)，用户才能看到页面
1 index.html
2 app.css 样式
3 manifest.js webpack manifest
4 vender.js 第三方库
5 app.js 业务逻辑
6 0.js 路由分包文件



【面经系列】阿里面经
https://github.com/fecommunity — Sat, 06 Apr 2024 05:39:19 GMT
阿里面经系列

react hooks 是为了解决什么
jsonp
跨域
rem
flex
闭包
async await
async 经过 babel 处理后的代码看过吗
React 性能优化
说一说 React
正则贪婪和非贪婪匹配
变量声明提升和函数提升
同源策略
为什么js单线程
nodejs处理高并发
事件循环
框架
webpack
移动端touch事件
实现一个斐波那契数列
快排
跨域
闭包
面向对象
nodejs应用
行内元素、行内块元素。。。
定位（position）
盒模型
事件代理
react受控组件和非受控组件  
nodejs用的场景 ；
js为什么单线程；
url的过程；
es6数组常用 ；
react哪些时候可以设置state 哪些时候不能会（循环）；
304；
常见的攻击xss csrf sql注入；
react和别的框架的差别。
跨域；
写过什么组件。。。可以复用（单例模式，form表单的验证）；
为什么选择这些框架；
后台用php做过什么；15.浏览器兼容怎么做，做过什么
平时怎么学习的？
HTML CSS JS 官方文档在哪...
看过哪些书
xss csrf
函数节流防抖
一道 this 指向题，一道原型链题
React setState
React componentWillMount 做 setState 会干嘛
性能优化
懒加载怎么实现的
跨域，问的比较细
React 同构
Redux connect 做了什么
Redux 怎么做到每个组件可以访问的 store 的
React Router
了解哪些后端语言，搭过服务吗
Http 2.0
了解 PWA 吗？（看过相关的文章），答：不了解（不然就是坑）
有做过移动端项目吗
项目场景，技术方案
项目涉及的性能优化
实习中都做了什么
实习中收获最大的一个项目是什么，你在这个项目中做了什么
实习中印象最深刻的一个项目
人生经历中最有成就感的一件事
未来两三年前端的发展
对前端这个职业的看法（？？我也记不清了，反正扯了一堆扯到了nodejs）
实习中都有什么收获
大意是在前端方向有没有什么偶像式的人物
问点基础题：平时怎么调试；有一个数据量很大的表格要怎么处理
node 中的js和浏览器中的js区别，从区别，相同，性能，分析？
(上面提到了promise的polyfill)promise介绍下？
promise，以前的异步回调以及其他解决异步的区别？
目前的小程序和H5的区别，从性能，渲染方式来说？
react和vue怎么选型
项目: 做过的项目中最难的地方
假定场景: 一个游戏活动, 有一个人从东到西运动, 碰到图上的点后获得奖励。怎么设计? 没有控制, 活动开始直接运动, 遇到点弹出动画。
动画方面用Vue会有哪些瓶颈？ - 操作DOM
现在有一个场景, 如果有一个用户登录淘宝了, 显示登录成功了, 然后网断了, 过了20分钟网络又连接上了, 那他接下来打开页面可以继续访问还是要去登录? - 不会去登录, 后端保存session 前端会携带用户信息进行碰撞
Vue从哪个版本开始接触的, 有了解过1.0吗, 他们之间对比？- 指令, 生命周期
说一下Node的事件机制（宏队列微队列
为什么时间机制是这样的呢？js如何运作的？
说一下你偏向前端的一个项目吧
你对自己未来的前端发展有什么看法？
Hybrid你是指的什么？专门的客户端开发吗？
那你就要都接触iOS和Android了，这块要做的还很多
React Hooks有了解么？
React中key的作用你知道么
key的具体运作方式是什么？
说一下你为什么做前端
说一下你对前端未来的发展趋势及看法（多元化，WebGL、Node、Hybrid
说一下你对React的理解？React设计思想？（没答好
那你比较下React和Vue？（Vue双向绑定、React all in js
diff找到了差距后，渲染时会做什么优化吗（从shouldComponentUpdate开始，扯到了async rendering、time slicing
说一下你对前端设计思想的理解？（MV*、函数式、面向对象/过程
你知道双向绑定有什么缺点吗？（触发改变的方式很多？
那你说说js引擎gc机制（引用计数，标记清除
缓存类、hashMap、Node多进程）
多进程复用有去了解过社区内的解决方式吗（专门的dataBus进程、Pandora.js对象代理、主子进程通信、借助Redis
说一下Node直出的优缺点？（展示时间优化、SEO，不知怎么扯扯到了骨架屏
骨架屏的概念&作用？（background、懒加载、回流/重绘
数组随机化？
数组去重？
浏览器发起请求的方法？（XHR、fetch
有了解XHR和fetch的区别吗？
有了解跨域的一些东西吗？
有了解Promise一族吗




【NodeJS相关】模块机制
https://github.com/fecommunity — Mon, 01 Apr 2024 03:55:35 GMT
模块机制
1. CommonJS模块规范
1.1 模块引用
var math = require('math');
1.2 模块定义

[!NOTE]
上下文提供exports对象用于导出当前模块的方法和变量，并且他是唯一的导出出口


exports实际上是module.exports，而module.exports就是以一个暴露给外部的对象。


exports.some就是给这个对象上添加属性
直接使用 module.exports = {...} 则可以让外部直接获取到这个对象，相当与为exports换了一个引用，如果在这之前使用exports.some会把之前的覆盖

1.3 CommonJS 用法
// a.js
module.exports = {
    a: 1
}
// or 
exports.a = 1

// b.js
var module = require('./a.js')
module.a // -> log 1
1.4 原理
var module = require('./a.js')
module.a 
// 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，
// 重要的是 module 这里，module 是 Node 独有的一个变量
module.exports = {
    a: 1
}
// module 基本实现
var module = {
  id: 'xxxx', // 我总得知道怎么去找到他吧
  exports: {} // exports 就是个空对象
}
// 这个是为什么 exports 和 module.exports 用法相似的原因
var exports = module.exports 
var load = function (module) {
    // 导出的东西
    var a = 1
    module.exports = a
    return module.exports
};
// 然后当我 require 的时候去找到独特的
// id，然后将要使用的东西用立即执行函数包装下，over
2. Node的模块实现
在Node中引入模块，需要经历3个步骤

路径分析
文件定位
编译执行


在node中，模块分为两类：一类是node提供的模块称为核心模块，一类是用户编写的成为文件模块。


核心模块在编译中编译成了二进制文件。在Node进程启动时，部分核心模块就被直接加载入内存。所以这部分核心模块引入时就省了文件定位和编译执行这两个步骤，并且在路径分析中优先判断，它的加载速度是最快的。

文件模块是运行时动态加载。需要完整的路径分析、文件定位、编译执行


2.1 优先从缓存加载

Node对引入的模块都回进行缓存，而且缓存的是编译执行后的对象。

不管是核心模块还是文件模块，require()都一律采用缓存优先的方式。
2.2 路径分析和文件定位
2.2.1 模块标识符分析

核心模块
路径形式的文件模块
自定义模块
node_modules下
查找最费时



2.2.2 文件定位

文件拓展名分析
如果省略拓展名，回按 .js  .node  .json的次序依次尝试
如果.node  .json的话，加上拓展名会加快一点速度
同步配合缓存，可大幅缓解单线程中阻塞式调用的缺陷


目录分析和包
如果没有文件名，会将Index当作默认文件名



2.3 模块编译

.js文件
通过fs同步读取后编译执行


.node
这是用C/C++编写的拓展文件，通过dlopen()方法加载最后编译生成的文件


.json
用JSON.parse()解析返回结果


其余拓展名
当作.js文件处理




[!NOTE]
每一个编译成功的模块都会将其文件路径索引缓存在Module._cache对象上，以提高二次引入性能

2.3.1 js模块的编译

[!NOTE]
在编译的过程中，Node对获取的JS文件进行了头尾包装。这也是每个模块都能访问到 require、exports、module、filename、dirname的原因

(funciton(exports, require, module, __filename, __dirname) {

  /* 自己写的代码  */

});

这样使得模块文件间都进行了作用域隔离，不用担心变量污染全局。


为moudle.exports赋值，exports对象是通过形参的方式传入，直接赋值形参会改变形参的引用，但并不能改变作用域外的值。

exports = function() {
  // my class
}

var change = function(a) {
  a = 100;
}

var a = 10;
change(a);
console.log(a); // => 10
如果要达到require引入一个类的效果，请赋值给 module.exports对象。这个迂回的方案不改变形参的引用。
2.3.2 C/C++ 模块的编译
Node调用process.dlopen()方法进行加载和执行。
实际上 .node模块并不需要编译，因为它是编写C/C++模块之后编译生成的，所以这里只有加载和执行的过程。在执行的过程中，模块exports对象与.node模块产生练习，然后返回给调用者。
3. 核心模块

[!NOTE]
Node的核心模块在编译成可执行文件的过程中被编译进了二进制文件。核心模块其实分为C/C++编写的和Javascript编写的两部分，其中C/C++文件存放在Node项目的src目录下，Javascript文件存放在lib目录下。


C/C++拓展模块

模块调用栈

前后端公用模块

模块侧重点



前端瓶颈在于带宽，后端瓶颈在于CPU和内存等资源。前端需要通过网络加载代码，后端则从磁盘加载，二者加载速度不再同一量级上。

node的模块引入几乎都是同步的，但前端模块若是也采用同步方式来引入必会在用户体验上造成很大的问题，即UI初始化实际过长


4. AMD规范

Asynchronous Moudle Definition “异步模块定义”, AMD需要在声明的时候指定所有的依赖，通过形参传递依赖到模块内容中。

定义如下
define(id?, dependencies, factory);
5. CMD 规范

与AMD主要区别在于定于模块与依赖引入部分。

CMD支持动态引入
define(funtion(require, exports, moudle) {
  // The module code goes here
})



【错误监控】错误监控和上报
https://github.com/fecommunity — Thu, 28 Mar 2024 02:34:25 GMT
前端错误监控
1. 前端错误的类型有哪些？如何捕获错误？
1.1 错误类型

即时运行错误：也就是代码错误；
资源加载错误：比如图片加载失败、JS加载失败、CSS加载失败等；

1.2 错误的捕获方式
1.2.1 运行错误的捕获方式（try catch）
try {
    var a = 1;
    var b = a + c;
} catch (e) {
    // 捕获处理
    console.log(e); // ReferenceError: c is not defined
}
1.2.2 window.onerror

[!NOTE]
只能捕获即时运行错误，不能捕获资源加载错误(原理：资源加载错误，并不会向上冒泡，object.onerror捕获后就会终止，所以window.onerror并不能捕获资源加载错误)；

相比try catch来说window.onerror提供了全局监听异常的功能：
window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {
    console.log('errorMessage: ' + errorMessage); // 异常信息
    console.log('scriptURI: ' + scriptURI); // 异常文件路径
    console.log('lineNo: ' + lineNo); // 异常行号
    console.log('columnNo: ' + columnNo); // 异常列号
    console.log('error: ' + error); // 异常堆栈信息
};

console.log(a);
1.2.3 资源加载错误的捕获方式
1.2.3.1 object.onerror
img标签、script标签都可以添加onerror事件，用来捕获资源加载错误；
1.2.3.2 performance.getEntries

[!NOTE]
可以获取所有已加载资源的加载时间，通过这种方式，可以间接的拿到没有加载的资源错误。


获取网站成功加载的资源数量信息：

performance.getEntries().forEach(
    function(item){
        console.log(item.name)
 })

再输入document.getElementsByTagName('img')，就会显示出所有的img集合，这是所有需要加载的图片的集合；

document.getElementsByTagName('img')获取的资源数组减去通过performance.getEntries()获取的资源数组，剩下的就是没有成功加载的，这种方式可以间接的捕获到资源加载错误。



[!NOTE]
跨域js运行错误也是可以捕获到的，但是拿不到具体的信息，比如：出错行号、出错列号，错误详情等，这种问题应该怎么处理呢？


在script标签上增加crossorigin属性；
设置js资源响应头Access-Control-Allow-Origin:*；

2. 上报错误的基本原理

采用Ajax通信的方式上报；
利用Image对象上报；(推荐的方式)




【面经系列】面试技巧
https://github.com/fecommunity — Tue, 26 Mar 2024 07:30:29 GMT
面试技巧
一二面（基础面）
1. 一面基础面
1.1 面试准备
1.1.1  个人简历

基本信息：姓名-年龄-手机-邮箱-籍贯
工作经历：时间-公司-岗位-职责-技术栈-业绩（哪些成就）
学历： 博士 > 硕士 > 本科 > 大专
工作经历：时间-公司-岗位-职责-技术栈-业绩
开源项目：GitHub和说明

1.2.2 自我陈述
1.2.2.1 把我面试的沟通方向（别把自己带到坑里面）
答：我平时喜欢研究一些网站，并对一些技术的原理和好玩的点感兴趣，我自己也喜欢思考，也喜欢尝试探索有没有更好的方式和实现。（有所收留，不要全部说出来，稍微留一点悬念留作面试官来提问）
1.2.2.2 豁达、自信的适度发挥
答：适当自信，向自己擅长的方向上面来引路；要让面试官来欣赏我，而不是来鄙视他。
1.2.2.3 自如谈兴趣
（豁达自信，适当收住），巧妙演示实例，适时讨论疑问（不知道的问题请求指导一下，如何去解决，不要说不知道，或者不了解）
1.2.2.4 节奏要适宜
切忌小聪明（尽量把问题的所有实现方法都写出来，表现出来的是熟练）
1.2 面试实战

[!NOTE]

方向要对，过程要细（性能优化，过程详细）
胆子要大、心态要和（算法题认真思考，认真使劲想；敢于承担责任，不要轻易放弃）


2. CSS相关
2.1  页面布局
2.1.1 如何实现垂直居中布局呢？

1.已知宽高

/*v1*/
.container {
    position: absolute;
    left: 50%;
    top: 50%;
    marigin-left: -width / 2;
    marigin-top: -width / 2;
}

/*v2*/
.container {
    position: absolute;
    top: calc(50% - 5em);
    left: calc(50% - 9em);
}


2.未知宽高

/*v1*/
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*v2:flex+ auto*/
.wrapper {
    dislay: flex;
}
.content {
    margin: auto;
}

/*v3. 父元素居中*/
.wrapper {
    display: flex;
    /* 盒子横轴的对齐方式 */
    justify-content: center;
    /* 盒子纵轴的对齐方式 */
    align-items: center;
}

/*v4.body内部居中*/
.content {
     /* 1vh = 1% * 视口高度 */
      margin: 50vh auto;
      transform: translateY(-50%);
}
2.1.2 如何实现水平居中布局呢？

如果需要居中的元素为常规流中 inline / inline-block 元素，为父元素设置 text-align: center;
父元素上设置 text-align: center; 居中元素上margin 为 auto。
如果元素positon: absolute; 那么 
0）设置父元素postion: relative 
1）为元素设置宽度，
2）偏移量设置为 50%，
3）偏移方向外边距设置为元素宽度一半乘以-1



2.1.3 如何实现三栏布局呢？

left和right写在center前面，并且分别左右浮动；
左右区域分别postion：absolute，固定到左右两边;中间的这个div因为是块级元素，所以在水平方向上按照他的包容块自动撑开。
父元素display: table;并且宽度为100%; 每一个子元素display: table-cell; 左右两侧添加宽度，中间不加宽度
包裹这个3个块的父元素display: flex; 中间的元素flex: 1;
网格布局/* 网格布局 */
.wrapper {
 display: grid;
 width: 100%;
 grid-template-columns: 300px 1fr 300px;
}


2.2 知道CSS动画的实现吗？

[!NOTE]
知道transition 过渡动画和animation 关键帧动画区别和具体实现。

1.CSS动画实现轮播图
2.CSS动画实现旋转的硬币
3.CSS动画实现钟摆效果


2.3 CSS盒子模型
2.3.1 说一下CSS的盒子模型？标准模型和IE模型的区别？CSS如何设置这两种模型？


标准盒子模型：width = content
IE盒子模型：width = content + pading + border



box-sizing : content-box
box-sizing : border-box

2.4 CSS样式获取
2.4.1 JS如何设置获取盒子模型对应的宽度和高度？(面试重点)


dom.style.width/height ： 只能取到内联样式的的属性信息（拿不到外部引入的CSS样式信息的）
dom.currentStyle.width/height : 会拿到浏览器渲染之后的属性信息（IE浏览器）
window.getComputedStyle(dom).width/height : Chrome/Firefox 兼容， Firefox可以通过document.defaultView.getComputedStyle(dom)的方式来获取
dom.getBoundingClientRect().width/height : 可以获取距离viewport位置的宽度和高度


2.5 BFC
2.5.1 根据盒子模型解释边距额重叠问题？边距重叠问题的解决方案？


父子元素
兄弟元素
其他    --------------------------计算方式：以参数的最大值来进行计算

解决方案：对父级元素创建BFC
2.5.2 BFC原理

[!NOTE]
BFC： 块级格式化上下文，IFC（内联格式化上下文）


在BFC的垂直边距上面会发生重叠
BFC的区域不会与浮动元素的BOX重叠
BFC在页面上是一个独立的渲染区域，外部的元素不会影响到我，同时也不会影响到外部的元素
计算BFC的高度的时候，浮动元素也会参与运算

2.5.3  如何创建BFC？

float值不是none
position值不是static或者relative
display值为table, table-cell, inline-box1. 
overflow : auto/hidden

2.5.4 BFC的使用场景？（重点理解）

解决边距的重叠问题

     
     1
     
     
         2
     

     3


BFC 不与float部分重叠的解决

   
   
       LEFT
   
   
       RIGHT
       111
       111
       111
       111
       111
       111
       111
       111
       111
       111
       111
       111
       111
       111
       111
   


BFC子元素即使是float元素也要参与运算

   
   
       我是浮动的元素
   



3. 事件相关
3.1 DOM事件
3.1.1 DOM事件的级别有哪些？

[!NOTE]
DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。


DOM0 : element.onclick = function(e) {}
  DOM1 ：该标准中未涉及到事件绑定的相关东西
DOM2 : element.addEventListener('click', function(e){}, false)， 一个DOM元素可以添加多个事件
DOM3 : element.addEventListener('keyup', function(e){}, false)，在DOM2标准基础上面增加了新的事件类型：鼠标事件，键盘事件，焦点事件  

3.1.2 DOM事件模型有哪些？

事件捕获：从外向内, window -> document -> body -> button
事件冒泡：从内向外，button -> body -> document -> window

3.1.3 DOM事件流？
浏览器为当前的页面与用户进行交互的过程中，点击鼠标后事件如何传入和响应的呢？


捕获阶段：从外部容器开始向内



目标阶段：事件通过捕获到达目标阶段



冒泡阶段：从目标元素再上传到window对象



3.1.4 什么事件可以代理？什么事件不可以代理呢？
什么样的事件可以用事件委托，什么样的事件不可以用呢？ 

[!NOTE]

通常支持事件冒泡（Event Bubbling）的事件类型为鼠标事件和键盘事件，例如：mouseover, mouseout, click, keydown, keypress。
接口事件(指的是那些不一定与用户操作有关的事件)则通常不支持事件冒泡（Event Bubbling），例如：load, change, submit, focus, blur。


很明显：focus 和 blur 都属于不支持冒泡的接口事件。既然都不支持冒泡，那又如何实现事件代理呢？
3.1.5 IE和DOM事件流的区别？
IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件

冒泡型事件模型： button -> div -> body (IE浏览器本身只支持Bubbling不支持Capturing)
捕获型事件模型： body -> div-> button (Netscape事件流，网景浏览器公司)
DOM事件模型： body -> div -> button -> button -> div -> body (先捕获后冒泡，除了IE以外的其他浏览器都支持标准的DOM事件处理模型)


[!NOTE]


规范和浏览器实现的差别？
DOM2级事件规范的捕获阶段，事件从文档节点document开始传播，现代浏览器大多数都是从window对象开始传播事件的；
DOM2级事件规范捕获阶段不涉及事件目标，现代浏览器大多数都在这个阶段包含事件目标。



3.1.6 事件对象event的属性方法的差别?
        IE                    DOM
cancelBubble = true    stopPropagation()    // 停止冒泡
returnValue = false    preventDefault()     // 阻止元素默认事件
srcEelement            target               // 事件目标
3.1.7 描述DOM事件捕获的具体流程？
window -> document -> HTML标签 -> body -> ... -> 目标元素

[!NOTE]
关键点： 注意根节点是window这个对象的




  
  Title


  
      
  
  


3.1.8 如何拿到HTML这个标签节点元素呢？(加分项)
  var html = document.documentElement;
3.1.9 描述Event对象的常见应用？

e.preventDefault() : 阻止默认事件（如阻止a标签的默认跳转行为）
e.stopPropagation() : 阻止事件冒泡的行为
*** e.stopImmediatePropagation() : 事件响应的优先级的应用场景，如果一个元素绑定了多个事件，但是又不想让其他的事件执行的时候使用该方法【也会阻止冒泡】
e.currentTarget : 当前所绑定的事件对象

  document.documentElement.onclick = function(e) {
    console.log(e.currentTarget, e.target);       // ...（）给绑定事件的那个元素, 当前被点击的那个元素
  }

[!NOTE]
e.target : 当前被点击的元素，父元素使用事件代理的方式来实现，可以直接使用该属性获取被点击的那个元素

3.2 如何自定义事件？(重点))
3.2.1 如何给一个按钮绑定一个自己定义的事件呢？
  // v1. 使用Event对象来自定义事件
  // 开始创建一个自己定义的事件对象
  var eve = new Event('customEvent');
  // 使用dom2事件处理的方式来给这个元素绑定一个事件
  var dom = document.documentElement;
  dom.addEventListener('customEvent', function(e) {
    console.log('customEvent called!');
  });
  // 下面的这句话可以在适合的场景中来触发一个自己定义的事件对象
  setTimeout(function(){
    // 在1s之后触发这个事件
    dom.dispatchEvent(eve);
  }, 1000)


  // v2. 使用CustomEvent来实现自定义事件
  var dom = document.documentElement;
  // 使用CustomEvent的方式可以在事件触发的时候传递一个参数，然后通过e.detail 的方式来获取这个参数信息
  var myClick = new CustomEvent('myClick', {detail : {name : 'zhangsan', age : 24}});
  dom.addEventListener('myClick', function(e){
    console.log(e.detail, e.target)
  })
  dom.dispatchEvent(myClick);

4. HTTP协议
4.1 HTTP协议的主要特点？

简单快速
灵活
无连接
无状态

4.2 HTTP报文的组成部分？

请求报文
请求行：请求方法 资源地址 HTTP版本
请求头： key : value
空行 :
请求体 : name=zhangsan&age=18
响应报文 : HTTP版本 状态码
状态行
响应头
空行
响应体  

4.3 HTTP方法？

GET : 获取资源
POST ： 传输资源
PUT ：更新资源
DELETE ： 删除资源
HEAD ：获取报文首部
OPTIONS : 允许客户端查看服务器的性能。

4.4 POST和GET的区别？

GET请求在浏览器回退的时候是无害的，而POST会再次提交请求
GET请求产生的URL地址可以被收藏，而POST不可以
GET请求会被浏览器主动缓存，而POST不会，除非主动设置
GET请求只能进行URL编码，而POST支持多种编码方式
GET请求参数会被完整第保留在浏览器的历史记录里面，而POST参数不会被保留
GET请求爱URL中传送的参数的长度是有限的（2KB），而POST没有限制
对参数的数据类型，GET值接受ASCII字符，而POST没有限制
POST比GET更安全，GET参数直接暴露在URL上，所以不能用来传递敏感信息

9. GET参数通过URL传递，POST参数直接放在了Request body中
4.5 HTTP状态码？
4.5.1 状态码的第一位

1xx ：指示信息-表示请求已接收，继续处理（重点）
2xx ：成功-表示请求已被成功接收
3xx ：重定向-要完成请求必须进行更进一步的操作
4xx ：客户端错误-请求有语法错误或请求无法实现
5xx ：服务器错误-服务器未能实现合法的请求

4.5.2 状态码详解

200 OK ： 客户端请求成功
206 Partial Content ： 客户端发送了一个带有Range头的GET请求（Video标签或者audio标签在请求数据的时候）
301 Moved Permanently ： 请求的页面已经转移到了新的URL
302 Found ： 所请求的页面已经临时转移到了新的URL
304 Not Modified ：客户端有缓冲的文档并发出了一个条件下的请求，原来缓冲的文档还可以继续使用
400 Bad Request ： 客户端请求有语法错误，不被服务器所理解
401 Unauthorized ： 请求未经授权，这个状态码必须和WWW-Authenticate报头域一起使用
403 Forbidden：对被请求页面的访问被禁止
404 Not Found ： 请求资源不存在
500 Internal Server Error ：服务器发生不可预期的错误，原来缓冲的文档还可以继续使用
503 Service Unavailable ： 请求未完成，服务器临时过载或宕机，一段时间后可能恢复正常

4.6 什么是持久连接？

[!NOTE]
HTTP协议采用‘请求-应答’模式， HTTP1.1版本才支持的，使用Keep-alive字段可以建立一个长连接，从而不需要每次请求都去建立一个新的连接。

4.7 什么是管线化？
4.7.1 基本概念

在使用持久连接（Keep-alive）的情况下，某个连接上的消息的传递类似于：请求1 --> 响应1 --> 请求2 --> 响应2 --> 请求3 --> 响应3
管线化的过程： 请求1 --> 请求2 --> 请求3 --> 响应1 --> 响应2 --> 响应3

4.7.2 管线化的特点（特点）

管线化机制通过持久连接完成，仅在HTTP1.1版本之后支持
只有GET和HEAD请求可以进行管线化，POST有所限制的
初次创建连接的时候不应该启动管线机制，因为对方（服务器）不一定支持HTTP1.1版本的协议
管线化不会影响到响应到来的顺序，HTTP响应返回的顺序并未改变
HTTP1.1 要求服务器支持管线化，但并不要求服务器也对响应进行管线化处理，只是要求对于管线化的请求不失败即可
由于上面提到的服务器端问题，开启管线化很可能并不会带来大幅度的性能提升，而且很多服务器和代理程序对管线化的支持并不好，因此现代的浏览器如Chrome和Firefox默认并没有开启管线化支持

5. 原型链
5.1 创建对象的几种方法？
// 1. 使用字面量的方式来创建
var o1 = {name : 'zhangsan'};
var o11 = new Object({name : 'zhangsan'});

// 2. 使用普通构造函数的方式来创建
var M = function(){
    this.name = 'zhangsan';
}
var o2 = new M();

// 3. Object.create方法
var p = {name : 'zhangsan'};
var o3 = Object.create(p);
5.2 原型、构造函数、实例、原型链？
构造函数：使用new运算符来声明一个实例（任何函数都是可以通过构造函数来使用的）
原型链：通过原型链可以找到上一级别的原型对象
原型对象：多个实例公用的数据和属性或者方法

5.3 instanceof的原理？

[!NOTE]
instanceof 检测一个对象A是不是另一个对象B的实例的原理是：查看对象B的prototype指向的对象是否在对象A的[[prototype]]链上。如果在，则返回true,如果不在则返回false。不过有一个特殊的情况，当对象B的prototype为null将会报错(类似于空指针异常)。

// 2. 使用普通构造函数的方式来创建
var M = function(){
  this.name = 'zhangsan';
}
var o2 = new M();
undefined
o2.__proto__ == M.prototype
true
o2.__proto__ == M.prototype
true
o2.__proto__.constructor === Object
false
o2.__proto__.constructor === M
true
5.4 new运算符的原理？

一个新对象被创建。它继承于foo.prototype
构造函数foo被执行。执行的时候，相应的传参会被传入，同时上下文(this)会被指定为这个新实例，new foo等同于 new foo(),只能用在不传递任何参数的情况
如果构造函数返回了一个“对象”，那么这个对象会取代整个new出来的结果。如果构造函数没有返回对象，那么new 出来的结果为步骤1创建的对象

// new 一个对象的过程
var _new = function (fn) {
  // 1. 创建一个对象，这个对象要继承fn这个构造函数的原型对象
  var o = Object.create(fn.prototype);
  // 2. 执行构造函数
  var k = fn.call(o, arguments);
  // 3. 看下执行的这个函数的运行效果是不是函数
  if (typeof k === 'object'){
      return k;
  }
  else
  {
      return o;
  }
}
6. 面向对象
6.1 类与继承：如何实现继承，继承的几种实现方式



  
  Title






[!WARNING]
面试技巧


不要让面试官问太多题目：拖拉时间【挤牙膏】，把一个问题尽量吃透
知识深度

7. 通信
7.1 什么是同源策略个限制？

[!NOTE]
同源策略限制是从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。（一个源的文档或脚本是没有权利直接操作另外一个源的文档或脚本的）


Cookie， LocalStorage和IndexDB无法读取
DOM无法获得；（document.body是无法获取的）
Ajax请求不能发送

7.2 前后端如何进行通信呢？

Ajax（有同源策略限制）；Fetch API则是XMLHttpRequest的最新替代技术， 它是W3C的正式标准
WebSocket：支持跨域请求数据，没有同源策略的限制
CORS：新的协议通信标准；CORS则将导致跨域访问的请求分为三种：Simple Request，Preflighted Request以及Requests with Credential；cors相对于jsonp而言的好处就是支持所有的请求方式，不止是get请求，还支持post,put请求等等，而它的缺点就很明显，无法兼容所有的浏览器，对于要兼容到老式浏览器而言，还是使用jsonp好点

7.3 如何创建Ajax呢？

XMLHttpRequest对象的工作流程
浏览器的兼容性处理【重点】
事件的触发条件
事件的触发顺序

  function ajax(params){
    // 1. 创建对象，考虑兼容性【重点】
    var xhr = XMLHTTPRequest ? new XMLHTTPRequest() : new window.ActiveXObject('Microsoft.XMLHTTP');      // *** 兼容性问题必须考虑
    // 2. 打开连接
    var type = params.type || 'GET',
        url = params.url || '',
        data = params.data || {},
        success = params.success,
        error = params.error,
        dataArr = [];
    for (var k in data) {
      dataArr.push(k + '=' + data[k]);
    }
    //带上Cookie
    xhr.withCredentials = true;
    if (type.toUpperCase() === 'GET') {
      // get
      url += '?' + dataArr.join('&');
      // 问号结尾的话，直接替换为空字符串
      xhr.open(type, url.replace(/\?$/g, ''), true);
      // GET 请求的话，是不需要再send方法中带上参数的
      xhr.send();
    }
    else {
      // POST
      xhr.open(type, url, true);
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      // POST 请求需要把数据放在send方法里面， data = name=zhangsna&age=18&sex=male
      xhr.send(dataArr.join('&'));
    }
    // 开始监听变化
    xhr.onreadystatechange = function(){
      // 这里需要考虑强缓存和协商缓存的话直接处理，206是媒体资源的创建方式
      if (xhr.readyState === 4 && xhr.status === 200 || xhr.status === 304) {
          var res;
          if (success instanceof Function) {
            res = xhr.responseText;
            if (typeof res === 'string') {
              res = JSON.parse(res);
              // 开始执行成功的回调函数
              success.call(xhr, res);
            }
          } else {
            if (error instanceof Function) {
              // 失败的话直接返回这个responseText中的内容信息
              error.call(xhr, res);
            }
          }
      }
    }
  }
7.4 跨域通信的几种方式？
7.4.1 JSONP
  function jsonp(url, onsuccess, onerror, charset){
    // 1. 全局注册一个callback
    var callbackName = 'callback' + Math.random() * 100;
    window[callbackName] = function(){
      if (onsuccess && typeof onsuccess === 'Function') {
        onsuccess(arguments[0]);
      }
    }
    // 2. 动态创建一个script标签
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    charset && script.setAttribute('charset', charset);
    script.setAttribute('src', url);
    script.async = true;
    // 3. 开始监听处理的过程
    script.onload = script.onreadystatechange = function(){
      if (!script.readyState || /loaded|complete/.test(script.readyState)) {
        // 4. 成功之后移除这个事件
        script.onload = script.onreadystatechange = null;
        // 删除这个script的DOM对象（head.removeChild(script), 这个DOM节点的父节点相当于是head标签这个父节点）
        script.parentNode && script.parentNode.removeChild(script);
        // 删除函数或变量
        window[callbackName] = null;
      }
    }
    script.onerror = function(){
      if (onerror && typeof onerror === 'Function') {
        onerror();
      }
    }
    // 5. 开始发送这个请求(把这个标签放在页面中的head标签中即可)
    document.getElementsByTagName('head')[0].appendChild(script);
  }
7.4.2 Hash
hash 改变后页面不会刷新的

[!NOTE]
使用场景：当前的页面A通过iframe或者frame嵌入了跨域的页面

  // 1. A页面中的代码如下
  var B = document.getElementsByTagName('iframe');
  B.src = B.src + '#' + JSON.stringfy(data);
  // 2. B中的伪代码如下
  window.onhashchange = function(){
    var data = window.location.hash;    // 接受数据
    data = JSON.parse(data);
  }
7.4.3  postMessage(HTML5中新增)

[!NOTE]
使用场景： 可以实现窗口A(A.com)向窗口B(B.com)发送信息

  // 1. 窗口B中的代码如下
  var BWindow = window;
  BWindow.postMessage(JSON.stringfy(data), 'http://www.A.com');   
  // 2. 窗口A中代码
  var AWindow = window;
  AWindow.addEventListener('message', function(e){
      console.log(e.origin);                  // http://www.B.com
      console.log(e.source);                  // BWindow

      e.source.postMessage('已成功收到消息');

      console.log(JSON.parse(e.data));        // data
  }, false)
  // 父窗口给子窗口发信息，需要用iframe的contentWindow属性作为调用主体
  // 子窗口给父窗口发的信息需要使用window.top，多层iframe使用window.frameElement
7.4.4 . WebSocket

[!NOTE]
不受同源策略影响，可以直接使用

  var ws = new window.WebSocket('ws://echo.websocket.org');

  // 打开连接
  ws.onopen = function(e){
    console.log('Connection open ……');
    ws.send('Hello WebSocket!');
  }

  // 接受消息
  ws.onmessage = function(e){
    console.log('Received Message : ', e.data);
  }

  // 关闭连接
  ws.onclose = function(e){
    console.log('Connection closed');
  }
7.4.5 CORS

支持跨域通信版本的Ajax，是一种新的标准（Origin头）【ajax的一个变种，适用于任何】

http://www.ruanyifeng.com/blog/2016/04/cors.html
  fetch('/get/name', {
    method : 'get'
  }).then(function(response){
    console.log(response);
  }).catch(function(err){
    // 出错了；等价于then的第二个参数
  });
  // 原因：浏览器默认会拦截ajax请求，会根据头中的origin消息进行判断处理消息；Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
7.4.5.1 CORS请求的基本流程

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。
Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。
如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。
如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

  Access-Control-Allow-Origin: http://api.bob.com   // 必需的字段
  Access-Control-Allow-Credentials: true            // 可选字段： 是否允许发送cookie
  Access-Control-Expose-Headers: FooBar
  Content-Type: text/html; charset=utf-8

简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。OPTIONS表示当前的这个请求是用来询问的；服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

7.4.5.2 JSONP和CORS的区别？

JSONP只支持GET请求，CORS支持所有类型的HTTP请求
JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

8. 安全
8.1 CSRF
8.1.1 基本概念和缩写
CSRF： 跨站请求伪造，Cross site request forgery
8.1.2 CSRF 攻击原理

8.1.3 可以成功攻击的条件？

目标网站存在CSRF漏洞的请求接口（一般为get请求）
目标用户之前已经成功登录过这个网站（留下了Cookie）

8.1.4 如何防御呢？

Token验证：访问服务器接口的时候，会自动带上这个token
Referer验证：验证网站的页面来源（只有我当前网站下的页面才可以请求，对于来自其他网站的请求一律拦截）
隐藏令牌： 隐藏信息会放在header中（类似于Token）

8.2 XSS
8.2.1 基本概念和缩写
XSS： cross-site scripting, 跨站脚本攻击
8.2.2 XSS防御
攻击原理: 注入JS脚本
防御措施: 让JS代码无法解析执行
8.3 CSRF和XSS的区别呢？

CSRF：网站本身存在漏洞的接口，依赖这些登录过目标网站的用户来实现信息的窃取；
XSS：向页面中注入JS执行，JS函数体内执行目标任务；


[!NOTE]


一定要说出中文名称，实现原理，防范措施都说出来
不要拖泥带水，言简意赅

9. 算法

[!NOTE]
算法攻略：多刷题才是硬道理！！！

二三面（知识深度面）
10. 渲染机制
10.1 什么是DOCTYPE及作用？

DTD（Document Type Definition）：文档类型定义，是一系列的语法规则，用来定义XML或者(X)HTML的文件类型。浏览器会使用它来判断文档的类型，决定使用哪一种协议来解析，以及切换浏览器模式；
DOCTYPE： 是用来声明文档类型和DTD规范的，一个主要的用途是文件的合法性验证；如果文件代码不合法，那么浏览器解析的时候就会出现一些出错
总结：Doctype就是通知浏览器当前的文档是属于那种类型的，包含哪些DTD。

  
  
  
  
  
  


[!NOTE]
在W3C标准出来之前，不同的浏览器对页面渲染有不同的标准，产生了一定的差异。这种渲染方式叫做混杂模式。在W3C标准出来之后，浏览器对页面的渲染有了统一的标准，这种渲染方式叫做标准模式。不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现，就是把如何渲染html页面的权利交给了浏览器，有多少种浏览器就有多少种展示方式。因此要提高浏览器兼容性就必须重视

10.2 严格模式和混杂模式

[!NOTE]
严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关，DTD里面包含了文档的规则。比如：loose.dtd


严格模式：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面
混杂模式：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。


10.3 浏览器的渲染过程？

10.3.1 开始进行DOM解析，渲染DOM Tree

10.3.2 开始进行CSS解析，渲染CSSOM Tree

10.3.3 DOM树和CSS树的结合，最后会转换为Render Tree

10.3.4 Layout的过程，计算每一个DOM元素的位置、宽度、高度等信息，最终渲染并显示页面到浏览器

10.4 何时会触发Reflow？

[!NOTE]
定义：DOM结构中每个元素都有自己的盒子模型，这些都是需要根据各种样式来计算并根据计算结果将元素放在它该出现的位置，这个过程就是reflow；


当你增加、删除、修改DOM节点的时候，会导致Reflow或Repaint
当你移动DOM的位置，或者设置动画的时候
当你修改CSS样式的时候
当你Resize窗口的时候（移动端没有这个问题，与浏览器有关），或者在滚动窗口的时候
当你修改网页的默认的字体的时候

10.5 何时回触发Repaint？

[!NOTE]
定义：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小都确定下来以后，浏览器于是便按照元素各自的特性绘制了一遍，于是页面的内容出现了，这个过程就是repaint


DOM改动
CSS改动

10.6 如何最大程度上的减少浏览器的重绘Repaint过程(频率)呢？
10.6.1 避免在document上直接进行频繁的DOM操作，如果确实需要可以采用off-document的方式进行


先将元素从document中删除，完成修改之后然后再把元素放回原来的位置



将元素的display设置为none, 然后完成修改之后再把元素的display属性修改为原来的值



如果需要创建多个DOM节点，可以使用DocumentFragment创建完毕之后一次性地加入document中去var frag = document.createDocumentFragment();
frag.appendChild(dom);    /*每次创建的节点先放入DocumentFragment中*/
10.6.2 集中修改样式





尽可能少的修改元素style上的属性
尽量通过修改className来修改样式(一次性修改)
通过cssText属性来设置样式值document.getElementById("d1").style.cssText = "color:red; font-size:13px;";
10.6.3 缓存Layout的属性值

[!NOTE]
对于Layout属性中非引用类型的值（数字型），如果需要多次访问则可以在一次访问时先存储到局部变量中，之后都使用局部变量，这样可以避免每次读取属性时造成浏览器的渲染。



  var width = el.offsetWidth;
  var scrollLeft = el.scrollLeft;
10.6.4 设置元素的position为absolute或fixed

[!NOTE]
在元素的position为static和relative时，元素处于DOM树结构当中，当对元素的某个操作需要重新渲染时，浏览器会渲染整个页面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间。

11. 布局Layout？
Layout属性包括：

offsetLeft、offsetTop、offsetHeight、offsetWidth: 相对于父对象的边距信息，且返回值为数字；left获取或设置相对于具有定位属性(position定义为relative)的父对象的边距信息，返回值为字符串10px
scrollTop/Left/Width/Height：滚动条在各个方向上拉动的距离，返回值为数字
clientTop/Left/Width/Height：浏览器的可视区域的大小
getComputedStyle()、currentStyle(in IE)：浏览器渲染DOM元素之后的宽度和高度等样式信息

12. JS运行机制
12.1 如何理解JS的单线程？
看代码，写结果？
  // 同步任务
  console.log(1);
  // 异步任务要挂起
  setTimeout(function(){
    console.log(2)
  }, 0);
  console.log(3)
  // out : 1 3 2
  console.log('A');
  setTimeout(function(){
    console.log('B')
  }, 0);
  while (true) {

  }

  // out : A
12.2 什么是任务队列？
  for (var i = 0; i < 4; i++) {
    // setTimeout , setInterval 只有在时间到了的时候，才会把这个事件放在异步队列中去
    setTimeout(function(){
      console.log(i);
    }, 1000);
  }
  // out : 4 4 4 4
12.3 什么是Event Loop？

[!NOTE]
JS是单线程的，浏览器引擎会先来执行同步任务，遇到异步任务之后，会把当前的这个异步任务放在time模块中，等到主线程中的所有的同步任务全部执行完毕之后；然后当前的这个异步任务只有时间到了之后，才会把这个任务（回调函数）放在一个异步队列中；当当前的任务栈中的任务全部执行完毕了之后，会先去执行微任务队列中的任务（Promise），然后等到微任务队列中的所有任务全部执行完毕之后，再去执行process.nextTick()这个函数，等到这个函数执行完毕之后，本次的事件轮训结束；
开启新的执行栈，从宏任务队列中依次取出异步任务，开始执行；每个宏任务执行都会重新开启一个新的任务执行栈

12.3.1 3个关键点

执行栈执行的是同步任务；
什么时候去异步队列中取这个任务；
什么时候向这个任务队列中放入新的异步任务12.3.2 异步任务的分类



setTimeout, setInterval; 
DOM事件（点击按钮的时候也会先去执行同步任务）； 
Promise

13. 知识点总结

理解JS的单线程的概念
理解任务队列
理解Event Loop
理解哪些语句会翻入到异步任务队列
理解与放入到异步任务队列的时机13.1 页面性能
13.1.1 提升页面性能的方法有哪些？

资源压缩合并，减少HTTP请求；
非核心代码的异步加载 ---> 异步加载的方式有哪些？ ---> 异步加载的区别？
利用浏览器的缓存 ---> 缓存的分类 ---> 缓存的原理
使用CDN加速
预解析DNS：DNS Prefetch 是一种DNS 预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。（提前解析域名，而不是点击链接的时候才去进行DNS域名解析，可以节省DNS解析需要耗费的20-120毫秒时间）


  
  
  
                                 
                 
  
  
  
14. 异步加载的方式
14.1 动态脚本的加载
  var script = document.createElement('script');
  document.getElementsByTagName('head')[0].appendChild(script);

  // 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
  
14.2 defer


14.3 async
  
  
14.4 异步加载的区别？

[!NOTE]

defer是在HTML解析完成之后（DOMContentLoaded事件执行之后）才会执行，如果是多个，会按照加载的顺序依次执行（按照顺序执行）
async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关（与顺序无关）


15. 说一下浏览器的缓存机制吧？
15.1 缓存的分类

[!NOTE]
缓存目的就是为了提升页面的性能

15.1.1 强缓存
直接从本地读取，不发送请求
    Response Headers
    cache-control: max-age=315360000（相对时间，优先级比expires高）
    expires: Sat, 10 Mar 2029 04:01:39 GMT(绝对时间)
15.1.2 协商缓存
问一下服务器，这个文件有没有过期，然后再使用这个文件
    Response Headers
    last-modified: Tue, 12 Mar 2019 06:22:34 GMT（绝对时间）
    etag: "52-583dfb6f4de80"
向服务器请求资源的时候，带上if-Modified-Since或者if-None-Match这个请求头，去询问服务器：
    Request Headers
    if-Modified-Since: Tue, 12 Mar 2019 06:22:34 GMT
    if-None-Match: "52-583dfb6f4de80"
16. 错误监控/如何保证前端产品的上线质量？
16.1 前端错误的分类？

即时运行错误：代码错误
资源加载错误：图片/css/js文件加载失败

16.2 错误的捕获方式？
16.2.1 即时运行错误的捕获方式
  // 方法一：使用try catch捕获
  try {
    // ...
  } catch (e) {
    // error
  } finally {
    // handle error
  }

  // 方法二：使用window.onerror 捕获错误
  // 无法捕获到资源加载错误
  window.onerror = function(msg, url, line, col, error){
    // ...
  }  
  window.addEventListener('error', function(msg, url, line, col, error){
    // ...
  })
16.2.2 资源加载错误（不会向上冒泡）
  // 方法一: 直接在script, img这些DOM标签上面直接加上onerror事件
  Object.onerror = function(e){
      // ...
  }

  // 方法二：window.performace.getEntries(间接获取资源加载错误的数量)
  var loadedResources = window.performance.getEntries();           // 1. 获取浏览器中已经加载的所有资源（包括各个阶段的详细加载时间）
  var loaderImgs = loadedResources.filter(item => {
      return /\.jpg|png|gif|svg/.test(item.name)
  });
  var imgs = document.getElementsByTagName('img');                // 2. 获取页面中所有的img集合
  var len = imgs.length - loaderImgs.length;                      // 3. 加载失败的图片数量
  console.log('图片加载失败数量：', len, '条');


  // 方法三： 使用事件捕获的方式来实现Error事件捕获
  // 使用事件捕获的方式来实现资源加载错误的事件的捕获：window ---> document --> html --- > body ---> div ---...
  window.addEventListener('error', function (msg) {
      console.log(msg);
  }, true);
16.2.3 补充的方法
      // 使用事件捕获的方式来实现
     window.addEventListener('error', function (msg) {
         console.log('资源加载异常成功捕获：', msg);
     }, true);
     // 使用事件冒泡的方式是只能捕获到运行的时候的一些异常
     window.addEventListener('error', function (e) {
         console.log('运行异常成功捕获1：', e.message, e.filename, e.lineno, e.colno, e.error);
     }, false);

     // 这种方式是可以按照参数的方式来接受相关的参数信息
     window.onerror = function (msg, url, line, col, error) {
         console.log('运行异常成功捕获2：', msg, url, line, col, error);
     }
16.2.4 问题的延伸：跨域的js运行错误可以捕获吗，错误提示是什么？应该怎么处理呢？
16.2.4.1 错误信息

errorinfo :
Script0 error
0 row
0 col
16.2.4.2 处理方法

第一步：在script标签上增加crossorigin属性



第二步：设置js资源响应头'Access-Control-Allow-Origin: * ',服务器端需要开启// 服务器可以直接设置一个响应头信息
res.setResponseHeader('Access-Control-Allow-Origin', 'www.lmj.com');


16.3 上报错误的基本原理？

采用Ajax通信的方式来上报
利用Image对象进行上报（cnzz）[重点理解掌握]// 下面的两种方式都是可以实现错误信息的上报功能的
(new Image).src = 'http://www.baidu.com?name=zhangsna&age=18&sex=male'
(new Image()).src = 'https://www.baidu.com?name=zhangsan'


17. 如何使用JS获取客户端的硬件信息呢？
  // IE 浏览器提供的获取电脑硬件的API
  var locator = new ActiveXObject ("WbemScripting.SWbemLocator");
  var service = locator.ConnectServer(".");
  var properties = service.ExecQuery("SELECT * FROM Win32_Processor");
18. 使用window.performace 来实现用户体验的数据记录呢？

[!NOTE]
可以参考性能优化章节-performance性能监控一文内容。

三四面（业务项目面）

[!NOTE]


知识面要广
理解要深刻
内心要诚实：没了解过，问面试官有哪些资料可以学习
态度要谦虚
回答要灵活：把握一个度，不要和面试官争执对错

要学会赞美：被问住了可以回答，适当赞美（没面试官理解的那么深，虚心请教）



19.介绍一下你做过的项目？

19.1 项目介绍模板（业务能力体现）

我做过什么业务？
负责的业务有什么业绩？
使用了什么技术方案？
突破了什么技术难点？
遇到了什么问题？
最大的收获是什么？

19.2 团队协作能力

19.3 事务推动能力

19.4 带人能力

终面（HR面）
20. 技术终面或HR面试要点

[!NOTE]
主要考察点：乐观积极、主动沟通、逻辑顺畅、上进有责任心、有主张，做事果断、职业竞争力、职业规划

20.1 职业竞争力

业务能力：可以做到行业第一

思考能力：对同一件事可以从不同角度去思考，找到最优解

学习能力：不断学习新的业务，沉淀、总结

无上限的付出：对于无法解决的问题可以熬夜、加班


20.2 职业规划

目标是什么：在业务上成为专家，在技术上成为行业大牛

近阶段的目标：不断的学习积累各方面地经验，以学习为主

长期目标：做几件有价值的事情，如开源作品、技术框架等

方式方法：先完成业务上的主要问题，做到极致，然后逐步向目标靠拢





【Web安全】CSRF攻击
https://github.com/fecommunity — Sun, 24 Mar 2024 02:46:02 GMT
CSRF 跨站请求伪造
1. 介绍一下CSRF攻击的原理和防御？

（Cross Site Request Forgy）,打开同一浏览器时其他的网站对本网站造成的影响。原理就是攻击者构造出一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求。如果用户是在登录状态下的话，后端就以为是用户在操作，从而进行相应的逻辑。


举个例子，用户同时打开了A网站和钓鱼网站。 假设A网站中有一个通过 GET 请求提交用户评论的接口，那么攻击者就可以在钓鱼网站中加入一个图片，图片的地址就是评论接口。

1.1 CSRF攻击原理

用户登录A网站
A网站确认身份（给客户端cookie）
B网站页面向A网站发起请求（带上A网站身份）

1.2  CSRF防御

Get 请求不对数据进行修改

不让第三方网站访问到用户 Cookie

阻止第三方网站请求接口

请求时附带验证信息，比如验证码或者 Token

SameSite

可以对 Cookie 设置 SameSite 属性。该属性表示 Cookie 不随着跨域请求发送，可以很大程度减少 CSRF 的攻击，但是该属性目前并不是所有浏览器都兼容。


Token验证

cookie是发送时自动带上的，而不会主动带上Token，所以在每次发送时主动发送Token


Referer验证

对于需要防范 CSRF 的请求，我们可以通过验证 Referer 来判断该请求是否为第三方网站发起的。


隐藏令牌

主动在HTTP头部中添加令牌信息



禁止第三方网站带cookies
same-site属性。 设置只有同一站点的请求才能携带cookie
1.3 CSRF蠕虫
如果某个用户打开了被攻击网页，并且用户同时访问了攻击者的网页。
那么攻击者的网页就会使用用户的身份发送一些请求，并且常用用户的身份发布一些评论或文章，里面包含攻击者的网页链接。如果其他用户看到了这个用户的这条评论，都甚至可以不点击，其他用户也会被盗用身份发送一些恶意请求。这样病毒的传播就会越来越快，影响越来越大。
1.4 CSRF攻击危害

利用用户登录态
用户不知情
完成业务请求
盗取用户资金
冒充用户发帖背锅
损坏网站名誉




【CSS相关】CSS效果
https://github.com/fecommunity — Sat, 23 Mar 2024 15:00:59 GMT
CSS效果
1.使用div绘制图形（三角形）？



    
    Title
    












2.如何产生一个不占空间的边框?( box-sizing属性)?

[!NOTE]
知识点：IE和标准盒子模型的异同点



标准盒子模型：元素的width或height=content的width或height；





IE盒子模型：元素的width或height=content的width或height+padding2+border2；

    /*IE盒子模型：width_sum = margin + width*/
    .border-box-use {
        box-sizing : border-box;
        /*通过IE的盒子模型设置出来之后，这个盒子内容区域的宽度实际只有180px
            这里指定的width 实际上是包含了border的宽度的
        */
        width: 200px;
        height: 200px;

        border: 10px solid #89ff56;
    }

    /*标准盒子模型：width_sum = margin + width + padding + width*/
    .border-content-box-use {
        /*设置为标准的盒子模型，默认值*/
        box-sizing: content-box;

        width: 200px;
        height: 200px;

        padding: 1px;
        border: 10px solid #ff255f;
    }

    .parent-box-inhrit {
        /*设置当前的盒子模型是从父级盒子中继承，这里相当于是继承了IE的盒子模型*/
        box-sizing: inherit;
        width: 50px;
        height: 50px;
        background-color: #48adff;

        border: 1px solid #000;

        /*对一个元素自身设置padding，相当于是把盒子撑大了*/
        padding: 5px;
    }
2.1 使用box-shadow实现
/*box-shadow 制作边框*/
.box-shadow-border {
    width: 200px;
    height: 200px;
    /*设置外阴影：x y 模糊区域 扩展区域*/
    box-shadow: 0 0 0 10px red , 0 0 0 10px blue;
}
2.2 使用outline实现
在元素边框边缘的外围绘制一条包围元素的线，包括outline-color、outline-style、outline-width三个子属性的设置，可缺省，无固定顺序。轮廓不占据页面空间，也不一定是矩形。即不会增加额外的width或者height。
.borner-no-space {
    width: 200px;
    height: 200px;
    outline: 10px solid red;
}
3.如何实现IOS图标的圆角？
/*clip-path的使用
            1. 对容器进行裁剪
            2. 常见集合图形
            3. 自定义路径
*/
.container-clippath {
    width: 400px;
    height: 300px;
    border: 1px solid #000;
    background-image: url("bg.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;

    /*开始进行区域裁剪*/
    /*clip-path: circle(50px at 100px 100px);*/
    /*clip-path: inset(100px 50px);*/
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    /*同时，也是支持svg矢量图的裁剪*/
}

.container-clippath:hover {
    clip-path: circle(80px at 100px 100px);
}
5.说下背景图的居中显示/重复/改变大小?
background-position： 背景图片相对容器原点的起始位置
background-repeat
background-size : cover/contain(设置大小)


/* 一个值: 这个值指定图片的宽度，那么第二个值为auto */
background-size: auto
background-size: 50%
background-size: 3em
background-size: 12px

/* 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/*多重背景，请用逗号隔开，在CSS语法中凡语法后跟*或者#，都是可以无限重复的，但是必须用逗号隔开。 */
background-size: auto, auto     /* 不要跟background-size: auto auto混淆了 */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

background-size: inherit
6.如何平移/放大一个元素？如何实现0.5px的边框？

[!NOTE]
知识点:transform的灵活使用




    边框宽度1px
    
        边框宽度0.5px
        
    


7.如何实现3D效果（旋转的硬币）？
/* 1. 设置一个透视变换，相机距离图像的距离 */
/* perspective : 500px */
/* 2. 设置视觉查看的样式 */
/* transform-style : perspective-3d */
/* 3. 变换图像 */
/* transform : translate rotate */


/*旋转的硬币效果*/
.money {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: #48adff;
    border: 2px solid #000;

    /*开启3D效果*/

    perspective: 500px;
    transform-style: preserve-3d;
    /*transform : rotateY(180deg);*/
    animation : rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform : rotateY(0deg);
    }
    to {
        transform : rotateY(360deg);
    }
}



【前端面试题】HTML和CSS
https://github.com/fecommunity — Sun, 17 Mar 2024 13:27:53 GMT
HTML和CSS
1.    你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)
2.    每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
 声明位于文档中的最前面的位置，处于  标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）
3.    Quirks模式是什么？它和Standards模式有什么区别
从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？
在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。
区别：
总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。
（还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是看文章看的，甚至完全不知道。）
4.    div+css的布局较table布局有什么优点？
改版的时候更方便 只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。
5.    img的alt与title有何异同？ strong与em的异同？
a:alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点
6.    你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
那么问题来了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？
7.    为什么利用多个域名来存储网站资源会更有效？
CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
8.    请谈一下你对网页标准和标准制定机构重要性的理解。
网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。
9.    请描述一下cookies，sessionStorage和localStorage的区别？
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
10.    简述一下src与href的区别。
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

11.    知道的网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）
科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%
12.    知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？
微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。
优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google）
13.    在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？
答案：dns缓存，cdn缓存，浏览器缓存，服务器缓存。
14.    一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。
15.    你如何理解HTML结构的语义化？　
去掉或样式丢失的时候能让页面呈现清晰的结构：
html本身是没有表现的，我们看到例如
是粗体，字体大小2em，加粗；是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.
例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.
PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）
使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.
语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.
搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重
过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.
你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.
因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.
SEO主要还是靠你网站的内容和外部链接的。
便于团队开发和维护
W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。
16.    谈谈以前端角度出发做好SEO需要考虑什么？
了解搜索引擎如何抓取网页和如何索引网页
你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。
Meta标签优化
主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。
如何选取关键词并在网页中放置关键词
搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。
了解主要的搜索引擎
虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。
主要的互联网目录
Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。
按点击付费的搜索引擎
搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。
搜索引擎登录
网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。
链接交换和链接广泛度（Link Popularity）
网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。
合理的标签使用
17.    有哪项方式可以对一个DOM设置它的CSS样式？　
外部样式表，引入一个外部css文件
内部样式表，将css代码放在  标签内部
内联样式，将css样式直接定义在 HTML 元素内部
18.    CSS都有哪些选择器？
派生选择器（用HTML标签申明）
id选择器（用DOM的ID申明）
类选择器（用一个样式类名申明）
属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）
除了前3种基本选择器，还有一些扩展选择器，包括
后代选择器（利用空格间隔，比如div .a{  }）
群组选择器（利用逗号间隔，比如p,div,#a{  }）
那么问题来了，CSS选择器的优先级是怎么样定义的？
基本原则：
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
复杂的计算方法：
用1表示派生选择器的优先级
用10表示类选择器的优先级
用100标示ID选择器的优先级
div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1
#xxx li 优先级 100 +1
那么问题来了，看下列代码，
标签内的文字是什么颜色的？


 123 

答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在中的先后关系无关。

19.    CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
最基本的：
设置display属性为none，或者设置visibility属性为hidden
技巧性：
设置宽高为0，设置透明度为0，设置z-index位置在-1000em
20.    超链接访问过后hover样式就不出现的问题是什么？如何解决？
答案：被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）
21.    什么是Css Hack？ie6,7,8的hack分别是什么？
答案：针对不同的浏览器写不同的CSS code的过程，就是CSS hack。
示例如下：
   #test{
        width:300px;
        height:300px;
        background-color:blue;      /firefox/
        background-color:red\9;      /all ie/
        background-color:yellow;    /ie8/
        +background-color:pink;        /ie7/
        _background-color:orange;       /ie6/    }
        :root #test { background-color:purple\9; }  /ie9/
@media all and (min-width:0px)
     { #test {background-color:black;} }  /opera/
@media screen and (-webkit-min-device-pixel-ratio:0)
{ #test {background-color:gray;} }       /chrome and safari/
22.    行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。
那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
答案： 、 、

函数库调用	系统调用
在所有的ANSI C编译器版本中，C库函数是相同的	各个操作系统的系统调用是不同的
它调用函数库中的一段程序（或函数）	它调用系统内核的服务
与用户程序相联系	是操作系统的一个入口点
在用户地址空间执行	在内核地址空间执行
它的运行时间属于“用户时间”	它的运行时间属于“系统”时间
属于过程调用，调用开销较小	需要在用户空间和内核上下文环境间切换，开销较大
在C函数库libc中有大约300个函数	在UNIX中大约有90个系统调用
典型的C函数库调用：system fprintf malloc	典型的系统调用：chdir fork write brk；