浏览器

2021-05-02 本文已影响0人世玮

什么是浏览器对象模型

BOM ：Browser Object Model（浏览器对象模型）,浏览器模型提供了独立于内容的、可以与浏览器窗口进行滑动的对象结构，就是浏览器提供的 API
其主要对象有：

window 对象——BOM 的核心，是 js 访问浏览器的接口，也是 ES 规定的 Global 对象
location 对象：提供当前窗口中的加载的文档有关的信息和一些导航功能。既是 window 对象属性，也是 document 的对象属性
navigation 对象：获取浏览器的系统信息
screen 对象：用来表示浏览器窗口外部的显示器的信息等
history 对象：保存用户上网的历史信息

可以参照

浏览器事件模型中的过程主要分为三个阶段：捕获阶段、目标阶段、冒泡阶段。

事件模型.jpg

添加事件

添加事件的时候，我们常常会想到addEventListener；
addEventListener的第三个参数, 如果为true，就是代表在捕获阶段执行。如果为false，就是在冒泡阶段进行
兼容性
- attachEvent——兼容：IE7、IE8；不支持第三个参数来控制在哪个阶段发生，默认是绑定在冒泡阶段
- addEventListener——兼容：firefox、chrome、IE、safari、opera；

所以我们常常写一个事件监听的时候，往往会这样兼容：

function hideWxMenu() {
    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', hideWXOptionMenu, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', hideWXOptionMenu);
            document.attachEvent('onWeixinJSBridgeReady', hideWXOptionMenu);
        }
    } else {
        WeixinJSBridge.call('hideOptionMenu');
    }
}

阻止事件

阻止事件传播；
- e.stopPropagation()
- 实际上这个方法不只能阻止冒泡，还能阻止捕获阶段的传播。

import React, { Component } from "react";
import './App.css';

class App extends Component {

  constructor(props){
    super(props);
  }
  childClick = (e) => {
    //console.log(e.target); //当前点击的元素
    //console.log(e.currentTarget); //绑定监听事件的元素
    console.log("child click");
  };

  childClickNew = (e)=>{
    console.log("child clickNew");
  }

  parentClick = () => {
    console.log("parent click");
  };

  componentDidMount() {
    let parent = document.getElementById("parent");
    let child = document.getElementById("child");
    parent.addEventListener("click", this.parentClick, false);
    child.addEventListener("click", this.childClick, false);
    child.addEventListener("click", this.childClickNew, false);
  }

  componentWillUnmount(){
    //todo:  移除事件的监听 ，防止内存泄漏
  }

  render() {
    return (
      <div id="parent">
        <button id="child">click child!</button>
      </div>
    );
  }
}

export default App;

//控制台输出的结果为： 
//child click
//child clickNew
//parent click

//如果在childClick 中加入e.stopPropagation();
//控制台输出的结果为： 
//child click
//child clickNew

//如果把addEventListener的第三个参数改成true；
//控制台输出的结果为：
//parent click 
//child click
//child clickNew

//如果在parentClick 中加入e.stopPropagation();
//控制台输出的结果为：
//parent click

- e.stopImmediatePropagation()；同样也能阻止事件的冒泡；但是如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行了event.stopImmediatePropagation() 方法，则当前元素剩下的监听函数将不会被执行。

  childClick = (e) => {
    console.log("child click");
    e.stopImmediatePropagation();
  };

//控制台输出的结果为： 
//child click

阻止默认行为
- e.preventDefault()
- 可以阻止事件的默认行为发生，默认行为是指：点击a标签就转跳到其他页面、拖拽一个图片到浏览器会自动打开、点击表单的提交按钮会提交表单等等，因为有的时候我们并不希望发生这些事情，所以需要阻止默认行为

//在刚才的文件中加入一个a标签：
<a href="https://www.baidu.com" onClick={this.linkClick}>点击跳转</a>

  linkClick = (e)=>{
     console.log("link click");
  }
//点击后发现 ，控制台会打印下 link click;  并且跳转到百度链接；
//如果在linkClick中添加e.preventDefault()；
//只有控制台有输出：
//link click

ajax

XMLHttpRequest
尝试写一个基本的ajax请求；

    (function(callback){
      let xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://pagead2.googlesyndication.com/getconfig/sodar?sv=200&tid=gda&tv=r20210428&st=env');
      
      // request state change event
      xhr.onreadystatechange = function () {
          // request completed?
          if (xhr.readyState !== 4) return;
      
          if (xhr.status === 200) {
              // request successful - show response
              console.log(xhr.responseText);
              callback.call(this, xhr.responseText)
          } else {
              // request error
              console.log('HTTP error', xhr.status, xhr.statusText);
          }
      };
      // start request
      xhr.send();
  })(function(data){
      console.log(data)
  })

fetch

默认不带cookie
错误不会reject
不支持超时设置
需要借用AbortController中止fetch

