preface
Recently, I re-read the Little Red Book and found a lot of details that I hadn’t noticed before. In addition, I read a lot of sutras for some time before, and I also have some understanding of the high-frequency test points I like to take part in the interview. So I plan to write a series of intensive reading of the Little Red Book, combining the knowledge points in the book with the questions on the surface, and sharing some articles containing the expanded knowledge points.
Mind mapping
Chapters focus on
Chapter 1 convention is a brief introduction and historical review.
1. Historical Review & ECMAScript
About history, there is generally no technology-related examination point, can only say that the knowledge system is more perfect (more idle).
However, there is one point to note: we generally refer to ES as ECMAScript, and its relationship with JavaScript can be said to be the relationship between standards and concrete implementation. In 1997, as the gap between Netscape and Microsoft’s JavaScript implementations grew, ECMA created a standard specification, ECMA-262, to define the basic specification that the language should have.
For example: there was no hand-scratched cake in the market, but later a snack stall owner created hand-scratched cake, and others imitated it after seeing it, but there were more or less some differences, and it was not clear who was authentic and who was correct. So the market regulator lays down the rules: an egg must be added, what must be used, and so on. And then people disagreed, but they were able to try to talk about standards rather than trying to go their own way, confusing people about what the pie was.
The standard for hand-made cakes has changed constantly. For example, the original rule was that only eggs could be used for hand-made cakes. Later, duck eggs were considered necessary, so the market supervision Bureau also updated the standard. ECMAScript is constantly updating its own version. Two of the more important release nodes right now are ECMAScript Version 3 (which is the upper limit of IE8 support) and ECMAScript Version 6, or ES2015 (which offers a lot of new methods and huge updates).
Ruan yifeng’s ES6 course is recommended here
Because of the standard, people can try to make their own cookies besides buying the ones sold by big stores. ECMA considers that an ecMAScript-compliant language implementation needs to have the following characteristics:
- Supports syntax, types, statements, keywords, reserved words, operators, and global objects proposed by ECMA-262.
- Supports Unicode character standards
There is, of course, more to come from this, which can be understood as XXX extends ECMAScript
2. DOM & BOM
As mentioned earlier, the relationship between ECMAScript and JavaScript is one of standards and implementations. But there are other components of JavaScript, which are DOM and BOM. So we can say that JavaScript consists of three parts:
- ECMAScript: core
- DOM: Document object model
- BOM: Browser object model
DOM and BOM are introduced in detail in later chapters, so this chapter will simply enumerate them.
DOM
DOM, as its name suggests, is for documents, and when put in the front end domain, it means HTML documents. The DOM simply abstracts the entire HTML page into a set of hierarchical nodes, forming a document tree.
What is a document tree? HTML is made up of tags with clear nesting relationships: for example, li tags are nested in ul tags. The relationship is represented in a tree as parent and child. As shown in the following two figures, the HTML page in Figure 1 can be processed as the document tree in Figure 2.
So why do we need a document tree? One reason is the ability to better display the relationships between nodes (or tags). For example, an API in DOM: XXX. ChildNodes can obtain an array of classes of the childNodes of the XXX tag. This parent-child relationship depends on the hierarchical representation of the tree.
Like ECMAScript, DOM is constantly upgraded and can currently be divided into three stages: Levels 1 through 3. See knowledge mapping for detailed function realization. I won’t cover them all here, because Chapter 13 will also be devoted to DOM.
BOM
BOM is also, as the name implies, something to do with browsers. And indeed, what the browser does other than display the page, and what the browser provides itself (and therefore is specific to the browser implementation), is called a BOM.
Common BOM operations such as Location relate to network routing and screen relate to screen display.
As mentioned above, a lot of BOM operations are browser-specific, so there are growing differences. With ECMAScript, we could have guessed that there would be a unified BOM as well. HTML5 overlays many BOM operations to form the standard. So you need to pay attention to these BOM operations when learning HTML5.
conclusion
This chapter is a general introduction. The points introduced are summarized. I personally think the knowledge points need to be mastered are as follows:
- ECMAScript Key version
- JavaScript Components (ECMAScript, DOM, BOM)
In fact, we can see from this chapter that front-end technology as a whole is a trend toward standardization: Different JS implementations at Netscape and Microsoft led to ECMA-262; Different implementations of BOM operations in different browsers result in HTML5 overwriting BOM operations. Technology evolves, creating a flourishing but chaotic landscape, then standards step in, generalize what’s good and improve the user experience.
As a common front-end, we may not be able to lead the development of technology or even the formulation of standards, but we can try our best to write codes that meet standards and learn excellent programming ideas. This is also the biggest benefit of MDN documents, read more source code ~
Interview related articles
BOM and DOM module summary
This section describes the common BOM and DOM knowledge points that may be tested.
Crack the front-end interview (80% fail series) : Start with DOM
The extension from a very basic operation of DOM to performance optimization and algorithm-related shows a scenario that can be mined in an interview.