全局变量

  全局变量被认为是JavaScript语言最糟糕的特性之一，尤其在团队开发下更是问题多多。随着代码量的增长，全局变量会导致一些非常严重的可维护性问题。
  一般而言，有如下三种解决办法：
  1、IIFE

(function(){
  var doc =window.document;
})(window);

  2、单全局变量和命名空间
  JQuery就是采用这种方法，即只创建一个全局变量，并将所有的功能代码都挂载到这个全局对象上。
  3、模块化
　　Vue、React配合Webpack可以很容易地支持模块化开发，也是目前主流的一种开发方式。

多用class改变样式

  将CSS从JS中抽离：通过JS修改CSS样式时，使用className或classList，不要逐条修改style样式。

// 不好的做法一
ele.style.color = 'red';
ele.style.left= '10px';
// 不好的做法二
ele.style.cssText ='color:red;left:10px;';
// ---------------------------------
.reveal{color:red;left:10px;}
// 好的做法一
ele.className += 'reveal';
// 好的做法二
ele.classList.add('reveal');

可配置数据

  将来可能会修改的数据，写成可配置的数据是而不是写死的值，常见的有：URL、需要展现给用户的字符串、重复的值、配置项、任何可能发生变更的值。

//不好的做法
function validate(value){
  if(!value){
    alert('Invalid value');
    location.href="/errors/invalid.php";
  }
}
function toggleSelected(element){
  if(hasClass(element,'selected')){
    removeClass(element,'selected');
  }else{
    addClass(element,'selected');
  }
}

//好的做法
var config = {
  MSG_INVALID_VALUE: 'Invalid value',
  URL_INVALID:'/errors/invalid.php',
  CSS_SELECTED:'selected'
}
function validate(value){
  if(!value){
    alert(config.MSG_INVALID_VALUE);
    location.href=config.URL_INVALID;
  }
}
function toggleSelected(element){
  if(hasClass(element,config.CSS_SELECTED)){
    removeClass(element,config.CSS_SELECTED);
  }else{
    addClass(element,config.CSS_SELECTED);
  }
}

提炼函数

  在JS开发中，大部分时间都在与函数打交道，所以希望这些函数有着良好的命名，函数体内包含的逻辑清晰明了。如果一个函数过长，不得不加上若干注释才能让这个函数显得易读一些，那这些函数就很有必要进行重构。
　　如果在函数中有一段代码可以被独立出来，那最好把这些代码放进另外一个独立的函数中。这是一种很常见的优化工作，这样做的好处主要有以下几点：
　　1、避免出现超大函数。
　　2、独立出来的函数有助于代码复用。
　　3、独立出来的函数更容易被覆写。
　　4、独立出来的函数如果拥有一个良好的命名，它本身就起到了注释的作用。
　　比如在一个负责取得用户信息的函数里面，还需要打印跟用户信息有关的log，那么打印log的语句就可以被封装在一个独立的函数里：

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 ); // 跳转
    }
};

  可以看到，负责跳转的代码jump(currPage)在每个条件分支内都出现了，所以完全可以把这句代码独立出来：

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

条件分支语句提炼成函数

  在程序设计中，复杂的条件分支语句是导致程序难以阅读和理解的重要原因，而且容易导致一个庞大的函数。

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

  观察这句代码：date.getMonth()>=6&&date.getMonth()<=9，尽管这句代码很短小，但代码表达的意图和代码自身还存在一些距离，阅读代码的人必须要多花一些精力才能明白它传达的意图。其实可以把这句代码提炼成一个单独的函数，既能更准确地表达代码的意思，函数名本身又能起到注释的作用。

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

合理使用循环

  在函数体内，如果有些代码实际上负责的是一些重复性的工作，那么合理利用循环不仅可以完成同样的功能，还可以使代码量更少。

var createXHR = function(){
    var xhr;
    try{
        xhr = new ActiveXObject( 'MSXML2.XMLHttp.6.0' );
    }catch(e){
        try{
            xhr = new ActiveXObject( 'MSXML2.XMLHttp.3.0' );
        }catch(e){
            xhr = new ActiveXObject( 'MSXML2.XMLHttp' );
        }
    }
    return xhr;
};
var xhr = createXHR();

  下面灵活地运用循环，可以得到跟上面代码一样的效果：

var createXHR = function(){
    var versions= [ 'MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp' ];
    for ( var i = 0, version; version = versions[ i++ ]; ){
        try{
            return new ActiveXObject( version );
        }catch(e){
        }
    }
};
var xhr = createXHR();

