UDN-企业互联网技术人气社区

板块导航

浏览  : 896
回复  : 0

[讨论交流] JavaScript -- 代码规范

[复制链接]
呵呵燕的头像 楼主
发表于 2016-11-27 21:40:31 | 显示全部楼层 |阅读模式
  使用制表符进行缩进,推荐使用 4 个空格字符作为一个缩进层级。

  建议每条语句以分号结尾,虽然 JavaScript 有自动分号插入(ASI) 机制,但是它的插入规则非常复杂难以记住,所以不推荐省略分号。

  为了代码的可读性,建议将一行代码的长度保持在 80 字符以内。

  当代码达到了单行最大字符限制时,需要将代码手动拆成两行,通常在元算符换行的时候,下一行最好增加两个层级的缩进。

 
  1.  callFunction(elementOne, elementTwo, elementThree, elementFour,

  2.   elementFive);
复制代码


  而且最好将一个运算符放置到行尾,这样的话,ASI 就不会自作主张的在行尾添加分号,也就避免了错误的发生。当然如果是在给变量赋值的时候换行,那么第二行的位置应当和赋值运算符的位置保持对齐。

  1.   var result = elementOne + elementTwo + elementThree +

  2.   elementFive;
复制代码


  合理的使用空行将让你的代码更加易于阅读。在以下场景中添加空行是非常不错的主意。

  在方法之间

  在方法中的局部变量和第一条语句之间

  在单行或多行注释之前

  在方法的逻辑片段之间

  下面是以上原则的实践。

  1.   if (true) {

  2.   for (var i = 0; i < Things.length; i++) {

  3.   var p = 1,

  4.   q = 2;

  5.   if (true) {

  6.   }

  7.   }

  8.   }
复制代码


  命名是一门艺术,更是一门技术,通常来讲命名长度应当尽可能的短,并且抓住要点。为变量命名时,其前缀应该是名词。为函数命名时前缀应当是动词,比如 can, has, is, set, get 等。对于常量的命名,最好使用大写字母和下划线的组和来命名,比如说 MAX_LENGTH 。

  null 是一个特殊值,但是千万不要和 undefined 搞混,在下列场景中应当使用 null。

  用来初始化一个变量,这个变量可能赋值为一个对象。

 
  1.  var person = null;
复制代码


  用来和一个已经初始化的变量比较,这个变量可以是也可以不是一个对象。

  1.   var person = getPerson();

  2.   if (person !== null) {

  3.   doSomething();

  4.   }
复制代码


  当函数的参数期望是对象时,用作参数传入。

  1.   function printPerson(person) {

  2.   if (person !== null) {

  3.   // print person

  4.   }

  5.   }

  6.   printPerson(null);
复制代码


  当函数的返回值期望是对象时,用作返回值传出。

  1.   function getPerson() {

  2.   if (condition) {

  3.   return new Person("Hwaphon");

  4.   } else {

  5.   return null;

  6.   }

  7.   }
复制代码


  我们通常将 undefined 和 null 搞混, 那是因为 undefined == null 的结果是 true, 然而这二者的用途却各有不同。那些没有被初始化的变量都有一个初始值,即 defined, 表示这个变量等待被赋值。有一点值得注意的是,用 typeof 去检测变量,如果这个变量声明了没有初始化会返回 undefined, 二如果这个变量根本就没声明也会返回 undefined。

  1.   var person;

  2.   console.log(typeof person); // undefined

  3.   console.log(typeof animal); // undefined
复制代码


  JavaScrtipt 支持两种不同类型的注释,单行注释和多行注释。关于单行注释,有三种使用方式。

  独占一行的注释,用来解释下一行代码。这行注释之前总是有一个空行,且缩进层级和下一行代码保持一致。

  1.   if (condition) {

  2.   // This is a single line comment

  3.   doSomething();

  4.   }
复制代码


  在代码行的尾部进行注释。 代码结束到注释之间至少有一个缩进。注释(包括之前的代码部分)不应该超过但行的最大字符数( 80 ) 限制,如果超过了,就将这条注释放置于当前代码行的上方。

 
  1.  if (condition) {

  2.   doSomething(); // This is a single line comment

  3.   }

  4.   被注释掉的是一大段代码。

  5.   // if (condition) {

  6.   // doSomething();

  7.   // }
复制代码


  关于多行注释,,是通过 /* */ 来实现的,不过最好还是使用下面这样的风格实现多行注释。

  1.   /*

  2.   * First line

  3.   * Second line

  4.   * Third line

  5.   */
复制代码


  至于什么时候使用注释,有一条指导原则,当代码不够清晰时添加注释,而当代码很明了时不应当添加注释。在以下情况会最好添加注释。

  难于理解的代码

  可能被误认为错误的代码

  浏览器特性 hack

  使用 if 或者 for 语句时,不论块语句包含多行代码还是单行代码,都应当使用花括号。

  在 switch 语句中, 尽量不要使用 case 语句的连续执行,如果非要使用的话,最好添加注释。至于 default, 即使其什么都不做,最好也不腰省略,比如下面这样。

  1.   switch(condition) {

  2.   case "first":

  3.   break;

  4.   case "second":

  5.   break;

  6.   default:

  7.   // no logic here

  8.   }
复制代码


  尽量不要使用 continue, 用 if 语句替代 continue 的功能。

  for-in 循环是用来遍历对象属性的,可是存在一个问题,它不仅遍历对象的实例属性,同样还遍历从原型继承来的属性。 所以最好使用 hasOwnProperty() 方法来为 for-in 循环过滤出实例属性。

  推荐在函数顶部使用单 var 语句声明接下来可能会使用到的变量,而且没有初始值的变量应该出现在 var 语句的尾部。

  推荐先声明函数再使用函数。

  不推荐使用全局的严格模式,推荐使用局部的严格模式。

  将 CSS 从 JavaScript 中分离,当需要通过 JavaScript 来修改元素样式的时候,最佳的方法是操作 CSS 的 className。

  1.   // original style

  2.   element.className += " className";

  3.   // HTML5 style

  4.   element.classList.add("className");
复制代码


  将 JavaScript 从 HTML 中抽离。可以自己创造一个 addListener() 函数添加行为,而不是在 HTML 结构中使用 onclick 之类的内嵌 JavaScript 代码。

  1.   function addListener(target, type, handler) {

  2.   if (target.addEventListener) {

  3.   target.addEventListener(type, handler, false);

  4.   } else if(target.attachEvent) {

  5.   target.attachEvent("on" + type, handler);

  6.   } else {

  7.   target["on" + type] = handler;

  8.   }

  9.   }
复制代码


  用typeof 检测原始值, 用 instanceof 检测引用值。 在使用这两个运算符的时候不要加括号,那样会让它们看起来像函数。检测函数最好使用 typeof,下面是检测数组的一种方法。

  1.   function isArray(value) {

  2.   if (typeof Array.isArray === "function") {

  3.   return Array.isArray(value);

  4.   } else {

  5.   return Object.prototype.toString.call(value) === "[object Array]";

  6.   }

  7.   }
复制代码


  对于一个对象,如果你想检测某个属性是否存在,有以下两种方式。

  1.   var person = {

  2.   name: "hwaphon",

  3.   age: 21

  4.   };

  5.   // Example one

  6.   if ("name" in person) {

  7.   console.log("Exsits");

  8.   }

  9.   // Example two

  10.   if (person.hasOwnProperty("name")) {

  11.   console.log("Exsits");

  12.   }
复制代码


原文作者:高华峰 来源:开发者头条

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部