1 CSS
line-height 的继承机制
父元素行高20px：子元素行高直接继承20px
父元素2或者1.5：子元素行高就是font-size的2倍或者1.5倍
父元素200%：子元素行高是200%乘以父元素的font-size而不是乘子元素的font-size
flex画筛子三
box {
display: flex;
justify-content: sapce-between;
}
item:nth-child(2) {
align-self : center ;
}
item:nth-child(3){
aligin-self:flex-end;
}
响应式布局
rem vw vh vmax vmin 通过媒体查询的方式动态的设置跟字体的大小
rem的计算机制
(N)rem = html的font-size *( N)
例1：
默认的html的font-size是16px，div的font-size设置为1rem就是16*1=16px
为了便于理解，我们用F表示html的font-size，用R表示rem，用P表示px。
从上面的结果就可以得到公式 P = F * R
F = 16px
R = 1
P = 16 *1
结果P就是16px
例2：
如果html的font-size设置为100px
目标像数要求为16px
那div的font-size设置0.16rem
rem就是目标像数除以根元素
得到公式 R = P / F (rem = 目标px / html的font-size)
第三个公式
F = P / R
2 JS
变量类型，事件机制
值类型，引用类型，手写深拷贝，事件冒泡，事件代理
原型、原型链 、类 、继承
画出原型链的类图，解释supper，es5继承方式
// 构造函数
function Parent1(name) {
this.name = name;
this.age = 12;
}
function Child1() {
Parent1.call(this,'son');
this.type = 'child1';
}
console.log( new Child1().name); //son
闭包
作用域，自由变量，手写bind
Function.prototype.myBind = function (){
const args = Array.prototype.slice.call(arguments)
const t = args.shift() // 第一项为传入的this
const that = this
return function (){
retrun that.apply(t, args)
}
}
实际的应用场景
隐藏数据，比如jquery的自定义事件也是这样隐藏对象数据，只暴露方法
事件流，事件循环
事件流分为3个阶段：
（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；
（2）目标阶段：真正的目标节点正在处理事件的阶段；
（3）冒泡阶段：事件从目标节点自下而上向Document节点传播的阶段。
webpack构建流程
初始化 – 配置
编译 – loader，plugin
输出 – chunk
数组求和
// Accumulator (acc) (累计器)
// Current Value (cur) (当前值)
// Current Index (idx) (当前索引)
// Source Array (src) (源数组)
var sum = [0, 1, 2, 3].reduce(function(accumulator, currentValue) {
return accumulator + currentValue
}, 100) // 从100开始累加
console.log(sum) // 106
使用promise 封装一个图片加载的方法
function loadImg(src) {
const p = new Promise(
(resolve, reject) => {
const img = document.createElement('img')
img.onload = () => {
resolve(img)
}
img.onerror = () => {
const err = new Error('img load err' + src)
reject(err)
}
img.src = src
}
)
return p
}
const url1 = 'xxx1'
const url2 = 'xxx2'
loadImg(usr1).then(img1 => {
console.log(img1.width)
return img1
}).then(img1 => {
console.log(img1.height)
return loadImg(url2)
}).then(img2 => {
console.log(img2.width)
})
for of 和for in forEach的区别
for of 可以处理异步的遍历
const nums = [1, 2, 3]
// 先遍历完数组，先执行3次异步调用
nums.forEach(async (i) => {
const res = await getList(i)
console.log(res)
})
// 遍历移数组一次，执行一次异步调用，返回结果后再遍历数组下一项
!(async function () {
for (let i of nums) {
const res = await getList(i)
console.log(res)
}
})()
