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

This article mainly introduces "how to maintain code in web development". In daily operation, I believe many people have doubts about how to maintain code in web development. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to maintain code in web development". Next, please follow the editor to study!

What is maintainability code?

Today we don't talk about performance optimization, we just talk about how to write code elegantly from the point of view of later maintenance code.

Why do you need some maintainable code?

Iteration and maintenance are perfectly normal operations in the development process

Then you have to read other people's code.

Have you ever encountered anything embarrassing:

1. I don't know where to start if I can't understand other people's code.

2. To modify a function, you have to read the code for two days. After the change, it is found that the least time for bug is before the modification.

3. I just modified one line of code and found that the console reported dozens of errors.

...

If the code is more maintainable, many of these problems can be avoided.

Write maintainable code, starting with me ^ _ ^

What is maintainable code?

Easy to understand: you don't need to turn to the source code writer to understand.

In line with common sense: the natural penetration of code writing

Easy to adapt: when the data changes, it will not be completely rewritten

Easy to scale: scalable for core functions (appropriate use of policy patterns)

Easy to debug: when a problem occurs, it can give a clear and detailed error prompt, and you can directly locate the source of the problem.

Start with the following points: first, code readability

If you want to maintain well, the first task is to make the code you write accessible to others.

Because our code, when it's not running, is plain text.

If you want others to understand a pile of text you write, start with all the custom content.

Second, code indentation

The first and most intuitive factor to distinguish between a paper and a code is code indentation.

The code is not indented, or indented randomly, so it's no different from showing you a Martian paper.

For (var I = 0; I < 100; iTunes +) {

If (true) {

Function fn () {

For (var j = 0; j < 100; jacks +) {

}

}

For (var j = 0; j < 100; jacks +) {

}

}

}

It's neat, but I can't understand it.

After we strictly maintain the indentation of the code, although the meaning of the code may not be understood, I can understand the structure of the code.

For (var I = 0; I < 100; iTunes +) {

If (true) {

Function fn () {

For (var j = 0; j < 100; jacks +) {

}

}

For (var j = 0; j < 100; jacks +) {

}

}

}

At this time, you can try to change it.

III. Notes

In any language, there are comments.

Annotations are defined in the language specification, either for you to learn to play with, or for you to annotate the code.

Large code blocks, and places where a large number of variables are stacked, should be clearly annotated to indicate what this code block or pile of variables is for, especially functions, so that there is a description comment in front of each function as far as possible.

/ *

* function of fn to get random integers between ranges

* @ param {Number} a range begins with the number

* @ param {Number} b number at the end of range

Random integers in the range of * @ return {Number}

, /

Function fn (a, b) {...}

Each function should have parameters indicating whether there is a return value and what the return value is

Because these contents cannot be seen intuitively in the function definition, you need to read the code.

When you write this, the readability is greatly improved.

Suppose that there are very complex algorithms involved in your function block, and it is best to mark them in the description notes.

When you fix some browser problems, you use some cool techs

Then you must mark up these cool techs to avoid when others modify your code.

I feel that these cool techs are useless and have been deleted for you, resulting in the re-emergence of your revised problems.

IV. Naming of variables and functions

The naming of variables and functions are the places that best reflect our customization.

For the naming of each variable and function, we try to give a semantic as accurately as possible. Whether you are using a big hump or a small hump, make sure that you can know the meaning of the variable or function when you see the name.

In terms of variables

1. Try to use nouns instead of verbs

For example: car / person / show /...

2. In terms of constants, use uppercase letters to express

For example: TEST / BROWSER /...

3. Distinguish between global and private variables. I will start with _ for the private variables in the function.

For example: _ this /.

In terms of function

1. When a function returns a Boolean value, it usually starts with is.

For example: isEnabled () / isSelected () /...

2. The function to get a class usually begins with get

For example: getUserList () / getUserInfo () /...

3. Setting classes generally start with set.

For example: setName () / setUserInfo () /...

4. The modified class usually starts with update.

For example: updateName () / updatePrice () /...

4. The program processing class function ends with handler.

For example: showEditHandler () / submitHandler () /...

5. describe the function of the function clearly by name as much as possible, don't worry about too long, because the later packaging tool will help us get rid of it.

For example: getUserInfoById () / delGoodsParamsById () /...

Fifth, transparency of variable types

Because JS is a weakly typed language, there are no restrictions on data types when defining variables

But when we assign values to variables, we should also unify the data types as much as possible.

When you need to define some variables and assign them in a later operation

As far as possible, when defining, give an initial value to represent the type of data your variable will store in the future.

For example:

Var count = 0

Var name =''

Var boo = false

Var person = null

Var todoList = []

If you really don't want to give an initial value,

You can also use comments to indicate the variables you define and what types of data will be stored in the future.

Var count / * Number * /

Var name / * String * /

Var boo / * Boolean * /

VI. Code writing habits

We need to ensure a good code writing habit.

7. The habit of chain programming

Let's take a look at the following code

[...] .map (function () {

/ / code...

}) .filter (function () {

/ / code...

}) .reduce (function () {

/ / code...

})

Actually, it's not a problem, and it's fine.

Even when the code is simpler, someone writes it as a line.

[...] .map (function () {...}) .filter (function () {...}) .reduce (function () {...})

However, when it comes to the later revision, the problem will gradually show that once the first one is modified, there may be problems in the latter.

And when the amount of contemporary code is too large, it is difficult to guarantee that you will not modify the serial.

We can change the above code to the following way

[...]

.map (function () {

/ / code...

})

.filter (function () {)

/ / code...

})

.reduce (function () {)

/ / code...

})

In this way, it will look much more comfortable.

And you can use the code folding of the editor to write a function.

8. The habit of writing operators

Many people like the relatively compact writing structure.

For example, the following code

If (4 years, 0 years.}) {.}

A very simple code to judge a leap year

But when your operator is compact, it looks more eye-catching.

Relatively speaking, I prefer to put spaces on both sides of the operator

Make the structure relatively loose, and it may look easier

We don't have to worry about these blanks. Post-processing will help us get rid of them.

If (year% 4 = = 0 & & year% 100! = = 0 | | year% 400 = 0) {...}

There's another way to write it.

If (

Year% 4 = = 0 &

Year% 100! = = 0 | |

Year% 400 = 0

) {.}

This looks clearer when the condition is longer.

IX. Passing parameters by function call

When you call a function and you need to pass a function as an argument

We usually write an anonymous function or an arrow function in the parameter position directly.

Or when a complex data type is passed as a parameter, the corresponding array or object is written in the parameter location.

For example, the following code

$.get ('/ xxx', {

A: 100

B: 200

}, function (res) {

/ / code...

}, 'json')

There is nothing wrong with the code, but it will look complicated later when there is too much data in the object or too much code in the function.

I would suggest that these contents be written separately.

Var params = {

A: 100

B: 200

}

Function success (res) {

/ / code...

}

$.get ('/ xxx', params, success, 'json')

In this way, it will be more convenient to modify or add some content.

X. separate encapsulation of functional functions

It is actually the concept of modularization to encapsulate some of our custom functional functions separately and put them into a separate JS file for introduction or import.

11. Loose coupling

For the code that is difficult to read, the code with strong coupling is the most difficult to read. Let's not talk about the coupling of JS code itself. We should all know about object-oriented programming and modular programming.

12. Coupling of HTML and JavaScript

In front-end development, we often see people who write code to write some simple events directly to the html structure.

At this point, the study on "how to maintain code in web development" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.