1. DOM and BOM of the browser

BOM

BOM, Browser Object Model.

BOM describes the methods and interfaces for interacting with the browser, accessing and manipulating the browser window. The most fundamental object of a BOM is a window, which has many properties and methods of a browser window. BOM is directly browser-specific, not document-specific.

Window is both an interface to access a browser window through a JS object and a global object. This means that any object, variable, or function defined in the web page will have the Window as the global object.

DOM

DOM, Document Object Model.

The DOM describes the methods and interfaces used to process the content of a Web page (document). The DOM is like a tree with nodes distributed hierarchically. The web page is sent from the server to the client, so the DOM has little to do with the browser. The DOM’s most fundamental object is document (window.document), and the DOM specification explains the structure of a document and provides objects to manipulate it.

The DOM API can be used to add, delete, modify and check nodes in the DOM tree. Document is a child of the window object.

2. Describe the block-level elements, inline elements, and inline block elements of HTML tags

HTML block elements and line elements, etc., can be distinguished by display.

Block-level element block: exclusive row, with wide and high row margin attributes

Inline element: Does not monopolize a row, width and height attributes are invalid, only horizontal line margin attributes are valid (Canvas is inline element)

Inline block element Inline-block: it has inline attributes that do not occupy a row and can set width and height inside and outside margin attributes

3. Vertical centralization of elements

  1. Flex layout
  2. Transfrom deformation offset
  3. The position location
  4. tansfrom + position

4. The difference between relative and absolute positioning

Relative positioning: Moving relative to the original position of the element itself. This property remains in the document flow and does not affect the layout of other elements

Absolute positioning: positioned relative to the root element (HTML element) when the parent element is not positioned; If a parent element is positioned, it is positioned relative to its nearest (non-static) parent element. Will leave the document flow, affecting the position of other elements

5. Media inquiries

Media query @media can set different styles according to different screen sizes and adjust the browser size.

Media query can be: window width, device width, rotation direction, resolution size.

6. The difference between REM, EM and PX

Px: unit of relative length, relative to the screen resolution

Em: unit of relative length. Em is calculated relative to the font size of the parent element of the current element or, if not set, relative to the default font size of the browser

Rem: A unit of relative length calculated relative to the font size of the root element (HTML element), allowing you to set not only the font size, but also the width and height attributes of the element

7. The flex layout

Reference nguyen other teacher’s personal blog: www.ruanyifeng.com/blog/2015/0…

Transition, transform, animation

Transition: Better for simple transitions

Transform: Transforms only some attributes of the element. Transform does not cause page reordering and improves performance

Animation: Can implement some complex transitions and has some animation properties

9. The data type of js

Js data types are divided into basic data types and reference data types.

Basic data Types (stacks)

String, Number, Boolean, Null, Undefined (the first few are primitive data types), Symbol (Symbol function parameters only represent the description of the current Symbol value), BigInt

Reference data type (heap)

Object, Function, Array

Difference: Storage location is different

Raw data types are stored on the stack. They occupy a small space and have a fixed size. They are frequently used data, so they are stored on the stack.

Reference data types are stored in the heap, occupy a large space, the size is not fixed, if stored in the stack, will affect the performance of the program, so the reference type in the stack set pointer, the pointer points to the start address of the reference type, retrieve the pointer in the stack, through the pointer to find the address of the entity.

Methods for determining types

  • typeof
  • Object.prototype.toString.call(data)

10. Event delegation

Event delegation refers to delegating the events of one element (group) to the parent element (or a more outer element). It is the outer element that binds the event. When the event responds to the element that needs to be bound, the event binding of the outer element will be triggered by the bubbling mechanism of the event.

That is, you delegate an element (a group of elements) to an element, and when the element fires, the result of the response is assigned to the corresponding element.

Event bubbling model

The bubbling event model is divided into three phases:

  1. Capture phase: The capture phase does not respond to any events
  2. Target phase: The event responds to the lowest element that triggers the event
  3. Bubble phase: Events trigger responses from the lowest element up, the event broker uses the bubble mechanism to bind the corresponding events required by the inner element to the outer layer

