A rookie who has been working in the education industry for two years is preparing for a review interview after leaving the job. Record the review process. Front-end knowledge is in is too much, constantly updated… Hope to really look for a job you help, at the end of the article I sorted out the interview article, interested in can have a look, especially 2021 high frequency front end test summary series, help a lot. The deficiencies of the article are also pointed out.

HTML 5 and CSS 3

HTML5

New HTML5 features

  • Semantic tags: Header, nav, footer, section…

  • Media labels: Audio audio and Video

  • Form type properties: Email, Number, time control, color picker, placeholder, Autofocus

  • Cavas drawing

  • Web storage: localStorage, sessionStorage

What are the inline elements and block-level elements

Line elements: A, SPAN, img, input…

Block-level elements: div, ul, LI, OL, DT, dh, Li, P, H1-6

Advantages and disadvantages of iframe

Advantages:

  • Embed it in the web page and show it
  • Increase code reuse
  • Used to load slower content

Disadvantages:

  • Iframe blocks the onLoad event
  • Web content cannot be recognized by search engines and is not SEO friendly
  • It produces a lot of pages, which is unmanageable

Difference between Canvas and SVG

Canvas: 2D graphics are drawn by javaScript, rendered pixel by pixel

  • Resolution dependent
  • Event processing is not supported
  • Can be saved in. PNG or. JPG format
  • Good for games

SVG: 2D graphics language based on XML description. It is vector graphics

  • Resolution independent
  • Support event handling
  • Great for large area rendering

Return to redraw

Backflow: When DOM changes affect elements, such as the size, layout, display and hide of elements, the build needs to be rewritten. Each page needs to be backflowed at least once, the first time the page is loaded, which is when backflowed must occur.

Redraw: Rerender the appearance of an element when its appearance has changed without changing its layout. Background-color, color

Backflow will certainly cause redrawing, and redrawing will not necessarily cause backflow

How to avoid Reflux Repainting:

  • Avoid the use oftablelayout
  • As far as possible inDOMThe end of the tree changesclass
  • Avoid setting multiple inline styles
  • Enable GPU acceleration
  • Apply the animation effect topositionProperties forabsoluteorfixedOn the elements of

Difference between SRC and href

SRC: refers to the location of the external resource. It emashes the pointed content into the location of the current tag in the document, such as JS scripts, IMG images, and iframe

Href: used to establish a link between the current document and the reference resource

CSS3

New features in CSS3

  • Added CSS selectors and pseudo classes
  • The special effects:text-shadow,box-shadow
  • The gradient:gradient
  • Overrotation:transform,transtion
  • Animation:animation

The box model

Box models are composed of four parts: Content, padding, border and Margin

The difference between the standard box model and IE box model is that the corresponding range of width and height is different

  • The width and height of the standard box model contain only content

  • The width and height of the IE box model include border, margin and padding

Change the box model of an element by modifying its box-sizing property

  • box-sizeing: content-boxRepresents the standard box model (default)
  • box-sizeing: border-boxRepresents IE box model (weird box model)

Trastion and aniamtion

Transtion: belongs to excessive attribute, over-emphasis, need an event to trigger (such as mouse enter, leave) similar to flash tween animation, set a start frame and an end frame

Aniamtion: animation property, which does not need to trigger events. After setting, it can be automatically executed and can be played in a loop. Also similar to tween animation, but can set multiple keyframes

