JS WEB API面试题

一、事件

题目

1. 编写一个通用的事件监听函数
2. 描述事件冒泡流程
3. 无限下拉图片列表，怎样监听每张图片的点击

2.描述事件冒泡流程：

• 基于DOM树形结构
• 事件会顺着触发元素往上冒泡
• 应用场景：代理

3.无限下拉图片列表，怎样监听每张图片的点击

• 通过事件代理
• 用e.target获取触发元素
• 用matchs来判断是否是触发元素

知识点：

        事件绑定、事件冒泡、事件代理

1.事件绑定

//编写一个通用的事件监听函数
function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, event => {
        const target = event.target
        if (selector) {
            // 代理绑定
            if (target.matches(selector)) {
                fn.call(target, event)
            }
        } else {
            // 普通绑定
            fn.call(target, event)
        }
    })
}

// 普通绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function (event) {
    // console.log(event.target) // 获取触发的元素
    event.preventDefault() // 阻止默认行为
    alert(this.innerHTML)
})

2.事件冒泡

 3.事件代理

代码简洁

减少浏览器内存占用

但是不能滥用，一般用在瀑布流等，数量太多，数据结构比较复杂，不好每个都绑定事件的

 <div id="div3">
            <a href="#">a1</a><br>
            <a href="#">a2</a><br>
            <a href="#">a3</a><br>
            <a href="#">a4</a><br>
            <button>加载更多...</button>
        </div>
// 代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function (event) {
    event.preventDefault()
    alert(this.innerHTML)
})

二、网络请求ajax

题目：

1. 手写简易的ajax
2. 跨域常用的实现方式

知识点：

1. XMLHttpRequest
2. 状态码
3. 跨域：同源解决策略，跨域解决方案

面试题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))

1.XMLHttpRequest

//get
const xhr = new XMLHttpRequest()
xhr.open('GET', '/data/test.json', true) //true:是否异步
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // console.log(
            //     JSON.parse(xhr.responseText)
            // )
            alert(xhr.responseText)
        } else if (xhr.status === 404) {
            console.log('404 not found')
        }
    }
}
xhr.send(null)

//post
const xhr = new XMLHttpRequest()
xhr.open('POST', 'login/', true) //true:是否异步
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // console.log(
            //     JSON.parse(xhr.responseText)
            // )
            alert(xhr.responseText)
        } else if (xhr.status === 404) {
            console.log('404 not found')
        }
    }
}
const PostData = {
    name:'user',
    passward:'123456'
}
xhr.send(JSON.stringify(PostData))

xhr.readyState

xhr.status 

 2.跨域

• 什么是跨域（同源策略）
• JSONP：解决跨域的方式
• CORS：服务器支持

1.同源策略

 加载图片 css js可无视同源策略

跨域

面试题2：跨域常用的实现方式

 JSONP

• <script>可以绕过跨域限制
• 服务器可以任意拼接动态拼接数据返回
• 所以<script>就可以获得跨域数据，只要服务器愿意返回

JQ实现JSONP

 CORS-服务器端设置http header

 3.网络请求的工具

1.传统方式jquery ajax

2.fetch

3.axios 

三、存储

题目：描述cookie 、localStorage、sessionStorage的区别

1.存储空间

2.易用性

1.cookie

• 本身用于浏览器和server通信，形式是key= value形式，用；分割如“a=300; b=400”
• 被借用到本地存储
• 可用document.cookie = "..."来修改

cookie缺点：

1. 存储大小，空间最大为4KB
2. http请求时需要发送到服务端，增加请求数据量
3. 只能用document.cookie = "..."来修改，语法太过简陋

localStorage、SessionStorage

1. HTML5专门为存储设计，最大可达5M
2. API简单易用：setItem、getItem
3. 不会随着http请求发送出去

localStorage、SessionStorage区别：

1. localStorage数据会永久存储，除非代码或者手动删除
2. SessionStorag数据只存在于当前会话，浏览器关闭则清空
3. 一般localStorage用的多一些