写出维护性好的代码应遵守哪些规则？(1)

编写可维护代码，对我来说是现阶段需要明确提升的一个方法。毕竟还是野路子出来的，有时明知那样写，重用性差、容易造成代码冗余，但是或是时间紧，或是暂时没有想到更好的实现方式，就会那么稀里糊涂的写出烂代码。

但代码的维护者也是自己，过段时间再看，会觉得哪哪不好，但有时懒癌发作，又不太想重构，如此便会层层积压着烂代码。所以何不一开始就写出可维护性高的好代码呢？尽管写出好代码，是需要不断磨炼的，但我也是愿意加快进程，多做些总结，以提示我日后在代码编写过程中，能直接想到好的写法，而不至于后面重构来浪费时间。

规则1、隔离应用逻辑

先来看个示例：

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

上例是一个点击事件监听，是比较普通的写法，但有个问题，事件行为和应用逻辑高度耦合在了一个方法中，这样没法重用，其他地方再有点击事件时，只能重新写方法。比较好的实践是

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对象执行任何必要的操作，包括阻止默认事件或者阻止事件冒泡等。

喜欢本文请扫下方二维码，关注微信公众号：前端小二，查看更多我写的文章哦，多谢支持。
在这里插入图片描述