提前让函数退出代替嵌套条件分支

  许多程序员都有这样一种观念：“每个函数只能有一个入口和一个出口。”现代编程语言都会限制函数只有一个入口。但关于“函数只有一个出口”，往往会有一些不同的看法。下面这段伪代码是遵守“函数只有一个出口的”的典型代码：

var del = function( obj ){
    var ret;
    if ( !obj.isReadOnly ){ // 不为只读的才能被删除
        if ( obj.isFolder ){ // 如果是文件夹
            ret = deleteFolder( obj );
        }else if ( obj.isFile ){ // 如果是文件
            ret = deleteFile( obj );
        }
    }
    return ret;
};

  嵌套的条件分支语句在阅读和理解上更加困难，绝对是代码维护者的噩梦。但实际上，如果对函数的剩余部分不感兴趣，那就应该立即退出，引导阅读者去看一些没有用的else片段，只会妨碍他们对程序的理解。

var del = function( obj ){
    if ( obj.isReadOnly ){ // 反转if 表达式
        return;
    }
    if ( obj.isFolder ){
        return deleteFolder( obj );
    }
    if ( obj.isFile ){
        return deleteFile( obj );
    }
};

传递对象参数代替过长的参数列表

  有时候一个函数有可能接收多个参数，而参数的数量越多，函数就越难理解和使用。使用该函数的人首先得搞明白全部参数的含义，在使用的时候，还要小心翼翼，以免少传了某个参数或者把两个参数搞反了位置。如果想在第3个参数和第4个参数之中增加一个新的参数，就会涉及许多代码的修改，代码如下：

var setUserInfo = function( id, name, address, sex, mobile, qq ){
    console.log( 'id= ' + id );
    console.log( 'name= ' +name );
    console.log( 'address= ' + address );
    console.log( 'sex= ' + sex );
    console.log( 'mobile= ' + mobile );
    console.log( 'qq= ' + qq );
};
setUserInfo( 1314, 'xiaohuochai', 'beijing', 'male', '150********', 121631835 );

  这时可以把参数都放入一个对象内，然后把该对象传入setUserInfo函数，setUserInfo函数需要的数据可以自行从该对象里获取。现在不用再关心参数的数量和顺序，只要保证参数对应的key值不变就可以了：

var setUserInfo = function( obj ){
        console.log( 'id= ' + obj.id );
        console.log( 'name= ' + obj.name );
        console.log( 'address= ' + obj.address );
        console.log( 'sex= ' + obj.sex );
        console.log( 'mobile= ' + obj.mobile );
        console.log( 'qq= ' + obj.qq );
    };
    setUserInfo({
        id: 1314,
        name: 'xiaohuochai',
        address: 'beijing',
        sex: 'male',
        mobile: '150********',
        qq: 121631835
    });

尽量减少参数数量

  如果调用一个函数时需要传入多个参数，那这个函数是让人望而生畏的，必须搞清楚这些参数代表的含义，必须小心翼翼地把它们按照顺序传入该函数。在实际开发中，向函数传递参数不可避免，但应该尽量减少函数接收的参数数量。下面举个非常简单的示例。有一个画图函数draw，它现在只能绘制正方形，接收了3个参数，分别是图形的width、heigth以及square：

var draw = function(width,height,square){};

  但实际上正方形的面积是可以通过width和height计算出来的，于是我们可以把参数square从draw函数中去掉：

var draw = function( width, height ){
    var square = width * height;
};

用return退出多重循环

  假设在函数体内有一个两重循环语句，需要在内层循环中判断，当达到某个临界条件时退出外层的循环。大多数时候会引入一个控制标记变量：

var func = function(){
    var flag = false;
    for ( var i = 0; i < 10; i++ ){
        for ( var j = 0; j < 10; j++ ){
            if ( i * j >30 ){
                flag = true;
                break;
            }
        }
        if ( flag === true ){
            break;
        }
    }
};

  第二种做法是设置循环标记：

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

  这两种做法无疑都让人头晕目眩，更简单的做法是在需要中止循环的时候直接退出整个方法：

var func = function(){
    for ( var i = 0; i < 10; i++ ){
        for ( var j = 0; j < 10; j++ ){
            if ( i * j >30 ){
                return;
            }
        }
    }
};

参考文献

《JavaScript设计模式与开发实践》
关于javascript代码优化的8点建议