The element is centered horizontally and vertically

  • Absolute positioning: Position the upper-left corner of an element to the center of the page with Top :50% and left:50%, then adjust the center of the element to the center of the page with Translate.

    .parent {    
  position: relative;
} 
.child {    
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

  • Absolute positioning: Set the values of the four directions to 0, and set the margin to auto. Since the width and height are fixed, the corresponding directions are evenly divided, and the horizontal and vertical directions can be centered.

    .parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
Copy the code

  • Using flex flex box layout, set the container to be vertically and horizontally centered with align-items: Center and context-Content: Center, and then center its child elements vertically and horizontally.

    .parent {
    display: flex;
    justify-content:center;
    align-items:center;
}
Copy the code

The difference between P, EM and REM

  • pxFixed pixel units that cannot change with other elements
  • emIs a unit relative to the parent element that changes as the parent element changes
  • remIs relative to the root elementhtml, which changes as the HTML element changes

Rem is commonly used in mobile terminal projects to set the fong-size of the root element, and other elements will change with the change of the root element, so as to achieve the adaptive size of different mobile phone screens. It is usually used in conjunction with the PostCSS-Pxtorem plug-in

How to solve the 1px problem

  • Write directly0.5 px.
  • Using pseudo-elements, zoom in and out
  • Use viewPort zoom to solve this problem

What is a BFC layout and how do YOU create one?

BFC layout is Block Formatting Context (BFC). It is a concept of CSS layout in which the inside elements do not affect the outside elements.

Create the landing:

  • Element Settings float:floatA value is not null
  • Element setting absolute positioning:Position (Absolute, fixed)
  • overfilowValue is:hidden,auto,scroll
  • displayValue is:inline-block,table-cell,table-caption,flexEtc.

Landing the role:

  • To solvemarginOverlap problem: Since BFC is an independent region, internal elements and external elements do not affect each other. By turning the two elements into BFC, margin overlap problem can be solved
  • Create an adaptive two-column layout: You can use this to create an adaptive two-column layout with a fixed width and height on the left and an adaptive width on the right.
  • Fixed height collapse: after the child element is set to float, the height of the parent element will collapse, that is, the height of the parent element will be 0. To solve this problem, simply turn the parent element into a BFC.

The difference between link and @import

  • Link is an HTML-provided tag that not only loads CSS files, but also defines RSS, REL connection properties, and more
  • @import is the syntax provided by CSS, only the import style band.
  • The CSS introduced by the link tag is loaded at the same time, while the CSS introduced by @import is loaded after the page is loaded
  • @import is a CSS2.1 syntax that has compatibility, while link as an HTML tag does not have compatibility problems

CSS selector priority

  • @important
  • Inline style
  • The ID selector
  • Class selector/property selector/pseudo-class selector
  • Element selector/pseudo-element selector
  • Relational selector/wildcard selector

JS based

Underlying data types

String, number, Boolean, object, function, undefined, null, symbol

When typeof is used, null is object and undefined is undefined. When typeof is used, null is object and undefined is undefined

null= =undefined // true

null= = =undefined //false
Copy the code

Value types (basic data types) : String, number, Boolean, undefined, NULL, symbol

Reference types: Object, function, and array

Value types and reference types differ:

  • Value types are stored on the stack and take up a fixed amount of space. When a method is executed, each method creates its own memory stack, where variables defined in the method are stored. The stack is also destroyed when the method execution ends. So, the base variables are stored in the stack. A reference variable stored on the stack is a reference address to an array or object in the heap. This is why changing the reference type always affects other reference variables that refer to this address.
  • Value types can be usedtypeofPerform data type detection
  • Reference types are kept in the heap and take up variable space. The created object is stored in heap memory, which is not destroyed at the end of the method because the object may also be referenced by another variable, and the system’s garbage collection mechanism will reclaim it only if an object is not referenced by any variable.
  • Use of reference typesinstanceofDetection data type
  • Objects constructed using the new () method are reference types

closure

A closure is a function that can read variables inside another function. The simplest way to create a closure is to create a function inside a function that can access local variables of the current function.

Closure advantages:

  • Create global private variables to avoid global contamination of variables
  • Can achieve encapsulation, caching, and so on

Disadvantages of closures:

  • The created variables cannot be reclaimed, which may cause memory overflow

Variable promotion, scope, scope chain

Variable ascension

Js code when parsing, all variable functions, will be promoted to the top of the code. Variable promotion, promotion is only variable declaration, does not promote variable assignment

console.log(i) / / 4
var i = 4
Copy the code
scope

A scope is the accessible scope of a variable or function. A scope controls the visibility and life cycle of a variable or function

  1. Global scope: Can be accessed globally

    • Outermost functions and outermost defined variables have global scope
    • Object property methods on Windows have global scope
    • Automatically declare global scope for variables that define direct replication
    • Too many global scoped variables can lead to global contamination of variables and naming conflicts

  2. Function scope: can only be accessed within a function

    • Variables defined in a function can only be used internally and cannot be accessed externally
    • Inner scopes can access outer scopes, but outer scopes cannot access memory scopes

  3. Block-level scope in ES6: only accessible within code blocks

    • Use new ES6 variables such as let and const with block-level scope. Block-level scope can be created in functions (code wrapped in {} is block-level scope)

    • Variables declared by let and const are not promoted, and const cannot be declared twice

    • Block-level scope is mainly used to solve the problem of variable coverage caused by variable promotion

      var i = 3
function fnc() {
  console.log(i);
  var i = 6;
}
fnc() // undefined
Copy the code
The scope chain

Variables that are not found in the specified scope are searched up the next level of scope to the global scope. This lookup process is called scope chain.

Call, apply, bind

  • Can be used for changethisPoint to the
  • The difference between call and apply is that call and bind are passed objects. Apply passes an array.
  • Call and apply will execute the function immediately after changing this. Bind will return a function after changing this. It will not execute the function immediately.

What does the new operator do

  1. Create an empty object

  2. Sets the prototype of the object to the function’s Prototype object

  3. Change this to point to the object, and execute the constructor.

  4. Determine the return type of the function and, if it is a value type, return the created object. If it is a reference type, return an object of that reference type.

Prototype, prototype chain

  • Prototype: When each object is internally initialized, it initializes a prototype property, and the _proto_ property of the object refers to its prototype object.

  • Prototype chain: When we access a British object property, if the property does not exist, we will look it up on its prototype object, which in turn will have its own prototype, and keep looking until we find the top-level object object. This lookup process is called a prototype object.

inheritance

Prototype chain inheritance

New Person(); new Person(); new Person();

🌰

function Person() {... };function Son() {... };// Key code
Son.prototype = new Person();
Copy the code

Advantages:

  • Subclasses can inherit the parent class constructor, attribute methods on the stereotype

Disadvantages:

  • Instance objects of the parent class reference type are shared, which makes modification confusing.
  • When creating a subclass, you cannot pass arguments to the parent class
Constructor inheritance

Use the.call() or.apply() methods to initialize the parent constructor by borrowing the parent constructor from a subclass.

🌰

function Person(name) {... };function Son(name) {
	// Key code
  Person.call(this, name)
  ...
}
Copy the code

Advantages:

  • When a subclass inherits from a parent class, it can pass arguments to the parent constructor.
  • Does not cause reference property sharing between subclass forces.

Disadvantages:

  • You can only inherit attribute methods from the parent constructor, not access methods on the stereotype.
  • Each subclass creates a copy of its parent class
Combination of inheritance

Composite inheritance, which combines stereotype chain inheritance and constructor inheritance.

🌰

function Person(name) {... };function Son(name) {
  // Borrow constructor to inherit key code
	Person.call(this, name);
};

// Prototype chain inherits key code
Son.prototype = new Person();
// point the subclass's constructor to itself
Son.prototype.constructon = Son;
Copy the code

Advantages:

  • Combining the advantages of the previous two inheritance approaches, instances of subclasses have access to attribute methods on their parent class archetypes
  • Instances of subclasses are not shared

Disadvantages:

  • The superclass constructor is called twice
Primary inheritance

Wrap an Object with a function, return a call to that function (the mock implementation of ES5’s Object.create), and use the passed Object as a prototype to create the Object

🌰

function create(obj) {
  // Create an empty constructor
	function F() {};
  
  // Point the empty constructor prototype to the object passed in
  F.prototype = obj;
  
  // Return an instance object
  return new F();
}


const obj = {
  name: 'zs'. };const newObj1 = create(obj);
const newObj2 = create(obj);
Copy the code

Pros and cons As with archetypal chain inheritance, reference types are shared.

Parasitic inheritance

On the basis of the original type inheritance, do the enhancement function inside the function, return the object.

🌰

function createObj(obj){
  // Get the inherited subclass object, which is the create method implementation above
  const newObj = Object.create(obj);
  
  // Function enhancement
  newObj.say = function() {... }// Return the object
  return newObj;
}
Copy the code

Similar to the original type inheritance, but on the basis of the original can be customized attribute methods, still does not solve the problem of reference values being shared. (Like borrowing the constructor pattern, methods are created each time an object is created.)

Parasitic combinatorial inheritance

Combining advantages and disadvantages of parasitic inheritance and composite inheritance, the disadvantage of composite inheritance is that the parent constructor is called twice, and the advantage is that the reference values are shared. The disadvantage of parasitic inheritance is that it does not solve the problem of reference value being shared.

🌰

function createObj(son, parent) {
  // Create a new object using the parent constructor's prototype object
  constNewObj = Objcet. Create (parent. The prototype);// Subclass the constructor of the new object
	newObj.constructor = son;
  
  // Point the prototype of the subclass constructor to the original type inheritance of the heart
  son.protoytype = newObj; 
  
}

function Person(name) {... };function Son(name) {
  // Constructor inheritance
  Person.call(this, name); . };// Implement inheritance
createObj(Son, Person)
// A cleaner way to point son's prototype directly to Person's prototype via API based on composite inheritance
Son.prototype = Object.create(Person.prototype);

const obj1 = new Son('zx');
const obj2 = new Son('lw');
Copy the code

Deep copy, shallow copy

Shallow copy

Shallow copy simply copies the value type of an Object, either through object. assign or the extension operator

Deep copy

We do it recursively

function deepClone(obj) {
  // Determine whether it is an object
  if(! obj ||typeofobj ! = ='object') return obj;
  
  // Create an array or object based on type obj
  let newObj = obj instanceof Object ? {} : [];
  
	// Iterate over obj, process child elements as objects, copy recursively
  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      newOb[key] = deepClone(obj[key])
    };
  };
  
  return newObj;
};
Copy the code

