JavaScript Design patterns and development Practices reading notes (1-3 chapters)

Chapter I object-oriented JavaScript application of 1.1 polymorphism in object-oriented design

The fundamental benefit of polymorphism is that you don't have to ask the object "What type you are" and then invoke an object's behavior based on the answer you get--you just invoke the behavior, and the rest of the polymorphism will take care of it.

In other words: the most fundamental function of polymorphism is to transform the conditional branching statements into the polymorphism of the objects, thus eliminating these conditional branching statements

Example: Suppose there is a map application, each map API provider provides the show method, which is responsible for displaying the map on the page, first we implement a calling method with some branch conditional statements Rendermap

At this point, once you need to increase the search for the application of the map, you must change the Rendermap function, continue to pile up the branch conditional statement

We have to abstract the same part of the program, which is to show the entire map

At this point, even if the search for a map is added later, Rendermap does not need to make any changes

1.2 objects will remember its prototype.

In terms of the real implementation of JavaScript, it is not possible to say that the object has a prototype, but only that the constructor of the object has a prototype, and the phrase "delegate the request to its own prototype" is a better way of saying that the object is delegating the request to its constructor prototype,

The JavaScript object passes the request to its constructor with a hidden property called _proto_, and the object's _proto_ will point to its constructor object, in fact, _proto_ is the link between the object and the object constructor prototype .

1.3 If the object cannot respond to the request, it will delegate the request to its constructor prototype

When an object requires the ability of a to borrow object B, you can selectively point the prototype of object A's constructor to object B to achieve the purpose of inheritance

• First, try to traverse all the properties of object A without finding the Name property
• The request to find the Name property is delegated to the constructor prototype of object A, which is a._proto_ logged and points to A.prototype, and a.prototype points to obj.
• The Name property was found in object obj, and its value was returned

When we expect a "class" to inherit from another "class" effect, we tend to use the following method

Chapter II This, call and apply 2.1 The point of this

The point of this can be broadly divided into the following 4 types:

• Method invocation as an object
• Called as a normal function
• Constructor call
• Function.prototype.call or Function.prototype.apply call ( dynamic adaptation of the incoming function ofthis)

Example: Inside the div node event function, there is a local callback method, callback when called, the internal this will point to the window

And we want it to point to the DIV node, you can save a reference to the DIV node with a variable

The difference between 2.2 call and apply

Apply accepts two parameters, the first parameter specifies the pointer to the this object in the body of the function, the second parameter is an indexed collection, can be an array, or it can be a class, and the Apply method passes the elements in the collection as arguments to the called function

Call incoming parameters are not fixed, the first also represents the function body this point, the second parameter starts, each parameter is passed into the function sequentially

JavaScript doesn't care about the difference between formal parameter arguments and order, and JavaScript internal parameters are represented by an array, so apply more often, we don't have to worry about how many parameters to pass to the function, just a brain push over it.

If we know exactly how many parameters the function accepts and want to see the relationship between the formal parameter and the argument at a glance, you can also use call to transfer the parameter

Chapter III Closure and the life cycle of high-order function 3.1 variables

Assuming there are 5 div nodes on the page, we loop to bind the onclick event to each Div, follow the index order, click the first div to pop up 0, click the second div to pop up 1, and so on, the code is as follows:

But since the onclick is asynchronous, when the event is triggered, the for loop has already ended, at this point I is already 5, so the output has been 5, the solution is to close each loop I, when in the event function in the chain from inside to outside to find I, will first find the enclosed in the closure environment of I

3.2 Package Variables

Encapsulate variables that do not need to be exposed to global variables as private variables, enclosing them inside the function, and reducing the global variable in the page

A variable or function enclosed inside a function is executed only once when the enclosing function is initialized, and every subsequent call to the function will no longer execute the code enclosing it inside the function, which is one of the great benefits of closure.

3.3 Closures and object-oriented design

Often the idea of object-oriented can be implemented with closures, and first look at the code associated with closures:

If you change to an object-oriented notation, it is:

3.4Higher order functions

a higher order function is a function that satisfies at least one of the following conditions:

• function is passed as a parameter
• function as return value output

1function is passed as a parameter

Extract some hard-to-reuse code and pass in the handler function in the form of a callback function, such as

the use of Array.prototype.sort can be seen, our purpose is to sort the array, this is the invariant part, and the use of what rules to sort, this is a variable part of the variable part encapsulated in the function parameters, dynamic incoming

3.5 Functions of curry (function currying)

Currying is also called partial evaluation, a currying first will accept a parameter, after accepting this parameter, will not be immediately evaluated, but continue to return another function, just passed in the function of the argument is saved in the closure, until the function is really need to evaluate the time, All parameters passed in before will be evaluated at once

First of all, the realization of a currying function is convenient to understand its thought

Then look at a generic function currying () {}, which functions currying () {} accepts a parameter, which will be currying

3.6 Function Throttling

Assuming that the probability of a function being triggered is very high, it is necessary to take some function throttling to implement

3.7 Ticks function

Some functions require user invocation, but because of some objective reasons, these functions can seriously affect page performance, for example, we want to load the DOM node in a short time to the page, the solution to this kind of problem is to use the Timechunk function to make the work of creating nodes in batches, For example, 1 seconds to create 1000 nodes, instead of creating 8 nodes every 200 milliseconds

The Timechunk function accepts 3 parameters, the first parameter is the data used to create the node, the second parameter is the function that creates the node logic, and the third parameter represents the number of nodes created per batch

3.8 Lazy Load function

For example, we need a addevent function to bind time in the browser.

The disadvantage of this function is that it executes the IF condition branch in each time it is called.

The second option is to execute a judgment when the code is loaded, so that the addevent wraps the correct logical function, the code is as follows

But there is still one drawback to this function, assuming that we have not used the Addevent function from beginning to end.

The third option is to use the lazy loading scheme, the first time you enter the conditional branch, the function will be overridden inside the function, the rewritten function is what we expect the Addevent function, the next time we enter the Addevent function, Addevent does not exist those branch judgment

JavaScript Design patterns and development Practices reading notes (1-3 chapters)