js高级部分 面试
2019-08-28 本文已影响0人
好名字都让你们用了
- BOM部分
- DOM事件
- Promise和async/awiat
- 防抖与节流
BOM
浏览器的内核
IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:Blink内核
Chrome:webkit
DOM事件
DOM事件级别.png
DOM1也是存在，只是没有涉及到事件，DOM3比DOM2多了键盘和鼠标一些事件
DOM的事件模型： 捕获----> 冒泡
DOM的事件流（三个阶段）：捕获阶段---->目标阶段 -----> 冒泡阶段
DOM事件捕获的具体流程：
window---document---html---body---.... ---目标元素
DOM事件的Event对象的常见应用：
- event.preventDefault() : 阻止默认事件
- event.stopPropagation(): 阻止冒泡
- event.stopImmediatePropagation(): 除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.
- event.target: 返回触发事件的元素
- event.currentTarget: 返回绑定事件的元素
DOM的自定义事件：
var eve = new Event('eventName')
dom.addEventListener('eventName',function(){
}) //注册事件
dom.dispatchEvent(eve); // 触发事件，
---------------------------------------------------------
这个事件不能添加参数，想要添加参数，得自定义 CustomEvent事件
// 添加一个适当的事件监听器
obj.addEventListener("cat", function(e) { process(e.detail) })
// 创建并分发事件
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)
Promise 和async/awiat
-
Promise的作用，promise如何进行多个数据的请求
-
Promise.all([p1, p2, p3]).then() -
Promise.race([p1, p2, p3])方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝var p3 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, "three"); }); var p4 = new Promise(function(resolve, reject) { setTimeout(reject, 500, "four"); }); Promise.race([p3, p4]).then(function(value) { console.log(value); // "three" // p3 更快，所以它完成了 }, function(reason) { // 未被调用 });4.async/awiat的错误处理
async function f() {
// throw new Error('try again');
await Promise.reject('出错了');
await Promise.resolve('hello world'); // 不会执行
}
async function b() {
try {
await f();
} catch(err) {
console.log(err);
b();
}
}
b();
防抖与节流
防抖(debounce):
就是在一定的时间内事件只发生一次，比如你点击button按钮，1秒内任你单身30年手速点击无数次，他也还是只触发一次。
<body>
<button id="debounce">防抖</button>
<script>
window.onload = function () {
let obtn = document.getElementById('debounce'); //获取按钮
obtn.addEventListener('click',debounce,false); //监听绑定事件
}
//执行函数
let timer
function debounce() {
clearTimeout(timer);
timer = setTimeout(function(){
console.log('防抖，防抖，防抖');
},300)
}
</script>
</body>
使用场景：当你在页面中使用onkeyUp监听用户在input框中的输入，如果用户按住一个6不放，那监听事件岂不是一直被触发，这样就浪费了一部分性能了，那么我们在一定事件内监听，也就是说我过了一秒再来看看你输入了多少个6
节流（throttle）：
节流就是在一定时间间隔内触发一次事件
面试题目：
-
JavaScript代码中的‘use strict’是什么意思
-
说说你对amd和commonjs的理解
Commonjs是前端模块化的一种规范,同步加载模块,主要使用于服务器端模块化开发,目前使用该规范的有nodejs AMD:是由commonjs衍生出来的用在浏览器端的异步模块加载规范,实现该规范的技术有require.js CMD:同步模块加载规范，实现该规范的技术有sea.js
