Record a front-end interview

Based on the relevant

What are the new features in ES6, and how are they different from the previous ones

The let variable is used primarily in place of var

Prevent variable promotion

console.log(a) // undefined
console.log(b) // Uncaught ReferenceError: Cannot access 'b' before initialization
var a
let b
Copy the code

Non-repeatable definition

let b = 2 // Uncaught SyntaxError: Identifier 'b' has already been declared
Copy the code

Only valid in block-level scope

{
  let a = 1;
  {
    let a = 2;
    console.log(a);  / / 2
  }
  console.log(a)  / / 1
}
Copy the code

Const constant, unchangeable once declared

const c = 1
c = 2 // Uncaught TypeError: Assignment to constant variable.
Copy the code

The base data type symbol, the symbol () function returns the value of the symbol type

Each Symbol value returned from Symbol() is unique

Symbol("foo") = = =Symbol("foo"); // false
Copy the code

Deconstruction assignment

An array of deconstruction

let foo = [1.3.5.7.9];
const [a, b, c, ...rest] = foo;
console.log(a); / / 1
console.log(b); / / 3
console.log(c); / / 5
console.log(rest); / / [7, 9]

// The remaining parameters must be placed last, otherwise an error is reported
// const [a, ...rest, b, c] = foo; 
// Uncaught SyntaxError: Rest element must be last element
Copy the code

The default value

let a, b;

[a=1, b=2] = [3];
console.log(a); / / 3
console.log(b); / / 2
Copy the code

exchange

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a); / / 2
console.log(b); / / 1
Copy the code

Object deconstruction, basically similar (key names need to be consistent)

let {a, b} = { a: 1.b: 2 }
Copy the code

Template string

