几点建议帮你写出简洁的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/
几点建议帮你写出简洁的JS代码的更多相关文章
- 写出简洁的Python代码: 使用Exceptions(转)
add by zhj: 非常好的文章,异常在Python的核心代码中使用的非常广泛,超出一般人的想象,比如迭代器中,当我们用for遍历一个可迭代对象时, Python是如何判断遍历结束的呢?是使用的S ...
- 【原创】怎样才能写出优雅的 Java 代码?这篇文章告诉你答案!
本文已经收录自 JavaGuide (59k+ Star):[Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核心知识. 本文比较简短,基本就是推荐一些对于写好代码非常有用的文章或者 ...
- 如何用java写出无副作用的代码
搞java的同学们可能对无副作用这个概念比较陌生,这是函数式编程中的一个概念,无副作用的意思就是: 一个函数(java里是方法)的多次调用中,只要输入参数的值相同,输出结果的值也必然相同,并且在这个函 ...
- 如何写出优雅的CSS代码 ?(转)
对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...
- fir.im Weekly - 如何写出零 bug 的代码
神兽护体,代码无bug.经常看到代码注释的各种形状,这是一种程序员情怀.那么,如何能写出零 Bug 的代码呢,来看看@码农翻身 的这篇手册--零Bug的代码是怎么炼成的. 写零 Bug 一定少不了代码 ...
- 如何写出优雅的css代码 ?
如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...
- JAVA语言之怎样写出高性能的Java代码?
本文主要向大家介绍了JAVA语言之怎样写出高性能的 Java 代码?通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助. 在这篇文章中,我们将讨论几个有助于提升Java应用程序性能的方法.我 ...
- 如何写出健壮的Java代码
近来在公司写代码,写出的代码发现BUG很多,为了实现一个功能,代码改了又改,影响了工单的效率,也影响个人绩效,因此从网上找了些关于写健壮代码的文章看了看,再加上自己的一些经验总结. 所谓健壮的代码是指 ...
- 如何写出优雅的JavaScript代码 ? && 注释
如何写出优雅的JavaScript代码 ? 之前总结过一篇<如何写出优雅的css代码?>, 但是前一段时间发现自己的js代码写的真的很任性,没有任何的优雅可言,于是这里总结以下写js时应当 ...
随机推荐
- My Feedback for Windows 10 IoT Core on Feedback Hub App (4/1/2017-1/23/2018)
- 【sql注入教程】mysql注入直接getshell
Mysql注入直接getshell的条件相对来说比较苛刻点把 1:要知道网站绝对路径,可以通过报错,phpinfo界面,404界面等一些方式知道 2:gpc没有开启,开启了单引号被转义了,语句就不能正 ...
- 音视频编解码——LAME
一.LAME简介 LAME是目前非常优秀的一种MP3编码引擎,在业界,转码成Mp3格式的音频文件时,最常用的就是LAME库.当达到320Kbit/s时,LAME编码出来的音频质量几乎可以和CD的音质相 ...
- Javascript高级编程学习笔记(23)—— 函数表达式(1)递归
前面的文章中,我在介绍JS中引用类型的时候提过,JS中函数有两种定义方式 第一种是声明函数,即使用function关键字来声明 第二种就是使用函数表达式,将函数以表达式的形式赋值给一个变量,这个变量就 ...
- 小程序页面跳转传参-this和that的区别-登录流程-下拉菜单-实现画布自适应各种手机尺寸
小程序页面跳转传参 根目录下的 app.json 文件 页面文件的路径.窗口表现.设置网络超时时间.设置多 tab { "pages": [ "pages/index/i ...
- 第57节:Java中流的操作以及编码解码
我的博客: https://huangguangda.cn/ https://huangguangda.github.io/ 前言: 编码解码:编码时将信息从一种形式变成为另一种形式,成为编码.编码为 ...
- 微信公众号接入之排序问题小记 Arrays.sort()
微信公众号作为强大的自媒体工具,对接一下是很正常的了.不过这不是本文的方向,本文的方向公众号接入的排序问题. 最近接了一个重构的小项目,需要将原有的php的公众号后台系统,转换为java系统.当然,也 ...
- 一篇文章读懂HTTPS及其背后的加密原理
HTTPS(全称: Hypertext Transfer Protocol Secure,超文本传输安全协议),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.本文,就来深入介绍下其原理. 1 ...
- .Net Core新建解决方案,添加项目引用,使用VSCode调试
并不是我自己琢磨的,是看了别人学习的,因为写的都不完整,所以就整理一下记录后面忘了回看. 反正.Net Core是跨平台的,就不说在什么系统上了.假设我要建一个名为Doggie的解决方案,里面包含了一 ...
- Golang 对MongoDB的操作简单封装
使用MongoDB的Go驱动库 mgo,对MongoDB的操作做一下简单封装 初始化 操作没有用户权限的MongoDB var globalS *mgo.Session func init() { s ...