浏览器相关JS-CSDN博客

本文链接：https://blog.csdn.net/wsx19940315/article/details/135490584

在浏览器状态下的JS

BOM：对于浏览器本身功能区域的相关操作

DOM：对于浏览器视窗内HTML文本的相关操作

ECMAScript：基础逻辑、数据处理

BOM

location


// 属性
location.href = "https://www.baidu.com/search?class=browser#comments"

location.protocol   // https
location.host       // www.baidu.com
location.origin     // https://www.baidu.com:8080
location.port       // 8080
location.pathname   // /search
location.search     // ?class=browser
location.hash       // #comments

// 记忆
"protocol//host:port/pathname?search#hash"

// 方法
location.assign()
location.replace()
location.reload()

话题方向

location 本身的 api 操作
路由跳转：history or hash 模式
url 处理：正则

history

history.state
history.pushState()     // 跳转到指定状态
history.replaceState()  // 替换当前状态

history.pushState 不会触发浏览器页面的刷新，它只是改变了当前 url 的状态，会刷新页面的是改变了 location.href。

所以它也适合拿来做路由跳转。

navigator：浏览器信息大集合

navigator.userAgent // 就是一个字符串，获取当前用户相关基础信息

话题方向

UA读取信息可以做什么？数据采集、流量监控、浏览器兼容性优化......
剪切板、键盘？如何剪切板，监听用户键盘输入

screen ⭐

话题方向

判断区域大小

// 全局
window.innerHeight

// 文本
document.documentElement.clientHeight
document.body.clientHeight

// 网页
document.body.offsetHeight

// 定位
document.body.scrollTo

Event

最开始的时候有两套触发机制

冒泡，是微软发明的。p => div => body => HTML => document
捕获，是网景发明的。documet => HTML => body => div > p

<div id="app" >
  <p id="dom">Click</p>
</div>

el.addEventListener(event, function, useCapture) // useCapture 默认 - false

话题方向

如何阻止事件的传播，无论向上还是向下都是阻止的。但无法阻止默认事件
event.stopProgation()
如何阻止默认事件
event.preventDefault()
如何阻止相同节点绑定多个同类事件 => 兼容性问题 & 性能问题
event.stopImmediatePropagation()
手写，实现一个多浏览器兼容的事件绑定
attchEvent vs addEventListener区别：
// a. 传参，attachEvent对于事件名需要加上一个‘on’
// b. 执行顺序， attachEvent - 后绑定先执行；addEventListener - 先绑定先执行
// c. 解绑 detachEvent vs removeEventListener
// d. 阻断 e.cancelBubble = true vs e.stopPropagation()
// e. 阻断默认事件 e.returnValue vs e.preventDefault
性能 - 手写事件代理

网络层

// 实例化
const xhr = new XMLHttpRequest()

// 初始化连接
xhr.open(method, url, async)

// send发送请求
xhr.send(data) // data - encodeURIComponent

// 接收
xhr.readyStatus
// 0 - 尚未调用open方法
// 1 - 已经调用了open
// 2 - 已经send
// 3 - 已经收到请求的返回数据了
// 4 - 请求已完成
xhr.onreadystatechange = () => {
    if (xhr.readyStatus === 4) {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            console.log('success', xhr.responseText)
        }
    }
}

// 超时时间
xhr.timeout = 1000

xhr.ontimeout = () => {
    // 超时操作
}

话题方向