几点建议帮你写出简洁的JS代码
2017-07-15 09:22
183 查看
译者按: 规范的代码可以有效避免代码bug,fundebug才会报警少一点!
原文: Tips for Writing Cleaner Code
译者: Fundebug
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。
我决定为初学者写一篇博客来介绍一些常见编程技巧,这些技巧可以帮助你写出更加规范,容易维护的代码。
正如我们已经提过,阅读这段代码的开发者需要去推测为什么用
我们再举一个例子(来自一个实际的项目):
html的布局稍有变动,都将导致这部分代码出错。
我们再看一个:
这段代码好一点,至少没有使用看不懂的数字,但JavaScript代码还是和html有太多的绑定。
我们可以使用`data-*`语法:
然后,用更加简洁的语法来获取属性值:
或则:
对于个人而言,我从不使用这些简化版的函数,接下来我会告诉你为什么。
对于初学者或则经验不足的开发者,你会发现写代码也会分为不同的层次:
a. 初级
b. 考虑异常情况
c. 如果认真阅读
我发现初学者很少在项目开发中考虑错误处理,他们通常不愿意多花5分钟额外的时间去完善这部分工作,或则自信的认为代码不会有问题。
如果他们决定添加错误处理到`$.post`,通常会像下面这样写:
这样写是很难理解的!每次都去写出错处理非常的繁琐和耗时,你可以定义一个默认的错误处理句柄(default error handler)来应对所有的ajax请求。对于全局的异常,产品上线以后可以使用fundebug的JavaScript插件来抓取。
我们回到
问题在于,如果我们要把同一个事件绑定到一个新的元素(比如一个新载入的评论)。我浏览过很多解法,其中一个典型的解法是重新定义所有元素上的事件:
在jQuery 1.7中有
值得一提的是,上面的代码对于动态生成的对象也有效。应当大力提倡,不过也要小心!如下代码会导致效率的降低,拖慢浏览器的速度:
举个例子:
如果我们想要移除第二个handler, 使用`$(‘a’).off(‘click’)`确会把两个handler都移除掉!
但是如果使用带命名空间的事件,就可以搞定:
使用如下代码移除:
如果想更多了解,请参考: Event names and namespaces
这还只是我在阅读别人代码的时候,经常遇到的问题中的一小部分。我希望这篇文章可以帮助大家提高写代码的质量!
版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/07/12/tips_for_writing_cleaner_code/
原文: 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 = $ c4e1 .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代码
- 几点建议帮你写出简洁的JS代码-转自别人的博客
- 简洁的JS代码--几点建议-积累ing
- 几点建议帮你写出简洁的JS代码
- JS编程艺术笔记(2)-编写JS代码的几点建议
- 每天写出好代码的5个建议
- 菜鸟好文推荐(十三)——关于代码审查的几点建议
- js实现简洁大方的二级下拉菜单效果代码
- js实现简洁大方的二级下拉菜单效果代码
- 用js写的简洁笔记本(便于查看代码和运行结果 )
- 每天写出好代码的5个建议
- 纯js分页代码(简洁实用)
- 每天写出好代码的5个建议
- JS比较两个时间大小的简洁代码
- 如何写出更好的android代码?提升android性能的一些建议。
- 阅读代码的几点建议
- 每天写出好代码的5个建议——你也可以变优秀
- 每天写出好代码的五条建议
- Java编程中写出好代码的建议
- js实现浮动在网页右侧的简洁QQ在线客服代码