奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > 面试题 >

2018阿里巴巴前端面试题,附详细答案

时间:2018-03-03 22:33来源:未知 作者:梦魇小栈
使用css实现一个持续的动画效果 animation:mymove 5s infinite;@keyframes mymove {from {top:0px;}to {top:200px;}} 主要考: animation 用法 值 描述 animation-name 规定需要绑定到选择器的 keyframe 名称。 animatio

使用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>

这个题没答出来 (责任编辑:admin)

顶一下
(2)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
小邱 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-26 17:11 最后登录:2018-04-22 10:04

关注奔三路小程序,方便你我他