javascript代码优化的8点总结(2)

日期：2020-05-11 栏目：程序人生浏览：次

//不好的做法
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);
});

2、不要分发事件对象

应用逻辑不应当依赖于event对象来正确完成功能，方法接口应该表明哪些数据是必要的。代码不清晰就会导致bug。最好的办法是让事件处理程序使用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对象的唯一的函数。事件处理程序应当在进入应用逻辑之前针对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);
});

配置数据

代码无非是定义一些指令的集合让计算机来执行。我们常常将数据传入计算机，由指令对数据进行操作，并最终产生一个结果。当不得不修改数据时，可能会带来一些不必要的风险。应当将关键数据从代码中抽离出来

配置数据是指导在应用中写死的值，且将来可能会被修改，包括如下内容

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

下面是未处理配置数据的做法

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

转载注明出处：https://www.heiqu.com/49.html

javascript代码优化的8点总结(2)

配置数据

相关推荐