• 事件触发时序
• 事件捕获 --> 指的是从document到触发事件的那个节点，即自上而下的去触发事件
• 事件冒泡 --> 是自下而上的去触发事件
  • 子到父 ，子先触发 -> 默认
• 绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。
  • true,事件捕获；false,事件冒泡。默认false,即事件冒泡

• 当一个节点被拖拉到另一个节点里，触发的事件如下:
  dragstart --> drag --> dragenter --> dragover --> drop --> dragend

• dragstart， drag， dragend 在被拖动的节点触发，触发的event.target为被拖拽的节点

• dragenter，dragover， dragleave， drop 在目标节点触发，触发的event.target为释放的目标节点

• 在 dragover触发时需要执行event.preventDefault()，允许被拖动的节点进入

• preventDefault() -> 取消事件的默认动作

• 双精度二进制小数，使用64个比特存储(8字节)

• hash 值 (带 #)

• proto 继承自哪里
• prototype 要继承的具体内容

• 等一会儿，一个个来

• 半导体是指一种导电性可受控制，范围可从绝缘体至导体之间的材料

• 若地址里面的协议、域名和端口号均相同则属于同源
• 跨域
  • jsonp跨域
  • nginx反向代理
  • node.js中间件代理跨域
  • 后端设置http header
  • 后端在服务器上设置cors

• Browser进程：浏览器的主进程（负责协调、主控），只有一个。作用有
  • 负责浏览器界面显示，与用户交互。如前进，后退等
  • 负责各个页面的管理，创建和销毁其他进程
  • 将Renderer进程得到的内存中的Bitmap，绘制到用户界面上
  • 网络资源的管理，下载等
• 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
• GPU进程：最多一个，用于3D绘制等
• 浏览器渲染进程（浏览器内核）（Renderer进程，内部是多线程的）：默认每个Tab页面一个进程，互不影响。主要作用为 页面渲染，脚本执行，事件处理等

• currentStyle: 该属性只兼容IE,不兼容火狐和谷歌
  • ele.currentStyle["attr"]
• getComputedStyle: 该属性是兼容火狐谷歌,不兼容IE
  • window.getComputedStyle(ele,null)[attr]

定义

• 运行期上下文对象: 执行环境 --> AO, GO
• 作用域[[scope]]：运行期上下文对象(AO, GO)集合--> 作用域链scope chain

函数执行过程

• GO (Global Object) -->
• AO (Activation Object) -->
• 被定义时 --> [[scope]] --> 0: GO --> 所在环境
• 被执行时 --> [[scope]] --> 0: AO , 1: GO

• docker安装

sudo apt-get update
sudo apt-get install docker.io
#查看版本
docker version  

• docker镜像加速

# 阿里云: https://dev.aliyun.com/search.html

sudo vi /etc/docker/daemon.json 
# 添加以下内容
{
  "registry-mirrors": ["https://ihep3sb9.mirror.aliyuncs.com"]
}
# 重启进程
sudo service docker restart 

• 创建共享目录

sudo su
mkdir /share && chmod 777 /share
ln -s /share .

• 安装mysql

#拉去镜像
docker pull mysql
# 启动mysql
docker run -p 3306:3306  -v $PWD/mysql:/var/lib/mysql  -e MYSQL_ROOT_PASSWORD=root --name mysql -d mysql 

# -p 3306:3306：将容器的3306端口映射到主机的3306端口

# -v $PWD/share:/var/lib/mysql：将主机当前目录下的/mysql挂载到容器的/var/lib/mysql

# -e MYSQL_ROOT_PASSWORD=root：初始化root用户的密码

# --name 给容器命名，mysql

# -d 指定镜像

docker ps -a

• 配置mysql

# 进入
docker exec -it mysql bash
#进入mysql
mysql -uroot -p
#mysql 
show databases; 
#切换数据库
use mysql; 
SELECT `User`, `Host` FROM `user`;
# 创建用户
#CREATE USER 'admin'@'%' IDENTIFIED BY 'admin';
#授权
#grant all on *.* to 'admin'@'%';
#注意:用以上命令授权的用户不能给其它用户授权,如果想让该用户可以授权,用以下命令: 
# GRANT all ON databasename.tablename TO 'username'@'host' WITH GRANT OPTION; 
# 更改加密认证
#ALTER USER 'root'@'%' IDENTIFIED BY 'root' PASSWORD EXPIRE NEVER; #修改加密规则,永不过期
ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY 'root';
#FLUSH PRIVILEGES; #刷新权限
#alter user 'root'@'%' identified by 'root';

PLUGIN

• webpack就是完成一个又一个任务而完成整个打包构建过程
• make是最开始的起点, complie就是编译任务点，after-complie是编译完成，emit是即将准备生成文件，after-emit是生成文件之后等
• compilation，它继承于compiler，所以能拿到一切compiler的内容（所以你也会看到webpack的options），而且也有plugin函数来接入任务点

• 位，简记为b,也称为比特，每个0或1就是一个位(bit)
• 8 bit 就称为一个字节（Byte）

• map():返回一个新的Array，每个元素为调用func的结果

• filter():返回一个符合func条件的元素数组

• some():返回一个boolean，判断是否有元素是否符合func条件

• every():返回一个boolean，判断每个元素是否符合func条件

• forEach():没有返回值，只是针对每个元素调用func

• find(): 返回数组中满足提供的测试函数的第一个元素的值

n++，是先赋值在自增1，假设n= 2， x = n++，则x= 2，n= 3
同理，++ n是先自增在赋值，假设n= 2， x = ++n, 则 x = 3，n = 3

汇编解析

apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用后续参数传参；
bind是返回对应函数，便于稍后调用；apply 、call 则是立即调用

函数调用的方法一共有 4 种

• 作为一个函数调用 fun()
• 函数作为方法调用 a.fun()
• 使用构造函数调用函数 new fun()
• 作为函数方法调用函数 call、apply

• 进程和线程都是一个时间段的描述，是CPU工作时间段的描述

• 程序-> 进程 -> CPU工作时间段

• 线程和进程实际上只是一件事：“执行上下文”

• 电脑的运行，实际就是CPU和相关寄存器以及RAM之间的事情

• 在CPU看来所有的任务都是一个一个的轮流执行的

  • 先加载程序A的上下文，然后开始执行A，保存程序A的上下文，调入下一个要执行的程序B的程序上下文，然后开始执行B,保存程序B的上下文。。。。

• 程序上下文 -> 执行环境

• 进程就是包括上下文切换的程序执行时间总和 = CPU加载上下文+CPU执行+CPU保存上下文

• 线程是共享了进程的上下文环境，的更为细小的CPU时间段

  • 程序A得到CPU -> CPU加载上下文，开始执行程序A的a小段，然后执行A的b小段，然后再执行A的c小段，最后CPU保存A的上下文

• 一气呵成

• new

• “腻子”，就是装修的时候，可以把缺损的地方填充抹平

事件队列

• task 宏任务队列：每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）

  • 主要包含：setTimeout、setInterval、setImmediate、I/O、UI交互事件
  • 每一个task会从头到尾将这个任务执行完毕，不会执行其它
  • 浏览器为了能够使得JS内部task与DOM任务能够有序的执行，会在一个task执行结束后，在下一个 task 执行开始前，对页面进行重新渲染 task->渲染->task->...

• microtask 微任务队列：可以理解是在当前 task 执行结束后立即执行的任务

  • 主要包含：Promise、process.nextTick、MutaionObserver
  • 也就是说，在当前task任务后，下一个task之前，在渲染之前
  • 所以它的响应速度相比setTimeout（setTimeout是task）会更快，因为无需等渲染
  • 也就是说，在某一个macrotask执行完后，就会将在它执行期间产生的所有microtask都执行完毕（在渲染前）

另外，请注意下Promise的polyfill与官方版本的区别：
官方版本中，是标准的microtask形式
polyfill，一般都是通过setTimeout模拟的，所以是macrotask形式
请特别注意这两点区别
注意，有一些浏览器执行结果不一样（因为它们可能把microtask当成macrotask来执行了），
但是为了简单，这里不描述一些不标准的浏览器下的场景（但记住，有些浏览器可能并不标准）

• nodeType是用来获得当前节点对象的类型
  • 元素 element 1
  • 属性 attr 2
  • 文本 text 3
  • 注释 comments 8
  • 文档 document 9

大O表示法

大O表示法通常表示算法占用cpu的情况

• O(1): 不管参数是多少，占用cpu情况一值不变的，就是我们所说的“常数级的时间复杂度”
  - O(㏒n): 对数级别的时间复杂度

类型声明

// boolean
let isDone: boolean = false;
// number
let decLiteral: number = 6;
// string
let name: string = "bob";
// 数组
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

泛型

• 泛型其实指得就是参数化类型

• PageX: 相对于文档边缘（包含滚动条距离）

• clientX/Y,X/Y: 相对于当前页面且不包含滚动条距离 (可视区)

• pageX/Y,layerX/Y,offsetX/Y: 相对于页面且考虑滚动条

• screenX/Y: 鼠标指针相对于屏幕的坐标

• offsetX/Y: 相对于当前元素（块或行内块），除safari外不包含边框 。

• 指令字是指一条指令的机器字
• 电脑是32位的话，一个机器字是由4个字节组成,64位的话，一个机器字是由8个字节组成
• 计算机的数据总线和寄存器的位数与机器字长一致

• 观察者模式就是为某一对象添加一监听事件

变形函数

• translate 位移
• scale 缩放
• rotate 旋转
• skew 扭曲
• matrix 矩阵

1. 挂载的意思是 在Vue实例化后，将模板编译为html数据插入到对应(挂载的元素)的虚拟dom中 👉 mounting
2. mounted 👉 整个实例之挂载一次，如果有数据更新，进行 update👉 挂载后，页面即有数据了
3. updated 👉 视图才会渲染更新，$refs是渲染完成后才会获取数据，在mounted中 用$refs无法操作数据，因为mounted后视图并没有更新
4. this.$nextTick 是延时 or 异步函数，在updated后回调

• js append

什么是Vuex?

• 简单理解就是统一管理和维护各个vue组件的可变化状态(你可以理解成vue组件里的某些data)

• 状态？我理解为data数据的变化

• Vuex采用和Redux类似的单向数据流的方式来管理数据。用户界面负责触发动作Action进而改变对应状态State，从而反映到视图View上

Store: 存储状态

• 是我们正常要维护的状态数据,负责存储整个应用的状态数据

Mutations：更改状态

• 利用它可以更改状态，本质就是用来处理数据的函数
• 其接收唯一参数值state
• store.commit(mutationName)是用来触发一个mutation的方法
• 定义的mutation必须是同步函数

Action

动作事件

• 也可以用于改变状态，不过是通过触发mutation实现的

Getters

• 有些状态需要做二次处理

middlewares

middlewares中间件处理的东西，这里主要开发时候在控制台查看一些处理日志

https://blog.csdn.net/ai_xiangjuan/article/details/79357649

• Trie这个术语来自于retrieval。根据词源学，Trie的发明者Edward Fredkin把它读作英语发音：/ˈtriː/ "tree"。但是，其他作者把它读作英语发音：/ˈtraɪ/ "try"
• 又称前缀树或字典树，是一种有序树状的数据结构，用于保存关联数组，其中的键通常是字符串
  

一对一

一对多

• 在多的一方加入另一方的外键

多对多

• 将依赖对象挂载到其对象本身属性

class Client {
	constructor(serviceA: ServiceA, serviceB: ServiceB) {
		// 注入器在建立Client的时候，将依赖的 Service 通过构造函数参数传递给 Client
		// Client此时即可将依赖的服务保存在自身状态内：
		this.serviceA = serviceA;
		this.serviceB = serviceB;
	}
}

严格模式

use strict

声明

var 全局声明
let   局部声明
const 常量声明

解构赋值

• 结构赋值
• 默认值
• null 是一个对象
• undefined 不是一个值

扩展 & rest 运算符

• ... 会开辟新的内存空间
• rest 第二未知

字符串

• 字符串模板
  • `` 连接符 -->字符串拼接
  • ${} 插入变量
• includes
• startsWith
• ends
• repeat() 复制

数字

• Binary
• Octal
• Number
• Math

数组

• json数组 -->包含length -->类数组 --> Array.from 转数组
• Array.of --> 字符串转数组
• 实例方法
  • find() --> -->
  • fill()
• 遍历
  • for ( of )
  • forEach()
  • filter
  • some
  • map
• 转字符串
  • toString()
  • join()
• entries()
• in

对象

• Object.is() 严格相等 --> ===同值相等
• Object.assign() 合并对象
• Symbol

箭头函数

• 不能用于构造函数

Set & WeakSet

• Set([]) 存放数组，不允许重复值
• add()
• has()
• delete()
• clear()
• size
• WeakSet

Map

• key value 可以是任意值 => 连接
• set()
• get()
• delete()
• size
• has

Proxy

• 增强对象&函数(方法) 生命周期(钩子函数) -->预处理-->在函数执行之前
• get
• set
• apply --> 处理方法

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

Promise 新建后立即执行，所以首先输出的是Promise。
然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出

• 标识符 标识不同对象和同类中的不同的实例，但是句柄不是指针

• 一句SQL相当于一个事务,当你做一件事,下一句必须以依赖上一句,那么就用上事务.也可以理解成:几句SQL语句要么就全部成功,要么就全部失败,这情况下就用上事务.例如:A汇款给B,要写两个update语句,一个将A的钱减少,一个将B的钱增加,但钱不能为负数,那么执行A的语句就失败,但B的会成功,这情况下就需要事务控制

• shim 是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现
• polyfill 就是一个用在浏览器API上的shim