javascript代码优化的8点总结(3)
下面代码中将配置数据保存在了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 );
};
内容版权声明：除非注明，否则皆为本站原创文章。