EventLoop (browser)

Stack and queue understanding
  • The Stack (Stack)The taskLast in, first out, the execution stack in JS is a stack structure that stores functions, and the execution of tasks in the stack follows the principle of “first in, last out”.
  • QueueThe taskFirst in first outThe js runtime creates a queue of tasks that process lists (events) and callback functions to execute
Macro task, micro task

The Task is divided into two kinds: macro js Task (MacroTask | Task) and micro (MicorTask).

  • Macro task:Script all the code,setTimeout,setInterval,I/O,UI Rendering
  • Micro tasks:Promise.then,Process. NexTick (unique) Node,MutationObserver
Synchronous and asynchronous tasks

Js has a main thread and an execution stack (call stack). All tasks are placed in the execution stack to be executed by the main thread.

When the js code executes, all functions are pushed onto the execution stack. Synchronization tasks are executed on a last-in, first-out basis until the stack is empty. After the asynchronous task has the result, the registered callback function will be put into the asynchronous task queue and wait for the main thread to be idle (synchronous tasks in the execution stack are completed).

Tasks in the asynchronous queue are divided into macro tasks and micro tasks. When processing tasks in the asynchronous queue after the current execution stack is cleared, the system first checks whether there are micro tasks to be executed. If there are micro tasks, the system pushes them to the execution stack. When the tasks in the micro queue are finished in the execution stack, then the asynchronous queue puts the macro task into the execution stack.

