DOM/BOM/事件绑定/ajax/存储

Danan
206 阅读3分钟

JS 基础知识到 JS WEB API

· JS 基础知识，规定语法（ECMA 262标准）

· JS WEB API, 网页操作的 API (W3C标准)

· 前者是后者的基础，两者结合才能真正实际应用

DOM

image.png

DOM 本质

HTML语言解析出来的一棵树（DOM 树）

DOM 节点操作

获取DOM节点

image.png

attribute

image.png

property

image.png

image.png

DOM 结构操作

新增/插入节点

image.png

获取子元素列表，获取父元素

image.png

删除子元素

image.png

DOM 性能

· DOM 操作非常昂贵，避免频繁的 DOM 操作

· 对 DOM 查询做缓存

image.png

· 将频繁操作改为一次性操作

image.png

BOM

navigator （识别浏览器类型）

image.png

screen

image.png

location （分析拆解url各个部分）

image.png

history

image.png

事件绑定

事件绑定

image.png image.png

事件冒泡

image.png

事件代理 （面试必考）

image.png

注意：

· 代码简介

· 减少浏览器内存占用

· 但是，不要滥用

面试题：

1、 编写一个通用的事件绑定函数

image.png

2、描述事件冒泡的流程

· 基于DOM树形结构

· 事件会顺着触发元素往上冒泡

· 应用场景： 代理

3、无限下拉图片列表，如何监听图片的点击？

· 事件代理

· 用 e.target获取触发元素

· 用matchs 来判断是否触发元素

Ajax

核心API - XMLHttpRequest

const xhl = new XMLHttpRequest()
xhl.open('GET', '/api', true)
xhl.onreadystatechange = function () {
    if (xhl.readyState === 4) {
        if (xhl.status === 200) {
            alert(xhl.response)
        }
    }
}
xhl.send(null)

xhl.readyState:

· 0- （未初始化），还没有调用send()方法

· 1- （载入）已经调用send()方法，正在发送请求

· 2- （载入完成）send()方法执行完成，已经接受接收全部响应内容

· 3- （交互）正在解析响应内容

· 4- （完成）响应内容解析完成，可以在客户端调用

状态码

xhl.status

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

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

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

· 5xx - 服务端错误

跨域：同源策略，跨域解决方案

什么是跨域（同源策略）

image.png

image.png

image.png

实现跨域方式- JSONP

· script> 可以绕过跨域限制

· 服务器可以任意动态拼接数据返回

· 所以， script就可以获得跨域的数据，只要服务端愿意返回

image.png

image.png

实现跨域方式- CORS(服务端支持，服务器端设置 http header)

image.png

面试题

1、 手写一个简易的 ajax

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

    return p
}

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

2、跨域的常用实现方式

jsonp、 cors

3、常见的ajax 工具

jquey 、 fetch、 axios

存储

cookie

· 本身被用于浏览器和server通讯

· 被“借用”到本地存储

· 可以用 document.cookie = '...'来修改

缺点：

· 存储大小，最大4KB

· http 请求时需要发送到服务端，增加请求数量

· 只能用 document.cookie = ‘...’ 来修改，太过简陋

localStorage 和sessionStorage

· HTML5 专门为存储设计，最大可存5M

· API简单易用 setItem、getItem

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

· localStorage 数据会永久存储，除非代码手动删除

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

· 一般用 localStorage 会更多一些

面试题

1、 描述cookie、 localStorage、sessionStorage 区别

· 容量

· API 易用性

· 是否跟随 http 请求发送出去

avatar
文章
阅读
粉丝