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

This article mainly introduces the relevant knowledge of JavaScript code refactoring methods, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this JavaScript code refactoring method. Let's take a look at it.

1. Refinement function

In JavaScript development, we spend most of our time dealing with functions, so we hope that these functions have a good name and that the logic contained in the function body is clear. If a function is too long and has to be annotated to make it easier to read, it is necessary to ReFactor these functions.

If there is a piece of code in a function that can be separated, then we'd better put that code into a separate function. This is a common optimization exercise, and the main benefits of this are as follows.

Avoid oversized functions.

Independent functions help code reuse.

Independent functions are more likely to be overridden.

If a stand-alone function has a good name, it itself acts as an annotation.

For example, in a function responsible for obtaining user information, we also need to print the log related to the user information, so the statement to print log can be encapsulated in a separate function:

Var getUserInfo = function () {ajax ('http:// xxx.com/userInfo', function (data) {console.log (' userId:'+ data.userId); console.log ('userName:' + data.userName); console.log ('nickName:' + data.nickName);} Change it to: var getUserInfo = function () {ajax ('http:// xxx.com/userInfo', function (data) {printDetails (data);}); var printDetails = function (data) {console.log (' userId:'+ data.userId); console.log ('userName:' + data.userName); console.log ('nickName:' + data.nickName);}; 2. Merge duplicate conditional clips

If there are some conditional branch statements in the body of a function, and some repeated code is scattered inside these conditional branch statements, then it is necessary to merge and deduplicate. Suppose we have a paging function paging that takes a parameter currPage,currPage that represents the page number that is about to jump. Before jumping, to prevent currPage from passing in too small or too large numbers, we need to manually modify its value. For more information, please see the following pseudo code:

Var paging = function (currPage) {if (currPage = totalPage) {currPage = totalPage; jump (currPage); / / Jump} else {jump (currPage); / / Jump}}

As you can see, the code responsible for the jump, jump (currPage), appears in each conditional branch, so you can completely separate this code:

Var paging = function (currPage) {if (currPage = totalPage) {currPage = totalPage;} jump (currPage); / / separate the jump function}; 3. Refine the conditional branch statement into a function

In program design, complex conditional branch statements are an important reason why the program is difficult to read and understand, and it is easy to lead to a huge function. Suppose there is a need to write a getPrice function to calculate the price of goods, and there is only one rule for calculating goods: if it is summer, all goods will be sold at a 20% discount. The code is as follows:

Var getPrice = function (price) {var date = new Date (); if (date.getMonth () > = 6 & & date.getMonth () = 6 & & date.getMonth () = 6 & & date.getMonth () 30) {flag = true; break;}} if (flag = true) {break;}

The second way to do this is to set a loop flag:

Var func = function () {outerloop: for (var I = 0; I

< 10; i++ ){ innerloop: for ( var j = 0; j < 10; j++ ){ if ( i * j >

30) {break outerloop;}

Both of these practices are undoubtedly dizzying, and it's easier to exit the entire method when you need to stop the loop:

Var func = function () {for (var I = 0; I)

< 10; i++ ){ for ( var j = 0; j < 10; j++ ){ if ( i * j >

30) {return;}

Of course, using return to exit directly creates a problem. What if there is some code that will be executed after the loop? If we exit the entire method ahead of time, the code will not get a chance to be executed:

Var func = function () {for (var I = 0; I)

< 10; i++ ){ for ( var j = 0; j < 10; j++ ){ if ( i * j >

30) {return;}} console.log (I); / / this code has no chance to be executed}

To solve this problem, we can put the code after the loop after return, and if there is a lot of code, we should refine it into a separate function:

Var print = function (I) {console.log (I);}; var func = function () {for (var I = 0; I)

< 10; i++ ){ for ( var j = 0; j < 10; j++ ){ if ( i * j >

30) {return print (I);}; func (); this is the end of the article on "what are the methods of JavaScript code refactoring?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what are the methods of JavaScript code refactoring". 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.