前端面试题系列1

1. 如何理解移动端上的点击穿透?

点击穿透现象有3种:

  1. 点击蒙层(mask)上的关闭按钮,蒙层消失后发现触发了按钮下面元素的click事件;
  2. (跨页面)如果按钮下面恰好是一个有href属性的a标签,那么页面就会发生跳转;
  3. (跨页面)这次没有mask了,直接点击页内按钮跳转至新页,然后发现新页面中对应位置元素的click事件被触发了

解决方案:

  1. 只用touch
    最简单的解决方案,完美解决点击穿透问题
    把页面内所有click全部换成touch事件( touchstart 、’touchend’、’tap’);

  2. 只用click
    下下策,因为会带来300ms延迟,页面内任何一个自定义交互都将增加300毫秒延迟;

  3. tap后延迟350ms再隐藏mask
    改动最小,缺点是隐藏mask变慢了,350ms还是能感觉到慢的;

  4. pointer-events
    比较麻烦且有缺陷, 不建议使用mask隐藏后,给按钮下面元素添上 pointer-events: none; 样式,让click穿过去,350ms后去掉这个样式,恢复响应缺陷是mask消失后的的350ms内,用户可以看到按钮下面的元素点着没反应,如果用户手速很快的话一定会发现。

2. 尝试实现 双向绑定

HTML 部分:

1
2
3
4
<div id="app">
<input type="text" id="txt">
<p id="show-txt"></p>
</div>

JS 部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = {}

Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show-txt').innerHTML = newValue
}
})

document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})

3.简述 AJAX 执行流程

1
2
3
4
5
6
7
8
9
10
11
12
var xhr =null; // 创建对象 

if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.open("method", "url", "async"); // 初始化请求
xhr.setRequestHeader("", ""); // 设置http头信息
xhr.onreadystatechange = function() {}; // 指定回调函数
xhr.send();//发送请求

4.写出下列代码运行结果

1
alert(1 && 2)

5.写出下列代码运行结果

1
["1", "2", "3"].map(parseInt)
文章作者: Coio
文章链接: http://yoursite.com/2018/08/04/前端面试题系列/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Coio
打赏
  • 微信
  • 支付寶