Bytedance Front-end Practice (AIOps direction)

Vue

Advantages of single page application:

1. Separate the front-end and back-end concerns, with the front-end responsible for interface display and the back-end responsible for data storage and computing. Does not mix the logic of the front and back ends;
2. Take the pressure off the server, the server just produces the data;
3. The same set of back-end program code can be used for Web interface, mobile phone, tablet and other clients without modification;
4. The user experience is good, fast, content changes don’t require reloading the entire page, and Web applications are more responsive and engaging;
5. SPA and RESTful architecture are used together. The back end is no longer responsible for template rendering and page output. The Web front end is equal to various mobile terminals, and the back end API is universal.

Disadvantages of single page application:

1. The initial loading time is relatively increased;
2. Using scripts to modify pages, which we all know are a big compatibility problem;
3. The bad SEO problem can now be partially addressed by techniques like Prerender;

Css3 unit px, EM, REM, Vh, vw, vmin, vmax difference

• Px: absolute units, pages are displayed in exact pixels
• Em: relative to the font size of the container, or the default font size of the browser if no font size is set.

1. Can be specified to three decimal places, such as “1.234em”
2. The default browser font size is 16px, so 1em = 16px, 2em = 32px
3. If the user changes the size of the text using the browser’s UI control, our entire page will be enlarged (or shrunk)

• Rem: The font-size attribute relative to the entire HTML.

All font sizes can be scaled by simply changing the root element, and the cascading effect of font sizes being compounded layer by layer can be avoided. Compatibility: Internet Explorer 9+

• % : percentage

Loosely speaking, relative to the parent element, but not exactly

1. For ordinary positioned elements, that’s what we think of as the parent element
2. For the position: absolute; Is relative to the located parent element
3. For the position: fixed; Is relative to the ViewPort

• Vw/vh:

For viewpoint width or height. 1vw is equal to 1% of the window width and 1vh is equal to 1% of the window height.

Eg: Viewports are divided into 100 units of VW, screen width 375px,1vw=3.75px; Viewports are divided into 100 vh units, 1200px screen height,1vh=12px; Vw, VH and % difference:

1. % is the ratio set to the size of the parent element. Vw and vh are determined by window size.
2. Vw and VH have the advantage of being able to get the height directly, while % cannot get the height of the visible area correctly without setting the body height, so this is a good advantage.
3. For full horizontal and vertical backgrounds, using % in IPX may have a safe white space

• Vmin/vmax:

Vmin is the smaller value of the current VW and Vh, vmax is the larger value of the current VW and vH.

For mobile page development, if vw and WH are used to set the font size (e.g. 5vw), the font size will be different in portrait and landscape. Since Vmin and vmax are currently smaller vw and VH and currently larger VW and VH. This is where vmin and vmax come in. Keeps the text size consistent across vertical and horizontal screens.

• Vm:

Css3 new unit, the smaller of the width or height of the viewport.

The smallest vm is divided into 100 units, for example: browser height 900px, width 1200px, take the smallest browser height, 1 VM = 900px/100 = 9 px.

CSS selectors

The difference between forEach and map in JavaScript

The map() method creates a new array with the result that each element in the array is the return value from a call to the provided function.

const array1 = [1.4.9.16];
// pass a function to map
const map1 = array1.map(x= > x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
Copy the code

The map method calls the callback function once, in order, for each element in the array. The return values (including undefined) from each callback are combined to form a new array. Callback is called only on indexes that have values; Indexes that have never been assigned a value or deleted with delete are not called. The forEach() method performs the given function once on each element of the array.

const array1 = ['a'.'b'.'c'];

array1.forEach(element= > console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"
Copy the code

Difference: map() returns no value, forEach() returns no value

The continue forEach, break

return true; ===> continue

return false; ===> break

/ stopImmediatePropagation stopPropagation () ()/the preventDefault () is the difference?

event.stopPropagation(); Prevents events from bubbling. event.stopImmediatePropagation(); Prevents event bubbling and prevents listeners of the same event type from being fired on the element

If multiple event listeners are attached to the same event type of the same element, when the event is triggered, they are called in the order in which they were added. If you execute stopImmediatePropagation() in one of the event listeners, none of the remaining event listeners will be called.

event.preventDefault(); The Event interface’s preventDefault() method tells the User Agent that if this Event is not explicitly handled, its default action should not take place either. This event will continue to propagate until the event listener calls stopPropagation() or stopImmediatePropagation().

Array.reverse()

function reverse(myArr){
let left=0;// Store the first position on the left
let right=myArr.length-1;// Store the last position on the right
while(left<right){// Stop the process
    var temp=myArr[left];// Use an intermediate variable to swap positions
    myArr[left]=myArr[right];
    myArr[right]=temp;
    left++;
    right--;
    }
return myArr
}
let arr=[1.2.3.4.5.6]
console.log(reverse(arr))
Copy the code