资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/几点建议帮你写出简洁的JS代码

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

wuaiqiu / 1083人阅读

摘要：我决定为初学者写一篇博客来介绍一些常见编程技巧，这些技巧可以帮助你写出更加规范，容易维护的代码。不过，在这里我建议你使用一个常量名来代替，比如。自从年双十一正式上线，累计处理了亿错误事件，得到了金山软件等众多知名用户的认可。

译者按: 规范的代码可以有效避免代码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的布局稍有变动，都将导致这部分代码出错。

我们再看一个：


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

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

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

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

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

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了6亿+错误事件，得到了Google、360、金山软件等众多知名用户的认可。欢迎免费试用！

版权声明

https://blog.fundebug.com/2017/07/12/tips_for_writing_cleaner_code/

私有云 云服务器 几点建议 最短路径算法最简洁的代码 代码html写出键盘 js188条建议

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84321.html

相关文章

  • 【回顾九月份第二周】 前端你该知道的事儿

    摘要：顺便一说，这首歌的原唱是秋田，中岛当年嗓子坏了，才有这歌。中文是直接翻译来的，作曲是秋田。一部电影春夏秋冬又一春春夏秋冬又一春是由金基德执导，金英民吴英秀金基德主演的一部韩国电影。年月日于韩国上映。 原链接： http://bluezhan.me/weekly/#/9-2 1、web前端 Angular vs. React vs. Vue: A 2017 comparison 9 S...

    sixgo 评论0 收藏0

  • 【回顾九月份第二周】 前端你该知道的事儿

    摘要：顺便一说，这首歌的原唱是秋田，中岛当年嗓子坏了，才有这歌。中文是直接翻译来的，作曲是秋田。一部电影春夏秋冬又一春春夏秋冬又一春是由金基德执导，金英民吴英秀金基德主演的一部韩国电影。年月日于韩国上映。 原链接： http://bluezhan.me/weekly/#/9-2 1、web前端 Angular vs. React vs. Vue: A 2017 comparison 9 S...

    levius 评论0 收藏0

  • [译] 前端攻略-从路人甲到英雄无敌

    摘要：整个系统变得日益繁复，人们也会去选择使用一些预处理器或者后处理器来管理这种复杂性。的预处理器或者语言的扩展会在无声无息之间提供类似于变量以及继承这些特性。最主要的两个的预处理器就是与。 本文的 Github Repo本文翻译自 FreeCodeCamp 的 from-zero-to-front-end-hero-part。本文的第二部分：这里 译者的废话，不感兴趣的直接忽略 前两天才翻...

    RancherLabs 评论0 收藏0

  • 如何写出高效率的HTML

    摘要：之所以写这篇文章，就是为了告诉你如何写出干净整洁的代码，能够让你的网页在许多设备上都能快速正常的加载运行。在这个过程中，你能够学会如何搭建易于维护和的网站以及。无论如何，尽量避免同时在和，或者和添加。 个人翻译，欢迎转载！ 英文原文：https://samdutton.wordpress.com/2015/04/02/high-performance-html/ 第一次翻...

    lsxiao 评论0 收藏0

发表评论

登陆后可评论

0条评论

wuaiqiu

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<