To put it simply:

  1. Execute synchronized code, which is a macro task
  2. After all code is executed, the stack is cleared and tasks in the asynchronous queue are executed
  3. In asynchronous queues, micro tasks are performed first
  4. The micro task is completed, and then the macro task

Event bubbling, event delegation

Events occur in three phases: capture phase, target phase, and bubble phase

  • Event bubbling: Events of some kind are emitted on an object. If the object is bound to an event, the event is emitted. If not, events are propagated to the parent object of the object, and eventually the parent object fires the event.
    • How to stop:
      • Common browser:event.stopPropagation()
      • Internet Explorer:event.cancelBubble = true;
  • Event delegate: Leverages the browser event bubbling mechanism. The event will be transmitted to the parent node during the bubbling process, and the parent node can obtain the target node through the event object. You can define the listener function of the child node on the parent node, and the listener function of the parent node uniformly processes the events of multiple child elements
    • Event delegates can reduce memory consumption by eliminating the need to bind listening events to each child node.
    • You can also use event delegates to dynamically bind events, such as adding a new child node. Instead of adding a separate listening event, the listener function in the parent element can handle it.

Add, delete, change and check DOM elements

increase
 document.createElement()
Copy the code
delete
element.removeAttribute()
element.removeChild()
Copy the code
change
element.innerHTML()
element.setAttribute()
Copy the code
check
getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector()
querySelectorAll()
Copy the code

Ajax, AXIos, fetch difference

ajax

  • Based on native XHR development
  • Itself for MVC programming, not in line with the current front-end MVVM trend

axios

  • Create an XMLHttpRequest from the browser

  • Supporting promise

  • Support for request blocking and response interception

  • Create HTTP requests from Node.js

  • The customer service supports CSRF/XSRF prevention

fetch

  • The browser’s native implementation of requests, an alternative to Ajax
  • An error is reported only for network requests. The 400 and 500 requests are regarded as successful and need to be encapsulated
  • Fetch is not carried by defaultcookie, you need to add configuration items
  • Fetch does not support abort, does not support timeout control, usesetTimeoutandPromise.rejectThe timeout control implemented by the request process does not prevent it from continuing to run in the background, resulting in a waste of volume
  • Fetch has no way of natively monitoring the progress of requests, whereas XHR does

