跨域
浏览器的同源策略1.同源策略概述同源策略是浏览器为确保资源安全，而遵循的一种策略，该策略对访问资源进行了一些限制。
2.什么是源（origin）？
只有这三个都相同的时候，才符合同源策略，否则就涉及跨域问题
3.跨域会受到哪些限制
Cookie，LocalStorage，IndexDB 等存储性内容无法读取
DOM 节点无法访问
Ajax 请求发出去了，但是响应被浏览器拦截了
ps:几个注意点
跨域限制仅存在浏览器端，服务端不存在跨域限制。
即使跨域了，Ajax 请求也可以正常发出，但响应数据不会交给开发者。
、、...... 这些标签发出的请求也可能跨域，只不过浏览器对标签跨域不做严格限制，对开发几乎无影响
解决方案CORS1.CORS概述CORS 全称：Cross-Origin Resource Sharing（跨域资源共享），是用于控制浏览器校验跨域请求的一套规范，服务器依照 CORS 规范，添加特定响应头来控制浏览器校验，大致规则如下：
1）服务器明确表示拒绝跨域请求，或没有表示，则浏览器校验不通过。2）服务器明确表示允许跨域请求，则浏览器校验通过。
ps：要求服 ...
Proxy
为什么要使用代理？之所以使用代理，就是不希望用户能够直接访问某个对象，直接操作对象的某个成员（因为这样是不可控的，我们不知道用户在访问操作哪一个对象）
通过代理，我们可以拦截用户的访问（称为数据劫持），拦截住后我们就可以对数据进行一些处理，比如做一些数据的验证，之后再允许用户的访问操作（因为我们拦截了用户的每一次访问，这样用户操作对象就完全是在我们可控的范围内）
简单来说，就是我们希望用户在访问对象时我们能够清除的知道用户在访问什么并且能够在中间做一些我们自己的操作
Proxy是什么？Proxy 是 ES6 中新增的一个构造函数，也可以叫类，通过new操作符调用使用。
Proxy 对象用于创建目标对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）
需要注意的是，Proxy并没有prototype原型对象
官方说明是因为 Proxy 构造出来的实例对象仅仅是对目标对象的一个代理，所以 Proxy 在构造过程中是不需要 prototype 进行初始化的
其他构造函数之所以需要 prototype，是因为构造出来的对象需要一些初始化的成员，所以将这些成员定义到 ...
浅拷贝与深拷贝
直接赋值基本数据类型保存在栈里面，可以直接访问它的值，赋值时，会完整复制变量值。
let a = 10let b = aa = 20console.log(b) //10
引用数据类型保存在堆里面，栈里面保存的是地址，通过栈里面的地址去访问堆里面的值。
let obj1 = { a : 1}let obj2 = obj1obj1.a = 2console.log(obj2.a) //2
这是直接赋值的情况，要想两个值互不影响，就需要进行拷贝，js中的拷贝分为浅拷贝和深拷贝
浅拷贝我的理解就是，浅拷贝实际上只拷贝了一层
具体实现方法有这几种：
拓展运算符
let a = [1,2,3]let b = [...a] //把数组a的内容挨个取出放到b数组中a[0] = 0console.log(b) //1,2,3
slice方法
let a = [1,2,3]let b = a.slice()a[0] = 4;console.log(b) //1 2 3
assign方法
let obj1 = { a: 1, b: 2 &# ...
echarts入门
1.echarts的介绍1.brief introductionecharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
2.echarts的下载（1）从 npm 获取npm install echarts –save（2）从 CDN 获取（3）从 GitHub 获取（下载echarts.min.js文件）
2.echarts语法1.常见术语
英文
汉语
title
标题
legend
图例
tooltip
提示
xAxis
x轴线
yAxis
y轴线
series
系列
data
数据
2.图表常见类型
bar 柱状图
line折线图(1)曲线图加上smooth:true;就会变成曲线图(2)面积图加上areaStyle:{fill:“颜色编号”} 会变成面积图
pie 饼形图加上radius:[80,50] 会变成环形图 //第一个值是外半径，第二个值是内半径
...
canvas事件
引言常用的鼠标事件首先咱们还是先回顾一下鼠标的常用事件：
click（点击）
dblclick（双击）
mouseover（鼠标移入）
mouseout（鼠标移出）
mouseenter（鼠标移入）
mouseleave（鼠标移出）
mouseup（鼠标抬起）
mousedown（鼠标按下）
mousemove（鼠标移动）
以上就是咱们常用的鼠标事件，我们发现其中的mouseover和mouseenter还有mouseout和mouseleave好像是一样的事件，但凭我们的经验虽然看似一样，其实肯定不一样，或者说有区别。
那么他们有什么区别呢？
mouseover和mouseenter都是鼠标移入时触发，但区别是mouseover支持事件冒泡，而mouseenter不支持事件冒泡。简单说就是 mouseover事件在鼠标指针移入被选元素或者是被选元素的任何子元素，都会触发，而mouseenter事件只有在鼠标指针移入被选元素时，才会触发，移入被选元素的子元素不会触发。
mouseout和mouseleave都是鼠标移入时触发，但区别是mouseout支持事件冒泡，而mouselea ...
canvas进阶
1.动画在Canvas中，动画其实也就是一些基础的几何变换，因此想做动画第一步咱们需要先了解有哪些几何变换。
几何变换几何变换的类型其实和CSS动画中的类型差不多，也就是：移动、旋转、缩放
移动语法：translate(x, y)，其中 x 是左右偏移量，y 是上下偏移量。
const canvas = document.getElementById('canvas'); // 获取Canvasconst ctx = canvas.getContext('2d'); // 获取绘制上下文ctx.fillStyle="#ff0000"// 向x轴和y轴平移200像素（移的是画布的原点）ctx.translate(200, 200);// 在（0,0）坐标点绘制一个宽：200，高：100的矩形ctx.fillRect(0, 0, 200, 100)
旋转语法：rotate(angle)，其中 angle 是旋转的角度，以弧度为单位，顺时针旋转。
const canvas = document.getElementById(&#x ...
canvas基础
绘制1.创建Canvas的创建其实就是一个HTML标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas - 创建</title></head><body> <canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0 ...
js继承
1、原型链继承构造函数、原型和实例之间的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个原型对象的指针。
继承的本质就是复制，即重写原型对象，代之以一个新类型的实例。
function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = function() { return this.property;}function SubType() { this.subproperty = false;}// 这里是关键，创建SuperType的实例，并将该实例赋值给SubType.prototypeSubType.prototype = new SuperType(); SubType.prototype.getSubValue = function() { return this.subproperty;}var instance = new SubTy ...
节流与防抖
因为要做一个记忆翻牌配对小游戏，然后在学习时偶然看到“节流”二字，然后就顺便去看了看所谓的“节流”
节流1.啥是节流 n 秒内只执行一次事件，即使n 秒内事件重复触发，也只有一次生效。
如果这不好理解，那就假设一个场景：
1.你设计了一个表单，这个表单提交的数据内容很多。
2.你的有些用户闲得很无聊，写完表单以后疯狂点击提交按钮。
3.你的后端同事走到你面前指着崩溃的服务器来向你抱怨。
这就像打游戏放技能一样，放完一次技能后就有一段的冷却时间
所以我的第一想法肯定是给这个button一个冷却时间
现在在我面前的有两个东西：一个按钮提交的功能，一个冷却时间，假设为5秒
牵扯到时间会让我第一时间想到 setTimeout和setInterval，首先排除setInterval，因为提交表单这个功能我不希望它循环执行，所以我选择setTimeout。
假设你现在正在玩游戏，游戏有一个技能，它的技能CD是两秒，那么我们就需要判断用户是否在两秒内多处点击了这个技能，如果多次点击，那么无事发生(返回一个空函数)，如果不在CD，那么返回这个技能的特效(技能执行的函数)
const fnOnclick ...