Eighteen, object-oriented
1. Features
Encapsulation: Encapsulates changes, so the role of encapsulation solves the scalability of the program.
Inheritance: A subclass inherits the parent class and can inherit the methods and properties of the parent class
Polymorphism: Many different implementations of an interface are called polymorphism
2. Object-oriented programming, divided into several steps?
It is divided into object-oriented analysis (OOA), object-oriented design (OOD), object-oriented programming (OOP) three major steps.
1. The first is to analyze the demand. Don't think about how to implement it with a program. First, analyze what the stable and unchanging objects in the demand are and what is the relationship between these objects.
2. Turn the requirements analyzed in the first step into an achievable, cost-effective, modular, low-coupling and high-cohesion model by further expanding the model.
3. Use an object-oriented implementation model
19. How js implements inheritance
1.call and apply implement inheritance
1. Construct the parent function and write the attribute method in the symbol function;
2. Construct the sub-function, and implement the inheritance of call and apply pair functions in the sub-function. Father.call(this,ag1,ag2);Father.apply(this,arguments)
3. The child function is instantiated and assigned to a new variable to execute the method of the parent function.
2. Class constructor inheritance in Es6
1. Construct the parent function
2. Instantiate the parent function
3.class children exdents Fathero{
constructor(id){
super(id)
}
}
4. Instantiate execution of sub-functions
3. Prototype chain inheritance
1. Construct a parent function
2. Write property methods in the parent function prototype object, constructor:Father
3. Construct a child function to assign the instantiation method of the parent function to the prototype of the child function
twenty, this
Definition: The point of this is not determined when the function is defined. Only when the function is executed can it be determined who this points to. In fact, the final point of this is the object that calls it.
Summarize:
1. Inside a normal function, this points to window
2. Inside the method, this points to the owner of the method.
3. Inside the arrow function, this points to the value pointed to by this in the environment where the arrow function was created.
4. In the object, this points to the current object
The this pointer here will change
5. This in the timer
6. this in the callback function
7. This in the event handler points to the event binder
21. 'use strict'
1. When declaring a global variable, you must add the keyword (var)
Normal mode: a = 10; console.log(a) //10
Strict mode: a = 10; console.log(a) //a is not defined
2.this cannot point to the global object
Normal mode: function fn(){ console.log(this) } //window
Strict mode: function fn(){ console.log(this) } //undefined
3. Parameters with the same name are not allowed in the function
Normal mode: function fn( a,b,b ){ console.log(a,b) }
fn(1,2,3) //1,3
Strict mode: function fn( a,b,b ){ }
//Error: Duplicate parameter name not allowed in this context Duplicate parameter names are not allowed in this context
4 arguments object is not allowed to be dynamically changed
Normal mode: function fn(a){
a=20;
console.log(a); //20
console.log(arguments[0]); //20
}
fn(10);
Strict mode: function fn(a){
a=20;
console.log(a); //20
console.log(arguments[0]); //10
}
fn(10);
5 arguments object is not allowed to be called by itself (recursion)
Normal mode: function fn(a){
if( a == 1 ){
return 1;
}
return arguments.callee(a-1) + a;
}
fn(3); //6
Strict mode: function fn(a){
if( a == 1 ){
return 1;
}
return arguments.callee(a-1) + a;
}
//报错：'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
//Error: "caller", "arguments", "callee", cannot be used in strict mode
22. JSON
Concept: The full name of JSON is "JavaScript Object Notation", which means JavaScript Object Notation, which is a text-based, language-independent, lightweight data interchange format.
Structures: There are two kinds of structures, objects and arrays.
Delivery method: back-end->front-end JSON.stringify(data) front-end processing-->JSON.parse(data)
23. DOM manipulation
1. Create a new node
createDocumentFragment() //Create a DOM fragment
createElement() //Create a specific element
createTextNode() //Create a text node
2. Add, remove, replace, insert
appendChild()
removeChild()
replaceChild()
insertBefore() //Insert a new child node before the existing child node
3. Find
getElementsByTagName() //By tag name
getElementsByName() //Pass the value of the element's Name attribute (IE has strong fault tolerance, and will get an array, including the id equal to the name value)
getElementById() //By element Id, unique
Twenty-four, new operator
1. Create an empty object, and the this variable refers to the object, and also inherits the prototype of the function.
2. Properties and methods are added to the object referenced by this.
3. The newly created object is referenced by this, and finally returns this implicitly
25. What is a complete HTTP transaction?
process:
1. Domain name resolution
2. Initiate the 3-way handshake of TCP
3. After establishing a TCP connection, initiate an http request
4. The server side responds to the http request, and the browser side gets the http code
5. The browser parses the html code, please request the resources in the html code
6. The browser renders the page and presents it to the user
Twenty-six, MVC framework
1.MVC is a type of front-end application framework widely accepted in the industry. This framework divides the application into three parts:
Model (model) is responsible for managing data, most of the business logic should be placed in the Model
View (view) is responsible for rendering user pages, and business logic should be avoided in View
The Controller (controller) is responsible for accepting user input, calling the corresponding Model logic according to the user input, handing the generated data results to the View part, and letting the View render the necessary output
2. The data flow proposed by the MVC framework is ideal. The user request reaches the Controller first, and the Controller calls the Model to obtain the data, and then hands the data to the View. However, in the actual framework implementation, the View and Model are always allowed to communicate directly
Twenty-seven, Vue project environment construction
1. Detect the version of node and npm in your computer environment (the version is too low and needs to be upgraded)
2. Install webpack npm i webpack -g
3. Install vue's scaffolding npm i vue-cli -g
4. Initialize and create the directory vue init webpack store
5. Install dependencies npm i
6. Install npm i vue-router vue-resource axios -D
7. Execute the project npm start
Twenty-eight, Vue routing
1. Concept: Routing actually means pointing. When we click the home button, the home content will be displayed on the page. When the login button is clicked, the page will display the login content. It can also be said to be a kind of mapping. There are two parts on it, one is the click part and the other is the display part.
2. There are three basic concepts in routing, route, routes, router.
1.router: it is a route, it is a singular, click the Home button -> Home content
2.routes: It is a group of routes, each route is combined and concatenated to form an array; [{home button=>home content}, {about button=>about content}]
3.router: It is a mechanism, equivalent to a manager, to manage all routes;
4. Routing principle in the client: In fact, it is the display and hiding of dom elements. When the home content is displayed on the page, all the content in about is hidden, and vice versa. There are two ways to implement client-side routing: hash-based and html5 history api.
29. VueX
vuex is a centralized state management architecture specially designed for vue.js.
1.State: A single state tree is also used as the only data source. (Storing data)
2. Getter: It can be considered as a computed property of the store. The return value of the getter will be cached according to its dependencies, and will only be recalculated if its dependencies change.
3.Mutation: The way to change the state of the store is to submit a mutation. This api is similar to an event. Each mutation will have a string event type and a callback function, and the state change is processed in the callback function.
4.Action: Similar to Mutation, the difference is that what is submitted in Action is mutation instead of directly changing the state. Action can contain any asynchronous operation
5.module: Using a single state tree, all the states of the application will be concentrated into a relatively large object. When the application is relatively large, the store will become very bloated. At this time, the story can be divided into modules. Each module has its own state, getter, mutation, action
Thirty, Vue life cycle
All declaration cycle hooks automatically bind this, so you can perform calculations on properties and methods in the hook function. (You cannot use arrow functions)
1.beforeCreate: Called before data observation and event/watcher event configuration after instantiation is initialized;
2.created: It is called immediately after the instantiation is created. At this time, the instantiation has completed the following configurations: data monitoring, operation of properties and methods, and callback of watch/event events. However, the mount has not started and the $el property is currently not visible.
3.beforeMount: called before the mount starts: the related render function is called for the first time;
4.mounted:el is replaced by the newly created vm.$el, and the hook is called after it is mounted on the instance. If the root instance mounts an in-document element, vm.$el is also in the document when mounted is called.
5.beforeUpdate: Called when the data is updated, before the virtual DOM is patched. This is suitable for accessing the existing DOM before updating, such as manually removing an event listener that has been added.
6.updata: This hook is called after the virtual DOM is re-rendered and patched due to data changes. When this hook is called, the component DOM has been updated, so you can now perform DOM-dependent operations. In most cases, however, you should avoid changing state during this time. If you want to respond to state changes, it's usually better to use a computed property or watcher instead.
7.activated:keep-alive is called when the component is activated.
8.deactivated: keep-alive is called when the component is deactivated.
9.beforeDestroy: Called before the instance is destroyed. At this step, the instance is still fully available.
10.destroyed: Called after the Vue instance is destroyed. After the call, everything indicated by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed.
11.errorCaptured:类型：(err: Error, vm: Component, info: string) => ?boolean
Called when an error from a descendant component is caught. This hook receives three parameters: the error object, the component instance where the error occurred, and a string containing information about the source of the error. This hook can return false to stop the error from propagating up.
Thirty-one, Vue routing parameters
1. Configure route {name:'user',path:'/user/:id',component:user}
2. Configure <router-link> when jumping
<router-link to="/user/123" >登录123</router-link>
<router-link to="/user/456?a=1&b=2" >登录456</router-link>
<router-link :to="{path:'/user/456?a=52&b=0'}" >登录456</router-link>
<router-link :to="{name:'user',params:{id:'456'},query:{a:1,b:2}}">登录456</router-link>
3. Get the passed parameters in the user component
Get the path to the user component {{this.$route.path}}
Get the passed id{{this.$route.params.id}}
Get the passed object {{this.$route.query}}
Thirty-two, Vue two-way binding principle
Implementation principle: Vue data two-way binding is realized by data hijacking combined with publisher-subscriber mode
Data hijacking: Vue implements data hijacking through Object.defineProperty(), in which there are get() and set methods; when the property value is read, the get() method is triggered. If the data changes in the view, A set function will be set on the property through Object.defineProperty( ), and this function will be triggered when the data changes;
process:
1. Implement a listener Observer to hijack and monitor all properties, and notify subscribers if there are changes.
2. Implement a subscriber Watcher, which can receive notification of property changes and execute corresponding functions to update the view.
3. Implement a parser Compile, which can scan and parse the relevant instructions of each node, and initialize the corresponding subscribers according to the initialization template data.
Thirty-three, virtual DOM
principle:
Virtual DOM uses JS objects to record a copy of a DOM node. When the DOM changes, the virtual DOM is used to diff first, and the minimum difference is calculated, and then the real DOM is modified.
The diff algorithm of vue's virtual dom is based on the snabbdom algorithm. Like the diff algorithm of react, it only diffs between the vnodes of the same level, recursively performs the diff of the vnodes of the same level, and finally realizes the update of the entire DOM tree.
Disadvantages of virtual DOM:
1. More code, bigger size
2. Increased memory usage
3. The cost of using virtual DOM for a small amount of single DOM modification is higher, and it is not as fast as directly modifying the real DOM