编写可维护代码，对我来说是现阶段需要明确提升的一个方法。毕竟还是野路子出来的，有时明知那样写，重用性差、容易造成代码冗余，但是或是时间紧，或是暂时没有想到更好的实现方式，就会那么稀里糊涂的写出烂代码。
但代码的维护者也是自己，过段时间再看，会觉得哪哪不好，但有时懒癌发作，又不太想重构，如此便会层层积压着烂代码。所以何不一开始就写出可维护性高的好代码呢？尽管写出好代码，是需要不断磨炼的，但我也是愿意加快进程，多做些总结，以提示我日后在代码编写过程中，能直接想到好的写法，而不至于后面重构来浪费时间。
规则1、隔离应用逻辑
先来看个示例：
代码语言：javascript复制function clickMethod(event){
var pop = document.getElementById('btn1');
pop.style.left = event.clientX 'px';
pop.style.top = event.clientY 'px';
pop.className = 'revel';
}
document.getElementById('btn1').addEventListener('click', clickMethod);
上例是一个点击事件监听，是比较普通的写法，但有个问题，事件行为和应用逻辑高度耦合在了一个方法中，这样没法重用，其他地方再有点击事件时，只能重新写方法。比较好的实践是
代码语言：javascript复制var method = {
handleClick: function(event){
this.showPop(event);
},
showPop: function(event){
var pop = document.getElementById('btn1');
pop.style.left = event.clientX 'px';
pop.style.top = event.clientY 'px';
pop.className = 'revel';
}
}
document.getElementById('btn1').addEventListener('click', function(event){
method.handleClick(event);
});
规则2、不要无节制的分发事件对象
上例修改过的方法还有可以改进的地方，即将事件对象event到处传递，这在大型项目中，会造成代码不够明晰，容易造成bug。所以应该在handleClick()方法中。就明确传递的参数：
var method = {
handleClick: function(event){
event.preverntDefault();
event.stopPropagation();
this.showPop(event.clientX, event.clientY); //将event对象要传递的值明确传参
},
showPop: function(clientX, clientY){
var pop = document.getElementById('btn1');
pop.style.left = clientX 'px';
pop.style.top = clientY 'px';
pop.className = 'revel';
}
}
当处理事件时，应该让事件处理程序成为接触到event对象的唯一函数。事件处理程序应该在进入应用逻辑之前针对event对象执行任何必要的操作，包括阻止默认事件或者阻止事件冒泡等。