Advantages of event delegation

  1. Reduce memory consumption
  2. Dynamic binding events

11. A const and let

The scope of const and let declarations is block-level. Let declarations can be reassigned, but they cannot be redeclared in the same scope. Const variables must be initialized in the same scope

12. data for… of… cycle

This loop can access any iterable (that is, except Object) data type. You can stop or exit the loop at any time without worrying about adding new properties to the object. for… Of only loops through the values in the object.

Arrow function

  • The arrow function does not create its own this; it only inherits this from the upper level of its scope chain. Since arrow functions do not have their own this pointer, when a function is called through call() or apply(), only arguments are passed and their first argument is ignored.
  • Arrow functions do not bind arguments objects.
  • Arrow functions cannot be used as constructors, and using them with new throws an error.
  • Arrow functions have no prototype attribute.
  • The yield keyword usually cannot be used in arrow functions (unless nested within an allowed function). Therefore, arrow functions cannot be used as function generators.

14. Map and Set added in ES6

Map and SET are new data types in ES6.

set

A set must take an array as an argument. If you want to get some data from an array, you must parse the array and use an expansion operator.

Set is not allowed to store the same data, can be used to resolve array deduplication.

map

A map is a collection of key-value pairs similar to objects, but the scope of “keys” is not limited to strings. Values of various types (including objects) can be used as keys, which is a more complete Hash structure implementation. A map must also take an array as an argument. , and the array is a two-dimensional array, the two-dimensional array has two data, the third data is not displayed.

15. Why is data in Vue a function

  1. Vue components are used for reuse to prevent data reuse, so data is defined as a function
  2. To prevent data in one component from changing and affecting data in other components, the data function returns an object as the component’s state
  3. The data function has its own scope, equivalent to a private database, where each component maintains only its own data
  4. All Vue instances use the same constructor to prevent all component instances from sharing the same object data. Changes in data in one component can also change values in other components

16. Deep and shallow copies

Deep and shallow copies are for reference data types only.

Shallow copies only Pointers to an object, not the object itself, and the old and new objects still share the same memory. A deep copy is a complete copy of the object itself to form a new object. The new object does not share memory with the old object, and modification of the new object does not affect the old object.

Shallow copy

  • Object.assign() (Deep copy if Object has only one layer)
  • Array.prototype.concat()
  • Array.prototype.slice()

Array’s slice and concat methods do not modify the Array; they simply return a new Array with a shallow copy of the elements in the Array. If the element is an object reference (not an actual object), Slice copies the object reference into the new array. Both object references refer to the same object, and if the referenced object changes, the element in the new and original arrays will also change.

Deep copy

  • Json.parse (json.stringify ()) : Use json.stringify to convert an object into a JSON string and parse the string into an object using json.parse (), which generates a new object and opens a new stack for deep copy.
  • Recursion: Deep copy if you traverse the data in an object or array until you copy the basic data type
  • The library lodash: _. CloneDeep is used for deep copy

17. Basic implementation principle of VUe-Router

It is well known that vue-router has two modes: hash and history.

In vue-Router, routes are still processed responsively using the Object.defineProperty()API. When a route jumps, the updateRoute() function is executed. Route responsiveness is processed in vue.util.definereactive_route (); Check the current route in router-view and display the corresponding component. (reproduced)

Hash pattern

The hash mode uses the onHashchange event.

In hash mode, the front-end route uses the information in # and can move forward and backward. # triggers the hashchange event, which walks the lifecycle hook again, which calls the beforeEnter hook function again (fired twice).

The history mode

The history mode is based on history.pushState(), based on the HISTORY API in H5. When history.pushState is called, no request is sent to the server, only the address in the browser path bar is changed, and the address is recorded in the history, and the corresponding component is found and rerendered based on the current routing address.

In history mode, a 404 is returned if there is no response from the server (the server will be asked to refresh).