Alan-blog

Appearance

Vue3的特性 ​

proxy ​

proxy拦截函数 ​

js
// 目标函数
const originalFunc = function(a, b) {
    console.log('原始函数执行');
    return a + b;
};

// 代理配置
const handler = {
    apply(target, thisArg, args) {
        console.log('拦截函数调用，参数:', args);
        // 可在此添加自定义逻辑（如参数验证、日志记录等）
        const result = target.apply(thisArg, args); // 调用原函数
        console.log('函数返回结果:', result);
        return result * 2; // 修改返回值
    }
};

// 创建代理函数
const proxyFunc = new Proxy(originalFunc, handler);

// 测试调用
console.log(proxyFunc(2, 3)); 
// 输出：
// 拦截函数调用，参数: [2, 3]
// 原始函数执行
// 函数返回结果: 5
// 10（最终返回 5 * 2）
// 目标函数
const originalFunc = function(a, b) {
    console.log('原始函数执行');
    return a + b;
};

// 代理配置
const handler = {
    apply(target, thisArg, args) {
        console.log('拦截函数调用，参数:', args);
        // 可在此添加自定义逻辑（如参数验证、日志记录等）
        const result = target.apply(thisArg, args); // 调用原函数
        console.log('函数返回结果:', result);
        return result * 2; // 修改返回值
    }
};

// 创建代理函数
const proxyFunc = new Proxy(originalFunc, handler);

// 测试调用
console.log(proxyFunc(2, 3)); 
// 输出：
// 拦截函数调用，参数: [2, 3]
// 原始函数执行
// 函数返回结果: 5
// 10（最终返回 5 * 2）

最长递增子序列算法 ​

js
var lengthOfLIS = function (nums) {
    const dp = new Array(nums.length).fill(1)
    for (let i = 0; i < nums.length; i++) {
        for (let j = 0; j < i; j++) {
            if (nums[i] > nums[j]) [
                dp[i] = Math.max(dp[i], dp[j] + 1)
            ]
        }
    }
    return Math.max(...dp)
};
var lengthOfLIS = function (nums) {
    const dp = new Array(nums.length).fill(1)
    for (let i = 0; i < nums.length; i++) {
        for (let j = 0; j < i; j++) {
            if (nums[i] > nums[j]) [
                dp[i] = Math.max(dp[i], dp[j] + 1)
            ]
        }
    }
    return Math.max(...dp)
};

项目的难点 ​

分片上传，怎么知道哪个上传失败了，遇过的最难的bug，印象深刻的bug ​

网络传输中数据损坏或分片未完整读取 ​

修复方案​​：

  • 前端对每个分片计算 SHA-256 哈希值并随请求发送，服务端接收后二次校验；
  • 服务端记录哈希不一致的分片索引，触发自动重传。

分片上传怎么判断某个分片数据缺失了，如果缺失了怎么办 ​

唯一标识比对机制​​ ​

客户端为每个分片生成唯一标识（如文件名+分片序号+文件大小的 MD5 哈希值），上传前向服务端发起查询请求，获取该文件已上传分片标识列表。通过比对客户端所有分片标识与服务端记录列表，即可确定缺失分片

​​哈希值校验​​ ​

  • ​分片级校验​​：客户端对每个分片计算 SHA-256 或 MD5 哈希值，随分片数据一起上传。服务端接收分片后重新计算哈希值，若不一致则判定该分片损坏或传输错误。
  • ​文件级校验​​：所有分片上传完成后，客户端计算完整文件的哈希值并提交给服务端。服务端合并文件后执行相同计算，若结果不匹配则说明存在分片缺失或顺序错误。

​分片序号与大小验证​ ​

  • 服务端在合并分片时，按分片序号顺序检测每个分片的大小是否与客户端记录一致。若某分片实际大小与元数据不符，则判定该分片数据不完整

场景​​：用户上传 10GB 视频文件，分片序号 23 因网络抖动未成功传输。 ​

​​处理流程​​：

  • 服务端合并时检测到分片 23 缺失，返回错误码 412 Missing Chunk；
  • 客户端查询本地缓存，确认分片 23 需重传；
  • 将该分片拆分为 2MB 子分片重新上传；
  • 服务端验证子分片哈希值后合并，最终完成文件合成。

超过重传次数后，怎么办 ​

比如我们设置出错后重传的次数为3，那么无论当前分片是第几片，整个文件的上传状态被标记为false，这就意味着会终止所有的上传。

肯定不会出现这种情况：chunk1重传3次后失败了，chunk2还能再去上传，这样的话数据肯定不一致了。

如何保证上传文件的百分百正确 ​

在上传文件前，前端会计算出当前RD选择的这个文件的 md5 值。

当后端检测到所有的分片全部上传完毕，这时会merge所有分片汇聚成单个文件。计算这个文件的md5 同 RD在前端提供的文件的md5值比对。 比对结果一致说明RD正确的完成了上传。结果不一致，说明文件上传失败了～返回给前端任务失败，提示RD重新上传。

组件库的单元测试用例，印象最深刻的 ​

ant-design的组件架构、css架构是怎么样的 ​

组件架构​ ​

  • ​基础组件​​（如 Button、Input）：构建界面的原子级元素，提供最基础的功能和样式。
  • ​业务组件​​（如 Table、Form）：组合基础组件，适配复杂业务场景（如数据表格、表单校验）。
  • ​​布局组件​​（如 Layout、Grid）：管理页面整体结构，支持响应式设计。
  1. 预处理器与模块化​​
  • ​LESS 主导​​：通过变量（如 @primary-color）和 Mixin 实现主题定制。
  • ​CSS Modules​​：局部作用域样式，避免全局污染（如 .module.css 文件）。
  1. ​​分层结构​​
  • ​主题层（Themes）​​：定义全局变量（色彩、字体等），支持多套主题切换。
  • ​工具层（Mixins）​​：封装复用样式逻辑（如动画、布局工具类）。
  • ​核心层（Core）​​：包含全局样式（normalize.css）和基础动画。
  1. ​​定制化方案​​
  • ​动态主题​​：通过修改 LESS 变量或 CSS 变量（如 --primary-color）实时调整样式。
  • ​样式穿透​​：使用 .ant-component 类覆盖组件默认样式。
  • ​按需编译​​：结合 babel-plugin-import 减少打包体积。

md是怎么转换成html的 ​

VitePress 将 Markdown（MD）转换为 HTML 的过程主要依赖于 ​​Markdown-it​​ 解析器和 ​​Vue 组件化​​的集成，结合 Vite 的构建能力实现高效转换。以下是核心实现原理和步骤：

js
const md = new MarkdownIt(options); // 初始化解析器
const html = md.render(markdownText); // 将 MD 转为 HTML 字符串
const md = new MarkdownIt(options); // 初始化解析器
const html = md.render(markdownText); // 将 MD 转为 HTML 字符串

​完整流程示例​​ ​

  1. ​用户编写 docs/index.md​​：
md
# Hello VitePress
<MyComponent />
# Hello VitePress
<MyComponent />
  1. ​VitePress 转换​​：
  • Markdown-it 解析为 HTML。
  • 嵌入 Vue 模板并处理组件标签。
  1. ​输出为 Vue SFC​​：
html
<template>
  <h1>Hello VitePress</h1>
  <MyComponent />
</template>
<template>
  <h1>Hello VitePress</h1>
  <MyComponent />
</template>

​​Vite 编译为静态 HTML​​（生产环境）或动态渲染（开发环境）。

Released under the MIT License.

Copyright © 2024-present Evan You