Video version address

Introduction to the

Hello everyone, I am the great saint, the last time to do a JS book evaluation, evaluation is good, before doing CSS and Node, to do a few books detailed recommendation, National Day today at home to read a few representative

  1. Javascript advanced programming 【 Little Red Book 】
  2. Javascript Ninja secrets
  3. Javascript you Don’t Know
  4. The Essence of javascript language and Programming Practice
  5. how javascript works
  6. Javascript20 years (electronic gossip book)

First to the little Red book, this book has always been a systematic learning JS necessary books, the fourth edition compared to the third edition, much more, the whole book is divided into three big modules, the full use of the latest grammar, National Day and a detailed look again

  1. Ecmascript grammar
    1. Based on the content
    2. Advanced operation
    3. Iterators, proxy reflection, and Promises have been added
  2. Bom and dom
    1. Apis for the browser’s hosting environment
  3. javascript api
    1. Js related advanced API
    2. New modules and worker threads (Web workers)
    3. Best practices

This book is a detailed construction of the entire knowledge system required by javascript developers, so it is recommended that this book as a systematic learning start, after reading 2 or 3 times, to read other advanced and vertical field JS books, the effect is great

version

I have only 234 books in hand, but the author of the fourth edition has changed, which is still wonderful and systematic. The biggest feature of the Little Red Book is the systematic front-end tutorial, which can be used as a teaching material. Many good books in recent years are all about single-point javascript. I suggest you use this book to build the knowledge system of front-end development, and then read other books and frameworks to build the core competitiveness of front-end programmers to recommend to you

Another feature of the fourth edition is that many chapters are equipped with two-dimensional code, so you can see the official interpretation of this section by scanning the code. It is a good experience, but it would be better if the video could be changed into big girl + show face

Ecmascript

The first three chapters

The first chapter is more recommended “javascript20 years”, the second and third chapters are the foundation, have JS foundation just browse, it is worth noting that the second chapter added symbol, chapter 3 bit operation, these are in the vue3 source code. Bit operation is related to vue3 combined static flag patchFlag and React source code EventFlag, must be understood, and bit operation itself is the best practice to do combination permissions teaching and research, bitwise or authorization, bitwise and check permissions, in addition to understand vue3 and react source code, We use it when we do component development

Variable scope and memory

Use undefined, NULL, Boolean, number,string, and symbol as primitive values. Use undefined, null, Boolean, number,string, and symbol as primitive values. Use undefined, null, Boolean, number,string, and symbol as primitive values. Again, pointing to yourself, there are side effects

let obj1 = new Object(a);let obj2 = obj1;
obj1.name = "lsp";
console.log(obj2.name);  // "lsp"
Copy the code

There is scope chain query, with random variable promotion, block level scope, closure, is the pen of many SAO package interviewers like questions, rather than brush the question to figure it out once, with the small Yellow Book, basically through

Finally, there is garbage collection. The mechanism is a bit like “Coco”. A person’s death is not the focus, but will be cleaned up after everyone forgets about it

Built-in reference type

These two are mainly to introduce the built-in various chaotic data types, such as Date, Regex, Math, as well as the set of reference types ARR, OBj, set, map, etc. It is worth noting that weakMap is explained, will let everyone understand vue3 source helpful

I laughed when I read the book explaining that “weak” is held weakly, so it won’t prevent garbage collection. The translation is cute and the book’s explanation of stereotype arrays is quite good

Iterators, generators, object-oriented, proxies

The obvious disadvantage of the native for loop is that you need to know how to iterate. The iterators after ES6 are designed to solve this problem

Probably means that defines the iteration of the agreement, as long as we implemented this agreement request, also is the good regulation the key Symbol. The iterator 】 【 behavior, can through the iterators to consumption, don’t have to be an array or object

Generators are also awesome. You can pause inside a function, such as a generator function defined with *, and when you meet yield inside, you’ll pause until you call next to resume execution

Enumberable, wirtable, and value of the object, which works without any additional control system, is different from the control system, and works without any additional control system. Then explained in detail the prototype chain and inheritance, but also added es6 class grammar, with the small Yellow Book, related questions you are the expert, and the interviewer laugh

Then learn vue3 Proxy and Reflect. Read this chapter and then study vue3’s ReActivity module for better results

Function and a promise

Then function chapter we will basically, most of the content we are familiar with, the section on tail recursive optimization is worth paying attention to, and then is the most popular date and asynchronous function, including the basic use of promise synthesis strategy ah, some third-party extension, etc.,

