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

This article mainly introduces how to write js functions to improve the quality of the code related knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe you will have something to gain after reading this article on how to write js functions to improve the quality of the code, let's take a look.

The function is the most basic unit to realize the function of the program, and each program is composed of the most basic functions. Writing a function is the most critical step to improve the quality of program code. This paper discusses how to write a function that is highly readable, easy to maintain and easy to test from the aspects of function naming, code distribution, skills and so on.

Naming

First of all, starting with naming, naming is a step to improve readability. How to name variables and functions has always been one of the pain points in the minds of developers, and it is even more difficult for us whose mother tongue is not English. Let me talk about some ideas and feelings about how to name a function:

Adopt a unified naming convention

Before talking about how to give a function an accurate and elegant name, the first and most important thing is to have a unified naming convention. This is the most basic criterion for improving the readability of code.

Pascal nomenclature and hump nomenclature are two popular rules at present. The rules may be different in different languages, but keep one thing in mind: keep team and individual style consistent.

1. Pascal nomenclature

Pascal nomenclature simply means that when multiple words form a name, the first letter of each word is capitalized. For example:

Public void SendMessage (); public void CalculatePrice ()

In C #, this naming method is often used for classes, attributes, functions, and so on, and in JS, constructors are also recommended.

2. Naming method of hump

Hump naming is very similar to Pascal naming in that when multiple words form a name, the words are all lowercase, followed by an uppercase first letter. For example:

Var sendMessage = unction () {}; var calculatePrice = function () {}

Hump naming method is generally used for fields, local variables, function parameters and so on. In JS, functions are also commonly named in this method

Which naming rules are adopted is not absolute, the most important thing is to follow the team conventions and language specifications.

Describe everything the function does as completely as possible

Some developers may think that short function names may look simpler and more comfortable than long function names. In general, however, the shorter the name of a function, the more abstract its description. Function users' impression of the function is the name of the function, and then understand the function of the function. We should describe everything the function does as much as possible to prevent potential errors caused by the user's ignorance or misunderstanding.

For example, suppose we do a function to add comments, after adding and return the total number of comments, how to name it?

/ / incomplete function name var count = function addComment () {} / / fully described function name var count = function addCommentAndReturnCount () {}

This is just a simple example, the actual development may encounter more complex situations, the single responsibility principle is our development function to follow the principle, but sometimes can not achieve a single function responsibility, please remember that the function name should describe everything as much as possible. When you can't name a function, you should analyze whether the writing of the function is scientific and what can be done to optimize it.

Use accurate descriptive verbs

This should be a difficult point for native non-English developers. If you want to improve your ability in this area, the most important thing is to improve your vocabulary and read more excellent code to accumulate experience.

Here are some of my own feelings and views:

1. Don't use words that are too abstract.

Many developers use a broad verb to name a function. The most typical example is the word get. We often get data in different ways in our development, but it's a bit too abstract to use get in each way. To make a specific analysis of how to name it:

(1) simply return data

Person.prototype.getFullName = function () {return this.firstName = this.lastName;}

(2) obtain data remotely

Var fetchPersons = function () {... $.ajax ({})}

(3) load data from local storage

Var loadPersons = function () {}

(4) obtain data through calculation.

Var calculateTotal = function () {}

(5) find data from the array

Var findSth = function (arr) {}

(6) generate or obtain from some data

Var createSth = function (data) {}; var buildSth = function (data) {}; var parseSth = function (data) {}

This is a simple example, the situation we usually encounter in development will be much more complicated, the key is to rely on the accumulation of words, read more excellent source code

Here are some commonly used antithesis words that you can refer to and use.

Add/remove increment/decrement open/close begin/end insert/delete show/hide create/destory lock/unlock source/target first/last min/max star/stop get/put next/previous up/down get/set old/new

Make naming rules according to different projects and requirements

This is also important, especially in teamwork, where different projects and requirements may lead to different naming conventions.

For example, the naming rule we usually use is the verb-object structure, that is, the verb comes before the noun after the disaster. However, in some projects, such as data interfaces, some teams will use the form of name before and verb after, for example:

Public static Product [] ProductsGet () {}; public static Product [] ProductsDel () {}; public static Customer [] CustomerDel () {}; public static Customer [] CustomerDel () {}

