Shulou(Shulou.com)06/03 Report--

This article mainly explains "the summary of some front-end problems". Interested friends may wish to take a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the summary of some front-end problems.

Code logic error

"it is easy to find other people's mistakes and turn a blind eye to their own."

The easiest way to find problems with code logic is to look at old code or look at other people's code. Code logic reflects your understanding of requirements and your control over the logic of the entire product.

Such as the rendering of a list. For each request, we mark the returned data list as now_list, and then concatenate the list to the existing list as list. When the distance from the bottom of the list to the bottom of the page is greater than a certain value, the request is automatically triggered and the loading is loaded. Then it is determined that when the now_list is empty, the automatic trigger is stopped. This is normal logic.

Next, the coquettish operation comes, putting the opening condition of loading in the trigger condition, we can remember that the trigger method is onEndReached, and the method of closing loading is put in the request method. The result is that when the initial amount of data is small (for example, when the length of the list is 1), the loading will be triggered constantly, the loading will be closed, and the loop will be entered. Then another coquettish operation comes, because the number of lists per request is 4, so in the onEndReached method, add a judgment condition that when the length of now_list is less than 4, loading is not enabled. It's a simple question that goes in a big circle. And code logic like this, which is conditional on numbers, must be vigilant. Because it indicates that the logic of your code is not rigorous. On the question of code logic, there are also questions of multi-layer judgment conditions, such as the generation and viewing of reports. The button to view the report can be displayed except that it cannot be displayed in status 1 and 8; the button to download the report can only be displayed in status 5 or 6, and the button to share the report can only be displayed in 6. Viewing, downloading, and sharing all operate on the same button. In the case of many logical judgment conditions like this, it is very easy to make mistakes.

Errors in product requirements

"requirements review is a debate, either persuading others or being persuaded." Don't trust products too much, because they can also make mistakes. This paper summarizes the errors of known product requirements, which are divided into two categories:

Useless demand

Unreasonable demand

First of all, let's talk about useless requirements, why they are useless, such as the functions done in the previous version, which are all overturned in the next version. In other words, in the last period of time, you were doing useless work and did not produce any value to the product. A group of people spent a period of time doing a meaningless thing. Let's talk about unreasonable requirements, such as buy one get N free, fold it in the list. Whether it is a complimentary order or a normal order, it is tiled in the order list. In order to solve the relationship between orders and present a hierarchical display effect to users, the front end needs to integrate the tiled data into a tree structure, and then fold it up to facilitate users to view. The number of data items requested by the list is certain. For example, 4 pieces of data can fill the screen. We usually request 5 items in order to pull up and load. So we can assume a scenario, such as buy one get seven free, when we first load five pieces of data and integrate them into a tree structure, and then fold them into a single piece of data, which will trigger the request to load again, and this time we load five more. Unfortunately, the next normal order is also buy one get seven free, and the first three pieces of data are still the gift order of the previous one, so we continue to reorganize the data. Now there are two pieces of data in the order, the first one is folded seven, the second one is folded, and the request load will continue to be triggered until the screen is full of normal orders. This process constantly reorganizes the data, loads the loading, and shuts down the loading. The more professional term can be called "splash screen". Of course, you can expand the folded data by default, which is a good way. I admit that some of the requirements we do are not necessarily in line with the specifications, and do solve some problems. But later maintenance is too difficult and unpredictable.

An error in the missing scene

"the most taboo thing about changing bug is to change one place and create two places."

The problem of missing scenes can also be simply classified into two categories:

The same problem has only been changed in one place and has not been taken into account in other places.

The related problems are only changed where there are problems, and the follow-up problems are not taken into account.

The address problem of the front-end time has really perplexed for some time, which reflects the lack of rigor in dealing with the problem and the lack of careful consideration at the beginning of the design.

The problems of provinces, cities and regions will be accompanied by value transmission, echo, submission and splicing. The problem is splicing. The old data is directly spliced together without any special marks in the middle, but now the demand is that the data can not be parsed by the third party. The old logic has its own set of analytical mechanism, but it also has some problems and is not rigorous. Therefore, on the basis of the existing problems, there are bound to be problems. The best solution is to overturn and rewrite the rules.

When we solve a problem, we must consider whether the modified scheme here will have an impact on the follow-up logic, especially to change other people's code logic. Many problems are unexpected, and the cost of overturning and rewriting is too high. Therefore, when writing business code in the future, we must decouple and pile up the code, which is a real headache.

Asynchronous error

The timing of code execution has always been a serious problem, such as we often find that the data has been requested and why the page is not displayed.

For example, setState in react, updating the DOM tree is a time-consuming task, and setState will wait for an opportunity to do batch updates instead of updating directly.

For example, many students want to use async asynchronous functions in forEach or map, but don't forget that the results you accept are also asynchronous.

Misunderstanding of concept

There are also some mistakes because you don't know the things themselves.

For example, in the interview a few days ago, a girl said, "I just wrote a project in vue3." then I asked, "what are the common grammars of your vue3?" and her answer was "vue add, vue ui...." ". I had a big brain at that time.

There is also a question asked by the friends in the group:

[parseInt) / / [1, null, null] .map (Number) / / [1,2,3] .map (parseFloat) / / [1,2,3] .map (parseFloat) / / [1,2,3]

Q: "Why can't parseInt be transformed?"

Map accepts that the parameters of the method are fixed and can only be reduced and cannot be modified. The two parameters accepted by parseInt, the second parameter is directly changed to the index value specified by map, and then the logic of parseInt is executed, the return must be incorrect.

In other words, the simple understanding is that the parameters accepted by parseInt are forcibly changed to indexes by map:

ParseInt ('2examples, 1) / / NaN parseInt (' 3percent, 2) / / NaN here, I believe you have a deeper understanding of the "summary of some front-end problems", might as well come to the actual operation! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.