2020.5.23 总结

发布于 2020-05-23  27 次阅读


1.复习内容

2.灵感代办

3.学习内容

  • CORS知识点

    • CORS是什么?

      • CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
      • 可以让ajax跨域使用
    • CORS简介

      • CORS需要前端和后端同时支持
      • 前端携带响应的头,后端返回响应的头,就是CROS
      • CORS最关键的还是服务器的配置,实现
    • CORS的两种请求

      • 简单请求

        • 简单请求的方法只能是:GET POST HEAD
        • 简单请求的头信息:Accept,Accept-Language,Content-Language,Last-Event-ID,Content-Type:
      • Content-Type只能是以下三个值:
        • html
          application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain

          • 简单请求的基本流程
          • 在请求头中 增加Origin字段,字段内容是哪个源(协议,域名,端口号)
          • 服务器检测Origin是否在许可范围(Access-Control-Allow-Origin),
            • 如果不在许可范围:内调用ajax的onerror回调捕捉函数,
            • 如果在许可范围:返回响应信息
            • Access-Control-Allow-Origin: http://api.bob.com
              Access-Control-Allow-Credentials: true
              Access-Control-Expose-Headers: FooBar
              Content-Type: text/html; charset=utf-8

            • Access-Control-Allow-Origin
              • 服务器允许的地址,*则是全部可以
            • Acess-Control-Allow-Credentials
              • 是否携带Cookie,默认不携带,值为bool
              • 如果想要携带Cookie
                • 服务器:
                  • 设置字段:Access-Control-Allow-Credentials: true
                  • Access-Control-Allow-Origin就需要明确指定域名(不能*号)
                • 客户端
                  • var xhr = new XMLHttpRequest();
                    xhr.withCredentials = true;

            • Access-Control-Expose-Headers
              • 字段可选
              • 在其中指定的值,可以在getResponseHeader()中拿到
              • CROS中XMLHttpRequest的getResponseHeader()方法只能拿到(六个):
                • Cache-Control
                • Content-Language
                • Content-Type
                • Expires
                • Last-Modified
                • Pragma
      • 预检请求(非简单请求)

        • 非简单请求就是有特殊要求,
          • 需要使用PUT ,DELETE,
          • Content-Type:application/json
        • 预检请求流程
          • 1.设置请求方法PUT,携带自定义头信息
          • 2.预检请求方法使用OPTIONS,
            • Origin:代表那个源
        • 预检请求特殊字段:
          • Access-Control-Request-Method
            • 定义了CORS需要用什么方法 PUT
          • Access-Control-Request-Header
            • 多个字段用逗号分隔
            • 定义了浏览器自定义头信息的字段
        • 预检请求回应:
          • Access-Control-Allow-Methods
            • 逗号分隔的多个字段
            • 代表了服务器支持所有的HTTP方法
            • 一次性返回多个,避免多次请求
          • Access-Control-Allow-Headers
            • 如果携带了Access-Control-Request-Headers的自定义请求
            • 返回浏览器支持的所有头字段,
            • 不限于CORS的字段
          • Access-Control-Allow-Credentials
            • 是否携带Cookie,需要服务器和浏览器同时配置
          • Access-Control-Max-Age
            • 表示本次预检请求的有效期,单位为秒
  • Javascript原型与原型链

    • 原型链(继承):

      • 函数对象中的方法,属性,可以向下传递
    • 所以原型链的重点都是Object函数的prototype属性
      • Object的prototype属性是null
    • 原型链可以组合复用
      * 借助call函数,可以实现复用函数
    • proto属性
      * 每个实例对象都有__proto__

      • 指向对象的构造函数
      • 通过__proto__组成了原型链,原型链上有的方法都可以使用
  • 构造函数与原型:

    • 保证对象之间的联系(动物-狗)
    • 原型的一些特点 重点:

      • 每一个构造函数都有一个prototype属性,这个属性指向一个对象,
      • 使用构造函数创建实例,prototype属性指向的原型对象就成为实例的原型对象
      • 原型对象有个contrctor属性,指向构造函数
      • 每个实例对象有一个[prototype]属性,访问
        * Object.getPrototypeOf(obj)

        • obj.__proto__
        • 实例对象.__proto__ == 构造函数.prototype
        • 原型对象用来存放实例对象中公有的属性(车-可以开)
        • JavaScript中,所有对象都是由原型对象继承而来,反之,任何对象可以当做原型
        • 访问对象属性,先从自身找,然后依次向上查找原型
      • 对象重写原型对象中的属性,会在自己类中添加一个新的方法,修改原型对象中的属性,需要修改prototype
      • function Person(name,age){
            this.name = name;
        this.age = age;
            this.talk = function(){
              console.log(`i love you`)
            }
          }
          const p = new Person("ww",12)
          const p = new Person("jj",12)

4.扩展延伸知识

5.知识内容个人梳理

6.今天都复习了之前的什么内容


Ares个人进阶之路