Shulou(Shulou.com)06/02 Report--

This article will explain in detail how JavaScript programming is, and the content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

Dealing with defects and errors

a. Strict mode

When strict mode (strict mode) is enabled, JS becomes more strict when executing code. Strict mode can be enabled simply by placing the string "use strict" at the top of the file or function.

b. Abnormal

1. An exception is a mechanism that can trigger (or throw) an exception when there is a problem in code execution, and the exception is just a common value. Triggering an exception is similar to a forced return from a function: the exception not only runs into the current function, but also jumps out of the function caller to the position where the current execution flow first called the function. This approach is called stack unfolding (Unwinding the Stack).

two。 The really powerful thing about exceptions is that you can set an "obstacle" on the stack that will be caught when the exception reduction stack reaches this position. Then you can do some handling of the exception and make the program continue to execute from the point where the exception was caught.

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/8.html

Regular expression

The 1.exec method returns null if the pattern cannot be matched, otherwise an object representing the matching string information is returned. Strings also have a match method

two。 The string replace, and the second argument can be used with a function

3.Compact GI g indicates the overall situation, and I denotes regardless of case.

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/9.html

Module

a. Benefits of Modul

1. The module divides the program into different code blocks according to some standards, each code as a whole.

two。 A well-designed module can provide the interface needed for external code access. A well-defined module interface ensures that the old interface remains the same after the module is updated. The interface provided to the outside should have the characteristics of unity and cohesion.

b. Use functions as namespaces

1. To prevent variables used inside the module from polluting the global namespace, we wrap the module in a function.

two。 Place the namespace function in a pair of parentheses: if the expression begins with the keyword function, it is a function expression. But if a statement starts with function, think of it as a function declaration that requires a function name, rather than an expression, that is, we cannot call the function by adding parentheses after the statement.

c. Use an object as an interface

For modules with a large amount of code, define an object and add those elements to the attributes of the object when you have defined some elements that need to be exported.

d. Separate from global scope

Construct a require function that specifies a module name when called, which loads the module file (depending on the platform we are running on) and returns the appropriate interface object

e. Execute data as code

Eval is not recommended, use new Function ("parameter name list", "function body")

f. Interface design

1. Predictability

two。 Composability

3. Hierarchical interface

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/10.html

Project practice: developing programming language

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/11.html

Document object model

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/12.html

Deal with events

a. Events and DOM nodes

AddEventListener;removeEventListener

b. Spread

1. If both paragraphs and buttons have event handlers, the most special event handler (the event handler for the button) is executed first. That is, the event propagates outward, from the node that triggered the event to its parent node, and finally to the document root node. Finally, when all the event handlers registered on a particular node have been executed in their order, the event handler of the window object will have a chance to respond to the event.

two。 The event handler can call the stopPropagation method of the event object at any time to prevent further propagation of the event.

3. You can use the target property to create a processing network for specific types of events. Event.target.textContent

c. Default action

Call event.preventDefault without performing the default action

d. Focus event

Focus and blur events will not spread!

e. Script execution timeline

1. Even though events can be triggered at any time, two scripts cannot be executed at the same time in the same document. If a script is already running, the event handler and code scheduled using other methods will make the script wait for execution.

two。 If you want to put it in the background while preventing the page from becoming unresponsive, you can use the Web Worker provided by the browser.

f. Timer

SetTimeout, executed after a certain period of time, clearTimeout

SetInterval, cyclic execution at regular intervals, clearInterval

Event frequency reduction can be carried out by using setTimeout

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/13.html

Project practice: platform games

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/14.html

Use canvas to draw

A.SVG

1. Scalable vector graphics, designed to describe graphic documents rather than text documents, saves a description of basic information about chat poaching, and the image can be moved or modified at any time.

B.canvas element

1. "2d" for drawing two-dimensional graphics and "webgl" for drawing three-dimensional graphics through openGL interface

2.filleStyle determines how the drawing is filled.

3.strokeStyle and lineWidth are used to control how lines are drawn

