教你如何写出优雅的 JavaScript 代码

前言

同样一个功能，可以用很多方法来实现，有时候由于项目时间紧张，导致很多时候只是实现了功能，往往忽视了代码质量。下面几种代码重构方法，以便大家可以写出更优雅的代码。

一，提炼函数

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 );
};

二，合并重复的条件片段

var paging = function( currPage ){
  if ( currPage <= 0 ){
    currPage = 0;
    jump( currPage );
  }else if ( currPage >= totalPage ){
    currPage = totalPage;
    jump( currPage );
  }else{
    jump( currPage );
  }
}

// 重构后，把重复函数独立出来
var paging = function( currPage ){
    if ( currPage <= 0 ){
        currPage = 0;
    }else if ( currPage >= totalPage ){
        currPage = totalPage; 
    }
    jump( currPage );
};
  

三，把条件分支语句提炼成函数

var getPrice = function( price ){
  var date = new Date();
  if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){
    return price * 0.8;
  }
  return price; 
};

// 重构后，改成能够理解的函数
var isSummer = function(){
  var date = new Date();
  return date.getMonth() >= 6 && date.getMonth() <= 9;
};

var getPrice = function( price ){ 
  if ( isSummer() ){ 
  return price * 0.8;
}
  return price; 
};

四，合理使用循环
五，提前让函数退出代替嵌套条件分支

点击更多