专栏首页前端一会写出维护性好的代码应遵守哪些规则?(1)

写出维护性好的代码应遵守哪些规则?(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对象执行任何必要的操作,包括阻止默认事件或者阻止事件冒泡等。

本文分享自微信公众号 - 前端小二(frontendxiao2),作者:小二君

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 环形饼图ECharts实现Demo

    由于接下来的项目可能会大量用到图表显示与交互,所以抽空仔细看了下echarts文档。顺手根据可能有的项目需求写了个饼图demo。本例只写出demo所用配置的注意...

    前端_AWhile
  • nvm安装多版本nodejs

    在熟悉了原生JavaScript和nodejs之后,要开始进入到前端项目构建工具的范畴了,这是后期便于使用vue等的必经之路,毕竟磨刀不误砍柴功嘛,熟悉了生产力...

    前端_AWhile
  • 《你不知道的JavaScript》:生成器函数执行模式初体会

    在js中,有一个普遍依赖的假定:一个函数一旦开始执行,就会运行到结束,期间不会有其他代码能够打断它并插入其间。

    前端_AWhile
  • Vue.js源码分析-- eventsAPI--1.0.26

    近期开发的项目中前端使用的是Vue框架,很轻量,也很好用。不过,因为用的是别人家开发的框架,代码执行的情况是否跟我们意料的一致值得思考。调试代码或者利用测试框架...

    前端博客 : alili.tech
  • 屏蔽鼠标右键,F1帮助和常用快捷键

    源哥
  • 屏蔽相应键盘按钮

     //屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键 //AuthorJavaScript ...

    Java架构师必看
  • Python watchdog

    Java学习123
  • 一个简单的例子学会github repository的webhook

    github的webhook是个有用的功能,允许开发人员指定一个服务器的url。当开发者对github仓库施加操作,比如提交代码,创建issue时,github...

    Jerry Wang
  • 第47天:拖动弹出框

    半指温柔乐
  • 模拟实现jQuery的$().on()和$().trigger()

    前言: 仅仅是简单模拟了$().on()和$().trigger(),仅支持id选择器,事件冒泡与事件委托。

    进击的小进进

扫码关注云+社区

领取腾讯云代金券