2019.05
6、避免 “ cannot read property of undefined ” 错误技巧
例如: favorites.reading.magazines[0] (数据结构比较深)
或单元
const favoriteBook = ((favorites.reading||{}).books||[])[0];
try/catch
const tryFn = (fn, fallback = null) => {
try {
return fn();
} catch (error) {
return fallback;
}
}
const favoriteBook = tryFn(() => favorites.reading.book[0]); // null
摘自:[译] 避免那些可恶的 "cannot read property of undefined" 错误
5、事件得捕获和冒泡
点击事件来自触摸屏或者鼠标,鼠标点击并没有位置信息,但是一般操作系统根据位移的累积计算出来,跟触摸屏一样,提供一个坐标给浏览器。那么把这个坐标转换为具体的元素上事件的过程,就是捕获过程。而冒泡过程,则符合人类理解逻辑的:当你按电视机开关时,你也按到了电视机。
所以捕获是计算机处理事件的逻辑,而冒泡是人类处理事件的逻辑。
addEventListener(event, function, useCapture )
- true - 事件句柄在捕获阶段执行
- false- false- 默认。事件句柄在冒泡阶段执行
大佬使用冒泡和捕获机制建议,默认使用冒泡模式,当遇到父元素控制子元素的行为,可以使用捕获机制。
vue 中 事件处理 @click.capture 添加事件监听器时使用事件捕获模式。
4、flex
要理解flex排版的原理,主轴和交叉轴是非常重要的抽象,flex排版三个步骤:分行、计算主轴、计算交叉轴。
3、缓存资源是preloader相关指令
<linkrel="prefetch">,
它可以一边解析js/css文件,一边网络请求下一个资源
2、axios delete body 传参格式
axios({
method: 'delete',
url: `${url}`,
data: params,
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
});
1、css 关键字 inherit 指定一个属性应从父元素集成它的值。
css 的父子级,是相对而言,div A 包含了 div B ,则 A 是 B 的父级。
对于继承属性,inherit关键字只是增强属性的默认行为,只有在重载(overload)其他规则时候被使用。对于非继承属性,inherit的行为通常没有多大意义,一般使用initial或unset作为代替。
设置 <span> 元素的文本颜色为蓝色,那些 class=“extra” 的元素继承父级的颜色:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
span
{
color: blue;
border:1px solid black;
}
.extra span
{
color: inherit;
}
</style>
</head>
<body>
<div>
这里是一个蓝色的 <span>span 元素</span>,正如 span 元素所设置的。
</div>
<div class="extra" style="color:green">
这里是一个绿色的 <span>span 元素</span>,因为它继承了父元素。
</div>
<div style="color:red">
这里是一个蓝色的 <span>span 元素</span>,正如 span 元素所设置的。
</div>
</body>
</html>