Recently Po brother in the team to do a topic on how to read the source code, the main purpose is to let the team partners understand the ideas and skills of reading the source code. In the meantime, Bob also wrote about the 77.9K Axios project, what I learned from the 13K front end open source project, and the TS decorator, as well as three other source code parsing articles.

Among them, the first two articles in the nuggets get a good rating, an average of more than 630 👍, so Po brother would like to write an article to share my reading source ideas, skills and tools. Thank you very much for your encouragement and support.

All right, let’s get started! Before we get to the point, let’s warm up with a soul quad before reading the source code.

Read additional source code analysis articles and 50 “Relearn TS” tutorials.

One, the soul of four consecutive questions

1.1 Why read source Code

1.2 How to Select a project

1.3 How to Read the Source Code

1.4 Are there actual cases

Since the first two articles were popular, Here are some ideas and tips for reading source code, using Axios as an example.

Ii. How to read Axios?

2.1 entered Axios

Axios is a Promise-based HTTP client that supports both a browser and a Node.js environment. It is an excellent HTTP client that is widely used in a number of Web projects.

The Axios project has a Star count of 78.1K and Fork count of 7.3K. It is an excellent open source project, so it is worth reading carefully.

2.2 Discover the beauty of Axios

Having identified Axios as a “goal to pursue,” the next step is to discover its strengths (features) :

Everyone has a different idea of what beauty is. For Bob, I like the three things I’ve picked out in the picture. As such, they have the honor of being the three entry points for reading source code. Of course, the entry point is not the more the better, you can first find their most interested in the place as a entry point. Note that it is recommended to do a simple sorting if there is a correlation between pointcuts.

2.3 Feel the beauty of Axios

After selecting the entry point, we can begin to feel the beauty of Axios’s design one by one. Taking the point of being able to intercept requests and responses as an example, we first get to the concept of an interceptor. To understand what an interceptor is, what it does, and how to use it, start with the project’s official documentation or the readme.md document in the project.

2.3.1 The role of interceptors

Axios provides a request interceptor and a response interceptor to handle requests and responses, respectively, as follows:

  • Request interceptor: This class of interceptors is used to uniformly perform certain operations before a request is sent, such as adding a token field to the request header.
  • Response interceptor: This type of interceptor is used to perform certain operations after receiving a response from the server. For example, if the response status code is 401, the system automatically jumps to the login page.
2.3.2 Use of interceptors
// Add request interceptor -- handles request configuration objects
axios.interceptors.request.use(function (config) {
  config.headers.token = 'added by interceptor';
  return config;
});

// Add response interceptor -- handles the response object
axios.interceptors.response.use(function (data) {
  data.data = data.data + ' - modified by interceptor';
  return data;
});

axios({
  url: '/hello'.method: 'get',
}).then(res= >{
  console.log('axios res.data: ', res.data)
});
Copy the code

Now that we know what interceptors do and how to use them, we’ll focus on the AXIos object, which is closely associated with registering interceptors and sending requests. However, before looking at the specific source, Po brother suggested that the function points do a comb. Here’s how Po’s analysis works:

Axios is used to send HTTP requests, request interceptors and response interceptors correspond to different stages of an HTTP request, and they are essentially a function that implements a specific function. At this point, we can break down the sending HTTP request into different types of subtasks by function, such as the subtask for processing request configuration objects, the subtask for sending HTTP requests, and the subtask for processing response objects. When we execute these subtasks in the order specified, a complete HTTP request is completed.

Now that tasks have been mentioned, we will associate with the basic functions of task management system: task registration, task scheduling (priority sorting) and task scheduling. Therefore, we can consider the implementation of Axios interceptor from three aspects: task registration, task choreography, and task scheduling.

2.3.3 Registering a Task
// Add request interceptor -- handles request configuration objects
axios.interceptors.request.use(function (config) {
  config.headers.token = 'added by interceptor';
  return config;
});

// Add response interceptor -- handles the response object
axios.interceptors.response.use(function (data) {
  data.data = data.data + ' - modified by interceptor';
  return data;
});
Copy the code

In the lib/axios.js path, we can find the definition of the Axios object. In order to intuitively understand the relationship between objects, Po suggested that you read the source code process, more hands-on drawing. For example, apolgo uses the following diagram to summarize the internal structure and relationship between the Axios and InterceptorManager objects:

2.3.4 Task Scheduling

Now that we know how to register interceptor tasks, it’s not enough to just register them; we also need to orchestrate the registered tasks to ensure that they are executed in the right order.

Similarly for task scheduling, you can also use the form of graph to show the results of task scheduling. A trick here is to use a comparative format to show the results of task scheduling so that the processing logic of task scheduling becomes clearer.

2.3.5 Task Scheduling

After the tasks are choreographed, to make HTTP requests, we also need to schedule the tasks in the choreographed order.

One caveat: When reading the source code, don’t pay too much attention to details. For example, if you look at Axios interceptor principles, you don’t need to know much more about the implementation behind dispatchRequest, just that the method is used to send HTTP requests so that the entire line doesn’t stretch too long.

After analyzing a specific feature point, you may have read the specific source code. But Ah Bao ge think this is not the most important, more important is to think about its design ideas, such a design has any benefits, for us to have what is worth learning and learning. For example, by referring to the Axios interceptor design model, we can draw out the following common task processing models:

Using Axios’s interceptor as an example, Bob shares his ideas and tips for reading Axios’s source code. Next Po brother to share some read source code advice and assistance tools.

Three, read the source advice

(photo: www.processon.com/view/link/5…

Four, read the source auxiliary tools

If you are interested in the following auxiliary tools, you can directly access the online address of each tool by following the link to the image source below.

(photo: www.processon.com/view/link/5…

Five, the summary

There’s a lot more to reading about good open source projects than the above. BetterScroll project source code, summarized a mind map:

(photo: www.processon.com/view/link/5…

Here is a graph to summarize the learning path of axios and Better Scroll:

1. The Axios project’s pointcuts are filtered from Github’s features;

2. BetterScroll is a good place to start. BetterScroll 2.0 is a good place to start.

In addition, Po brother also to briefly summarize the ideas and skills of reading source code introduced in this article:

  • Stand on the shoulders of giants and read some quality articles related to the project in advance;
  • Summary study or work encountered problems, with the problem source learning;
  • Identify the main line or entry point to read the source code;
  • Analyze each function point from as simple an example as possible;
  • First sort out the main process, don’t care too much about the details, to avoid the whole line too long;
  • In the process of reading the source code, to draw more, so that it will be more intuitive to understand.

In this article, Bob shares his ideas, skills and tools for reading the source code. I hope you can get some inspiration or help after reading this article. If you have better ideas and skills to read the source code, welcome to communicate with Po Brother ha. Please forgive me for the bad writing.

Vi. Reference resources

  • What can be learned from the 77.9K Axios project
  • What have I learned from the 12.9K front-end open Source project?
  • How to make your Express fly