//不好的做法 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'); } }
下面代码中将配置数据保存在了config对象中，config对象的每个属性都保存了一个数据片段，每个属性名都有前缀，用以表明数据的类型(MSG表示展现给用户的信息，URL表示网络地址，CSS表示这是一个className)。当然，也可以将整个config对象放到单独的文件中，这样对配置数据的修改可以完全和使用这个数据的代码隔离开来
//好的做法 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); } }
五、选择器优化将选择器选择到的元素作为对象的静态属性集中到一个地方统一管理
initializeElements: function() { var eles = app.Eles; for (var name in eles) { if (eles.hasOwnProperty(name)) { this[name] = $(eles[name]); } } }
下面是一个例子
//好的做法 app.Eles = { widgetDiv: ".left-widget div", inputResize: '.input-resize', hr: '.hr', txt: '.input-group-btn button', cus: '#paper-type-cus', hid: '#hidden', mainCon: '#mainCon', rulerX: '.ruler-x', rulerY: '.ruler-y', };
六、函数优化 提炼函数在javascript开发中，大部分时间都在与函数打交道，所以希望这些函数有着良好的命名，函数体内包含的逻辑清晰明了。如果一个函数过长，不得不加上若干注释才能让这个函数显得易读一些，那这些函数就很有必要进行重构
如果在函数中有一段代码可以被独立出来，那最好把这些代码放进另外一个独立的函数中。这是一种很常见的优化工作，这样做的好处主要有以下几点
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 ); };
尽量减少参数数量如果调用一个函数时需要传入多个参数，那这个函数是让人望而生畏的，必须搞清楚这些参数代表的含义，必须小心翼翼地把它们按照顺序传入该函数。在实际开发中，向函数传递参数不可避免，但应该尽量减少函数接收的参数数量。下面举个非常简单的示例。有一个画图函数draw，它现在只能绘制正方形，接收了3个参数，分别是图形的width、heigth以及square：
var draw = function(width,height,square){};
但实际上正方形的面积是可以通过width和height计算出来的，于是我们可以把参数square从draw函数中去掉：
var draw = function( width, height ){ var square = width * height; };
假设以后这个draw函数开始支持绘制圆形，需要把参数width和height换成半径radius，但图形的面积square始终不应该由客户传入，而是应该在draw函数内部，由传入的参数加上一定的规则计算得来。此时，可以使用策略模式，让draw函数成为一个支持绘制多种图形的函数
传递对象参数代替过长的参数列表有时候一个函数有可能接收多个参数，而参数的数量越多，函数就越难理解和使用。使用该函数的人首先得搞明白全部参数的含义，在使用的时候，还要小心翼翼，以免少传了某个参数或者把两个参数搞反了位置。如果想在第3个参数和第4个参数之中增加一个新的参数，就会涉及许多代码的修改，代码如下：