The advantage of this is that when you see the previous noun, such as ProductsGet, you can quickly know that this is a product-related data interface.

Of course, this is not absolute, the key is for the team to work together to develop and follow the same set of naming rules.

Function parameter

Function users must strictly abide by the parameters defined by the function when calling the function, which is very important to the ease of use and testability of the function. Now I would like to talk about some ideas about how to optimize the parameters of the function from several aspects.

Number of parameters

There is no doubt that the more parameters of the function, the worse the ease of use of the function, because the user needs to strictly look at the parameter list to enter parameters in turn, if a parameter is typed incorrectly, it will lead to unexpected results.

But does it have to be as few arguments as possible? Let's look at the following example:

Var count = 0; var unitPrice = 1.5;. ... Var calculatePrice = function () {return count * unitPrice;}

In this example, we use the calculatePrice function to calculate the price, which takes no parameters and is calculated directly through the two global variables unitPrice and count. The definition of this function is very convenient for the user, it can be called directly without entering any parameters. But there may be potential bug: global variables may be modified to other values elsewhere, difficult to unit test, and so on. So, this function can pass in quantity and price information:

Var calculatePrice = function (count, unitPrice) {return count * unitPrice;}

In this way, when using the function, the user of the function has to pass in the parameters to make the call, which avoids the possible problems of global variables. In addition, the coupling is reduced and the testability is improved, so that you don't have to rely on global variables when testing.

Of course, in the case of ensuring that the function does not depend on global variables and testability, the fewer parameters of the function, the better. The Code Encyclopedia proposes to limit the parameters of the function to 7, which can be used as our reference.

Sometimes, we inevitably have to use more than 10 functions, in which case, we can consider constructing similar parameters into a class. Let's look at a typical example.

I believe you must have done this function, list filtering, which involves the filtering, sorting, paging and other functions of various conditions. If you list the parameters one by one, it will be very long, for example:

Var filterHotel = function (city, checkIn, checkOut, price, star, position, wifi, meal, sort, pageIndex) {}

This is a function for screening hotels, where the parameters are city, check-in and check-out time, price, * location, wifi, breakfast, sorting, page number, etc., the actual situation may be more. In the case of a large number of such parameters, we can consider extracting some similar parameters into classes:

Function DatePlace (city, checkIn, checkOut) {this.city = city; this.checkIn = checkIn; this.checkOut = checkOut} function HotelFeature (price, star, position, wifi, meal) {this.price = price; this.star = star; this.position = position; this.wifi = wifi; this.meal = meal;} var filterHotel = function (datePlce, hotelFeature, sort, pageIndex)

Multiple parameters are extracted into objects, although the number of objects has increased, but the function parameters are clearer and easier to call.

Try not to use the bool type as a parameter

Sometimes, we will write about the use of bool as a parameter, such as:

Var getProduct = function (finished) {if (finished) {} else {}} / / call getProduct (true)

If there are no comments, the user sees the code: getProduct (true), he certainly doesn't know what true stands for, and has to look at the function definition to understand how the function is used. This means that the function is not clear enough, so you should consider optimizing it. There are usually two ways to optimize it:

(1) divide the function into two functions, getFinishedProduct and getUnFinishedProduct.

(2) convert bool to meaningful enumeration getProduct (ProductStatus)

Do not modify input parameters

If the input parameters are modified within the function, it is likely to cause potential bug, and the user does not know that the function parameters will be modified after the function is called.

The correct way to use input parameters should be to pass in only parameters for function calls.

If changes are inevitable, be sure to specify them in the comments.

Try not to use output parameters

The use of output parameters indicates that the function does not only do one thing, but also that users may be confused when using it. The right way is to decompose the function and let the function do only one thing.

Write a function body

The function body is the whole logic to realize the function of the function, and it is the most critical part of a function. Now I'd like to talk about some personal thoughts about writing function code.

Related operations are put together

Sometimes, we perform a series of operations in a function to complete a function, such as:

Var calculateTotalPrice = function () {var roomCount = getRoomCount (); var mealCount = getMealCount (); var roomPrice = getRoomPrice (roomCount); var mealPrice = getMealPrice (mealCount); return roomPrice + mealPrice;}

This code calculates the room price and breakfast price, and then adds them back to the total price.

