Reading Notes-01

Chapter 1, Overview

This chapter is a summary of the nature, and the author gives some examples at will.

1. Visibility = hidden, display = none.

function hide (e, reflow) {        if (reflow) {            e.target.style.display = "none";        } else {            e.target.style.visibility = "hidden";        }}

This code shows two ways to hide nodes. Display = none was the most commonly used method in projects before, and it has never been used for visibility = hidden, I still don't know the difference between this method and display = none.
Visibility = "hidden", the element is hidden, but the element is not removed from the rendering tree. It is still partially rendered, but invisible (completely transparent, only triggers repaint ).
Display = "NONE", the element will not be rendered, and the whole will be removed from the rendering tree. This will trigger reflow and repaint.
For example

Block oneblock twoblock three

Visibility = hidden

Block onehidden blockblock three

Display = none

Block onehidden blockblock three

In fact, I would like to ask why the so-called hidden method that only triggers repaint has come out of the box ...... In this case, the browser will reflow. Probably because I used the automatic width. As a result, it is much more harmonious.
Use fixed width

Block oneblock twoblock threeblock oneblock twoblock three

2. Bind events with Dom node's "on" attributes.

The simplest way to define an event for a DOM element is to bind a callback to an attribute prefixed with "on" to a DOM node. For the sake of page maintainability, this code is rarely used in normal cases when it is used together with HTML nodes.

<Div style = "border: 1px solid gray" onmousedown = "(function (node) {node. textcontent = new date (). tostring () ;}) (this); "> click my text to change </div> <Div style =" border: 1px solid gray "onmouseup =" (function(eventction{event.tar get. textcontent = new date (). tostring () ;}) (event); "> click my text to change </div>

3. addeventlistener.

The addeventlistener should be used to play more games.