ES6

Var, let, const

  • varDeclaring variables can be repeatedly declared, whileletCan not be
  • varIs not limited to block-level scope, whileletlimited
  • varThere is a variable promotion,letandconstThere is no variable promotion
  • consThe variable declared by t is immutable
  • constThe value must be assigned after the declaration, otherwise an error will be reported

Promise

Promise is a solution to asynchronous programming by expressing asynchronous operations as a flow of synchronous operations, avoiding layers of nested callback functions.

It has three states

  • pendingThe initial state
  • fulfilledOperation is successful
  • rejectedOperation failed.

There are only two possibilities for a Promise state change

  • frompending——>fulfilled
  • frompending——>rejected

The Promise constructor takes an argument and a callback function with resolve and reject arguments.

  • resolveThe role of thePromiseState frompendingintofulfilled, called when the asynchronous operation succeeds, and returns the asynchronous result, passed as a parameter
  • rejectThe role of thePromiseState frompendingintorejectedIf an asynchronous operation fails, the error result of the asynchronous operation is passed as a parameter

Promise instance method

  • promise.then()The correspondingresolveSuccessful handling
  • promise.catch()The correspondingrejectFailure handling
  • promise.call()multiplePromiseInstance, wrapped into a new onePromiseInstance, the returned instance is normalPromise. There is a failure that represents thePrimiseFailure. When all the childrenPromiseComplete, returns an array of all values when the value is returned
  • promise.race()similarpromise.all(), the difference is that either completion is complete (for example: put asynchrony and timer together, set request timeout).

The difference between an arrow function and a normal function

  • Arrow functionAnonymous functionsCannot be used as a constructornew
  • Arrow functions are not boundarguments
  • Arrow functions don’t have their ownthis, will be in the context ofthisAs one’s ownthisvalue
  • There is noprototype
  • call(),applay(),bind()Method cannot change the arrow functionthisPoint to the

The difference between forEach and map

  • ForEach returns undefined, cannot be chained
  • Map () returns a new array, leaving the original array unchanged. ForEach changes the array.

The difference between Set and Map

Set

  • Create: new Set([1, 1, 2, 3, 3, 4, 2])
  • add(value): adds a value and returns the Set structure itself.
  • delete(value): Deletes a value and returns a Boolean value indicating whether the deletion was successful.
  • has(value): Returns a Boolean value indicating whether the value is a member of Set.
  • clear(): Clears all members with no return value.

Map

  • set(key, val): 向MapAdd a new element to
  • get(key):Finds a specific value by key value and returns it
  • has(key): judgeMapObjectKeyThe corresponding value is returnedtrueOtherwise returnfalse
  • delete(key): By key value fromMapTo remove the corresponding data
  • clear():Will thisMapDelete all elements in

The difference between

  • A Map is a collection of key-value pairs that, unlike objects, can have any value
  • Maps can be traversed and converted to a variety of data formats
  • A Set is a data structure similar to an array, but with no duplicate values

Talk about your understanding of ES6

  • Deconstruction assignment
  • Extended operator
  • Template string
  • Arrow function
  • async/await
  • Class
  • The introduction ofMoldulegrammar

Vue

Basic knowledge of

MVVM

MVVM is a software architecture pattern where M stands for model layer (data model) in VUE, responsible for data model. V represents the View layer and VM represents the ViewModel. It is the bridge between The Model and View. Data is bound to the ViewModel layer and automatically renders data to the page layer, notifies the ViewModel to update data when the View changes

Vue life cycle

Before and after creation:

  • BeforeCreated (before creation) :Data observation and initialization events have not started and cannot be accesseddata,computed,watch,methodsData methods on.
  • Created (after creation) :The instance is created and accessibledata,computed,watch,methodsBut the render node is not yet attached to the DOM, so it cannot be accessed.

Before and after mounting:

  • BeforeMounted (Before mounting) :The Vue instance is not yet attached to the page HTML, at which point a server request can be made
  • Mounted:The Vue instance is now hung and ready to manipulate the DOM

Before and after:

  • BeforeUpdate (beforeUpdate) :Called before data update, without rendering the page
  • Updated:The DOM is re-rendered, and the data and interface are new.

Before and after destruction:

  • BeforeDestoryed (before destruction) :Called before instance destruction, when it is availablethis
  • Destoryed (after destruction) :Called after the instance is destroyed, and the instance is completely destroyed.

The difference between watch and computed

Watch: Listen property, used to listen for data changes, no cache, when the monitored data changes will execute the destroy function

