目录
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
}