浏览器内置JS对象、事件模型、请求相关内容

浏览器相关

BOM

1.location

location.href = "https://www.corurse.com/search?class=browser#coments"
location.origin = https://www.corurse.com
        .protocal = https
        .host = www.corurse.com
        .port = ''
        .pathname = search
        .search = ?class=browser
        .hash = #coments
 
 location.assin('url') // 跳转到指定path 并替换pathname => path
         .replace(url) // 效果同上 同时替换浏览器历史
         .reload() // 刷新页面

2.history

history.state => 存储获取当前页面状态
       .reolaceState => 替换当前状态

3.navigator

• 浏览器系统信息大全

navigator.userAgent

4.screen

事件模型

冒泡/捕获

• 1.如何阻止事件传播 event.stopProgation // 无法阻止默认事件发生 如a标签跳转
• 2.如何阻止默认事件 event.preventDefault
• 3.相同节点绑定了多个同类型事件如何阻止 event.stopImmediateProgation()

实现兼容多浏览器的事件绑定

// attchEvent vs addEventLisener
// 区别
// a. 传参 attchEvent对于事件名需要加上‘on’
// b. 执行顺序 attchEvent先绑定后执行 addEventLisener先绑定先执行
// c. 解绑 detachEvent vs removeEventLisener
// d. 阻断 e.cacelBubble=true vs e.stopProgation();
// e. 阻断默认事件 e.returnValue vs e.preventDefault();
class bindEvent {
    constructor(element) {
        this.element = element;
    }
    
    addEventLisener(type, handler) {
        if(this.element.addEventLisener) {
            this.element.addEventLisener(type, handler, false);
        } else if(this.element.attchEvent) {
            const element = this.element;
            this.element.attchEvent('on' + type, () => {
                handler.call(element);
            });
        } else {
            this.element['on'+type] = handler;
        }
    }
    
    removeEventLisener(type, handler) {
        if(this.element.removeEventLisener) {
            this.element.removeEventLisener(type, handler, false);
        } else if(this.element.detachEvent) {
            const element = this.element;
            this.element.detachEvent('on' + type, () => {
                handler.call(element);
            });
        } else {
            this.element['on'+type] = handler;
        }
    }
    
    static stopProgation(e) {
        if(e.stopProgation) {
            e.stopProgation();
        } else {
            e.cacelBubble = true;
        }
    }
    
    static preventDefault(e) {
        if(e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    }
}
// 性能优化---事件代理

网络

    // 实例化
    const xhr = new XMRHttpRequest();
    
    // 发送
    // 初始化连接 - open初始化连接不会发起真正的请求
    xhr.open(method, url, async);
    
    // 发送请求
    // 发送请求
    // 当请求方法为post时 - body请求体
    // 当请求方法为get时 - 可以为空
    // 都需要encodeURIComponent进行转码
    xhr.send(data)
    
    // 接首
    xhr.readyStatus
    // 0 - 尚未调用open
    // 1 - 已调用open
    // 2 - 已调用send
    // 3 - 已接受请求返回数据
    // 4 - 已完成请求
    
    xhr.onreadystatechange = () => {
        if(xhr.readyStatus === 4) {
            if(xhr.status === 200) {
                // 请求成功
            }
        }
    }
    
    // 超时
    xhr.timeout = 10000;
    
    // 超时触发方法
    xhr.ontimeout = () => {
        
    }

封装一个ajax

/* 
    ajax({
        method: 'get',
        url: 'reqUrl',
        data: {
            a: xxx
        },
        timeout: 1000,
        async: false
    }).then(
        res => xxx,
        err => xxx,
    )
*/

function ajax(options) {
    const {
       method,
       url,
       data,
       timeout,
       async,
    } = options;
    
    const xhr = new XMLHttpRequest();
    
    return new Promise((resolve, reject) => {
        xhr.open(method, url, async);
        
        // 传参处理
        const parmas = [];
        let encodeData;
        
        if(data instanceof Object) {
            for(let key in data) {
              parmas.push(encodeURIComponent(key)+'='+encodeURIComponent(data[key]));
            }
            encodeData = parmas.join(',');
        }
        
        if(method === 'get') {
            const index = url.indexOf('?');
            if(index === -1) {
                url += '?';
            } else if(index !== url.length-1) {
                url += '&';
            }
            url += encodeData;
        }
        
        if(method === 'get') {
            xhr.send(null);
        } else {
            xhr.setRequestHeader(
                'Content-Type', 'application/x-www-from-urlencode;charset=UTF-8'
            )
            xhr.send(encodeData);
        }
        
        // 成功
        xhr.onreadystatechange = () => {
            if (xhr.readyStatus === 4) {
                if (xhr.status === 200) {
                    // 逻辑
                    resolve && resolve(xhr.responseText)
                } else {
                    reject && reject()
                }
            }
        }
        
        xhr.ontimeout = () => reject && reject('超时');
        xhr.onerror => (err) => reject && reject(err);
    })
}