前端开发js部分练习题

1.js接口返回大量数据缓存后如何更新?

一般情况下较大的数据可以存储在 localStorage 中。请求数据有以下几种方式：

  • 第一种是每次都请求，验证版本号（或更新时间戳）；
  • 第二种是定时请求（管他更新不更新，就是 20 天请求一次）；
  • 第三种可以使用一个 websocket，好处是，后台有更新就会返回新数据
  • 第四种，在页面上加个按钮【刷新】。

所以，本地存储的目的是什么？是为了避免数据重新解析？还是后端不想每次查询数据（影响服务器性能），根据前后端职责进行选型就好了。个人感觉，后端提缓存优化是比较好的方案，就像请求 APP 更新，如果返回的是时间戳或 false 说明后端没有新数据，如果是新数据，那就直接替换本地 localStorage 中的数据。

2.Vue中 axios 如何实现发送请求后，获取响应结果后，再继续进行下一次的请求？

把 for 循环体放到 async 函数中，看简单案例：

const updateHandler = async ()=>{
    // 开始循环你的提交
    for( let i = 0 ; i<100 ;i++){
        // 使用 await 执行同步提交
        // res 就是原先 then 中的回调参数
        // 这里使用同步返回，因此 .then 就不需要写了
        let res = await FileUploadHandler()
    }
}

3.防抖函数实现中this的指向问题

因为 setTimeout 中的回调函数将被异步执行，导致等到异步调用的时候，this 就指向调用他的上下文了，而不是我们定义上的上下文；

而箭头函数其实并没有this ，可以看一下案例：

// 编译前 箭头函数中的代码
const demo = {
    foo: "apple",
    handler() {
        setTimeout(()=>{
            console.log( this.apple );
        });
    }
}

// 编译后的箭头函数代码
const demo = {
    foo: "apple",
    handler() {
        // 编译之后会自动将 this 转换为中间变量，因此就不存在指针问题
        let _this = this;
        setTimeout(function(){
            console.log( _this.apple );
        });
    }
}

也可以用一下方法解决this指向问题：

const demo = {
    foo: "apple",
    handler() {
        // 将回调函数绑定到当前 this
        setTimeout(function () {
            console.log(this.apple);
        }.bind(this));
    }
}

4.作为一个前端开发工程师，别人问你前端是什么时你会怎么回答？

一般情况下能问这个问题的人估计是对前端一无所知的人，所以这样的问题可以从比较浅的层面回答。

比如：前端就是保证使用不同浏览器浏览网页的人都可以看到美观的页面，尽可能快的使用户看到页面，并且用户和页面可以比较容易的进行交互。

5.前端如何实现文件夹上传或者批量文件夹上传？

方案一、要求用户把所有文件压缩到一个zip文件里，整体上传，保留文件夹层级，后端把zip文件解压，返回完整的目录结构，前端再做展示。如有内部单个文件夹的修改，需要用户在前端点选目标文件夹控件，点击更新内容，然后上传单个zip文件。单个文件修改就点选单个文件更新，但是单个文件不需要压缩和解压。
方案二、使用阿里云oss对象存储服务，对应的客户端工具可以实现功能。