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

This article shows you what is the secret book of JavaScript, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

First, enter the ninja world

a. The JavaScript library to be explored

1.jQuery 、 Prototype 、 Yahoo!UI 、 base2

two。 Part of a JS library

Advanced use of JS language

Careful construction of cross-browser code

Best practice applications that can bring people together at present

b. Understand the JavaScript language

1. Objects, functions, closures

2.with, eval ()

3. Timer, regular expression

c. Considerations across browsers

1.IE7 、 8 、 9,chrome,firefox,safari 、 opera

d. Current best practices

1. Test: self-implemented assert () function

two。 Performance analysis.

3. Dispatching skills

Equip yourself with testing and debugging

a. Debug code

1.console.log ()

two。 Breakpoint

b. Test case generation

1. Excellent test cases: reusability (repeatability), simplicity (simplicity), independence (independence)

two。 Deconfiguration test cases (deconstructive test cases) are created when weakening code isolation problems to eliminate any inappropriate problems.

3. The constructive test case (constructive test cases) starts with a well-known streamlined scenario and builds the use case until we can recreate the bug

c. Testing framework

1.QUnit

2.YUI Test

3.JsUnit

4.JUnit 、 TestSwarm

d. Test suite basics

1. Assertion: receives the value of an assertion and a description indicating the purpose of the assertion

two。 Test group: a test group may represent a set of assertions

e. Asynchronous test

1. Combine assertions that depend on the same asynchronous operation into a unified test group

two。 Each test group needs to be on a queue and run after the other test groups have finished running.

Third, function is the foundation

a. The uniqueness of the function

1. Function is the first type object

They can be created literally.

They can assign properties to all variables, arrays, or other objects.

They can be passed to the function as arguments

They can be returned as the return value of the function

They can have properties that are dynamically created and assigned

two。 Event polling of the browser

Events are rotated into an event queue (first-in, first-out list [FIFO]) when triggered, and the browser will then call the handlers (handler) that have been established for these events.

Browser event polling is single-threaded (single-threaded)

3. Callback concept

When we define a function to be executed later, whenever it is defined, executed in the browser or elsewhere, we define what is called a callback. We define a function so that some other code can call it back at the appropriate time.

The functional feature in 4.js allows us to create a function as an independent entity just like any other type, and pass it as an argument to another method like any other type, and this method can receive the function as a parameter, just like any other type of parameter.

b. Function declaration

1. Functional digital face value

Function keyword

Optional name

Inside parentheses

Function body

two。 Scope and function

The scope of a variable declaration begins where it is declared, ends at the end of the function, and has nothing to do with code nesting

The scope of a named function means that the entire function scope of the function is declared, independent of code nesting (mechanism promotion)

For a scope declaration, the global context is like a very large function that contains all the code on the page

c. Function call

1. Function call

Call as a function

Call as a method, call on the object, support object-oriented programming

Call as a constructor to create a new object

Called through the apply () or call () method

two。 From parameters to function parameters

If the actual number of parameters passed is greater than the number of formal parameters declared by the function, the excess parameters will not be assigned the formal parameter name.

If the number of formal parameters declared is greater than the actual number of parameters passed, the formal parameters that have no corresponding parameters will be assigned to undefined

The arguments parameter is a collection of all parameters passed to the function, has the length attribute, has no other array methods, and is a class array structure.

The this parameter refers to an object implicitly associated with the function call, which is called the function context (function context).

This in js depends on the way function is called.

3. Call as a function

A function is considered to be called "as a function" if it is not called as a method, constructor, or through apply () / call ()

This usually occurs when a function is called with the () operator, and the expression with the () operator applied does not take the function as an attribute of the object

The context of the function is the global context-- the window object

4. Called as a method

When a function is assigned to a property of an object and is called using the property that references the function, the function is called as a method of the object

When a function is called as a method (method) of an object, the object becomes the function context and can be accessed inside the function as a this parameter

5. Called as a constructor

To call a function as a constructor, we will use the new keyword before the function call

6. The superpower of the constructor

Create a new empty object

The object passed to the constructor is the this parameter, which becomes the functional context of the constructor

If there is no explicit return value, the newly created object is returned as the return value of the constructor

7. Constructor coding considerations

Function and method names usually start with verbs and begin with lowercase letters; constructors are usually nouns that describe the object being constructed, starting with uppercase letters

The constructor makes it easier to create multiple objects using the same pattern without having to repeat the same code over and over again. General code, as the constructor of the constructor, only needs to be written once

8. Call using the apply () and call () methods

To call the function through the function's apply () method, we pass in two parameters to apply (): one is the object as the function context, and the other is an array of function parameters. The call () method is used in a similar way, except that the argument passed to the function is a list of arguments rather than a single array

