preface

The little Red Book series as one of the most front-end entry books, in the minds of many front-end has quite high status. I ordered the fourth edition soon after I knew it was coming out. However, from the purchase to the first reading, it took more than a month and almost two months. It took me more than half a month to complete the first draft of my book notes.

In the spirit of writing reading notes to the mentality of this period of time to chew the red brick record to share. This article will be discussed through the comparison with the previous version, recommended reading order, advantages and disadvantages. By the way to the limited personal level for everyone to make some reading suggestions ~

Differences from 3rd Edition & demining before reading

  1. The previous edition was written by Nicholas C. Zakas (main open source works & books: ESlint, JavaScript Advanced Programming: 3rd Edition, ES6). Due to a medical condition of the previous author (lyme disease), this edition was written by Matt Frisbie;

  2. Compared with the previous edition, the ES Grammar edition of the book has been updated to the ES2019 edition, which is dominated by ES6 and adds new proposals until TC39 passes in 2019. In some cases, the new grammar is used and the old grammar is compared;

  3. The structure of the book is somewhat fragmented, but the overall structure of the book is in the order of ECMAScript -> BOM & DOM -> Web Api.

  4. Missing the advanced Skills section (chapter 22 of the previous edition), which is broken up into other chapters in the book;

  5. As an early edition of a new book, there are some typographical errors and some of the contents of the electronic and paper editions do not match. The former publisher is also sorting out the corrections submitted by readers to adjust the contents of the second edition of the book, believing that there will be fewer errors in the second edition.

  6. In order to prevent piracy, the publishers only put the contents of the appendix in the electronic edition, so there is no appendix in the paper edition;

  7. Translation problems, the Chinese translation of Promise, Web Worker and other words will cause controversy among some readers. (Mainly because of state requirements for publication.) ;

