2018 Alibaba front-end interview questions, with detailed answers

Use css to achieve a continuous animation effect

animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}

Main test: animation usage

value	describe
`animation-name`	Specifies the keyframe name that needs to be bound to the selector.
`animation-duration`	Specifies the time, in seconds or milliseconds, to complete the animation.
`animation-timing-function`	Specifies the speed curve for the animation.
`animation-delay`	Specifies the delay before the animation starts.
`animation-iteration-count`	Specifies the number of times the animation should play.
`animation-direction`	Specifies whether the animation should take turns playing in reverse.

Use js to achieve a continuous animation effect

The initial idea was to use a timer to implement it, but in the end, I didn't think it was too complete. The answer given by the interviewer was to use it requestAnimationFrame.

Timer Ideas

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
Since I haven't used this before, API I'm just learning it now.

//兼容性处理
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);
})();

Please correct the inadequacies (after all, it is a current study) and check the advantages by the way:

Browsers can optimize parallel animation actions, rearrange action sequences more rationally, and complete actions that can be combined in one rendering cycle, resulting in smoother animation effects
Resolving millisecond inaccuracy
Avoid over-rendering (rendering too often, tab invisible pauses, etc.)
Note: requestAnimFrame Same as timers and a similar clearing method cancelAnimationFrame.

Fixed width on the right, adaptive on the left

The first:

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

the second

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

There are two that come to mind for now.

Centered horizontally and vertically

The first

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

the second

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}

the third

#container{
    position:relative;
}

#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

the fourth flex

#container{
    display:flex;
    justify-content:center;
    align-items: center;
}

The difference between the four positions

static is the default value
relative Relative positioning is offset from its original position, still in the standard document flow
absolute Absolute positioning is relative to the nearest positioned ancestor element, and there is a positioned (referring to the element that positionis not static) ancestor element, with the nearest ancestor element as the reference standard. If there are no positioned ancestor elements, the bodyelement is used as an offset reference, completely departing from the standard document flow.
fixed A fixed-positioned element is positioned relative to the viewport, which means that it stays in the same position even when the page is scrolled. A fixed-positioned element does not retain the space it would otherwise have on the page.

Is Flex layout used a lot?

Because the project considers compatibility IE9 , I directly say that it is not used much

How is the mobile adaptation done?

Responsive layouts made with media queries that load differently for different screen widths css.

What is the difference between let and var?

let The command to declare a variable for a ES6 new addition is similar var, but with the following differences:

var The scope of the declared variable is within the function where the statement is located, and there is a variable hoisting phenomenon
let The scope of the declared variable is within the code block where the statement is located, and there is no variable promotion
let Duplicate declarations are not allowed.

Why can var be declared repeatedly? (don't know this)

When we execute the code, we can simply understand that a piece of memory is allocated for a new variable, named as a, and assigned as 2, but at runtime the compiler and engine will perform two additional operations: determine whether the variable has been declared:

First, the compiler analyzes and disassembles the code. If it is encountered from left to right var a, the compiler will ask whether a the called variable already exists in the scope. If it does not exist, it will declare a new variable in the calling scope a. If it already exists, then Ignore varand continue to compile down, which a = 2is compiled into executable code for the engine to use.
When the engine encounters a=2it, it will also ask if there is a variable in the current scope a. If it exists, it will be aassigned as 2(because the compiler ignores the repeated declaration in the first step var, and it already exists in the scope a, so the repeated declaration will be worth overwriting. and will not report an error). If it does not exist, it will search up the scope chain. If the variable is finally found, it awill be assigned a value 2. If it is not found, the calling scope will declare a variable aand assign it as 2.
Reference link

Encapsulate a function, the parameter is the time of the timer, and .then executes the callback function.

function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

A question about what this points to

It should be like this, can't remember exactly.

obj = {
    name: 'a',
    getName : function () {
        console.log(this.name);
    }
}

var fn = obj.getName
obj.getName()
var fn2 = obj.getName()
fn()
fn2()

Difference between require/exports in CommonJS and import/export in ES6?

CommonJS An important feature of a module is that it is executed when loaded, that is, when the script code is present require , it will all be executed. Once a module is "cyclically loaded", only the executed part will be output, and the unexecuted part will not be output.
ES6 Modules are dynamic references. If you import load variables from a module, those variables will not be cached, but become a reference to the loaded module, which requires the developer to ensure that the value can be retrieved when the value is actually retrieved.
import/export In the end, it is compiled require/exports to execute.
CommonJS The specification states that, inside each module, module variables represent the current module. This variable is an object whose exports properties (ie module.exports ) are the external interface. Loading a module is actually loading the module.exports properties of the module.
export The command specifies the external interface, and must establish a one-to-one correspondence with the variables inside the module.

One line of code to achieve array deduplication?

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

Use addEventListener to click on li to pop up the content, and it is effective after dynamically adding li

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>