Which one do you choose? Use whichever method can improve the clarity of the code, and if there are many irrelevant values in the variable or are specified as literals, you can pass it directly as a parameter list using the call () method. But if these parameters are already in an array, or if they are easily collected into an array, then apply () is a better choice.

Fourth, waving function

a. Anonymous function

1. Typically, the use of anonymous functions is to create a function for later use. For example, save an anonymous function in a variable as a method of an object, or use an anonymous function as a callback

two。 Functional programming focuses on: less, usually no side effects, using functions as the basic building blocks of program code

b. Recursion

1. Inline function (inline function), the object method gives the function a name.

two。 Recursive reference

Refer to by name

Reference as a method

Refer to by inline name

Referenced through the callee property of arguments

c. Treat a function as an object

1. Cache memory

The end user enjoys a performance advantage when the result is calculated before the function call.

It happened behind the scenes, completely seamless.

Any type of cache is bound to sacrifice memory in order to improve performance

It is difficult to test or measure the performance of an algorithm

d. Variable length parameter list

1. The length property of the function

From its length property, you can know how many named parameters are declared

Through arguments.length, you can know how many parameters are passed in during the call

two。 When a function is called, we execute methods on the current object that the object does not have by controlling the context of the passing function. With this technology, you can use existing methods like Array and Math to operate on custom data.

3. Overloading only applies to a different number of parameters, but does not distinguish between types, parameter names, or other things

e. Function judgment

1. You can determine whether the result is function by calling the typeof operator on the object, but there is a cross-browser problem

5. Closure

a. How closures work

1. A closure is a scope that is created when a function allows its own function to access and manipulate variables other than its own function. Closures allow functions to access all variables and functions, as long as they exist in the scope in which the function is declared.

two。 The declared function can be called at any later time, even after the scope of the declaration disappears

3. Three concepts about closures

The parameters of the inner function are contained in the closure

All variables outside the scope, even those after the function declaration, are included in the closure

Variables that have not been declared cannot be referenced in advance within the same scope

b. Use closures

1. Private variables: limit the scope of variables

two。 Callback (callback) and timer (timer)

3. When the function is executed in the closure, you can not only see the values of these variables at the time the closure is created, but also update it. The closure is not a snapshot of the state at that point of creation, but a real state encapsulation. As long as the closure exists, it can be modified.

c. Bind function context

1.bind () is not an alternative to apply () and call (). The underlying purpose of this method is to control the context of subsequent execution through anonymous functions and closures. This important difference makes it particularly helpful for apply () and call () to delay callbacks for event handlers and timers

d. Partial application function

1. "partial application" A function that can pass in some functions before the function is called. In fact, the partial application function returns a new function with preprocessing parameters so that it can be called later.

two。 This technique of filling several parameters in a function first (and then returning a new function) is called currying.

e. Function overload

1. Each function has its own context so that the context can be made part of the closure

two。 If you use closures too much to modify the logic of a function, it will make the function unexpandable.

f. Real time function

1. (function () {}) (), the first set of parentheses is only used to delineate the scope of the expression, while the second set of parentheses is an operator, no matter what is in the first set of parentheses, it is supported as a reference to the function.

two。 Execution process

Create a function instance

Execute the function

Destroy the function

3. Because the function is executed immediately, all its internal functions and all variables are limited to its internal scope. The data state can be stored.

4. In JS, the scope of a variable depends on the closure of the variable

5. The closure remembers the reference to the variable-- not the value of the variable when the closure was created

VI. Prototype and object-oriented

a. Instantiation and prototyping

1. Prototypes allow us to predefine properties, including methods, which are automatically applied to new object instances

two。 The binding operation within the constructor always takes precedence over the binding operation on the prototype. Because the this context of the constructor points to the instance itself, we can initialize the core content within the constructor

3. When querying attribute references, the object itself is first queried, and if it does not exist, it is found on the prototype.

b. Difficult trap

1. Do not extend the native Object.prototype, use hasOwnProperty to determine whether the property is on the object instance or on the prototype chain

two。 Do not expand the number

7. Regular expressions

a. Regular expression advance

1. During development, if the regularity is known, the literal syntax is preferred, while the constructor approach is used to build regular expressions by dynamically building strings at run time.

b. Compile regular expressions

1. Each regular expression has a separate object representation: each time a regular expression is created, a new regular expression object is created for it.

c. Capture matching fragments

1. In the case of a global regular expression, match all possible matching results, not just the first matching result, and the returned array contains the global matching result

The 2.exec () method can make multiple calls to a regular, and each call can return the next matching result.

3. To keep a set of parentheses from capturing the result, the syntax of the regular expression allows us to add a?: tag (passive subexpression) after the opening parenthesis.

d. Use function to replace

The most powerful feature of 1.replace () is that it can accept a function as a replacement value, parameters: matching full text, matching capture, matching character index in the source string, source string

