前端小知识10点(2020.6.28)
1、浏览器页面的生命周期
从开始加载页面到离开页面的先后顺序为：
① DOMContentLoaded
等构件完 dom 树，js 加载完后才会触发
② load
等所有资源（图片、音频）加载完后，才会触发
③ beforeunload
在即将离开页面前触发
④ unload
在离开页面时触发
2、箭头函数和普通函数的区别
① 写法不同
普通函数：
function a(){
//xxx
}箭头函数：
const a=()=>{
//xxx
}② 箭头函数不会创建自身的执行上下文（词法环境、变量环境）
③ 因为箭头函数没有自身的执行上下文，所以就不会创建自身的 this，而是从外层作用域继承 this
注意：
箭头函数是在声明时，就从外层作用域继承了this，而不是在运行时
④ 因为是在声明时，就指定了this，所以this的指向永远不变
⑤ 根据 ③ 可知，箭头函数不能作为构造函数使用，所以也就不能new
3、new 的原理
比如 new 的对象为：
function father(){ }① 根据 father 的构造函数创建对象 that
const that=Object.create(father.prototype)father.prototype对应father的constructor
② that 执行 father，为自身的constructor赋值
father.call(that)③ 返回 that
完整的 new 为：
function father(){}
function new(){
//that 指代 this
const that=Object.create(father.prototype)
father.call(that)
return that
}4、getElementById和querySelector的区别
getElementById获取目标节点后，当节点更新时，getElementById会跟着更新，
但是querySelector类似于快照，当获取目标节点后，当节点更新时，它不会跟着更新
5、HTTP 的 GET 和 POST 请求有什么区别？
① 发送参数的位置不同
get的参数放在url中
post封装在body中
② 参数长度限制
get请求参数因为放在url中，所以长度有限制
post请求参数长度没有限制
③ 编码方式 GET请求只能进行url编码，而POST支持多种编码方式
④ 安全
post比get安全
6、bind
function func(a,b,c){
console.log(a,b,c)
}
const newFunc=func.bind(null,'a','b')
newFunc('c') //'a','b','c'
func('c') //'a',undefined,undefined当使用.bind()传入参数后，在后续使用时，需要注意新传的参数。（我觉得.bind()是破坏可读性的函数）
7、yarn run start 和 yarn start 是没有区别的
参考：https://segmentfault.com/q/1010000022092499
8、更新 npm 包版本时，常用的命令
//2.0.0 —> 2.0.1
npm version patch && git push --follow-tags && npm publish
//2.0.0 —> 2.1.0
npm version minor && git push --follow-tags && npm publish
//2.0.0 —> 3.0.0
npm version major && git push --follow-tags && npm publish9、less中我想让一个hover样式只对 有item类 且 没有light类 的元素执行
.light{
}
.item{
&:not(.light):hover{
color: #FE6225
}
}10、nth-of-type对所有子元素进行筛选，不分type，nth-child对同类型的子元素进行筛选
css：
/*nth-of-type 表示 div 所属的父元素中，先筛选出子元素是 div 的集合， 然后根据 div 是在偶数位置的情况*/
#app div:nth-of-type(even) {
color:blue;
}
/*nth-child 表示 div 所属的父元素中，所有子元素且 div 是在偶数位置的情况*/
#app div:nth-child(even) {
color:red;
}html：
<div id="app">
<span>a</span>
<div>b</div>
<div>c</div>
<div>d</div>
</div>