首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >写出维护性好的代码应遵守哪些规则?(1)

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

作者头像
前端_AWhile
发布2019-08-29 14:50:15
4060
发布2019-08-29 14:50:15
举报
文章被收录于专栏:前端一会前端一会

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

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

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-12-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端小二 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 规则1、隔离应用逻辑
  • 规则2、不要无节制的分发事件对象
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档