js规范

js规范

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

命名格式

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

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

   
   

   
   
1
2
3

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

  var loadingModules = {}；

   
   

   
   
1

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

  var _privateMethod = {}；

   
   

   
   
1

函数

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

   
   
1
2
3
4

  function stringFormat (source) {}

function hear (theBells) {}

/* not recommended */
function canRead() {
return true;
}

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

类

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

 
 
1
2
3
4
5

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

var st = new Student(‘tom’);

• 1
• 2
• 3
• 4
• 5

  function Student(name) {
      var _name = name; // 私有成员
  <span class="token comment">// 公共方法</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">getName</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> _name<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// 公共方式</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">setName</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      _name <span class="token operator">=</span> value<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

}
var st = new Student(‘tom’);
st.setName(‘jerry’);
console.log(st.getName()); // => jerry：输出_name私有变量的值

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

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

TextNode.prototype.clone = function(){}

• 1
• 2
• 3
• 4
• 5
• 6

枚举

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

 
 
1
2

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

 
 

 
 
1
2
3
4
5
6
7

接口命名规范

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

 
 
1
2
3

True 和 False 布尔表达式

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

 
 
1
2
3
4
5
6
7
8
9
10

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

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

 
 
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])
}
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

二元和三元操作符

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

 
 
1
2

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

 
 

 
 
1
2
3
4
5
6
7
8

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

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

 
 
1

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

&& 和 ||

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

 
 
1

  /* 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)
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

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

圆括号

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

 
 
1
2

字符串

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

 
 
1
2

空行

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

 
 
1

注释

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

 
 
1
2

      // Js推荐注释，注释符号与注释说明之间空一个空格，单行
      // var sellEle = document.querySelector('.sell');
  <span class="token comment">// Js推荐注释，注释符号一上一下覆盖整个要注释的区块，多行注释</span>
  <span class="token comment">/*
  var sellEle = document.querySelector('.sell');
  console.log(sellEle);
  */</span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

> 函数(方法)注释

 
 
1

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

参考文档

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

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

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

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

        </div>
					<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-2011a91181.css" rel="stylesheet">
            </div>