前端学习第十周-面向对象编程，对象封装，对象继承，前后端交互，post请求，前后端分离，异步编程模式，Canvas

---

前言

越来越南了

---

一、面向对象编程

面向对象编程特性

● 封装
● 继承
● 多态
○ 重写
○ 重载
面向过程
优点：逻辑简单；性能好
缺点：可读性；可维护性；可复用性；可扩展性
面向对象
优点：可读性；可维护性；可复用性；可扩展性
缺点：逻辑比较复杂；性能开销大

对象封装

● 原始模式
● 工厂模式
● 构造函数
● 原型模式
● 组合模式：构造函数+原型
● class语法：组合模式的语法糖（限制非new的调用）

静态属性、方法

static开头命名

私有属性以#开头命名，只能在class语法中使用

对象继承

● 原型链继承：将子类的原型设置为父类的实例对象，扩展原型链
○ 缺点：会在子类的原型上添加无用的空属性（所以产生原型式继承）

○ 最好还是重新指正一下constructor

● 原型式继承

● 借用构造函数继承
● 组成继承：原型链+借用构造函数
● 寄生组合继承：原型式 + 借用构造函数
● class 继承

此处的super等效于，子类属性必须写在super之后

解构（一般运用于参数很多的情况）

对象解构

数组解构，按照位置来解构
a.
b.arr1=3,4,5
实际情况运用

如果没有传参，可以用以下写法

二、前后端交互

前端开发：页面渲染，数据呈现，用户交互
后端开发：为前端提供数据支持

前后端交互：通过网络请求（AJAX）

AJAX：由js代码发起的网络请求的术语总称;
● Asynchronous JavaScript and XML(异步的JavaScript和XML(数据交换格式))
● XML已经不在web上使用，已经被JSON替代
○ JSON.stringify()
○ JSON.parse()
发起网络请求的底层技术：
● XMLHttpRequest -> XHR
● Fetch

post请求

get：地址栏
post：请求体
post写法：
发送数据的三种方式：

fetch写法
发送1（只能发送get）

fentch('链接?limit=2')

发送2

如果不支持delect或patch请求方式，需要如下处理

xhr.setRequestHeader('over-method','DELECT')

200 OK 请求成功。一般用于GET与POST请求
304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
400 Bad Request 客户端请求的语法错误，服务器无法理解
401 Unauthorized 请求要求用户的身份认证
403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
405 Method Not Allowed 客户端请求中的方法被禁止
408 Request Time-out 服务器等待客户端发送的请求时间过长，超时
500 Internal Server Error 服务器内部错误，无法完成请求
502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求

封装请求

请求方式
请求地址
请求参数
请求数据后的操作

前后端分离

跨域：由于浏览器的同源策略限制，禁止跨源读操作，导致前端的请求无法发出
如何处理跨域：

● 请求代理

○ 如果客户端和服务端处于非同源状态，客户端无法直接发送请求到服务器端，可以在前端的服务器上部署一个代理api，前端请求先发送至这个代理api，由代理api转发至服务端
○ 前端页面->前端服务代理->后端服务

● CORS：跨域资源共享

○ 一种基于HTTP头的机制，该机制通过允许服务器标示除了他自己以外的其他origin（域，协议和端口），使得浏览器允许这些origin访问加载自己的资源

● JSONP

○ 利用script标签src属性访问其他源的地址不受限制，当通过src将请求发送至服务端时，服务端将数据放入对应回调函数的调用参数中，然后返回，当返回的内容作为函数执行时，其会将会被对应回调函数接受
○ 缺点：只能发送get

异步编程模式

同步：依次执行
异步：当一个任务开始时，其他任务无需等待前面任务结束即可继续执行，在任务开始时会给当前任务部署一个事件处理器，当任务结束时，触发事件处理器

promise：异步编程的一种解决方法，可以看作是回调函数的改进方案
promise看作是包含异步操作的一个容器，可以先知书写异步操作，后续可以再从promise容器中取出结果使用，因此可以不提前声明回调函数
promise状态：
● 进行中：pending
● 成功：fulfilled
● 失败：rejected

promise状态只会发生一次状态改变，状态改变后无法进行更改（之后修改的不会生效）
方法：
● then：根据容器状态的变化，执行对应的回调函数

Canvas

Canvas API提供了一个通过JavaScript和HTML的元素来绘制图形的方式。它可以用于动画、游戏画面数据可视化、图片编辑以及实时视频处理等方面。

解决方法：ctx.scale(dpr,dpr)//更改坐标系

 /** @type {HTMLCanvasElement} */
  let canvas = document.querySelector('.my-canvas'); // 画布
  let ctx = canvas.getContext('2d'); // 获取渲染上下文（画笔）

function setCanvasAdapter(canvas) {
    let dpr = window.devicePixelRatio;
    let ctx = canvas.getContext("2d");
        let width = canvas.width;
    let height = canvas.height;

    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';

    canvas.width = width * dpr;
    canvas.height = height * dpr;

    ctx.scale(dpr, dpr) // 更改坐标系
  }

绘制方法

//参数( x ,y ,width, height)
    ctx.fillRect(10, 10, 80, 80);
    //绘制一个填充的矩形

    ctx.strokeRect(110, 10, 80, 80);
    //绘制一个矩形的边框

    //上面两种绘制矩形的方式是直接绘制的，而下面的rect()方法有所不同：
    ctx.rect(210, 10, 80, 80);
    ctx.fill();

    ctx.rect(310, 10, 80, 80);
    ctx.stroke();
    //rect()并不会直接将矩形绘制出来，直到调用fill()或stroke()方法才会绘制。

clearRect()方法的作用类似橡皮擦，清除指定矩形区域，让清除部分完全透明

设置线条宽度 ctx.lineWidth = 8;

设置线条末端样式 ctx.lineCap =‘butt’;
● butt 线段末端以方形结束。
● round 线段末端以圆形结束。
● square 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

设定线条与线条间接合处的样式 ctx.lineJoin =‘round’
● round 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
● bevel 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
● miter 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果 .

绘制圆弧或者圆 arc(x, y, radius, startAngle, endAngle, anticlockwise)
● x：圆弧中心（圆心）的 x 轴坐标。
● y：圆弧中心（圆心）的 y 轴坐标。
● radius：圆弧的半径。
● startAngle：圆弧的起始点， x轴方向开始计算，单位以弧度表示。
● endAngle：圆弧的终点， 单位以弧度表示。
● anticlockwise 可选：可选的Boolean值 ，如果为 true，逆时针绘制圆弧，反之，顺时针绘制
arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。
eg：cxt.arc(180,70,50,0,Math.PI/2,false);

总结

。