4.fillRect and strokeRect to draw the rectangle

5.fillText and strokeText draw text

6.beginPath creates a new path, and the lineTo method draws a straight line. When the path is finished, you can use fill fill or stroke to outline the outline.

7.drawImage moves pixels from one picture or another to our canvas

8.translate, scale and rotate transform graphics. The state of a transformation can be saved by save and restored by restore.

9.clearRect can clear a part of the canvas when drawing an animation

c. Select Image Interface

1.SVG can be used to make images that can be scaled at will but still clear. It's harder to use than simple HTML, but it's more powerful.

two。 The canvas pixel-based approach has the advantage of drawing a large number of small elements, not building new data structures but simply repeatedly drawing on the same pixel, making the canvas have a lower consumption on each graphic.

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/14.html

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/15.html

Overview of HTTP Protocol

A.XMLHttpRequest object

B.HTTP sandbox

Access-Control-Allow-Origin:* is included in the request header to tell other domain names that it is OK to send the request.

C.Promise assertion

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/16.html

Forms and form fields

a. Focus

The value in document.activeElement is associated with the currently focused element. Focus is controlled by focus and blur methods

b. A form as a whole

1. When a domain is contained in an element, its DOM element has a form attribute that points to the DOM element of form, and the element has an elements attribute that contains a collection similar to data that contains all the fields.

The 2.submit method can call the preventDefault of the event object to disable the default behavior

c. Text field

The selectionStart and selectionEnd properties contain information about the cursor and the selected text. When no text is selected, the values of the two properties are the same, indicating the information of the current cursor. When a part of the field is selected, the two values of your attributes will be different, indicating the start and end position of the text.

d. Select domain

Multiple can be multi-selected, size is used to set options that can be displayed at the same time, set 3 to display 3 lines, regardless of multiple. Fields have options properties similar to arrays

e. The client saves data

LocalStorage and sessionStorage,sessionStorage will end when the browser is closed

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/17.html

Project practice: drawing program

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/18.html

Node.js

A.node command

1. The variable process is a global variable in Node that provides the process.exit method (to end the process) and process.argv (to get the command line arguments passed to the script).

two。 Browser-related features, such as document and alert, do not exist in node

3. The global scope object is called window in the browser and global in Node

b. File system module

1.fs:readFIle (), writeFile (), readdir () return the files in the directory as a string array, the stat function is used to get file information, rename is used to rename, and unlink is used to delete

Many functions in the 2.fs module have two variants of async and synchronization. For example, the synchronization function of readFile is readFileSync.

c. Flow

1. Writable streams: all writable streams have a write method that can pass a string or Buffer object. The end method of a writable stream is used to close the stream, and if the line sets a parameter, the method outputs a specified piece of data before closing the stream. Both methods can use a callback function as an additional parameter, and the user-specified callback function is called when the data is written or the stream is closed.

two。 Readable stream: the data event is triggered each time the data arrives, and the end event is triggered at the end of the stream.

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/19.js

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/19-1.js

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/19-2.js

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/garble.js

Project practice: skills sharing website

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/router.js

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/20.js

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/public/

JavaScript and performanc

1. Performance Analyzer: Profiler of Chrome

two。 Function inline: function inline recalls the speed of code in many ways. At the machine level, functions and methods need to be called using certain protocols.

3. Cross-compilation: when a hotspot function is compiled, it has been executed many times. If the same function is called every time during these executions, it makes sense to inline the function.

4. No JS engine can inline forEach calls. Traditional for loops can be used instead of forEach

5. Why are objects so expensive? One is that the engine needs to find a location to talk to, and the other is that the engine needs to see separately that the v chemical composition is no longer needed globally and should be garbage collected. Chrome uses a generational garbage collection mechanism (Generational Garbage Collection)

6. If you want a piece of code to execute fast enough, it's best to keep the type consistent.

Https://github.com/zhangyue0503/html5js/blob/master/eloquentjs/21.js

About how JavaScript programming is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.