May 31, 2021 Article blog
The article comes from the public number: Vue Chinese community
There is an innate relationship between patterns and refactoring. From a certain point of view, the purpose of design patterns is to provide goals for many refactoring behaviors.
In JavaScript development, we spent most of our time working with functions, so we wanted them to be well-named and the logic contained in the functions was clear. If a function is too long and has to be commented to make it easier to read, it is necessary to refactor it.
If there is a piece of code in the function that can be independent, then we'd better put the code into another separate function. This is a very common optimization effort, and the benefits of doing so are mainly the following.
For example, in a function responsible for obtaining user information, we also need to print logs related to user information, so that the statement of the 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 );
});
};
改成:
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 );
};
If there are conditional branch statements in a function that spread duplicate code inside these conditional branch statements, it is necessary to merge to re-work. S
uppose we have a
paging
function that receives an argument currPage, which represents the page number that is about to jump.
Before jumping, to prevent currPage from passing in too small or too large a number, we manually correct its value, as detailed in the following pseudo-code:
var paging = function( currPage ){
if ( currPage = totalPage ){
currPage = totalPage;
jump( currPage ); // 跳转
}else{
jump( currPage ); // 跳转
}
};
As you can see, the code that is responsible for jumping
jump
, appears within each conditional branch, so you can completely separate this code:
var paging = function( currPage ){
if ( currPage = totalPage ){
currPage = totalPage;
}
jump( currPage ); // 把jump函数独立出来
};
In programming, complex conditional branch statements are an important reason for the program to be difficult to read and understand, and it is easy to lead to a huge function. S
uppose there is now a demand to write a
getPrice
function that calculates the price of a commodity, and there is only one rule for the calculation of the commodity: if it is currently in the summer, all the goods will be sold at a discount of 10%.
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 approach is to set the loop marker:
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 approaches are undoubtedly dizzying, and it's easier to exit the entire approach when you need to abort the cycle:
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
direct exit method creates a problem, if there is some code that will be executed after the loop?
If we exit the entire method early, the code won't 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 ); // 这句代码没有机会被执行
};
To solve this problem, we can put the code behind the loop after
return
and if there is more 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();
That's what
W3Cschool编程狮
has to say
about 11 JavaScript code refactoring best practices.