继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【九月打卡】第15天 前端工程师2022版 就业必备基础技术面试分析

大龄前端菜鸟
关注TA
已关注
手记 42
粉丝 6
获赞 6

课程名称: JS-Web-API-Ajax、存储与节流防抖

课程章节:Javascript面试课

课程讲师: 双越

课程内容:

🌈JS-Web-API-Ajax

学习课程之前,我们先来看一下这节会遇到哪些面试题?
1、手写一个简易的Ajax
2、跨域常用的实现方式?

接下来,看看知识点吧

http://img1.mukewang.com/63288c040001abda09770584.jpghttp://img1.mukewang.com/63288c1c000132f907300581.jpg

2、状态码

xhr.readyState

0 - UNSET尚未调用open方法

1 - OPENED open方法已被调用

2 - HEADERS_RECEIVED send方法已被调用,header已被接收

3 - LOADING下载中,responseText已有部分内容

4 - DONE下载完成

xhr.status

·2xx - 表示成功处理请求,如200

·3xx - 需要重定向,浏览器直接跳转,如301 302 304

·4xx - 客户端请求错误,如404 403

·5xx - 服务器端错误

3、跨域:同源策略,跨域解决方案

同源策略

◆ajax请求时,浏览器要求当前网页和server必须同源(安全)

◆同源:协议、域名、端口,三者必须一致

◆前端:http:/a.com:8080l;server:https:/b.com/api/xxx

加载图片csss可无视同源策略

◆<img src=跨域的图片地址/>

◆<link href=跨域的css地址/>

◆<script src=跨域的js地址></script>

◆<img/>可用于统计打点,可使用第三方统计服务

◆<link/><script>可使用CDN,CDN一般都是外域

◆<script>可实现JSONP

跨域

◆所有的跨域,都必须经过server端允许和配合

◆未经server端允许就实现跨域,说明浏览器有漏洞,危险信号


最后看看面试题的答案吧:

1、手写一个简易的 ajax

function ajax(url) {
    const p = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(
                        JSON.parse(xhr.responseText)
                    )
                } else if (xhr.status === 404 || xhr.status === 500) {
                    reject(new Error('404 not found'))
                }
            }
        }
        xhr.send(null)
    })
    return p
}

const url = '/data/test.json'
ajax(url)
.then(res => console.log(res))
.catch(err => console.error(err))

2、跨域的常用的实现方式

JSONP  CORS

前端:老方法;JSONP

现在;Vue vue.config.js 设置 devserve

后端:设置CORS 设置response


🌈存储与节流防抖


学习课程之前,我们先来看一下这节会遇到哪些面试题?

◆描述cookie localStorage sessionStorage区别


接下来,看看知识点吧

1、cookie

◆本身用于浏览器和server通讯

◆被”借用”到本地存储来

◆可用document.cookie='...'来修改

cookie的缺点

◆存储大小,最大4KB

◆http请求时需要发送到服务端,增加请求数据量

◆只能用document.cookie='.'来修改,太过简陋

2、localStorage和sessionStorage

◆HTML5专门为存储而设计,最大可存5M

◆API简单易用setltem getltem

◆不会随着http请求被发送出去

◆localStorage数据会永久存储,除非代码或手动删除

◆sessionStorage数据只存在于当前会话,浏览器关闭则清空

一般用localStorage会更多一些

3、手写防抖

◆监听一个输入框的,文字变化后触发change事件

◆直接用keyup事件,则会频发触发change事件

◆防抖:用户输入结束或暂停时,才会触发change事件

<input type="text" id="input1">
const input1 = document.getElementById('input1')

let timer = null
input1.addEventListener('keyup',function(){
    if(timer){
        clearTimeout(timer)
    }
    timer = setTimeout(()=>{
        // 模拟触发 change 事件
        console.log(input1.value);

        // 清空定时器
        timer = null
    },500)
    
})

对防抖函数进行封装:

const input1 = document.getElementById('input1')

function debounce (fn,delay = 500){
    // timer 是闭包中的
    let timer = null

    return function(){
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout( ()=> {
            fn.apply(this,arguments)
            timer = null
        },delay)
    }
}
 input1.addEventListener('keyup',debounce(function(e){
    console.log(e);
    console.log(input1.value);
 }))

4、手写节流

◆拖拽一个元素时,要随时拿到该元素被拖拽的位置

◆直接用drag事件,则会频发触发,很容易导致卡顿

◆节流:无论拖拽速度多快,都会每隔100ms触发一次

<style>
        #div1 {
            border: 1px solid #ccc;
            width: 200px;
            height: 100px;
        }
    </style>
    
    <div id="div1" draggable="true">可拖拽</div>
const div1 = document.getElementById('div1')

let timer = null
div1.addEventListener('drag', function (e) {
    if(timer){
        return
    }
    timer = setTimeout( () => {
        console.log(e.offsetX, e.offsetY);

        timer = null
    },100)
    
})

对节流函数进行封装:

const div1 = document.getElementById('div1')

function jieliu (fn,delay = 100){
    let timer = null

    return function(){
        if(timer){
            return
        }
        timer = setTimeout ( () => {
            fn.apply(this,arguments)
            timer = null

        },delay)
    }
}

div1.addEventListener('drag',jieliu(function(e){
    console.log(e.offsetX,e.offsetY);
},200))

http://img.mukewang.com/63288f3c00014ab410390628.jpg

http://img4.mukewang.com/63288f3d000110e909890427.jpg


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP