科大讯飞面试

秦篆大约 4 分钟

今天呢也是参加了科大讯飞的面试，姑且不知道结果怎么，但是趁着还没完全忘记内容，我想把面试的内容记录下来，以便后续的总结。

讲讲最近的项目

一上来呢就是这个问题，就我的简历来说，拿得出手的项目呢其实并不少，所以挑了两个协同场景比较多，技术内容比较丰富的项目来讲，一个是基于vue3的项目，一个是Hybrid项目。
我个人认为，面试官的这个问题，本质上是在对你的项目经验进行一个考察，看你是不是真的做过项目，是不是真的了解项目，是不是真的能够在项目中解决问题。所以在回答这个问题的时候，我觉得可以从以下几个方面来回答：

项目的背景，项目的需求，项目的技术栈
项目的难点，项目的解决方案
项目的收获，项目的总结

xhr的原理

这个问题呢，我觉得是一个基础问题，但是我却没有回答出来，因为我对xhr的原理并不是很了解，我只知道它是一个用于前后端通信的工具，但是具体的原理呢，我并不是很清楚。
所以在这里记录一下：

xhr是一个用于前后端通信的工具，它是一个对象，通过这个对象我们可以向后端发送请求，获取数据
xhr的原理是通过创建一个xhr对象，然后通过这个对象的open方法来打开一个请求，然后通过send方法来发送请求，最后通过onreadystatechange事件来监听请求的状态，当请求的状态发生变化的时候，我们可以通过这个事件来获取请求的结果
xhr的状态有五种，分别是0-4，0表示未初始化，1表示已打开，2表示已发送，3表示已接收，4表示已完成
xhr的请求方式有七种，分别是GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE
xhr的请求头有很多，比如Content-Type、Accept、Authorization等
xhr的响应头也有很多，比如Content-Type、Content-Length、Content-Encoding等
xhr的请求参数有很多，比如url、method、headers、body等
xhr的响应参数也有很多，比如status、statusText、responseType、responseText等
xhr的请求和响应都是异步的，所以我们需要通过onreadystatechange事件来监听请求的状态

以上呢，是我对xhr的原理的一些了解，但是我觉得还是不够，所以我打算在后续的学习中，继续深入学习xhr的原理，以便更好地回答这个问题。

vue3的双向绑定是怎么实现的

算是老生常谈的问题了，其原理呢也很简单，我最近正好写了一篇文章用来阐述这部分内容，在这里可以查看。

说一下diff算法

也是非常容易出现的题了，恰巧，我这里呢也有一篇文章用来阐述这部分内容，在这里可以查看。

大文件分片

这个问题呢，我觉得是一个比较实际的问题，因为在实际的项目中，我们经常会遇到这样的问题，比如上传一个大文件，比如下载一个大文件，比如播放一个大文件。下面我们一起来看一下大文件分片的实现原理：
这里呢我给出一个示例

// 1. 计算文件的md5值
function calculateMd5(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = function() {
            const spark = new SparkMD5.ArrayBuffer() // 创建一个md5对象
            spark.append(reader.result)
            resolve(spark.end())
        }
        reader.onerror = function() {
            reject(reader.error)
        }
        reader.readAsArrayBuffer(file)
    })
}

// 2. 分片
function sliceFile(file, chunkSize) {
    const chunks = []
    let start = 0
    let end = chunkSize
    while (start < file.size) {
        chunks.push(file.slice(start, end))
        start = end
        end = start + chunkSize
    }
    return chunks
}

// 3. 上传
function uploadChunks(chunks) {
    return Promise.all(chunks.map(chunk => {
        return new Promise((resolve, reject) => {
            const formData = new FormData()
            formData.append('chunk', chunk)
            fetch('http://localhost:3000/upload', {
                method: 'POST',
                body: formData
            }).then(res => {
                resolve(res)
            }).catch(err => {
                reject(err)
            })
        })
    }))
}

其它的内容呢我觉得是没什么难度的，比如ts对开发的影响，比如vue3的新特性，比如webpack的优化等等，所以我就不再赘述了。

科大讯飞面试

# 讲讲最近的项目

# xhr的原理

# vue3的双向绑定是怎么实现的

# 说一下diff算法

# 大文件分片

讲讲最近的项目

xhr的原理

vue3的双向绑定是怎么实现的

说一下diff算法

大文件分片