Some questions to ask in front-end interviews (Xi’an)

1.The difference between watch and computed

Functionally: computed is a calculated property, watch is to monitor changes in a value and then execute the corresponding callback.

Whether to call the cache: The properties on which the function in computed depends have not changed. Then when the current function is called, it will be read from the cache, and watch will execute a callback every time the monitored value changes.

Whether to call return: Functions in computed must use return, but functions in watch do not need to use return.

Implementation of computed

Implementation of watch

 

2. Arrow function

1. The association with this. The value of this built into a function depends on where the arrow function is defined, not the context in which the arrow function is executed. 2. new is not available. Arrow functions cannot use the new keyword to instantiate objects, otherwise an error will be reported. 3. this is immutable. The built-in this of the function is immutable and is a constant in the entire execution environment of the function body. 4. There is no arguments object. Incoming parameters cannot be accessed through the arguments object. This can only be done using explicit naming or other new ES6 features. (The interview mainly answered this question)

3.Ask what methods can be used to determine the variable type

• 1. Use typeof to determine variable type

• 2. Use instanceof to determine the type of a variable

• 3. Use constructor to determine the type of variable

• 4. Use Object.prototype.toString.call to determine the type of the variable

• 5. Use $.type in jquery to determine the type of the variable.

  In JS, there are 5 basic data types and 1 complex data type. The basic data types are: Undefined, Null, Boolean, Number and String; the complex data type is Object, and Object is also subdivided into many specific types, such as : Array, Function, Date, etc.

  1. Generally, simply use typeof or instanceof detection (these two detections are not completely accurate)

  2. Object.prototype.toString.call in native js or $.type detection in jquery (completely accurate)

4.The difference between cookie, localStorage and sessionStorage

1. Cookies are always carried in http requests from the same origin. Even if they are not needed, cookies are passed back and forth between the browser and the server. LocalStorage and sessionStora only store locally, do not communicate with the server, and will not automatically send data to the server.

2. The storage size is different, the cookie is about 4kb; localStorage, sessionStorage can reach 5M. The data validity period is different, sessionStorage is only valid in the same source window, and disappears when the window is closed. The cookie can set the expiration time, and localStorage is valid for a long time.

3. localStorage and sessionStorage have ready-made APIs, and cookies need to be manually encapsulated by programmers.

5. Life cycle (hook function)

Check this out yourself

6.JS closure

1. What is a closure: A closure is a container (not a js object) that contains a referenced variable. It is a reference relationship between the internal function object and the local variable of the external function. This relationship is described by a container object. 2 Conditions for generating closures on internal function objects 1 Function nesting 2 Internal functions refer to local variables of external functions 3 Calling external functions (external functions need to be called, internal functions need to be defined) 4 When to generate closures? Execute internal functions Definition, that is, creating an internal function object 5. The functions of closure: 1. Extend the life cycle of local variables of the external function 2. Allow the outside of the function to indirectly operate the internal local variables

How to use: 1. The external function returns the method body of the internal function, and uses a variable to receive the permanent closure. 2. Timer

6 Distinguish the three operations of closure: Generate closure: generated when the internal function object is created, containing the container of the referenced variable (not a js object). Use closure: execute the internal function. Release closure: let the internal function object become garbage. The object breaks all references pointing to it

7 Advantages and Disadvantages of Closures: Advantages: Extends the life cycle of local variables so that the outside of the function can indirectly operate the internal local variables. Disadvantages: Closures will not destroy themselves, causing memory leaks. Severe leaks will cause memory overflow closures. Do not abuse it and remember to destroy it when not in use.

8. Application of closures? The specific function is: It can be said that the brand is deleted based on the ID (the confirmation box needs to be displayed). The big one is: many modules we define have closures in the compiled code.

7.The principle of mvvm

• MVVM模式That Model-View-ViewModelis, the pattern is a software architecture pattern, MVVMan MVCenhanced version, which originated from the window-based user interface framework launched by Microsoft in 2005 WPF. Software architecture model: MVC, MVVM,MVP

  Advantages: 1. Separate View and Model, reduce code coupling, and improve the reusability of views or logic.

  2. Improve testability, because mvvmthe mode makes the view and model layers independent of each other, so the input and output can be within a roughly controllable range.

  3. Automatically update DOM: Using the principle of two-way binding, the view can be automatically updated after the data is updated. There is no need to mix DOM operations and logical operations, allowing developers to get rid of the tedious manual DOM.

  shortcoming:

  1. Bugs are difficult to debug because the two-way binding mode is used . When an exception occurs on the page, it is difficult to determine whether it is a problem in the view layer or the code in the model layer. Data binding allows bugs in one location to be passed to other locations, making it difficult to locate the original place where the problem occurred. Moreover, most of the views are imperative, which is difficult to debug; 2. Long-term persistence without releasing content may cause performance overhead: in a large module, the model will also be very large, although the consistency of the data is guaranteed. Sex, the possibility of not releasing memory will result in more memory; 3. For large graphics applications with many states, the cost of building and maintaining viewModel will be very high.

  8. WeChat payment and Alipay payment

  Please check it yourself

  9. Lazy loading of images

  When the target image has not been loaded (before the image is returned), first display the loading image (this image is local) and display the local loading image outside the visible area. How to do it: Download vue-lazyload, import it and configure the loading image to be injected into main.js. v-lazy='picture path'

  10. Then there are the project issues, such as the outstanding technical points of the project, the application of maps, encapsulating components, animations, etc.

  at last

  Thanks for reading. If you have any deficiencies, please feel free to discuss them in the comment area! Please provide a link for reprinting. Thank you.