let x = 110;
console.log('Request call${x}`);
Copy the code

Arrow function

If there is only one argument, you can omit the parentheses

const fn = param= > {
	// ...
}
Copy the code

Function body returns a result directly. {}

const fn(a, b) => a + b;
Copy the code

Do you know anything about anti – shake throttling and when it’s used

Image stabilization

If fired again within a given n seconds, the timer will be reset until the function is executed in n seconds
Search optimization, stop input for n seconds before performing the search
Windows triggers resize. Resize the browser window repeatedly to trigger resize. Use stabilization to make it trigger only once

function debounce(fn, wait) {
    let timeout;
    return function(. args) {
        if(timeout) clearTimeout(timeout);
        timeout = setTimeout(() = > {
            fn.apply(this, args); }, wait); }}Copy the code

The throttle

This means that events are fired continuously but only execute once in n seconds
Carousel raffle, mouse or finger trigger continuously in case
Listen for scrolling events, such as whether to slide to the bottom to automatically load more

function throttle(fn, wait) {
    let previous = 0;
    return function(. args) {
        let now = Date.now();
        if (now - previous > wait) {
            fn.apply(this, args); previous = now; }}}Copy the code

Mobile terminal adaptation, there are several ways

Rem, the unit of calculation based on the HTML of the root element, has a base size of 16px per rem

html {
	font-size: 2rem; // 32px
    div {
		font-size: 2rem; // 64px, see the difference}}Copy the code

Em is the unit of calculation based on the parent element

<div class="fir">
    <div class="sec">I received three offers<p class="thir">I received three offers</p>
    </div>
</div>
<style>
.fir {
    font-size: 20px;
}
.sec {
    font-size: 2em;
}
.thir {
    font-size: 2em;
}
</style>
Copy the code

Postcss-px-to-viewport postcss-px-to-viewPort postcss-px-to-viewPort

/ / installation
npm i postcss-px-to-viewport --save-dev

// Vue. Config.js
module.exports = {
  // ...
  "postcss-px-to-viewport": {

    unitToConvert: "px".// The default is' px ', the unit to convert

    viewportWidth: 375.// The width of the window corresponds to the width of the design draft

    viewportHeight: 667.// Window height is specified according to the width of the 375 device. It is usually 667 and optional

    unitPrecision: 3.// Specifies the decimal number to convert 'px' to the window unit value

    propList: ["*"].// Convert to vw's attribute list

    viewportUnit: "vw".// Specify that you want to convert to window units

    fontViewportUnit: "vw".// The window unit used by the font

    selectorBlaskList: [".ignore-"].// Specify classes that do not need to be converted to window units

    mediaQuery: false.// Allow conversion of 'px' in media queries

    minPixelValue: 1.< or equal to '1px' does not convert to window units

    replace: true.// Whether to replace the attribute value directly without adding the standby attribute

    exclude: [].// Ignore files under certain folders or specific files

    landscape: false.// Whether to add media query criteria based on landscapeWidth @media (Orientation: landscape)

    landscapeUnit: "vw".// The unit used in landscape

    landscapeWidth: 1134 // Width of window to use in landscape}};Copy the code

How to achieve vertical horizontal center

div
  width 100px
  height 100px
  position fixed
  top calc(50% - w/2)
  left calc(50% - h/2)
Copy the code

Layout related (too many to expand here)

Float attribute
flex

Have you ever worked on two separate projects and updated each other’s pages

There is no

Window.postmessage can be implemented in conjunction with iframe

// test.html
<iframe src="http://192.168.xxx.xxx:8080/"></iframe>
let array= ['Working man'.'Soul of Work'.'It's all about the job.'.'Ollie to'];
window.onload = function() {
	window.frames[0].postMessage(array, The '*');
}
// test.vue
mounted() {
  window.addEventListener('message'.function(e) {
      console.log(e.data, '------fromOtherProj')})}Copy the code

How to implement deep copy

It’s basically just recursively going through itself

function deepClone(source) {
    let objClone = Array.isArray(source) ? [] : {};
    if (source && typeof source === 'object') {
        for (const key in source) {
            if (source.hasOwnProperty(key)) {
                if (typeof source[key] === 'object') {
                    objClone[key] = deepClone(source[key]);
                } else {
                    objClone[key] = source[key]
                }
            }
        }
    }
    return objClone;
}
Copy the code

Find the number of occurrences of an element in an array

Then the interviewer asked to improve the time complexity to O(1), not to use the for loop (I have not studied this, there are passers can point out).

function getLength(array, x) {
    let tmp = []
    array.forEach(element= > {
        if (element === x) {
           tmp.push(element) 
        }
    });
    return tmp.length;
}
Copy the code

Do you know what the front-end attacks are

A small company experienced an XSS cross-site scripting attack (receiving illegal image urls)
The main reason is that the client is trusted too much to transmit information. As a result, malicious transmission scripts (commonly known as iframe,script tags) become an executable part of the program, which may lead to account information, hijacked reply, pop-up login (malicious guidance to illegal pages), and content change to deceive users
It is also easy to avoid XSS attacks. The front end performs form authentication and format verification, the server adds tokens to users, and the front end carries tokens during login. Post requests replace GET requests

How is class inheritance implemented in JS

According to the JavaScript you Don’t Know series, there is no such thing as a class in JS. ‘Class’ inheritance is based on prototype delegation

Talk about prototypes and prototype chains

The prototype

The prototype of an object is its constructorprototype
There is one reference type__proto__Property, called an implicit stereotype, which in turn points to the property of its constructorprototype

Prototype chain

A prototype chain is not a structural concept
If the current object itself is not found, it will first go to its implicit prototype (person1.__proto__), corresponding to the prototype of its constructor (Person.prototype), will continue upward if not found,Person.prototype.__proto__Corresponding to the prototype of its constructor (Object.prototype), if not, untilObject.prototype.__proto__(Pointing to null)
This layer by layer search process is called prototype chain

Instanceof implementation

Instanceof is prototype-based and can only be used to determine reference types

function instanceof(obj, type) {
	if(typeofobj ! = ='object' || obj === null) return false;
    let proto = obj.__proto__;
    let prototype = type.prototype;
    while(true) {
    	if(proto === null) return false;
        if(proto === prototype) return true; proto = proto.__proto__; }}Copy the code

Vue related

How to implement V-Model bidirectional binding

The parent component

<template>
    <div>
      <p>{{ value }}</p>
      <son v-model="value" />
    </div>
</template>

<script>
import son from './son.vue'
export default {
    data() {
        return {
          value: ' '}; }components: {
      son
    }
};
</script>
Copy the code

Child components

<template>
    <div>
      <input :value="value" @input="onInput" />
    </div>
</template>

<script>
export default {
    model: { $emit('input', XXX) is the same if you do not use the model attribute
      prop: 'value'.event: 'change'
    },
    props: {
      value: {
        type: String.default() {
          return ' '}}},methods: {
      onInput(e) {
        this.$emit('change', e.target.value)
      }
    }
};
</script>
Copy the code

How does VUE implement bidirectional binding

The vue2.x version is based on Object.defineProperty(), which hijakes data through its internal set and GET methods
Vue3.0 is implemented based on Proxy()

Vue page optimization

V-if and v-show are used in different scenarios

In case of frequent switching, it is necessary to render well in advance and control display implicit. V-show is applicable
If frequent switching is not involved, v-if can be used

V -for traversal, add :key=” XXX “, improve performance (diff algorithm for parent-child node update based on this key)
For pure display lists, this.list = object.freeze (data) is applied after the AXIos request to freeze the objects and forbid bidirectional binding to modify the objects, reducing certain performance consumption
Reduce package size by using UI libraries such as Vant and using plug-ins such as babel-plugin-import and babel-plugin-Component to import as needed, rather than all of them
A large number of images using vue-lazyload lazy loading plug-ins
Lazy loading of routes is also a common practice
Skeleton/breathing screen to improve user experience
SSR server rendering, equivalent to the server directly return to the HTML page, improve the first screen loading speed
In terms of architecture, front-end micro-service. Docker + CAAS platform was used by the company before. Especially for the case of embedded APP, modules are deployed in independent micro-service to reduce the pressure on the server, and at the same time, insensitive updates can be made to improve user experience

How do components communicate

Parent-child component communication

Parent to child: the parent component assigns the v-bind attribute to the child component, which the child component props accepts
Child to parent: The parent component binds events (subscription events) to the child component tag, the child component$emit('xxx', params)(Release event)
Dojo.provide, inject
$parent, $children

EventBus bus mechanism, can cross component levels, sibling components, both male and female components are ok
Vue.observable(), a simplified version of state management, allows you to change and retrieve state variables anywhere
Vuex core plug-in, the state, getters, mutations, actions4 attributes, can be done at the same time the module, mutations are synchronous, asynchronous submit multiple actions can be dispatch to mutations

How are vuE-Router and VUEX packaged and used

My blog

vue-router

vuex

React? Vue and React

There is no

similar

Virtual DOM, in short, is to use JS object format to describe the DOM
The idea of componentization
The props subcomponent passes values to the parent component
Scaffolding, VUE-CLI and Create React App
With vuex, vuE-Router, react-redux, react-Router

The difference between

Vue is two-way binding, react is one-way data flow
Vue defaults to template syntax (render and JSX syntax is also supported), react defaults to JSX (JavaScript and XML syntax is mixed)

Write in the last

When the interview can say well, want to be methodical, do not know more want reason to be strong, this say bad won’t, went
Don’t be afraid of blow, abandoned too dish, the next one then face, after all, you are people
Every interview is a learning opportunity and a test of your skills, so cherish it

Based on the relevant

What are the new features in ES6, and how are they different from the previous ones

Do you know anything about anti – shake throttling and when it’s used

Mobile terminal adaptation, there are several ways

How to achieve vertical horizontal center

Layout related (too many to expand here)

Have you ever worked on two separate projects and updated each other’s pages

How to implement deep copy

Find the number of occurrences of an element in an array

Do you know what the front-end attacks are

How is class inheritance implemented in JS

Talk about prototypes and prototype chains

Instanceof implementation

Vue related

How to implement V-Model bidirectional binding

How does VUE implement bidirectional binding

Vue page optimization

How do components communicate

How are vuE-Router and VUEX packaged and used

React? Vue and React

Write in the last

Related Posts

React (1) : What is React

Is the function parameter var or let?

Loading mode and priority of the CSS