As the question goes, I believe you are just like me. When you are suddenly handed a business of others, especially when you are told that there is a bug and you need to fix it, you are always in a panic during the process of fixing it, for fear that it is good here and bad there. So can only hesitate, and finally end up with a low efficiency of the “eternal name.” Today we are going to try to overcome this problem.

First of all, when we get a copy of the code written by others, do not rush to see the source code, because to give you this source code, there are two purposes, one is to let you modify the bug, the other is to let you to maintain and add new features. Both of these should be based on familiarity and understanding of the project can be carried out, otherwise it can only be like the US President Trump, “no one knows XXX better than ME” mantra hanging around, in order to attract attention and amuse the masses.

Because we always afraid they don’t understand someone else’s source code, so we must first have to overcome the fear of psychology, imagine, if now computer language no progress, still use a needle to poke binary programming of paper tape, so we as a programmer, after the program has a problem how we should deal with? Of course, this situation is so extreme that we, as non-bosses, may have to lie flat, but the reality is different. Reality is reality, it is not as simple as you think when you first learn the program, everything is a function all the way to the black, and it is not like just said binary completely let people away. It’s something in between, something that looks messy, but has a pattern.

So for example, when we look at a.vue file, and we count it, 2,780 lines of code, boy, I don’t have the brain capacity to remember that much. Yes, it is a person can’t remember, believe me, and the person who can remember is not necessarily a programmer, just kidding, haha. In fact, there is no need to look at the code, after all, we live in the macro world, the code presented by the program is our direct macro representation, we need to do and modify to ensure that the macro representation works. So, if you’re looking at 2,780 lines of code, take a look at the macro world first.

Students who have done warehouse management system should know that a warehouse can run well, and its reasonable division of labor is inseparable, if we took over a project, let us maintain or modify a warehouse inventory allocation interface. So we can first open this interface to see, if it is the first time to develop, baidu a similar look.

Of course, the program is not a picture, is the need to run, Baidu had better find an example can run. Then, open our program. As you can see, our interface appears, of course, this is the macro display, if you want to see how this macro effect is implemented, you need to open up the code to see.

Open the. Vue file corresponding to the inventory transfer order. StandardStockProductMove vue, look at the HTML and CSS part can be roughly know this is a TAB page switching effect, and macro program, and then need to look at the single most important js, we know that the HTML and CSS alone can write page, But js is the soul.

First of all, we can’t look at the entire flow of the program directly, because the main flow can be too long, and there is often more or less “irrelevant code” mixed in with confusing code. We have to look at the specifics. For example, the document type button in the page can be selected and switched, so we can click and switch. With the help of vUE debugging tool, we can quickly find the corresponding component and the corresponding event of the component. Since it is a switch component, it is necessary to write the subsequent logic with the change event. After finding the corresponding code, we are ready to look at the code.

When we look at the code, we don’t mean to understand the meaning of every line, such as simply assigning a value to a variable, or something like that. As long as we check that the vue watch does not monitor the transformation of the variable, there is no need to pay attention to it, and we need to convert the code we have seen into the corresponding business logic. Of course, setting variables can also be understood as the corresponding logic, but its logic is nothing more than monitoring in watch. To some extent, function is business, and big function contains several small functions, which can be understood as big business contains several small businesses.

Back in our code, we see that our change event calls several variables that change, has no watch logic, and ends up calling a method called GetItemMoveList that gets a list of dial orders. Then we can use UML tools to draw corresponding business process diagrams

Of course, if we look at it in this way, it is a little too general. Loading dial-up data is actually a big whole, which is a big location field for us. We need to continue to check whether there is any other business in it.

We follow up and enter the GetItemMoveList method to load dial order data. In one case, this function clears the data display part of the page and returns directly. Since the judgment condition is not clear, we continue to look at the business.

Reminder for everyone here, if you see this point out the variable, using the vue debugging tool directly on the page the search went, were able to see the specific value, also can change, also can know the specific meaning, here we see a variable of this process, a string array, it is obvious that interact with the background of string format, so it has carried on the transformation, Easy to send to the background. What follows is some processing sent to the background parameters.

Further down, we can see that after the background interface returns the data, our callback has two parts. One part is to process the data and assign it to the page for rendering, and the other part is to determine whether the page jumps and get the detailed page based on a variable isApplyOrderJump. Since the variable name is not commented, and the name alone does not tell you what the business is, be warned that the variable is either commented or the name is easy to understand.

The UML diagram inside the load dial order data is roughly as follows:

Writing here, I think you can understand the logic of the previous code by just relying on the UML diagram. A document type switch caused so many events, is it a bit like a butterfly flapping its wings to cause a hurricane? It seems absurd, but actually it often happens. The execution of the program can not be a function a way to go black, in the face of complex system, only according to the business to draw more UML diagrams, so as to deepen their understanding of the business, and then the problem can be convenient to locate, to add new functions or change the code can also be more confident.