几点建议帮你写出简洁的JS代码

译者按: 规范的代码可以有效避免代码bug,fundebug才会报警少一点!

原文: Tips for Writing Cleaner Code

译者: Fundebug

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

我决定为初学者写一篇博客来介绍一些常见编程技巧,这些技巧可以帮助你写出更加规范,容易维护的代码。

1. 常量

这个问题哦不仅仅是写JavaScript的开发者们会遇到,在所有的开发语言中都要避免。我们来看一个例子:


$elem.on(‘keydown‘, function(e) {

if (e.keyCode == 27) {

//...

}

});

27到底代表什么?如果你经常编程,很容易知道这个数字代表ESC键。但是对大多数开发者,特别是初学者,他们要么记不住这些数字代号,要么根本就不知道。当在阅读源代码的时候,遇到这样的代码段,那么就需要花费时间去查找27和按键的对应关系。当然,你也可以在后边加上注释。不过,在这里我建议你使用一个常量名来代替,比如:KEY_ESC = 27。这样更加直观易懂!

2. 标识符(identifiers)

我们经常需要获取某个元素(评论、博客、用户、等等)的标识符,然后做一些计算。比如:


var id = $(this).attr(‘id‘).substring(8);

正如我们已经提过,阅读这段代码的开发者需要去推测为什么用8

我们再举一个例子(来自一个实际的项目):


