前端小知识10点(2020.6.28)

230 阅读3分钟
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对应fatherconstructor

② 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支持多种编码方式

④ 安全
postget安全

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是没有区别的

参考:segmentfault.com/q/101000002…

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 publish
9、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>

(完)