es6
vue
css居中
权限
原型链
响应式
promise（回调地狱，异步，race,all，then）
await（避免太多then）
双向绑定原理
前端优化
https://www.cnblogs.com/wdlhao/p/8290436.html
坑
组件添加事件需加.native
更改数组长度，某一项的值，对象属性添加删除需用set，splice
清空定时器 this.$once(‘’hook:beforeDestroy,()=>{})
created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
element select组件，value需用：绑定
elelment样式，/deep/
前端优化
减少 HTTP 的请求数量
雪碧图
懒加载
减少重排（Reflow）
减少 DOM 操作
按需引入
css实现效果
字体图标
cdn
CSS在头部，JS在底部
压缩文件
缓存
首屏优化
将公用的JS库通过script标签外部引入
路由懒加载
cdn、插件按需引入
首页子组件v-if=false,created里setTimeout设置true
首屏loading
路由懒加载
component: resolve => require(['@/components/HelloWorld'], resolve)
component: () => import('@/components/HelloWorld.vue')
const home = r => require.ensure( [], () => r (require('../../common/home.vue')))
组件懒加载
const One = ()=>import("./one");
"One-com":resolve=>(['./one'],resolve)
Es6
const 与 let 变量
箭头函数
模板字符串
对象字面量简写
解构（取对象或数组里的值）
let [a,...rest]=[1,2,3]
let {a}={a:1}
扩展运算符(深拷贝拷贝数组或对象)
let arr= [...arr1]
let obj= {...obj1}
class
遍历
对象for in，遍历数组会找到所有方法和属性
数组for of
Symbol是一种基础数据类型，每个Symbol实例都是唯一的
作为对象属性名(key)、
使用Symbol来替代常量
使用Symbol定义类的私有属性/方法
Symbol类型的key是不能通过Object.keys()或者for...in来枚举的,可以把一些不需要对外操作和访问的属性使用Symbol来定义
使用JSON.stringify()将对象转换成JSON字符串的时候，Symbol属性也会被排除在输出内容之外
Object.getOwnPropertySymbols(obj)
Reflect.ownKeys(obj)
箭头函数
没有this
没有arguments
没有prototype
不能作为构造函数
一个参数省略()
一行语句省略{}
Promise
pending 过渡态
fulfilled 完成态
rejected 失败态
async
async声明一个函数为异步函数，当用了async声明后，这个函数就成了一个promise对象 ，如果这个函数有返回值，那么函数内部会把这个return 的值赋值给promise对象的PromiseValue。通过await就可以拿到这个异步返回值。当然通过then()也可以拿到
async函数中只要一个 await 出现 reject 状态，则后面的 await 都不会被执行，解决办法：可以添加 try/catch
async 必须等到内部所有await命令Promise对象执行完才会发生状态改变，除非遇到return语句或抛出错误
async 函数变异步必须.then()方式执行
await “等待”异步操作的返回值，避免多层then，异步变同步
class
constructor:创建类的实例化对象时被调用
getter 与 setter 必须同级出现
子类 constructor 方法中必须有 super ，且必须出现在 this 之前
ES6 中规定，Class 内部只有静态方法，没有静态属性
属性：
公共属性:Example.prototype.a = 2
实例属性：定义在实例对象（ this ）上的属性
name 属性
方法：
constructor 方法
静态方法
原型方法
实例方法：放在constructor中，this.xx=()=>{}
数组
some
every
reduce
filter
includes
find
findIndex
fill
map
forEach
from
keys
values
数组去重
[...new Set(arr)]
Array.from(new Set(arr))
arr.filter((v,i,arr)=>{arr.indexOf(v)!==i})
for each arr.indexOf(i)!==i
for each s.indexOf(i)==-1 s.push(i)
扁平化：
function flatten(arr){
while(arr.some(item=>Array.isArray(item)){
arr = [].concat(...arr);
}
return arr;
}
Vue
通信
props,emit
vuex
eventBus
provide/inject
$parent,$children,$ref
sessionStorage
路由传参
$attrs,$listeners
双向原理
observer监听
watcher订阅
compile解析
vue的优点:
轻量、双向绑定，组件化，指令
缺点：
seo优化、报错不明显
route
path:'', query:{}
name:'', params:{}
this.$route.query
this.$route.params
query: /a?id=1
params:/a/1
params路由中定义参数
全局钩子
单个路由钩子
组件钩子
mixin
值为对象：methods组件覆盖mixin
值为函数：created先mixin再执行created
局部刷新
<router-view v-if="isRouterAlive"/>
provide(){
return {
reload:this.reload
}
},
isRouterAlive: true
reload () {
this.isRouterAlive = false
this.$nextTick(() => (this.isRouterAlive = true))
}
inject:["reload"],
this.reload();
开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载
BeforeCreate:vue实例的挂载元素el和data都是undefined
Ceated:data初始化
BeforeMounted：虚拟dom
Mounted:实例挂载完成，可进行dom操作
MVVM: 开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷
自定义指令
bind(el,binding,vnode,oldVnode)、unbind、inserted、update、componentUpdated
虚拟dom
当我们修改真正的DOM树的时候，因为DOM中元素节点有许多的属性和方法，当DOM中节点过多时往往需要消耗很大的性能。 解决方法是：使用js对象来表示DOM树的信息和结构，这个js对象可以构建一个真正的DOM树。当状态变更的时候用修改后的新渲染的的js对象和旧的虚拟DOM js对象作对比，记录着两棵树的差异。把差别反映到真实的DOM 结构上最后操作真正的DOM的时候只操作有差异的部分就可以了
const hasPermission = {
install (Vue, options) {
Vue.directive('hasPermission', {
bind (el, binding, vnode) {
let permissionList = vnode.context.$route.meta.permission;
if (permissionList && permissionList.length && !permissionList.includes(binding.value)) {
if(el.parentNode) {
el.parentNode.removeChild(el);
}else{
el.style.display='none}}}});}
};
export default hasPermission;
<Button v-hasPermission="'add'">添加</Button>
Js
跨域
jsonp
cors
niginx反向代理
postmesaage
document.domain
location.hash
window.name
防抖：只执行一次，clearTimeOut
节流：一段时间执行一次，判断两次执行的时间间隔
原型链
__proto__:指向相应的构造函数的prototype属性。当访问对象不存在的属性会查找proto指向的父对象
prototype:让函数所实例化的对象都能找到公用的属性和方法，只有函数有prototype
constructor指回原构造函数
只要是对象就有原型,并且原型也是对象,因此只要定义了一个对象,那么就可以找到他的原型,如此反复,就可以构成一个对象的序列,这个结构就被成为原型链JS
任何对象都有一个原型对象，这个原型对象由对象的内置属性_proto_指向它的构造函数的prototype指向的对象，
即任何对象都是由一个构造函数创建的，但是不是每一个对象都有prototype，只有方法才有prototype
原型链的核心就是依赖对象的_proto_的指向，当自身不存在的属性时，就一层层的扒出创建对象的构造函数，直至到Object时，就没有_proto_指向了
原型对象也有一个属性
继承
1、prototype原型链方式：
2、call()/apply()方法
3、混合方法【prototype,call/apply】
4、对象冒充
function Student(name,age){
this.student = Person; //将Person类的构造函数赋值给this.student
this.student(name,age); //js中实际上是通过对象冒充来实现继承的
delete this.student; //移除对Person的引用
}
同步或非同步，表明着是否需要将整个流程按顺序地完成
阻塞或非阻塞，意味着你调用的函数会不会立刻告诉你结果
异步四种：
callback
事件监听
发布订阅
promise
另：
settimeout
ajax
事件监听
promise
闭包
1、当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。
2、使函数外部能够调用函数内部定义的变量。
事件委托：通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度。
防止冒泡和捕获
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false
javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡
new对象发生了什么
创建一个新对象
将构造函数的作用域赋给新对象
为新对象添加属性
返回新对象
this
自执行：window
Dom事件
Object
正则
中括号[]只能匹配其中一个，如果要匹配特定几组字符串的话，那就必须使用小括号()加或|
w 匹配包括下划线的任何单词字符。等价于“[A-Za-z0-9_]”。
d 匹配一个数字字符。等价于[0-9]。
Bind和on【】
动态添加dom是否可绑定
cookie
1、存储量少，个数有限，4K
2、每次HTTP请求都会发送到服务端
3、获取，删除、设置需封装
localstorage 存储本地，5M，操作简单，一直有效，同源同窗口共享
sessionStorage关闭失效，不在不同的浏览器窗口共享
状态码
301：永久
302：临时重定向，重新发送
304：客户端缓存为最新，要求客户端使用缓存
输入URL
-
输入网址；
-
发送到DNS服务器，并获取域名对应的web服务器对应的ip地址；
-
与web服务器建立TCP连接；
-
浏览器向web服务器发送http请求；
-
web服务器响应请求，并返回指定url的数据（或错误信息，或重定向的新的url地址）；
-
浏览器下载web服务器返回的数据及解析html源文件；
-
生成DOM树，解析css和js，渲染页面，直至显示完成；
Css
bfc 块格式化上下文（block formatting context）
根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
具有overflow 且值不是 visible 的块元素
未知宽高居中：
absolute translate-50%
flex justity-content align-items center
Absolute，0000， margin:auto
table-cell vertical-align: middle，text-align: center;
左右固定中间剩余：
两边absolute，中间左右margin
全部float，中间宽度calc
flex，两边flex-basis:100px,中间flex；1
grid/grid-row:1/grid-column:1/2
重排：布局，位置、尺寸、offsetHeight、隐藏、margin、浏览器resize
重绘：颜色，字体大小
避免：
改样式直接改class
none之后再调整
absolute后调整
添加dom一次性添加
权重
1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
清浮动
content: "";
clear:both;
visibility: hidden;
height: 0;
display: block;
rem
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=750){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
Css3
border-image
border-radius
text-shadow
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
Transition
选择器：
p:first-child 属于其父元素的第一个子元素的每个p元素
last-child
p:nth-child(n)属于其父元素的第n个子元素的每个p元素
nth-first-child(n)属于其父元素的前N个子元素的每个p元素
nth-last-child(n)
first-of-type属于其父元素的首个p元素的每个p元素
last-of-type
nth-of-type（n）
nth-last-of-type(n)
p:empty没有子元素的每个p元素
Webpack
https://juejin.im/post/5adea0106fb9a07a9d6ff6de
是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD，ESM，CommonJs)、全局分析。
1）Loaders是用来告诉webpack如何转化处理某一类型的文件，并且引入到打包出的文件中
2）Plugin是用来自定义webpack打包过程的方式，一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程(生命周期)。
html-webpack-plugin：生成一个引用打包好的js的html
extract-text-webpack-plugin：将打包到js里的css文件进行一个拆分（否则样式会放在行内）
HotModuleReplacementPlugin热更新-------原理【】
UglifyJsPlugin：对js文件进行压缩优化的
Purify-CSS：清除未使用css
CommonsChunkPlugin：可以用来提取公共模块的插件
Tree-shaking是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。在webpack中Tree-shaking是通过uglifySPlugin来Tree-shaking
babel-plugin-inport
3）Resolve用来配置别名和省略后缀名
4）entry、output、module:{rules:[]},devServer:{hot:true}、node
eslint-loader、vue-loader、babel-loader、url-loader
从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。输出所有chunk到文件系统。
Babel：将代码字符串解析成抽象语法树，变换：对抽象语法树进行变换操作，再建：根据变换后的抽象语法树再生成代码字符串
jQuery
after,before,insertBefore,insertAfter,append,appendto,prepend,prependTo,remove,removeAll,removeClass,addClass,toggleClass,hasClass,attr,clone,html,text,val,empty
children
parent
find
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
eq
first
last
filter
not
fadeIn()hide()toggle()slideUp()animate()
html5
nav/header/footer/section/article/aside/mark/progress/audio/video
less
变量、嵌套、运算、继承、mixins混合集、函数：lighten/darken/fadein/fadeout
控制台
$0
$_
console.table
console.dir 列出对象的所有对象属性
copy
keys()
values()
ctrl+shift+p screenshot/theme
shift+enter多行输入
介绍做过的项目
做过什么印象深刻或有成就的东西
遇到的问题
你的优点
你的缺点
看什么书? 怎么学习的前端知识? 保持自我学习?
你的职业规划
有什么问题问我的吗？
上传组件：限制文件类型，文件大小，个数，可预览，可编辑，不同文件类型显示不同缩略图
web端获取二维码，更改request为true，
手机端扫描二维码，二维码链接带id，手机端获取id,像指定iD地址上传文件，上传成功，获取图片地址再发送请求（带二维码id的url）
web端定时器监听二维码状态，获取文件展示，获取文件后根据type设置不同缩略图
》
判断数据时添加的，删除，更改排序
获取两个数组id，对比
详情获取排序，赋值给index,排序后更改index，若最终index不等于获取到的index，则更改排序
如何看待前端：
技术越来越广泛，前端是最贴近用户的程序员