Computed: Computes attributes. The monitored value is cached and recalculated only the next time a computed value is obtained after the value of the attribute it depends on has changed. (Only recalculated if the dependency changes)

The role of key in V-for

Key is used to more efficiently compare whether each node in the virtual DOM is the same or not, and to avoid repeating node updates during page updates

Difference between V-if and V-show

Delete the DOM element if the V-if element is not visible

The V-show element is visible by setting the element’s display: None style attribute

Why is data in a component a function

Because the object is a reference type, if data is an object, multiple components will share the same data. Data is a function, and each component will have its own private data space, which will not interfere with the operation of other components.

Vue component communication

Father and son components

The father the son

  • props
  • $children
  • $refs

Child the parent

  • $emit
  • $parent
Brother components
  • provied
  • inject
  • eventBus
  • Vuex

Basic use of Vuex

Vuex is used for data state management in VUE and has five properties:

  1. state:VuexBasic data for storing variables
  2. getterFrom:stateDerived data when encounteredstateThe computed property of thestateData is filtered and screened
  3. mutation: Commit an updatestateMethods of data
  4. actionAnd:mutationSimilar functionality, both used to submit updates, butactionIs submittedmutation, rather than directly changing the data, andactionCan include asynchronous operations
  5. module: Modular Vuex, each module has its ownstate,mutation,actoion,getter
Mutation and Action
  • mutationFocus more on revisionstateMust be executed synchronously.
  • actionIs submittedmutationInstead of updating data directly, it can be asynchronous.
  • actionCan integrate multiplemutation

Difference between Vuex and localstory

  • VuexStored in memory, the page will close the refresh will disappear. whilelocalstorageStored locally, memory is faster to read than hard disk
  • VuexApplied to passing values between components,localstorageMainly used for transfer between different pages
  • VuexIt’s reactive,localstorageNeed to refresh

Routing guard

  • Global front hooks:beforeEach,beforeResolve,afterEach
  • Route exclusive guard:beforeEnter
  • Component inner hook:beforeRouterEnter,beforeRouterUpdate,beforeRouterLeave

Difference between Hash and history

hash

Hash mode is the default mode in VUE development. The URL in the address bar carries #, followed by route.

The principle is to use the onHashChange () event to listen for changes in the routing hash. The advantage of this is that when the hash value changes, the window can listen for changes in the event and load the corresponding code according to the rule without sending a request to the back end. In addition, changes in the hash value correspond to urls that are logged by the browser so that the browser history page can be moved forward and backward.

history

Vue also provides history mode, which has no # in the URL and looks better than hash mode. However, background configuration support is required.

History leverages the pushState and replaceState apis provided by HOStory in HTML5, which record the browser history stack without triggering a page refresh or background request when changing a URL.

Dynamic routing

Define the way
  • Params mass participation
    • Route configuration:/index/:id
    • Route jump:this.$router.push({name: 'index', params: {id: "zs"}});
    • Route parameter acquisition:this.params.id
    • The resulting route:/index/zs
  • Query the participation
    • Route configuration:/indexNormal route configuration
    • Route jump:this.$rouetr.push({path: 'index', query:{id: "zs"}});
    • Route parameter acquisition:this.query.id
    • The resulting route:/index? id=zs
$routerand$routeThe difference between
  • $routerThe entire route object can be usedthis.$router.push({name: ; index'})Jump to a page
  • $routeIs the routing object of the current pagethis.$route.parmas.idTo get the argument passed in by the current route object

The principle of knowledge

To complement…

Vue extension

To complement…

Network protocol, security related

To complement…

Browser dependent

To complement…

Performance optimization

To complement…

Front-end engineering

To complement…

Handwriting series 🤮

To complement…

Output result series

closure

var name = "The Window";varobject = {name : "My Object".getNameFunc : function(){return function(){return this.name; }; }}; alert(object.getNameFunc()());//"The Window"
Copy the code
function aaa(){
 var a=0;
 function bbb() {
  a++;
  alert(a);
 }
 return bbb
}
var ccc=aaa();
ccc();  // The result is 1
ccc();  // The result is 2
var ddd=aaa();
ddd();  // The result is 1
ddd();  // The result is 2
Copy the code

To complement…

Reference:

2021 “hf front end test questions

My preparation for the front end interview in 2021

Shock!!! Front-end 300 basic interview questions + answer, classification learning arrangement (conscience production) continue to update

Advanced knowledge