2018阿里巴巴前端面试题，附详细答案
使用css实现一个持续的动画效果
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 |
规定是否应该轮流反向播放动画。 |
使用js实现一个持续的动画效果
最开始的思路是用定时器实现，最后没有想的太完整，面试官给出的答案是用requestAnimationFrame。
- 定时器思路
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。
右边宽度固定，左边自适应
第一种：
<style>
body{
display: flex;
}
.left{
background-color: rebeccapurple;
height: 200px;
flex: 1;
}
.right{
background-color: red;
height: 200px;
width: 100px;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
第二种
<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>
暂时想到了两种。
水平垂直居中
第一种
#container{
position:relative;
}
#center{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
第二种
#container{
position:relative;
}
#center{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}
第三种
#container{
position:relative;
}
#center{
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
第四种 flex
#container{
display:flex;
justify-content:center;
align-items: center;
}
四种定位的区别
static是默认值relative相对定位 相对于自身原有位置进行偏移，仍处于标准文档流中absolute绝对定位 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照基准, 完全脱离了标准文档流。fixed固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。
Flex布局用的多吗？
因为项目考虑兼容 IE9 所以直接说用的不多
移动端适配怎么做的？
使用媒体查询做的响应式布局，根据不同屏幕宽度加载不同css.
let与var的区别？
let 为 ES6 新添加申明变量的命令，它类似于 var，但是有以下不同：
var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升let不允许重复声明.
为什么 var 可以重复声明？（这个就不知道了）
当我们执行代码时，我们可以简单的理解为新变量分配一块儿内存，命名为a，并赋值为2，但在运行的时候编译器与引擎还会进行两项额外的操作：判断变量是否已经声明：
- 首先编译器对代码进行分析拆解，从左至右遇见
var a，则编译器会询问作用域是否已经存在叫a的变量了，如果不存在，则招呼作用域声明一个新的变量a，若已经存在，则忽略var继续向下编译，这时a = 2被编译成可执行的代码供引擎使用。 - 引擎遇见
a=2时同样会询问在当前的作用域下是否有变量a，若存在，则将a赋值为2（由于第一步编译器忽略了重复声明的var，且作用域中已经有a，所以重复声明会发生值得覆盖而并不会报错）。若不存在，则顺着作用域链向上查找，若最终找到了变量a则将其赋值2，若没有找到，则招呼作用域声明一个变量a并赋值为2。
参考链接
封装一个函数，参数是定时器的时间，.then执行回调函数。
function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
一个关于 this 指向的问题
差不多应该是这样，记不太清了
obj = {
name: 'a',
getName : function () {
console.log(this.name);
}
}
var fn = obj.getName
obj.getName()
var fn2 = obj.getName()
fn()
fn2()
CommonJS 中的 require/exports 和 ES6 中的 import/export 区别？
CommonJS模块的重要特性是加载时执行，即脚本代码在require的时候，就会全部执行。一旦出现某个模块被”循环加载”，就只输出已经执行的部分，还未执行的部分不会输出。ES6模块是动态引用，如果使用import从一个模块加载变量，那些变量不会被缓存，而是成为一个指向被加载模块的引用，需要开发者自己保证，真正取值的时候能够取到值。import/export最终都是编译为require/exports来执行的。CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。
一行代码实现数组去重？
[...new Set([1,2,3,1,'a',1,'a'])]
使用addEventListener点击li弹出内容，并且动态添加li之后有效
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