I asked Hax about the translation of promise, which is a combination of future+promise. I don’t think it is necessary to translate, but if it is, I think the term is quite accurate. After all, one day these terms will have to be translated, otherwise the English words in technical books will be more and more distant

With promise and async await, we can write more concise and easy to understand code, is also a modern front-end necessary skills, this chapter with small yellow books, as well as green book on the analysis of promise, is absolutely necessary for the advanced

There will be a lot of discussion on the new syntax to understand the ins and out of the way. Stage3 browser is basically the first, stage2 is very potential. I pay more attention to Temporal processing events and class fields

To be able to watch and even participate in the language design stage is absolutely a necessary skill. Here I recommend haX, one of my technical idols, as a member of tc39 Committee

Bom and dom

Bom and client inspection

Then there is the browser environment, the so-called BOM and DOM, BOM is not much introduction, everyone is familiar with, window, location control navigation, navigator to understand the browser, history operation browsing history and so on

Client detection chapter is mainly to judge each browser, this part I suggest you to read The “javascript Framework Design” by Stuart Zhengmei, about browser detection is the most in-depth, but now this modern browser rampant era, this content is good

dom

Most of this is just a review, including what the 12 numbers for nodeType mean, common DOM operations, and dom initiation is a good review

A new interface of interest, MutationObserver, allows you to observe changes in the DOM, such as properties and child nodes, and record them for user behavior monitoring and FMP performance statistics, such as when the first screen is rendered, as well as setting weights for different elements. For example, high weight video, statistics out of a now key performance treatment FMP, are very easy to use API

Then there are some extensions that you are familiar with, such as querySelector and so on. It is worth reading about dom traversal, using NodeIterator and TreeWalker for dom depth-first traversal, as well as the scope selection API. These new apis may have some impact on subsequent virtual DOM implementations of VUE and React

In general, all aspects of events are introduced, including dom2 and DOM3 specifications, interface events, mouse events, scroll wheel, keyboard and composite events. Touch events are messy, but there are still some details that are not covered, such as the once configuration can only trigger once, which IS also what I know from the vue3 source code

Then there is Canvas, the introduction to WebGL, form scripting and error handling debugging, and handling XML. This part of the third edition is not much to say

Javascript API

The rest of the section, collectively called the javascript API, is basically more than the third edition and is highly recommended reading

For example, Chapter 20 is a bunch of new APIS for HTML5: coding, files, media elements, drag and drop, notifications, page concealment, web Components

In addition to XMLHttprequest and cross-domain, fetch API, Beacon API and WebSocket are added to the network request part

In addition to cookies, the client stores localStorage and IndexDB

The new ES6 module is noteworthy, explaining the history of module system, but not my favorite SEAJS

In addition to es6 itself module system knowledge, also introduced the browser inside the script, plus type=module, directly support the import syntax, this is vue3 supporting vite tool principle, I wrote a Vite source article, Welcome to the step, by intercepting import requests to implement engineering, in the near future may replace Webpack position, do not hurry to learn

Most JS developers do not have the concept of multi-process. After learning this, we will know that we can steal peaches when we meet time-consuming tasks. We can use monkey monkey to do it. Do not delay the main process to tell the story of calabella children jumping out of the stone with seven fairies, such as common interview questions, upload large files, and calculate md5 files. Webworker is a reasonable scene for the task

The last best practice is nothing to say, is the common optimization strategy, this part is just a start, the follow-up need to read other books to see the progress, the back of the framework recommendation actually has moolTools and other outdated libraries, so let me do a modern tool recommendation in the future

conclusion

In general, this book is definitely an important reference book for the front end. Referring to winter’s book review, the biggest feature of this book is the systematic front end tutorial, which can be used to do the foot step. Many good books in javascript in recent years are all about single point

I suggest you use this book to build the knowledge system of front-end development, and then read other books and frameworks to build the core competitiveness of front-end programmers to recommend to you

Next ninja book and little dirty book or javascript20 years

The resources

  1. tc39 github.com/tc39

  2. Hax zhihu www.zhihu.com/people/he-s…

  3. The front end of the lounge hax special www.bilibili.com/video/BV1xT…

  4. Javascript books full reviews juejin.cn/post/687771…

  5. This video version of address Welcome to 3 even www.bilibili.com/video/BV1Nf…

🏆 nuggets technical essay | double festival special articles