At first glance, there is nothing wrong with this code, but when we analyze the code, we first get the number of rooms and the number of breakfast, and then calculate the price by the number of rooms and the number of breakfast. In this case, the number of rooms and the code for calculating the room price are scattered in two locations, and the breakfast price is also scattered in two locations. That is, the code related to the two parts is scattered everywhere, so that the logic of reading the code will be slightly impassable, and the code will not be well organized. We should put the relevant statements and actions together, which is also conducive to refactoring the code. We modify it as follows:

Var calculateTotalPrice = function () {var roomCount = getRoomCount (); var roomPrice = getRoomPrice (roomCount); var mealCount = getMealCount (); var mealPrice = getMealPrice (mealCount); return roomPrice + mealPrice;}

We put the related operations together so that the code looks clearer and easier to ReFactor.

Minimize code nesting

It is common for us to write if,switch or for statements, and we must have written about the nesting of multiple layers of if or for statements. If there are more than three layers of nesting in the code, it will be very difficult to read. We should try to avoid nesting multiple layers of code, no more than 2 layers. Let me talk about some of my usual techniques or methods to reduce nesting.

The problem of nesting if statements

Nesting of multiple layers of if statements is a common occurrence. Is there any good way to reduce nesting?

1. Terminate the function or return data as soon as possible

If you can directly terminate the function under a certain condition, you should put this condition at the * bit. Let's look at the following example.

If (condition1) {if (condition2) {if (condition3) {} else {return;}} else {return;}} else {return;}

There are 3 layers of if statements nested in this code, which looks very complicated. We can extract the return of the * * face to the front.

If (! condition1) {return;} if (! condition2) {return;} if (! condition3) {return;} / / doSth

In this code, we extract the statement that condition1 equals false to the front, directly terminate the function, reconstitute the multi-layer nested if statement into only one layer of if statement, and the code is clearer.

Note: in general, we write if statements with the condition of true in front of us, which is more in line with our habits of thinking. In the case of multiple layers of nesting, priority should be given to reducing the nesting of if statements

2. Not applicable to if statement or switch statement

Generally speaking, conditional statements are inevitable, sometimes we have to judge a lot of conditions, we will write a lot of if-elseif statements, nesting, it is even more troublesome. If a new requirement is added one day, we have to add an if branch statement, which is not only troublesome to modify, but also error-prone. The table-driven method proposed by Code Daquan can effectively solve the problems caused by if statements. Let's look at the following example:

If (condition = = "case1") {return 1;} elseif (condition = = "case2") {return 2;} elseif (condition = = "case3") {return 3;} elseif (condition = = "case4") {return 4;}

This code judges four situations in turn. If we add another situation, we will add another if branch, which may cause potential problems. How to optimize this code? We can use a Map or Dictionary to map each case to the corresponding value.

Var map = {"case1": 1, "case2": 2, "case3": 3, "case4": 4} return map [condition]

After map optimization, the whole code is not only more concise, but also more convenient to modify and less error-prone.

Of course, many times our conditional judgment statement is not so simple, it may involve complex logical operations, you can see Chapter 18 of the Code Encyclopedia, which has a detailed introduction.

3. Extract the inner layer to be nested into a function to call

When there are multiple layers of nesting, we can also extract the inner nesting into a new function, and then call the function, so that the code is clearer.

For loop nesting optimization

For loop nesting is more complex and more difficult to read than if nesting. Here are a few things to pay attention to:

1. Only two layers of for loops can be nested at most

2. Extract the inner loop into the new function

3. In a multi-layer loop, do not simply name the status index variable iJJ, etc., which is easy to cause confusion and have a specific meaning.

Extract complex logic and make it semantic

Sometimes, we will write some more complex logic, the reader of the code may not know what to do, at this time, we should extract this complex logic code.

If (age > 18 & & gender = = "man") {/ / doSth}

This code indicates that if you are older than 18 and are male, you can doSth, but it is still not clear enough to extract it.

Var canDoSth = function (age, gender) {return age > 18 & & gender = = "man";}. If (canDoSth (age, gender)) {/ / doSth}

Although there is one more function, the code is clearer and more semantic.

This is the end of the article on "how to write js functions to improve the quality of code". Thank you for reading! I believe you all have a certain understanding of "how to write js functions to improve the quality of code". If you want to learn more, you are welcome to follow the industry information channel.

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.