isomorphic-fetch

对于 cross-runtime 的应用，使用 isomorphic-fetch 可以同时照顾 node 和 browser 环境

参考-isomorphic-fetch
npm install --save isomorphic-fetch es6-promise

  require('es6-promise').polyfill();
  require('isomorphic-fetch');

  fetch('//offline-news-api.herokuapp.com/stories')
   .then(function(response) {
       if (response.status >= 400) {
           throw new Error("Bad response from server");
       }
       return response.json();
   })
   .then(function(stories) {
       console.log(stories);
   });

SuperAgent

参考-SuperAgent
npm install superagent

   import request from 'superagent'
    request
      .post('/api/pet')
      .send({ name: 'Manny', species: 'cat' }) // sends a JSON post body
      .set('X-API-Key', 'foobar')
      .set('Accept', 'application/json')
      .end(function(err, res){
       // Calling the end function will send the request
     });

fetch注意事项

1. 错误处理
  fetch只有在网络错误的情况，返回的promise会被reject。成功的 fetch() 检查不仅要包括 promise 被 resolve，还要包括 Response.ok 属性为 true。HTTP 404 状态并不被认为是网络错误，所以Promise的状态为resolve。
1. credentials 设置
  fetch可以通过credentials自己控制发送请求时是否带上cookie。credentials可设置为include、same-origin、omit。include为了让浏览器发送包含凭据的请求（即使是跨域源）。如果你只想在请求URL与调用脚本位于同一起源处时发送凭据，请添加credentials: 'same-origin'。要改为确保浏览器不在请求中包含凭据，请使用credentials: 'omit'。

// credentials: ‘include’，（ 允许 cookie 共享，跨域问题，传Cookie是必须配置）
    const defaultOptions = {
        credentials: 'include',
    };

1. 中止
  fetch 自身并没有提供中止请求的方法。但是部分浏览器有实现AbortController，可以通过AbortController中止fetch请求

const controller = new AbortController();
const signal = controller.signal;
setTimeout(() => controller.abort(), 5000);

fetch('/api/mobile', {
  signal, // 在option中加入signal
  method: 'POST',
  // credentials:'include',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'civen',
  })
}).then((res) => {
  return res.json()
}).then((result) => {
  console.log(result)
}).catch((err) => {
  console.log(err)
})

axios

Promise based HTTP client for the browser and node.js

特性

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

import axios from 'axios';

const AUTH_TOKEN = "12345";

const instance = axios.create({
    // baseURL: 'http://localhost:3010',
    timeout: 5000,
});

instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
instance.defaults.withCredentials =true; 

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log("request==>", config);
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    console.log("response==>", response);
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

/**获取每日油价 */
export const getDailyOilPrice = (cityName)=>{
    return instance.get(`/h5/api/v1/oil/dailyOilPrice?city=${cityName}`)
}

//Accept: application/json, text/plain, */*
//Accept-Encoding: gzip, deflate, br
//Accept-Language: zh-CN,zh;q=0.9
//Authorization: 12345
//Connection: keep-alive

EventEmitter

其api:
- on(event, listener)：为指定事件注册一个监听器，接受一个字符串 event 和一个回调函数。
- emit(event, [arg1], [arg2])：按监听器的顺序执行执行每个监听器
- addListener(event, listener)：on的同名函数（alias）
- once(event, listener): 和on类似，但只触发一次，随后便解除事件监听
- removeListener(event, listener)：移除指定事件的某个监听回调
- removeAllListeners([event])：移除指定事件的所有监听回调
- setMaxListeners(n)：用于提高监听器的默认限制的数量。（默认10监听回调个产生警告）
- listeners(event)：返回指定事件的监听器数组。
尝试写一个简易版的：

//1、定义EventEmitter 构造函数：
function EventEmitter() {
    this.listeners = {};
}
//接受一个字符串 event 和一个回调函数
EventEmitter.prototype.on = function(event, callback){
       var listeners = this.listeners;
    //listeners[event] 存储事件的 回调
    if (listeners[event] instanceof Array) {
        if (listeners[event].indexOf(callback) === -1) {
            listeners[event].push(callback);
        }
    } else {
        listeners[event] = [].concat(callback);
    }
}
EventEmitter.prototype.addListener = EventEmitter.prototype.on;

//按监听器的顺序执行执行每个监听器
EventEmitter.prototype.emit = function (event) {
   // 伪数组 转换成真数组
    var args = Array.prototype.slice.call(arguments);
    args.shift();  //第一个参数为event, 剔除掉 
    this.listeners[event].forEach(cb => {
        cb.apply(null, args);
    });
}

// todo: ......

浏览器

什么是浏览器对象模型

浏览器事件模型中的过程主要分为三个阶段：捕获阶段、目标阶段、冒泡阶段。

添加事件

阻止事件

ajax

fetch

axios

特性

EventEmitter

猜你喜欢

热点阅读