var last_id = $(‘#answer_pid‘ + id + ‘ li:first div‘).attr(‘id‘).substr(7);

html的布局稍有变动,都将导致这部分代码出错。

我们再看一个:


<div class="comment" id="comment_123"></div>

var id = $(this).attr(‘id‘).substring("comment_".length);

这段代码好一点,至少没有使用看不懂的数字,但JavaScript代码还是和html有太多的绑定。

我们可以使用data-*语法:


<div class="comment" data-id="123"></div>

然后,用更加简洁的语法来获取属性值:


var id = $(this).attr(‘data-id‘);

或则:


var id = $(this).data(‘id‘);

3. $.post

我们都知道jQuery有一个ajax函数$.ajax。对于具体的操作,还有$.get, $..load, $.post, 等等。这些函数被我们频繁的使用(上传一段脚本,json文件,执行一个post请求),它们底层都是用$.ajax实现。

对于个人而言,我从不使用这些简化版的函数,接下来我会告诉你为什么。

对于初学者或则经验不足的开发者,你会发现写代码也会分为不同的层次:

  • a. 初级

$.post(url, data, function(data) {

data = $.parseJSON(data);

//...

});

  • b. 考虑异常情况


    $.post(url, data, function(data) {

    try {

    data = $.parseJSON(data);

    } catch (e) {

    return;

    }

    //...

    });

  • c. 如果认真阅读$.post的文档,我们就会发现最后一个参数应该是数据的类型dataType, 但是我发现在大多数开发者写的代码中都忘记了!

$.post(url, data, function(data) {

//...

}, ‘json‘);

我发现初学者很少在项目开发中考虑错误处理,他们通常不愿意多花5分钟额外的时间去完善这部分工作,或则自信的认为代码不会有问题。

如果他们决定添加错误处理到$.post,通常会像下面这样写:


$.post(url, data, function(data) {

//...

}, ‘json‘).error(function() {

//...

});

这样写是很难理解的!每次都去写出错处理非常的繁琐和耗时,你可以定义一个默认的错误处理句柄(default error handler)来应对所有的ajax请求。对于全局的异常,产品上线以后可以使用fundebug的JavaScript插件来抓取。


$.ajaxSetup({

error: function() {

// Error modal

}

});

我们回到$.post函数,上面的写法很难读懂,而且dataType作为最后一个参数很容易遗漏。我个人认为,如下的写法更加容易阅读和维护:


$.ajax({

type: "POST",

url: url,

data: data,

dataType: "json",

success: function(data) {

//...

},

error: function() {

//...

}

});

4. 多元素事件

有时候,我们需要给页面元素绑定对应的事件(删除消息的按钮)。经常,我们会这样实现:


$(‘.comment a.delete‘).click(function(){

//...

});

问题在于,如果我们要把同一个事件绑定到一个新的元素(比如一个新载入的评论)。我浏览过很多解法,其中一个典型的解法是重新定义所有元素上的事件:


$(‘.comment a.delete‘).unbind(‘click‘).click(function() {

//

});

在jQuery 1.7中有on事件,可以把事件绑定到某个行为,并且可以通过选择器(selector)过滤元素:


$(‘body‘).on(‘click‘, ‘a.external‘, function(e) {

// 该函数只会绑定到那些有external类的元素上

});

值得一提的是,上面的代码对于动态生成的对象也有效。应当大力提倡,不过也要小心!如下代码会导致效率的降低,拖慢浏览器的速度:


$(‘body‘).on(‘mousemove‘, selector, function() {

//...

});

5. 带命名空间的事件(namespaced events)

带命名空间的事件(namespaced events)在jQuery 1.2就被加入了,但是没有几个人用。我敢打赌你也不知道!

举个例子:


$(‘a‘).on(‘click‘, function() {

// Handler 1

});

$(‘a‘).on(‘click‘, function() {

// Handler 2

});

如果我们想要移除第二个handler, 使用$(‘a’).off(‘click’)确会把两个handler都移除掉!

但是如果使用带命名空间的事件,就可以搞定:


$(‘a‘).on(‘click.namespace1‘, function() {

//Handler 1

});

$(‘a‘).on(‘click.namespace2‘, function() {

//Handler 2

});

使用如下代码移除:


$(‘a‘).off(‘click.namespace2‘);

如果想更多了解,请参考: Event names and namespaces

这还只是我在阅读别人代码的时候,经常遇到的问题中的一小部分。我希望这篇文章可以帮助大家提高写代码的质量!

版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/07/12/tips_for_writing_cleaner_code/
时间: 2024-11-01 22:35:23

几点建议帮你写出简洁的JS代码的相关文章

【原创】怎样才能写出优雅的 Java 代码?这篇文章告诉你答案!

本文已经收录自 JavaGuide (59k+ Star):[Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核心知识. 本文比较简短,基本就是推荐一些对于写好代码非常有用的文章或者资源.讲真的,下面推荐的文章或者资源强烈建议阅读 3 遍以上. 团队 阿里巴巴Java开发手册(详尽版) https://github.com/alibaba/p3c/blob/master/阿里巴巴Java开发手册(华山版).pdf Google Java编程风格指南: http://hawste

力荐!这些工具可以帮你写出干净的代码

作者|Adeel Imran译者|无明 想写出好代码,却不知道从哪里开始?想删除死代码?想在代码库中找出未被使用的变量?想在代码中找出有问题的模式? 你是多元化团队的负责人吗?你的团队中有新来的开发人员吗?你担心他们会写出不符合标准的代码吗?在代码评审时是否花了一整天的时间去检查代码标准,而不是实际的逻辑实现? 我一直在做这样的事情,经常忙得像热锅上的蚂蚁.但从现在开始,我们要保证永远不再担心这类问题.在阅读本文过程中,如果遇到困难,可以参考代码库(https://github.com/adee

如何写出优雅的CSS代码 ?(转)

对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML代码. 如何写出优雅的css代

【知识点】如何写出优雅的CSS代码 ?

对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML代码. 如何写出优雅的css代

利用|,&amp;,^,~,&lt;&lt;,&gt;&gt;&gt;写出高效艺术的代码

简介: 大家在阅读源码的时候经常会看到一些比如下面这样特别难理解的代码. cancelEvent.setAction(MotionEvent.ACTION_CANCEL | (motionEvent.getActionIndex() << MotionEvent.ACTION_POINTER_INDEX_SHIFT)); order = ((order) >> (INDEX_OFFSET -1) + 1) << INDEX_OFFSET; 类似与这种"高大上&

如何写出优雅的css代码?

如何写出优雅的css代码? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来井井有条,清晰易懂,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML代码. 如

关于单元测试,如何写出可测试的代码?

单元测试在一个完整的软件开发流程中是必不可少的.非常重要的一个环节.通常写单元测试并不难,但有的时候,有的代码和功能难以测试,导致写起测试来困难重重.因此,写出良好的可测试的(testable)代码是非常重要的.接下来,我们简要地讨论一下什么样的代码是难以测试的,我们应该如何避免写出难以测试的代码,以及要写出可测试性强的代码的一些最佳实践. 什么是单元测试(unit test)? 在计算机编程中,单元测试(英语:Unit Testing)又称为模块测试, 是针对程序模块(软件设计的最小单位)来进

【整洁之道】如何写出更整洁的代码(上)

如何写出更整洁的代码 代码整洁之道不是银弹,不会立竿见影的带来收益. 没有任何犀利的武功招式,只有一些我个人异常推崇的代码整洁之道的内功心法.它不会直接有效的提高你写代码的能力与速度,但是对于程序员的整个职业生涯必然会带来意想不到的好处. 如果你还是一个在校学生,或者是刚工作没多久的"菜鸟",那么很有必要接触一些这方面的知识的.很显然,它会帮助你更快的适应企业级开发的要求. 1. 为什么需要代码更整洁? 在考虑代码整洁的时候,我们需要明确的一个前提是,这里不讨论代码的对错. 关于什么是

幸福村站——成都传智播客程序员写出你的烧烤代码

又是一个阳光明媚,风和日丽之天,如果作为程序员的你还在键盘上苦苦的想着下一串代码该怎么写的话,那你就弱爆了.俗语说得好,学习要劳逸结合,写代码更是需要清晰的思维,在传智播客Java基础班开班一个月后,班主任决定带着这群"猿猴们"去传说中的"幸福村"放松放松,我们也跟着一起去感受程序员们的烧烤代码的幸福吧! 带着好奇的心理走进了"幸福梅林站",一个又一个的农家乐园开始浮现在我们眼前,那里朴素的民风和美丽的风景让我们暂时忘却了学习上的烦恼和城市里的喧