记一些知识

发表于 更新于 分类于

img

什么是图像标签 img

<img> 将一份图像嵌入文档。

支持的格式

CORS

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

CORB

Cross-Origin Read Blocking（跨源读取阻塞），是一种判断是否要在跨站资源数据到达页面之前阻断其到达当前站点进程中的算法，降低了敏感数据暴露的风险。

跨域标签 <script> 和 <img> 等请求回来的数据 MIME type （比较常见的有application/javascript、application/json等）与跨域标签应有的 MIME 类型不匹配时，浏览器会启动 CORB 保护数据不被泄漏，被保护的数据类型只有 html、xml 和 json。

MIME type (Multipurpose Internet Mail Extensions)

MIME 是一个互联网标准，扩展了电子邮件标准，使其可以支持更多的消息类型。常见 MIME 类型如：text/html text/plain image/png application/javascript ，用于标识返回消息属于哪一种文档类型。写法为 type/subtype。 在 HTTP 请求的响应头中，以 Content-Type: application/javascript; charset=UTF-8 的形式出现，MIME type 是 Content-Type 值的一部分。

跨域

错误原因

本地路径和目标路径不是同一个域名下引起的跨域问题，并且，就算两个域名是同一个一级域名不同二级域名的时候，也是会出现这个问题。（并不一定是浏览器限制了发起跨站请求，也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了）

跨域通信方式

  1. JSONP（只支持 get 请求）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://www.mock-api.com/?callback=jsonp' // 接口地址

    document.head.appendChild(script)

    function jsonp(...res){
      console.log(res)
    }

  2. Hash

1
2
3
4
5
6
7
8
// 在 A 中伪代码
const B = document.getElementsByTagName('iframe')
B.src = B.src + '#' + 'data'

// 在 B 中的伪代码
window.onhashchange = function() {
  const { data } = window.location
}
  1. postMessage
1
2
3
4
5
6
7
8
9
10
11
// 在 A 窗口
const url = '...'
const Bwindow = window.open(url)
Bwindow.postMessage('data', url)

// 在 B 窗口
window.addEventListener('message', function(event) {
  console.log(event.origin) // A 窗口 url
  console.log(event.source) // A 窗口 window 对象
  console.log(event.data) // A 窗口传过来的数据
}, false)
  1. WebSocket
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const ws = new WebSocket('wss://echo.websocket.org')

ws.onopen = function(event) {
  console.log('Connection open ...')
  ws.send('Hello WebSockets')
}

ws.onmessage = function(event) {
  console.log('Received Message: ', event.data)
  ws.close()
}

ws.onclose = function(event) {
  console.log('Connection closed')
}
  1. CORS（现代浏览器普遍跨域解决方案）

整个 CORS 通信过程都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨域，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现 CORS 通信的关键是服务器，只要服务器实现了 CORS 接口，就可以跨域通信。

JavaScript面向对象

客观对象抽象成属性数据和对数据的相关操作，把内部细节和不想关的信息隐藏起来，把同一个类型的客观对象的属性数据和操作绑定在一起，封装成类，并且允许分成不同层次进行抽象，通过继承实现属性和操作的共享。

继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class Animal {
  constructor(name) {
    this.name = name
  }
  eat() {
    console.log(`${this.name} eat`)
  }
  speak() {

  }
}
const animal = new Animal('动物')
animal.eat()

class Dog extends Animal {
  constructor(name, age) {
    super(name)
    this.age = age
  }

  speak() {
    console.log(`${this.name} is barking!`)
  }
}
const dog = new Dog('狗', 5)
dog.eat()
dog.speak()


封装

把数据封装起来,减少耦合，不该外部访问的不要让外部访问。利于数据的接口权限管理，ES6 目前不支持，一般认为_开头的都会私有的，不要使用。

多态

同一操作作用于不同的对象上面可以产生不同的解释和不同的执行结果。

SOLID JS五大原则

单一职责原则

单条件的改变

开闭原则

易扩展、难修改

里氏替换原则

子类可以完全代替父类

接口隔离原则

用多个专门的接口，而不是使用单一的总接口

依赖倒转原则

程序要依赖于抽象接口，不要依赖于具体实现