XMLHttpRequest的 readyState 状态码

• 0 - 代表未初始化。 还没有调用 open 方法
• 1 - 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
• 2 - 代表已加载完毕。send 已被调用。请求已经开始
• 3 - 代表正在与服务器交互中。服务器正在解析响应内容
• 4 - 代表完成。响应发送完毕

Get请求

function getAjax(url, query) {
  let queryData = []
  for (let key in query) {
    queryData.push(`${key}=${query[key]}`)
  }
  url = `${url}?${queryData.join('&')}&timeStamp=${new Date().getTime()}`
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('get', url)
    xhr.send()
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText))
        } else {
          reject(xhr.statusText)
        }
      } else {
        reject(xhr.statusText)
      }
    }
  })
}

视频API-自动播放

文件API-浏览器操作文件

剪切板API

navigator.clipboard.readText: 用于读取剪切板

navigator.clipboard.writeText: 用于写入剪切板

window监听 paste事件，FileReader文件流形式处理图片

案例如下：点击按钮切换复制内容测试，测试图片则需要复制图片再回来粘贴

单例模式

Proxy: Proxy 代理可以使得操作 singleton返回的对象 的原型时，能挂载到原型上

function singleton(className) {
  let ins
  return new Proxy(className, {
    construct(target, args) {
      if(!ins) {
        ins = new target(...args)
      }
      return ins
    }
  })
}

class Cat {}
const NewCat = singleton(Cat)

const catA = new NewCat()
const catB = new NewCat()
console.log(catA, catB, catA === catB) // Cat {} Cat {} true

深克隆

解构

{...xxx} 只能实现第一层，当有多层的时候还是浅拷贝

JSON

JSON.parse(JSON.stringify(xxx)) 该方法不会拷贝内部函数

递归

利用递归实现函数

structuredClone

let a =  { a: 1, b: 2  }
a.c = a
let b = structuredClone(a)
let c = a
a.a = 2

console.log(a) // {a: 2, b: 2, c: {a: 2, b: 2, c: {…}} }
console.log(b) // {a: 1, b: 2, c: {a: 1, b: 2, c: {…}} }
console.log(c) // {a: 2, b: 2, c: {a: 2, b: 2, c: {…}} }

CSRF 跨站请求伪造

CSRF的基本概念、缩写、全称

CSRF(Cross-site request forgery)：跨站请求伪造。

CSRF的攻击原理

同源策略的概念和具体限制

同源策略：限制 从一个源加载的文档或脚本 如何与 来自另一个源的资源 进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。（来自MDN官方的解释）

具体解释：

• 源包括三个部分：协议、域名、端口。如果有任何一个部分不同，则源不同，那就是跨域了。
• 限制：这个源的文档没有权利去操作另一个源的文档。这个限制体现在：
  • Cookie、LocalStorage和IndexDB无法获取。
  • 无法获取和操作DOM。
  • 不能发送Ajax请求。我们要注意，Ajax只适合同源的通信。

当浏览器的 「网络线程」 收到 「HTML 文档」后，会产生一个 渲染任务，并将其传递 「渲染主线程」 的消息队列。

在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。

何为进程

程序运行需要有他自己专属的 「内存空间」，这块内存空间可以理解为 「进程」。

每个应用至少有一个进程，进程之间相互独立，即便要通信，也要双方同意。

何为线程

有了进程后，就可以运行程序的代码了。

运行代码的 「人」 称之为 「线程」。

一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为 主线程。

全文概述

描述： 函数嵌套函数，内部函数被外部函数返回并保存下来，就会产生闭包

特点： 可以重复利用变量，并且这个变量不会污染全局；这个变量一直保存在内存中，不会被垃圾回收机制回收

缺点： 闭包较多的时候，会消耗内存，导致页面性能下降，在IE浏览器中会导致内存泄露

使用： 防抖，节流，函数嵌套函数避免全局污染

高级描述：

1. 函数 + 其定义时所处的词法环境
2. 函数本身 + 内部属性[Environment]

内存泄漏条件：

1. 持有了不再需要的函数引用，会导致函数关联的 词法环境 无法销毁，从而导致内存泄露
2. 当多个函数 共享词法环境 时，会导致词法环境膨胀，从而导致出现 无法触达 也 无法回收 的内存空间，导致内存泄漏

一行代码完成结构加赋值

经常使用结构赋值，一般都是先结构，再赋值，当然也可以一行就完成解构加赋值操作，看起来非常简化，当然可读性你懂得！

let people = { name: null, age: null };
let result = { name: '张三',  age: 16 };

({ name: people.name, age: people.age } = result);
console.log(people) // {"name":"张三","age":16}