• BOM操作
  • DOM操作
  • 事件绑定
  • ajax
  • 存储

BOM

  • navigator
  • screen
  • location
  • history
  • window

DOM

Document Object Model

nodeType 属性可以知道对应的元素是什么类型，这一点在vue源码中用过。细节忽略，没啥实际价值。

property

获取和修改，是改变的js，js获取DOM节点等。

attribute

改变的是html的属性。

MutationObserver接口

使用这个，可以在特定的dom被修改时候执行回调。

本身是一个类，实例化之后再设定观测的细节。
image.png
可以使用的方法有

  • observe
  • disconnect
  • takeRecords

image.png

事件

事件绑定

普通事件绑定

  1. var btn = document.getElementById('btn1')
  2. btn.addEventListener('click', function (event) {
  3.   // event.preventDefault() // 阻止默认行为
  4.   // event.stopPropagation() // 阻止冒泡
  5.   console.log('clicked')
  6. })

事件冒泡

事件会向上冒泡到body绑定的事件上。

事件代理

对 父类或者body添加事件监听，冒泡到body时候 e.target表示触发元素，如果触发元素的nodeName classlist 等是一样的，那就继续触发。

自己实现一个通用事件监听方法。

  1. function bindEvent(elem, type, selector, fn) {
  2.     if (fn == null) {
  3.         fn = selector;
  4.         selector = null;
  5.     }
  6.     elem.addEventListener(type, function(e) {
  7.         var target;
  8.         if (selector) {
  9.             // 事件委托
  10.             target = e.target;
  11.             if (target.matches(selector)) {
  12.                 fn.call(traget, e);
  13.             }
  14.         } else {
  15.             fn(e);
  16.         }
  17.     });
  18. }

网络请求

ajax

Ajax 全称 Asynchronous JavaScript and XML 异步js和xml，核心技术是 XMLHttpRequest 。

手写一个：

  • 创建XHR对象
  • xhr.open(method,url,true) 第三个参数是否 async 肯定是
  • 设定 onreadystatechange 返回值
    • 如果是 xhr.readyState=4 继续
      • 如果 xhr.status = 200 继续
        • 使用 xhr.responseText

其中还有：

  • xhr.setRequestHeader 设定请求头
  • xhr.onerror 设定异常处理
  • xhr.withCredentials = true跨域携带cookie
  • xhr.send(data) 发出真正的http请求
  • xhr.getResponseHeader(name) 获得返回头的值
  • xhr.abort() 终止一个请求，之后xhr.readyState=0

其中返回结果中：

  • xhr.readyStete 状态值
  • xhr.status
  • xhr.responseType 设定响应的数据类型 比如 arraybuffer blob json text
  • xhr.response

关于 readyState 可以参考下表：
image.png
返回的事件有：

  • xhr.onreadystatechange=cb 检测readyState 变化
  • xhr.onloadstart
  • xhr.onprogress
  • xhr.onload
  1. var xhr = new XMLHttpRequest()
  2. xhr.onreadystatechange =function(){
  3.     if(xhr.readyState===4){
  4.         if(xhr.state===200){
  5.             // do
  6.             xhr.responseText
  7.         }
  8.     }
  9. }
  10. xhr.open('GET','/api', false)
  11. xhr.send(null)

fetch

比较新的底层技术

  1. fetch('some/api/data.json', {
  2.   method:'POST', //请求类型 GET、POST
  3.   headers:{}, // 请求的头信息，形式为 Headers 对象或 ByteString
  4.   body:{}, //请求发送的数据 blob、BufferSource、FormData、URLSearchParams（get 或head 方法中不能包含 body）
  5.   mode:'', //请求的模式，是否跨域等，如 cors、 no-cors 或 same-origin
  6.   credentials:'', //cookie 的跨域策略，如 omit、same-origin 或 include
  7.   cache:'', //请求的 cache 模式: default、no-store、reload、no-cache、 force-cache 或 only-if-cached
  8. }).then(function(response) { ... });

控制的更加底层。

此部分内容可以参考 全面分析前端的网络请求方式

跨域

浏览器为了数据安全
为了解决跨域问题

jsonp

先定义一个function

  1. window.callback=function(data){
  2.     // 展示 data
  3. }

然后script发送一个请求，返回 callback({})，这样就触发定义的function，实现了跨域

后端修改http头

  1. response.setHeader("Access-Control-Allow-Origin", "http://m.juejin.com/");  // 第二个参数填写允许跨域的域名称，不建议直接写 "*"
  2. response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
  3. response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  5. // 接收跨域的cookie
  6. response.setHeader("Access-Control-Allow-Credentials", "true");

补充，为了实现允许多个域跨域，可以建一个白名单。

存储

cookie

localstorage