improve js code | Savannah

Publish Date: 2020-11-23

js从css抽离出来

css 从js中抽离出来

减少全局变量

事件处理

隔离应用逻辑

将应用逻辑从所有事件处理程序中抽离出来是一种最佳实践

//不好的做法
function handleClick(event){
  var popup = document.getElementById('popup');
  popup.style.left = event.clientX + 'px';
  popup.style.top = event.clientY + 'px';
  popup.className = 'reveal';
}
addListener(element,'click',handleClick);

//好的做法
var MyApplication = {
  handleClick: function(event){
    this.showPopup(event);
  },
  showPopup: function(event){
    var popup = document.getElementById('popup');
    popup.style.left = event.clientX + 'px';
    popup.style.top = event.clientY + 'px';
    popup.className = 'reveal';
  }
};
addListener(element,'click',function(event){
  MyApplication.handleClick(event);
});

不要分发事件对象

让事件处理程序使用event对象来处理事件，然后拿到所有需要的数据传给应用逻辑

//改进的做法
var MyApplication = {
  handleClick: function(event){
    this.showPopup(event.clientX,event.clientY);
  },
  showPopup: function(x,y){
    var popup = document.getElementById('popup');
    popup.style.left = x + 'px';
    popup.style.top = y + 'px';
    popup.className = 'reveal';
  }
};
addListener(element,'click',function(event){
  MyApplication.handleClick(event);
});

当处理事件时，最好让事件程序成为接触到event对象的唯一的函数。

//改进的做法
var MyApplication = {
  handleClick: function(event){
    event.preventDefault();
    event.stopPropagation();
    this.showPopup(event.clientX,event.clientY);
  },
  showPopup: function(x,y){
    var popup = document.getElementById('popup');
    popup.style.left = x + 'px';
    popup.style.top = y + 'px';
    popup.className = 'reveal';
  }
};
addListener(element,'click',function(event){
  MyApplication.handleClick(event);
});

配置数据

关键数据从代码抽离

URL
需要展现给用户的字符串
重复的值
配置项
任何可能发生变更的值

将配置数据保存在了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);
  }
}

选择器优化

//好的做法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',
};

函数优化

　1、避免出现超大函数

　2、独立出来的函数有助于代码复用

　3、独立出来的函数更容易被覆写

　4、独立出来的函数如果拥有一个良好的命名，它本身就起到了注释的作用

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