From readers “?” Questions:

I am currently in my senior year, this year, and my learning route is self-study. There are two stages of internship experience, the first stage is in Tencent, the technology stack is VUE and Node, and the second stage is in the company near the school, which is still under way, react.

Now the situation is probably like this, the problem is all the way since the self-study, early learning may be relatively scattered, the foundation is not too firm.

Then there is another confusion that I feel that I am in a bottleneck period in some aspects, such as the framework. Now I gradually begin to understand their implementation methods, but I cannot feel them more deeply and have no way to start.

Another question is how do you read and understand a project when you get it?

Ear east analysis:

This problem is typical. Beginners with some practical experience have been skilled in making things through API, but it may be difficult to start with difficult projects, and they have a shallow understanding of technical principles, and the basic knowledge is not systematic enough.

Readers’ questions can be summed up as:

  1. How solid is the front-end foundation?
  2. Now that the front-end framework can be skillfully used, how to take the front-end framework in-depth and advanced?
  3. How do you read and understand a project when you get it

Ear East answered:

01

Let’s start with the first question, the front base question.

First of all, it is important to realize that basic knowledge is not only useful in the interview. The front-end basic knowledge is often used in the debugging development and writing libraries. I can provide some commonly used knowledge points and frequently asked knowledge points in the interview for your reference:

CSS: Flex, Grid, box model, positioning, selector priority, two/three column layout, float

JavaScript: closures and scopes, event mechanisms, prototypes, inheritance methods, this pointing, variable declaration promotion, async (promise, async/await), Event loop, double precision floating point numbers

Implement JavaScript functions: stabilization/throttling function, apply function, call function, bind function, array deduplication/union/intersection, object deep copy,

Network: cross-domain, HTTP1.1 request structure, HTTP cache, HTTP2, Cookie /session

Browser: Script tags defer and async, backflow and redraw, the page loading process and any blocking that may occur during the process

Recommended book: JavaScript You Don’t Know

Recommended website: developer.mozilla.org/zh-CN/

Key points to learn these basics:

  1. How to identify whether they really understand, there are two methods: one is to learn a knowledge point, you can try to tell others, if no one to listen to you can write an article, the process of writing is to verify whether you have learned the process; Another is to find relevant interview questions online and see if you can answer them
  2. For the JavaScript functions mentioned, be sure to implement them manually
  3. Don’t read those thick and many bricks of the book, “you don’t know JavaScript” this set of books is enough, and don’t see from beginning to end, learn which knowledge points on the corresponding part of the book, this way you can see more and more confident, do not understand the knowledge points can go to MDN query

02

Then answer the second question, which is how to get into the front end framework.

First of all, you are now proficient in the implementation of the business, indicating that you are qualified at the API level. The next step is to advance and further.

In fact, as for the progress and depth of the framework, I think it can be divided into two angles, and you can follow these two angles to go deeper (take Vue as an example, the same is true with React).

  1. Disassemble the frame.

This is a top-down approach. For example, with the Vue framework, you can ask yourself a few questions: What problems does Vue solve for you? How does Vue code translate into pages? After thinking about these two questions, we can disassemble Vue into the following knowledge points:

A. How do I understand MVVM? B. What happens to each of the lifecycle functions of Vue? C. How is the response of Vue implemented? How is the special handling of arrays implemented? Is it possible to implement a simple responsive D. Vue component communication mode. How is the instruction of E. Vue implemented? How to implement F. Vue's Diff algorithm? Time complexity? What happened to G. Vue's nextTick? How does H. Vue compile the template?Copy the code
  1. Write a small framework from scratch.

This is a bottom-up path, you can try to implement a small Vue from scratch, including parsing templates, generating responsive watcher, lifecycle, diff algorithm, patch DOM, etc., even though the small Vue is complete, you will understand it better.

Tips to learn: Be sure to do more and ask more why

03

Finally, I will answer the third question, how to read and understand a project when I get it. For this question, I think there are the following points:

First, find the relevant documents and people, business logic and technical design, looking at the relevant documents and ask people is the fastest, according to the code backwards is very uncomfortable.

Second, add breakpoints to debug. This is a process to push the whole picture from the details. Only by adding breakpoints can you know the specific code logic flow.

If you have the logic of the project clear, also please write a novice document, convenient maintenance people behind.

I am Ear east, currently in a large factory to do front, my public number is “front ear east” public number will update the article every week, mainly including: 1, the front end technology, whether it be early adopters of new technologies and the source code parsing, serial tutorial, I will involve 2, programmers, related working experience, such as programmers job-hopping, programmer should pay attention to how to promotion and so on In addition, also provides the following services: 1, modify resume 2, technical advice, technical planning welcome attention ear east “front end”