前端开发规范[js篇]

js规范

协作开发及分工: 根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用js工具类, 协作开发过程中， 此文件不可随意修改.

命名格式

全局变量, 使用全大写字母，并用下划线分隔单词

  var CONST_NAME_LIKE_THIS = {}；
  let CONST_NAME_LIKE_THIS ={}；
  const CONST_NAME_LIKE_THIS = {}；

局部变量, 使用 Camel 命名法。

  var loadingModules = {}；

私有属性、变量和方法以下划线 _ 开头。

  var _privateMethod = {}；

函数

> 使用 Camel 命名法。
> 参数, 使用 Camel 命名法。
> 可使用常见动词约定。
> 构造函数

  function stringFormat (source) {}

  function hear (theBells) {}

  /* not recommended */
  function canRead() {
      return true;
  }
  
  /* recommended */
  function getName() {
      return this.name;
  }

类

> 使用 Pascal 命名法。
> 方法 / 属性, 使用 Camel 命名法。
> 公共属性和方法：跟变量和函数的命名一样。
> 私有属性和方法：前缀为_(下划线)，后面跟公共属性和方法一样的命名方式。
> 前缀为名称。

  function Student(name) {
      this.name = name;
  }

  var st = new Student('tom');

  function Student(name) {
      var _name = name; // 私有成员

      // 公共方法
      this.getName = function () {
          return _name;
      }

      // 公共方式
      this.setName = function (value) {
          _name = value;
      }
  }
  var st = new Student('tom');
  st.setName('jerry');
  console.log(st.getName()); // => jerry：输出_name私有变量的值

  function TextNode(value,engine) {
      this.value = value;
      this.engine = engine;
  }

  TextNode.prototype.clone = function(){}

枚举

> 变量 使用 Pascal 命名法。
> 枚举的属性， 使用全部字母大写，单词间下划线分隔的命名方式。

  var TargetState = {
      READING: 1,
      READED:2,
      APPLIED:3,
      READY:4
  }

接口命名规范

> 可读性强，见名晓义。
> 尽量不与 jQuery 社区已有的习惯冲突。
> 尽量写全。不用缩写，除非是下面列表中约定的；（变量以表达清楚为目标，uglify 会完成压缩体积工作）。

True 和 False 布尔表达式

> 类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null。
> 下面的布尔表达式都返回 false:
* null
* undefined
* ‘’ 空字符串
* 0 数字0
> 但小心下面的, 可都返回 true:
* ‘0’ 字符串0
* [] 空数组
* {} 空对象

不要在 Array 上使用 for-in 循环

> for-in 循环只用于 object/map/hash 的遍历, 对 Array 用 for-in 循环有时会出错. 因为它并不是从 0 到 length - 1 进行遍历, 而是所有出现在对象及其原型链的键值。

  /* not recommended */
  function printArry (arr) {
      for (var key in arr) {
          print(arr[key])
      }
  }
  printArry([0,1,2,3,4,5,6]) // this is right.
  var a = new Array(10)
  printArry(a) // this is wrong.
  a = document.getElementTagName("*")
  printArry(a) // this is wrong.
  a = [0,1,2,3,4,5]
  a.bunu = "aaaa"
  printArry(a) // this is wrong.
  a = new Array
  a[3] = 2
  printArry(a) // this is wrong.

  /* recommended */
  function printArry (arr) {
      var len = arr.length
      for (var i=0, i<len; i++) {
          print(arr[i])
      }
  }

二元和三元操作符

> 操作符始终写在前一行, 以免分号的隐式插入产生预想不到的问题。
> 操作符始终写在前一行, 以免分号的隐式插入产生预想不到的问题。如果一行放不下, 还是按照上述的缩进风格来换行。

var x = a ? b : c
var y = a ?
          moreComplicateB : 
          moreComplicateC
  . 操作符
  var x = foo.bar().
      doSomeThing().
      doSomeThingEls()

条件(三元)操作符 (??

> 三元操作符用于替代 if 条件判断语句。

  /* not recommended */
  if (val != 0) {
      return foo()
  }else {
      return bar()
  }

  /* recommended */
  return val ? foo() : bar()

&& 和 ||

> 二元布尔操作符是可短路的, 只有在必要时才会计算到最后一项。

  /* not recommended */
  function foo (opt_win) {
      var win
      if(opt_win) {
          win = opt_win
      } else {
          win = window
      }
      // ...
  }
  if (node) {
      if(node.kids){
          if(node.kids[index]){
              foo(node.kids[index])
          }
      }
  }

  /* recommended */
  function foo (opt_win) {
      var win = opt_win || window
      // ...
  }
  var kid = node && node.kids && node.kids[index]
  if(kid){
      foo(kid)
  }

由多个单词组成的 缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致。

圆括号

> 圆括号在 JavaScript 中有两种作用，一种表示调用函数，一种表示不同的值的组合。只在必要的时候使用圆括号。
> 对于一元操作符（如delete、typeof、void），或是在某些关键词（如 return、throw、case、new）之后，不要使用括号。

字符串

> 字符串使用单引号，只有 JSON 中的字符串属性值使用双引号。
> 符串中的 HTML 属性使用双引号。

空行

> 使用空行来划分一组逻辑上相关联的代码片段。文件末尾空一行。

注释

> 编码时一定注意写好注释，页面结构和样式的动态变化和添加，打好注释，便于后台同事套页面时候的阅读。
> Js做到主要代码、方法、参数的行行注释说明，便于其他同事了解你做此功能的思路，避免代码的冗余，造成性能问题，尽量做到高内聚低耦合。

      // Js推荐注释，注释符号与注释说明之间空一个空格，单行
      // var sellEle = document.querySelector('.sell');

      // Js推荐注释，注释符号一上一下覆盖整个要注释的区块，多行注释
      /*
      var sellEle = document.querySelector('.sell');
      console.log(sellEle);
      */

> 函数(方法)注释

      /** 
      * 函数说明 
      * @关键字 
      */

      /**
      * 合并Grid的行
      * @param {Grid} grid 需要合并的Grid
      * @param {Array} cols 需要合并列的Index(序号)数组；从0开始计数，序号也包含。
      * @param {Boolean} isAllSome 是否2个tr的cols必须完成一样才能进行合并。true：完成一样；false(默认)：不完全一样
      * @return void
      * @author barry
      */
      function mergeCells(grid, cols, isAllSome) {
          // Do Something
      }

参考文档

• js：主要有缩进，换行，变量名称，括号，文档注释等等。可以参考：
  • airbnb js style
  • google js style
  • idiomatic js style
  • standard js style

ps:建议大家在各个产品，严格遵守规范，以便后期的维护以及代码的健壮性等。

如果文档有更好的补充和好的建议，欢迎联系@博主

如有雷同，请联系@博主。

欢迎进入个人公众号 ，一起学习啊！