Taming threads and timers

a. Minimization of timer delay and its Reliability

1. Browsers do not guarantee the delay interval we specify, although we can specify a specific delay value, but its accuracy is not always guaranteed, especially when the delay value is very small.

Ninja gold touch: run time code evaluation

a. Code evaluation mechanism

1. Using eval () method to evaluate

This method executes the string of the incoming code and returns the execution result of the last expression in the passed-in string

Code evaluation is performed in the scope where the eval () method is called

Anything that is not a simple variable, original value, or assignment statement needs to be wrapped in parentheses.

The scope of the evaluation is the scope of the call to eval ()

two。 Evaluate with a function constructor: no closures are created

3. Evaluate with a timer

4. Evaluation in global scope: put the code to be executed in a dynamic tag and inject the tag into the document. The common scenario is the code returned from the server.

5. Secure code evaluation: no solution, Google Caja

b. Function decompilation

1. Executed by the function's toString () method

c. Actual combat of code evaluation

1.JSON conversion

two。 Move the definition code within the namespace

Minimization and obfuscation of 3.JS Code

4. Dynamic code rewriting and injection

5. Create a metalanguage

10. With statement

What happened to A.with?

The 1.with statement creates a scope in which the prefix is not used when referencing the properties of a particular object.

two。 In the scope of the with statement, the priority of the object attribute is absolutely higher than the variable of the same name defined in the higher-level scope, and the meaning of the code in the scope may be ambiguous.

3. It degrades the execution performance of the included JS code

Develop a cross-browser strategy

a. Five major development concerns

1. Bug of the browser

two。 Browser bug repair

3. Coexist with external code

Encapsulation code

Dealing with less typical code

Avoid populating attributes: hasOwnProperty ()

Greedy ID replication

Style sheet sorting

4. Missing function

Graceful demotion

Backward compatibility

5. Regress

b. Implementation strategy

1. Secure cross-browser fixes: no negative effects or side effects for other browsers; no browser detection or feature detection is required

two。 Object detection: determines whether an object or an object's attribute exists, and if so, assumes that it contains implied functions, often used to choose between multiple API that provide repetitive functionality.

3. Feature simulation: ensure that features work as expected, providing a backup operation for browsers that do not work as expected

4. Undetectable browser problem

Event handling binding

Event trigger

CSS attribute effect

Inconsistent API

API performance

AJAX problem

c. Reduce hypothesis

1. Efforts should be made to reduce the assumptions made, effectively reduce the possibility of mistakes, and the possibility of problems that will attack us behind our backs.

Insight into features, attributes and styles

A.DOM property and DOM property

1. Attribute: div.id, property: div.getAttribute ("id")

two。 Attributes and properties need to be considered

Cross-browser naming

Naming restriction

The difference between HTML and XML

Behavior of custom properties

Performance considerations: attributes are faster than properties

b. Cross-browser attribute problem

Id/name inflation in 1.DOM: the input element in the form overrides the form's attributes when using id and action as id

2.URL normalization: when accessing the same property that references URL (href, src, or action), this URL value automatically converts the original value to the full canonical URL

3.style characteristics

4.type feature: type cannot be modified in IE

5.tab index problem: if you do not explicitly set tab index, you cannot get the tab index of an element

6. Node name: all nodeName returns in uppercase in HTML, and normal in XML or XHTML

c. Troublesome styling features

1. Style attribute naming: converts styles in CSS to hump format

2.float style: IE uses styleFloat, others use cssFloat

3. Measure the height and width of elements: offsetHeight (), offsetWidth (), including border, padding

d. Get calculation style

1.window.getComputedStyle ()

XIII. Events of not getting old

a. Bind and unbind event handlers

1.addEventListener () and removeEventListener (), using attachEvent () and detachEvent () before IE9

b. Management of handlers

1. Centralized storage of relevant information: saving all data on a centralized object can avoid potential memory leaks in IE browsers

two。 Manage event handlers

c. Event trigger

1. One of the advantages is that we can create as many as we want, and these handlers are completely independent.

two。 Custom events simulate the experience of real events without the support of the underlying events of the browser

d. Bubble and entrustment

1. Delegation means that an event handler is defined at the top of the DOM, not on the element that triggers the event.

14. DOM operation

1. Injecting HTML text fragments into the innerHTML attribute of a temporary element is a quick and easy way to convert HTML text strings into DOM elements

15. CSS selector engine

A.W3C Selectors API

1. Use querySelector () and querySelectorAll ()

two。 When executing an element-level query, the selector only checks whether the last part of the selector is included in the element

b. Use XPath to find elements

c. Pure DOM implementation

1. Backward compatibility, moderate speed, full coverage

What are the JavaScript secret books? have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.