面试常问：rem布局，flex布局等

目录

1、rem布局

2、flex布局

3、媒体查询-响应式布局

​4、event loop

 5、宏任务/微任务

 6、async/await

8、Promise.all 

9、dataset

10、事件代理

---

1、rem布局

html{font-size: 16px} div{font-size: 1rem}

这里的rem就是16px;

给html{ font-size: 26.66667vw;};//

26.66667vw = 100px / 375px *100vw，这是iPhone5下的值，如果是其他更大尺寸的手机，26.66667vw的实际像素数要大于100px.

div{font-size:0.16rem};//以100px作为rem，根据UI的px计算更方便

2、flex布局

3、媒体查询-响应式布局

4、event loop

 

console.log('Hello, 哈默！)进入callstack调用栈，执行结果，在控制台输出Hello，哈默！调用栈清空。

 

 setTimeout(() => {

        console.log('回调函数执行')

      }, 3000);

 

进入调用栈，setTimeout(callback, time)是个webapi，5s后才执行callback。此时，调用栈也清空了。

console.log('Hi, 哈默！)进入callstack调用栈，执行结果，在控制台输出Hi，哈默！调用栈清空。

5s过后，callback被推入callback queue，然后被event loop发现，进入调用栈执行。而后调用栈再次清空。

 5、宏任务/微任务

 

 

 

 6、async/await

await 后面跟的可以是promise对象，简单字符串等，或者是async 函数，但是都会被包装成promise对象。

7、promise避免回调地狱

需求：多个promise请求，且前面的方法返回值后面的正好需要

      this.getTodos()
          .then(res=>{
            //xxxx
            return this.getComments();//返回的是promise，故而可以继续使用 .then
          })
          .then(res=>{
            // xxxx
            return this.getAlbums()
          })
          .then(res=>{
            console.log('xxx')
          })

8、Promise.all 

Promise.all(p1, p2, p3)

    .then(res=>{

        // 全部请求结果返回了

})

9、dataset

dom元素的一个属性，在HTML中，使用data-xxx-yyy-zzz这种格式定义的，可以通过dataset获取：

//html
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

//js
const el = document.querySelector('#user');
//可以获取
console.log(el.dataset.id)
//可以设置
el.dataset.dateOfBirth = '1960-10-03';
//可以删除
delete el.dataset.dateOfBirth

10、事件代理

将许多重复的元素，比如li等的对于事件的处理函数，交由父元素来统一处理 。

 let ul = document.querySelector('ul')
 let curId = undefined
    ul.onclick = function (e) {
      console.log(e)
      let event = e || window.event
      let target = event.target || event.srcElement
      let className = target.className
      
      switch (className) {
        case value1:
          xxx
          break;
        case value2:
          xxx
          break;
        default:
          break;
      }
        //配合刚才的dataset，比如data-id,下面就可以使用id
        curId = target.dataset.id
    }