<Div id = "click_node"> Click here to see </div> <SCRIPT> window. onload = function () {var node = document. getelementbyid ('click _ node'); If (node & node. addeventlistener) {node. addeventlistener ('mousedown ', function () {node. textcontent = "mouse down on node" ;}, false); node. addeventlistener ('mouseup', function (event) {node. textcontent = "Mouse up on node" ;}, false) ;}</SCRIPT>

Pay attention to several minor issues. For example, the first parameter of addeventlistener is the name of the event to be bound,All lowercaseAndNo "on" prefix. (If the old version of IE is compatible with attachevent, The on prefix must be added ). The third parameter is used to specify whether to register the linstener In the event capture stage. Generally, it is false. It is also the default action of using the binding method of element. onclick = function.

For the lifecycle of DOM events, refer to this article. Here, the article mentions that performance can be improved by blocking unnecessary event bubbles, but the event mentioned by the author. cancelbubble is not recommended (for reference). event should be used. stoppropagation () to replace this method.

 

Chapter 2 lexical structure

This chapter focuses on the lexical structure of JS programs, and there is nothing to pay special attention.

1. Javascript will think that the program code being parsed is already in this standard format and will not standardize the identifier, string, and regular expression.

For JavaScript and Unicode, I want to write another summary article. This normalization problem is sometimes annoying, especially when you need to carefully process strings. Es6 has added a new method of string. Prototype. normalize to provide this feature, which can be done by using libraries such as unorm (https://github.com/walling/unorm) (by Bjarke WAlLING ).

2. There cannot be line breaks between return, break, and continue statements and subsequent expressions.

Otherwise, program debugging is difficult. This should not be the case for normal people.

3. The suffix "++" and "--" must be the same line as the expression.

Same as above, normal people do not write ++ -- in another row.

Chapter 3: types, values, and variables

1. Javascript data types are divided into two types: primitive type and object type. Simple types include numbers, strings, booleans, null, and undefined. The rest are object types.

Note that number, string, and Boolean are class objects (Object-like) because they have some predefined methods, but they are immutable.

2. js does not distinguish between integers and floating-point numbers. All numbers are double-precision floating-point numbers, using the IEEE 754 standard. The actual operations in JS (such as array indexing and bit operations) are based on 32-bit integers.

Because it is a double-precision floating-point number, we like to see 0.1 + 0.2! = 0.3. This problem occurs in any programming language that uses binary floating point numbers.
For actual operations, such as bitwise operations that use 32-bit integers, you can use this feature to convert decimals into integers when writing code. For details, refer to this article, convert small numbers to Integers in JavaScript.
In IEEE 754, double-precision floating point numbers are defined as 1-digit characters, 11-bit level codes, and 52-bit valid digits. Because decimal places must be in the standard format, that is, to the left of the decimal point is 1, a 52-bit valid number is used to represent 53-bit information. The exact Integer Range is 2 ^ 53 ~ -2 ^ 53.

3. Nan in JS has a special feature: it is not equal to any value, including itself.

So we can see that the dojo library has such equals to make the two Nan "equal ".

function equals(a, b){    return (a === b) || ( a !== a && b !== b);}

4. the string in JS is immutable, similar to replace and touppercase, all return new strings.

In fact, the type mentioned in the first article has already been mentioned.

5. js has a "Packaging object". The simple method mentioned above is actually to create a temporary packaging object and then use the method of packaging the object. Null and undefined do not wrap objects and an error is thrown when attempting to reference any of their attributes.

Simple objects seem to have some attributes, such as "123 ". length, but tries to assign attributes to it (such as "123 ". ATTR = 4) will be ignored ("123 ". ATTR is still undefined ).

6. js will convert the packaging object to the original starting value when necessary. For example, "=" indicates that the original value is equal to the packaging object (the packaging object is converted to the original value), but "=" does not convert anything, so it does not.

The comparison (=) of the original object value will try to evaluate the original value of the object and then compare it. If two objects are compared, It will compare whether they reference the same object.

VaR A = 'A', B = 'A', c = new string ('A'); D = new string ('A'); A = B // true
A = B // true a = C // true, will convert
A = C // false, full class, etc. do not convert C = D // false, comparison of the two objects
C = D // false, no suspense

7. It is complicated to convert an object to the original value. Display conversion is simplest, such as number ("3") and object (3 ).

There are some common simple writing methods

+ X // convert X to number, which is equivalent to number (x). It can also be written as X-0, but not + X looks nice !! X // It is estimated that we have seen more, which is equivalent to boolean (X)

8. All object types of object to boolean are converted to true.

So don't be surprised. New Boolean (false) is actually converted to true.

if(new Boolean(false))   console.info("yes, new Boolean(false) is truthy");

9. object To number/string, involving the tostring () and valueof () methods, usually converted to string, tostring will be called first, if not, valueof; converted to number, the order is reversed.

10. "-" converts both of its operands to numbers. For "+", the operands of + are often converted into strings.

[1] + 1; // ”11“[1] - 1; //0new Date() + 1; //"Sun Aug 10 2014 00:20:41 GMT+0800 (China Standard Time)1"new Date() - 1; //1407601216775

11. About variables, JS does not have block-level scope, and JS is a function scope. Therefore, there is an informal title "advance declaration" (Hoisting ).

In fact, the JS script is interpreted and executed, but there is a "pre-compilation" process before the row-by-row execution. This process will put the variables declared in the context into the "stack, they do not assign undefined values, and then start to execute statements one by one.

Let's take a look at this example.

A (); function a () {console.info (1) ;}a (); function a () {console.info (2) ;}a (); A = function () {console.info (3);} A (); // output: // 2 2 2 3

12. variables declared using VAR cannot be deleted by delete, but can be attributes of objects.

Deleting a variable you declared is really unnecessary.

(Function () {var A = '000000'; console.info (a); Delete A; console.info (a) ;}) (); // output two "123"

13. Scope chain and closure.

I decided to open a separate trap.

Reading Notes-01