https://www.cnblogs.com/wdlhao/p/8290436.html
Es6
const 与 let 变量
模板字面量
解构
对象字面量简写法
for...of循环
展开运算符
剩余参数(可变参数)
ES6箭头函数
Promise
https://www.jianshu.com/p/c633a22f9e8c
https://www.jianshu.com/p/1eea8ce8c7a5
axios
async【】
https://juejin.im/post/596e142d5188254b532ce2da
函数返回的 Promise 对象，必须等到内部所有的 await 命令的 Promise 对象执行完，才会发生状态改变
正常情况下，await 命令后面跟着的是 Promise ，如果不是的话，也会被转换成一个 立即 resolve 的 Promise
当 async 函数中只要一个 await 出现 reject 状态，则后面的 await 都不会被执行。
解决办法：可以添加 try/catch
Ajax/fetch/axios
https://www.jianshu.com/p/8bc48f8fde75
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热更新
原理【】
对js文件进行压缩优化的UglifyJsPlugin
Tree-shaking是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。在webpack中Tree-shaking是通过uglifySPlugin来Tree-shaking
Purify-CSS：清除未使用css
CommonsChunkPlugin：可以用来提取公共模块的插件
3）Resolve用来配置别名和省略后缀名
4）entry、output、module:{rules:[]},devServer:{hot:true}、node
eslint-loader、vue-loader、babel-loader、url-loader
Vue
https://www.jianshu.com/p/42a4be57287f?utm_campaign
vue的优点:
轻量级
低耦合
可重用性
独立开发
可测试
开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载
BeforeCreate:vue实例的挂载元素el和data都是undefined
Ceated:data有了， el没有；实例创建完成，未挂载
BeforeMounted：虚拟的dom节点
Mounted:实例挂载完成，有$el
MVVM: 开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷
webpack中提供了require.ensure()来实现按需加载组件
const home = r => require.ensure( [], () => r (require(‘../../common/home.vue‘)))
Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作
不用Vuex：
可维护性下降
可读性下降
增加耦合
<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。
全局钩子
router.beforeEach((to, from, next) => {
console.log(‘beforeEach‘);
});
router.afterEach((to, from) => {
console.log(‘beforeEach‘);
});
constrouter=newVueRouter({
routes:[{
path:‘/index‘,
component:index,
beforeEnter(to,from,next){},
beforeLeave(to,from,next){}
}]
});
exportdefault{
beforeRouteLeave(to,from,next){},
beforeRouteEnter(to,from,next){},
beforeRouteUpdate(to,from,next){}
};
Js
【】输入URL
https://blog.csdn.net/jiao_0509/article/details/82491299
1、浏览器查找域名的IP地址
查找浏览器缓存：因为浏览器一般会缓存DNS记录一段时间
查找系统缓存：浏览器缓存中找不到IP之后，浏览器会进行系统调用（windows中是gethostbyname），查找本机的hosts文件，如果找到，直接返回IP
查找路由器缓存
递归查询
迭代查询
2、主机浏览器通过DNS解析得到了目标服务器的IP地址后，与服务器建立TCP连接。
TCP3次握手连接
3、浏览器通过http协议发送请求
4、某些服务会做永久重定向响应
5、重定向是为了负载均衡或者导入流量，提高SEO排名。利用一个前端服务器接受请求，然后负载到不同的主机上，可以大大提高站点的业务并发处理能力
6、当浏览器知道了重定向后最终的访问地址之后，重新发送一个http请求，发送内容同上。
7、服务器接收到获取请求，然后处理并返回一个响应。
8、释放TCP连接
9、浏览器显示页面
1、浏览器的地址栏输入URL并按下回车。
2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
3、DNS解析URL对应的IP。
4、根据IP建立TCP连接（三次握手）。
5、HTTP发起请求。
6、服务器处理请求，浏览器接收HTTP响应。
7、渲染页面，构建DOM树。
8、关闭TCP连接（四次挥手）。
【】原型链
只要是对象就有原型,并且原型也是对象,因此只要定义了一个对象,那么就可以找到他的原型,如此反复,就可以构成一个对象的序列,这个结构就被成为原型链JS
任何对象都有一个原型对象，这个原型对象由对象的内置属性_proto_指向它的构造函数的prototype指向的对象，即任何对象都是由一个构造函数创建的，但是不是每一个对象都有prototype，只有方法才有prototype
原型链的核心就是依赖对象的_proto_的指向，当自身不存在的属性时，就一层层的扒出创建对象的构造函数，直至到Object时，就没有_proto_指向了
https://blog.csdn.net/shuixiou1/article/details/81048816
【】继承
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的引用
}
【】this几种情况
自执行：window
Dom事件
Object
【】
同步或非同步，表明着是否需要将整个流程按顺序地完成
阻塞或非阻塞，意味着你调用的函数会不会立刻告诉你结果
【】闭包
1、定义和用法：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。
2、表现形式：使函数外部能够调用函数内部定义的变量。
【】事件委托：通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度。
【】防止冒泡和捕获
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false
javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡
【】正则
中括号[]只能匹配其中一个，如果要匹配特定几组字符串的话，那就必须使用小括号()加或|
\w 匹配包括下划线的任何单词字符。等价于“[A-Za-z0-9_]”。
\d 匹配一个数字字符。等价于[0-9]。
Bind和on【】
动态添加dom是否可绑定
【】cookie 4K 数据发送服务器端，有效期内有效，同源同窗口共享
localstorage 存储本地，5M，操作简单，一直有效，同源同窗口共享
sessionStorage关闭失效，不在不同的浏览器窗口共享
对象for in，遍历数组会找到所有方法和属性
数组for of
扁平化：
function flatten(arr){
while(arr.some(item=>Array.isArray(item)){
arr = [].concat(...arr);
}
return arr;
}
去重：
function dedupe(array) {
return Array.from(new Set(array));
}
虚拟dom【】
当我们修改真正的DOM树的时候，因为DOM中元素节点有许多的属性和方法，当DOM中节点过多时往往需要消耗很大的性能。 解决方法是：使用js对象来表示DOM树的信息和结构，这个js对象可以构建一个真正的DOM树。当状态变更的时候用修改后的新渲染的的js对象和旧的虚拟DOM js对象作对比，记录着两棵树的差异。把差别反映到真实的DOM 结构上最后操作真正的DOM的时候只操作有差异的部分就可以了
Css
居中【】
Vertical-align:middle
Flex: center
Absolute;-50%; 或 margin:auto
translateX -50%
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
jQuery
http://www.w3school.com.cn/jquery/jquery_selectors.asp
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()
介绍做过的项目
做过什么印象深刻或有成就的东西
有什么问我的
如果学习前端
遇到的坑：
created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中
v-if
set
element select组件，value需用：绑定
原文：https://www.cnblogs.com/luyingying/p/11213264.html