前端小知识10点(2020.6.28)

2020-07-02 15:17:18 浏览数 (1)
1、浏览器页面的生命周期

从开始加载页面到离开页面的先后顺序为：

① DOMContentLoaded 等构件完 dom 树，js 加载完后才会触发

② load 等所有资源（图片、音频）加载完后，才会触发

③ beforeunload 在即将离开页面前触发

④ unload 在离开页面时触发

2、箭头函数和普通函数的区别

① 写法不同

普通函数：

代码语言：javascript复制
function a(){
  //xxx
}

箭头函数：

代码语言：javascript复制
const a=()=>{
  //xxx
}

② 箭头函数不会创建自身的执行上下文（词法环境、变量环境）

③ 因为箭头函数没有自身的执行上下文，所以就不会创建自身的 this，而是从外层作用域继承 this

注意： 箭头函数是在声明时，就从外层作用域继承了this，而不是在运行时

④ 因为是在声明时，就指定了this，所以this的指向永远不变

⑤ 根据 ③ 可知，箭头函数不能作为构造函数使用，所以也就不能new

3、new 的原理

比如 new 的对象为：

代码语言：javascript复制
function father(){ }

① 根据 father 的构造函数创建对象 that

代码语言：javascript复制
const that=Object.create(father.prototype)

father.prototype对应father的constructor

② that 执行 father，为自身的constructor赋值

代码语言：javascript复制
father.call(that)

③ 返回 that

完整的 new 为：

代码语言：javascript复制
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
代码语言：javascript复制
  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 包版本时，常用的命令
代码语言：javascript复制
//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类 的元素执行
代码语言：javascript复制
.light{

}

.item{
        &:not(.light):hover{
            color: #FE6225
        }
    }
10、nth-of-type对所有子元素进行筛选，不分type，nth-child对同类型的子元素进行筛选

css：

代码语言：javascript复制
    /*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：

代码语言：javascript复制
<div id="app">
  <span>a</span>
  <div>b</div>
  <div>c</div>
  <div>d</div>
</div>
php yarn http node.js

0 人点赞