defer和async都是异步执行，不会阻碍dom的渲染
defer: js的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前执行，原则上会按照顺序执行
async: js加载完成后，立即执行，这样会导致js不按指定顺序执行
// 不支持循环引用
function deepCopy(obj) {
// 首先确定是不是对象，不是对象直接返回
if (typeof obj !== 'object') {
return obj;
} else if (obj === null) {
return obj
} else {
let cloneObj = Array.isArray(obj) ? [] : {}
for (let key in obj) {
cloneObj[key] = deepCopy(obj[key])
}
return cloneObj
}
}
-
防抖与节流
防抖：每次点击执行都重新计算时间，直到在规定的时间 n 秒内没有操作，才执行回调。 节流：间隔一定时间执行一次回调，不会重新计算时间
function debounce(fn, delay) {
let timer;
return function (...args) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn(...args);
}, delay);
};
}
function throttle(fun, delay) {
let last, deferTimer
return function (args) {
let that = this
let _args = args
let now = +new Date()
if (last && now < last + delay) {
clearTimeout(deferTimer)
deferTimer = setTimeout(function () {
last = now
fun.apply(that, _args)
}, delay)
} else {
last = now
fun.apply(that, _args)
}
}
}
-
1. Default Parameters（默认参数） in ES6 2. Template Literals （模板文本）in ES6 3. Multi-line Strings （多行字符串）in ES6 4. Destructuring Assignment （解构赋值）in ES6 5. Enhanced Object Literals （增强的对象文本）in ES6 6. Arrow Functions （箭头函数）in ES6 7. Promises in ES6 8. Block-Scoped Constructs Let and Const（块作用域构造 Let and Const） 9. Classes（类） in ES6 10. Modules（模块） in ES6 -
ES6的支持性通过babel对不支持的浏览器进行转化
-
事件捕获与事件冒泡
Dom事件流：
graph TD
事件捕获阶段 --> 处于目标阶段 --> 事件冒泡阶段
事件捕获：
graph TD
Document --> html -->body --> div
事件冒泡：
graph TD
div --> body --> html --> Document
点击baby会依次打印什么？
mother->daughter->baby->gradma
因为捕获会先于冒泡执行，然后捕获从上往下走，所以先mother->daughter,后冒泡，冒泡从下往上走所以是baby->gradma
<body>
<div class="gradma">
gradma 奶奶
<div class="mother">mother 妈妈
<div class="daughter">daughter 女儿
<div class="baby"> baby</div>
</div>
</div>
</div>
</body>
<script>
var gradma = document.getElementsByClassName('gradma')[0];
var mother = document.getElementsByClassName('mother')[0];
var daughter = document.getElementsByClassName('daughter')[0];
var baby = document.getElementsByClassName('baby')[0];
function logName() {
console.log(this.className)
}
baby.addEventListener('click', logName, false) // 冒泡
daughter.addEventListener('click', logName, true) // 捕获
mother.addEventListener('click', logName, true) // 捕获
gradma.onclick = logName // 冒泡
</script>
