编程学习网 > WEB开发 > 面试分享：2018阿里巴巴前端面试总结(题目+答案)
2018
03-12

面试分享：2018阿里巴巴前端面试总结(题目+答案)

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

1、使用css实现一个持续的动画效果

?
1
2
3
4
5
6
7
8
9
animation:mymove 5s infinite;
 
@keyframes mymove {
 
    from {top:0px;}
     
    to {top:200px;}
 
}

主要考： animation 用法

值    描述
animation-name    规定需要绑定到选择器的 keyframe 名称。
animation-duration    规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function    规定动画的速度曲线。
animation-delay    规定在动画开始之前的延迟。
animation-iteration-count    规定动画应该播放的次数。
animation-direction    规定是否应该轮流反向播放动画。

2、使用js实现一个持续的动画效果

最开始的思路是用定时器实现，最后没有想的太完整，面试官给出的答案是用 requestAnimationFrame。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
    var e = document.getElementById('e')
     
    var falg = true;
     
    var left = 0;
     
    setInterval(() => {
     
        left == 0 ? falg = true : left == 100 ? falg = false : ''
     
        falg ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`
     
    }, 1000 / 60)
     
requestAnimationFrame 由于之前没有用过这个 API 所以是现学的。
//兼容性处理
 
window.requestAnimFrame = (function(){
 
  return  window.requestAnimationFrame       ||
 
          window.webkitRequestAnimationFrame ||
 
          window.mozRequestAnimationFrame    ||
 
          function(callback){
 
            window.setTimeout(callback, 1000 / 60);
 
          };
 
})();
 
 
var e = document.getElementById("e");
 
var flag = true;
 
var left = 0;
 
 
function render() {
 
    left == 0 ? flag = true : left == 100 ? flag = false : '';
 
    flag ? e.style.left = ` ${left++}px` :
 
        e.style.left = ` ${left--}px`;
 
}
 
 
(function animloop() {
 
    render();
 
    requestAnimFrame(animloop);
 
})();

不足之处请指正（毕竟是现学的）顺便查了一下优势：

浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果

解决毫秒的不精确性

避免过度渲染（渲染频率太高、 tab 不可见暂停等等） 注： requestAnimFrame 和 定时器一样也头一个类似的清除方法cancelAnimationFrame。

3、右边宽度固定，左边自适应

第一种：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style>
 
    div {
 
        height: 200px;
 
    }
 
    .left {
 
        float: right;
 
        width: 200px;
 
        background-color: rebeccapurple;
 
    }
 
    .right {
 
        margin-right: 200px;
 
        background-color: red;
 
    }
 
</style>
 
<body>
 
    <div class="left"></div>
 
    <div class="right"></div>
 
</body>

4、水平垂直居中 

第一种

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#container{
 
    position:relative;
 
}
 
#center{
 
    width:100px;
 
    height:100px;
 
    position:absolute;
 
    top:50%;
 
    left:50%;
 
    transform: translate(-50%,-50%);
 
}

第二种

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#container{
 
    position:relative;
 
}
 
#center{
 
    width:100px;
 
    height:100px;
 
    position:absolute;
 
    top:50%;
 
    left:50%;
 
    margin:-50px 0 0 -50px;
 
}

第三种

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#container{
 
    position:relative;
 
}
 
#center{
 
    position:absolute;
 
    margin:auto;
 
    top:0;
 
    bottom:0;
 
    left:0;
 
    right:0;
}

第四种 flex

?
1
2
3
4
5
6
7
8
9
#container{
 
    display:flex;
 
    justify-content:center;
 
    align-items: center;
 
}

5、四种定位的区别

static 是默认值

relative 相对定位 相对于自身原有位置进行偏移，仍处于标准文档流中

absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指 position不是 static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以 body元素为偏移参照基准, 完全脱离了标准文档流。

fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

6、Flex布局用的多吗？

因为项目考虑兼容 IE9 所以直接说用的不多

7、移动端适配怎么做的？

使用媒体查询做的响应式布局，根据不同屏幕宽度加载不同 css.

8、let与var的区别？

let 为 ES6 新添加申明变量的命令，它类似于 var，但是有以下不同： 

var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象

let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升

let 不允许重复声明.

9、为什么 var 可以重复声明？（这个就不知道了）

当我们执行代码时，我们可以简单的理解为新变量分配一块儿内存，命名为 a，并赋值为 2，但在运行的时候编译器与引擎还会进行两项额外的操作：判断变量是否已经声明：

首先编译器对代码进行分析拆解，从左至右遇见 var a，则编译器会询问作用域是否已经存在叫 a 的变量了，如果不存在，则招呼作用域声明一个新的变量 a，若已经存在，则忽略 var 继续向下编译，这时 a = 2被编译成可执行的代码供引擎使用。

引擎遇见 a=2时同样会询问在当前的作用域下是否有变量 a，若存在，则将 a赋值为 2（由于第一步编译器忽略了重复声明的var，且作用域中已经有 a，所以重复声明会发生值得覆盖而并不会报错）。若不存在，则顺着作用域链向上查找，若最终找到了变量 a则将其赋值 2，若没有找到，则招呼作用域声明一个变量 a并赋值为 2。 参考链接

10、封装一个函数，参数是定时器的时间，.then执行回调函数。

?
1
2
3
4
5
function sleep (time) {
 
  return new Promise((resolve) => setTimeout(resolve, time));
 
}

11、一个关于 this 指向的问题

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
obj = {
 
    name: 'a',
 
    getName : function () {
 
        console.log(this.name);
 
    }
 
}
 
 
var fn = obj.getName
 
obj.getName()
 
var fn2 = obj.getName()
 
fn()
 
fn2()

12 CommonJS 中的 require/exports 和 ES6 中的 import/export 区别？

CommonJS 模块的重要特性是加载时执行，即脚本代码在 require 的时候，就会全部执行。一旦出现某个模块被”循环加载”，就只输出已经执行的部分，还未执行的部分不会输出。

ES6 模块是动态引用，如果使用 import 从一个模块加载变量，那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。

import/export 最终都是编译为 require/exports 来执行的。

CommonJS 规范规定，每个模块内部， module 变量代表当前模块。这个变量是一个对象，它的 exports 属性（即module.exports ）是对外的接口。加载某个模块，其实是加载该模块的 module.exports 属性。

export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

13、 一行代码实现数组去重？

?
1
[...new Set([1,2,3,1,'a',1,'a'])]

14、使用addEventListener点击li弹出内容，并且动态添加li之后有效（这个题没答出来

扫码二维码 获取免费视频学习资料

Python编程学习

查 看2022高级编程视频教程免费获取