On November 23, 2010, the Notice of the General Administration of Press and Publication on Further Regulating the Use of Characters in Publications clearly requires that “foreign names, place names and other proper nouns as well as scientific and technological terms should be translated into the standard Chinese language in accordance with relevant regulations. “The National Committee for examination and Approval of Scientific and Technological Terms (http://www.cnctst.cn/) is the body responsible for examination and approval, publication and promotion of standardized scientific and technological terms in China. The committee operational term “online” (http://www.termonline.cn/) is available for the general technology translator online query specification of terminology translation.

Reading Order suggestions

Why make a reading order recommendation? Let’s take a look at the little Red book table of contents.

Chapter 1 What is JavaScript 1 Chapter 2 JavaScript in HTML 11 Chapter 3 Language Basics 21 Chapter 4 Variables, Scopes, and Memory 83 Chapter 5 Basic Reference Types 103 Chapter 6 Set Reference Types 136 Chapter 7 Iterators and Generators 183 Chapter 8 Objects, Classes, and Object-oriented Programming 205 Chapter 9 Proxies and Reflection 266 Chapter 10 Functions 287 Chapter 11 Scheduling and Asynchronous Functions 322 Chapter 12 BOM 361 Chapter 13 Client Detection 382 Chapter 14 DOM 401 Chapter 15 DOM Extension 445 Chapter 16 DOM2 and DOM3 460 Chapter 17 Events 490 Chapter 18 Animation and Canvas Graphics 549 Chapter 19 Form Scripts 581 Chapter 20 JavaScript API 609 Chapter 21 Error handling and debugging 675 Chapter 22 Handling XML 694 Chapter 23 JSON 703 Chapter 24 Network Requests and Remote Resources 711 Chapter 25 Client Storage 751 Chapter 26 Module 772 Chapter 27 Worker Threads 791 Chapter 28 Best Practices 842 Appendix AES2018 and ES2019 (Turing Community Download) Appendix B Strict Mode (Turing community download) Appendix CJavaScript libraries and Frameworks (Turing community download) Appendix DJavaScript Tools (Turing community download)Copy the code

In fact, for the development of children with reading compulsion at the same time, the beginning of contact with thick technical books is through hard reading in the past. This will appear the book is too thick to read to forget the front, or read some and then abandoned pit of the situation (do not exclude can eat hard big guy). Therefore, the reading suggestions put forward here are based on different conditions of students, hoping that through this reading order can help you to obtain knowledge from the book more efficiently.

Based on my current reading experience, THE book is divided into the following modules:

For beginners with zero foundation

To be honest, the new Little Red Book is not a very suitable first js tutorial for beginners. Beginners are more likely to recommend the head First series, which is illustrated and easy to understand, or choose the first 10 chapters of the Rhino Book as a primer.

The first stage: 1 ~ 6 chapters (belong to the language history and grammar foundation, here can read, demo must follow the percussion);

The second stage: 7~11 chapters, 15, 16, 20, 21, 26, 28 (this part belongs to the js primary advanced part);

Stage 3:12, 14, 17, 23, 24, 25 (after this stage, you can already type many demos and develop Web pages);

Js base readers

Option 1: Chapters 4-12 (optional reading 13), 14-17 (optional reading 18 and 19), 20, 21, 24, 25, 26, 28 skip the basic grammar, and skim the other chapters not mentioned above.

4, 8, 10, 11, Appendix A/B are recommended for intensive reading. This part systematically explains two important chains in JavaScript: scope chain, inheritance chain, closure, object-oriented programming, asynchronous function, strict mode and so on. Optional reading: Chapter 24. This part is suitable for students whose knowledge of network requests is still in XHR and who have not known fetch;

For those with basic programming skills who do not know JS:

1 ~ 10 chapters, 20, 11, 24, 28, 26 (optional reading of other parts);

Next if you want to do:

  • The research in node direction can be selected from the chapters of the mind map of middle and advanced concepts and B/C network request & data.
  • Research in the direction of Web can choose to read browser, B/C network request & data;

Applicant summary

Jing points

Amazing: This is how I describe it: when you see it, you feel like it’s worth the price of your ticket.

  1. The chapter on objects, Classes, and Object-oriented programming addresses many of the concepts of class inheritance, and incorporates the concept of prototype chains into the chapter to say that this is

You can use a proxy to customize object or prototype object changes. In the book and video demo, you can see examples of adding array elements by adding a proxy to an array instance

// Observe all operations on Array A by proxy
var a = new Proxy([], Reflect.ownKeys(Reflect).reduce((handlers, key) = > { 
    handlers[key] = (. args) = > {          
      console.log(key, ... args)return Reflect[key](... args) }return handlers  
}, {}))  
a.push(1)

/** get [] push [] get [] length [] set [] 0 1 [] getOwnPropertyDescriptor [] 0 defineProperty [] 0 { value: 1, writable: true, enumerable: true, configurable: true } set [ 1 ] length 1 [ 1 ] getOwnPropertyDescriptor [ 1 ] length defineProperty [ 1 ] length { value: 1 } */
Copy the code

(By the way, this feature is not yet flexible enough to be used in small programs. See details.)

  1. 8.4.4 describes the use of class mixing modereduceThe mixin + asynchronous case is very neat and elegant;
class Vehicle {}

let FooMixin = (Superclass) = > class extends Superclass {
  foo() {
    console.log('foo'); }};let BarMixin = (Superclass) = > class extends Superclass {
  bar() {
    console.log('bar'); }};let BazMixin = (Superclass) = > class extends Superclass {
  baz() {
    console.log('baz'); }};function mix(BaseClass, ... Mixins) {
  return Mixins.reduce((accumulator, current) = > current(accumulator), BaseClass);
}
// Here you can see the main ideas and skills of programming, can learn is earn

class Bus extends mix(Vehicle.FooMixin.BarMixin.BazMixin) {}

let b = new Bus();
b.foo();  // foo
b.bar();  // bar
b.baz();  // baz
Copy the code

  1. The h5 API/XML/JSON section in the second half of the book is decoupled and easier to read than the previous version.

  2. The execution order of await + promise cases in asynchronous functions is well Demo described;

// Print "foo" asynchronously
async function foo() {
  console.log(await Promise.resolve('foo'));
}
foo();
// foo
　
　
// asynchronously print "bar"
async function bar() {
  return await Promise.resolve('bar');
}
bar().then(console.log);
// bar

// Print "baz" asynchronously after 1000 ms
async function baz() {
  await new Promise((resolve, reject) = > setTimeout(resolve, 1000));
  console.log('baz');
}
baz();
// baz (1000 milliseconds later)
Copy the code

The quality of the overall knowledge structure is worthy of the ‘little Red Book’ title.

drawback

  1. The asynchronous programming chapter itself is a great example, and the promise and async/await cases in the chapter would be more coherent if they were combined with the concept of event loops. In addition, the promise section is very broken. (The tentative reading advice for this section is, Promise runtime (pending, fullfill state), resolve/ Rejected, then/catch/finally, all/race async await identifier, other optional read)

  2. It would be better if the proxy could be combined with instance tools or frameworks for analysis;

  3. Like the rhino book and its predecessors, there is no systematic description of context and scope in relation to this;

The last

Thank you for reading to the end, so that’s all for my share of the fourth edition of the Little Red Book

Advanced reading suggests the following books

  • JavaScript You Don’t Know (Part 1)
  • JavaScript you Don’t Know (Part 2)
  • JavaScript Ninja Secrets (2nd Edition)

Delve into scoping, asynchronous programming, and event loops through these three books. Most of the optimizations on the market mentioned in Chapter 28 best Practices include optimizations such as Lint. If you want to dive deeper into code optimizations, check out Refactoring (2nd Edition).

If my article is helpful to you, you can give me a thumbs-up, lol ~