美文网首页
js编写规范

js编写规范

作者: 小鱼的大白话 | 来源:发表于2018-08-30 18:42 被阅读0次

注释原则

1.如无必要,勿增注释:尽量提高代码本身的清晰性、可读性
2.如有必要,尽量详尽:合理的注释、空行排版等,可以让代码更易阅读、更具美感
3.全局变量需注释,函数需注释,组件需要注释使用样例,方便阅读和使用
4.单行注释,必须独占一行。// 后跟一个空格,缩进与下一行被注释说明的代码一致。
5.函数/方法注释
函数/方法注释必须包含函数说明,有参数和返回值时必须使用注释标识。;
参数和返回值注释必须包含类型信息和说明;
当函数是内部函数,外部不可访问时,可以使用 @inner 标识;

/**
 * 函数描述
 *
 * @param {string} p1 参数1的说明
 * @param {string} p2 参数2的说明,比较长
 *     那就换行了.
 * @param {number=} p3 参数3的说明(可选)
 * @return {Object} 返回值描述
 */
function foo(p1, p2, p3) {
    var p3 = p3 || 10;
    return {
        p1: p1,
        p2: p2,
        p3: p3
    };
}

6.文件注释

文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。 应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。如下:


/**
* @fileoverview Description of file, its uses and information
* about its dependencies.
* @author user@meizu.com (Firstname Lastname)
* Copyright 2009 Meizu Inc. All Rights Reserved.
*/

命名
变量, 使用 Camel 命名法

var loadingModules = {};

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

var _privateMethod = {};

常量, 使用全部字母大写,单词间下划线分隔的命名方式

var HTML_ENTITY = {};

函数, 使用 Camel 命名法,函数的参数, 使用 Camel 命名法。

function stringFormat(source) {}
 
function hear(theBells) {}

类,使用 Pascal 命名法,类的 方法 / 属性, 使用 Camel 命名法

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

命名语法
类名,使用名词

function Engine(options) {}

函数名,使用动宾短语

function getStyle(element) {}

boolean 类型的变量使用 is 或 has 开头

var isReady = false;
var hasMoreCommands = false;

Promise 对象用动宾短语的进行时表达

var loadingData = ajax.get('url');
loadingData.then(callback);

常用词
True 和 False 布尔表达式
类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null。

下面的布尔表达式都返回 false:
null
undefined
空字符串
0 数字0

但小心下面的, 可都返回 true:
'0' 字符串0
[] 空数组
{} 空对象

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

// Not recommended
function printArray(arr) {
  for (var key in arr) {
    print(arr[key]);
  }
}
 
printArray([0,1,2,3]);  // This works.
 
var a = new Array(10);
printArray(a);  // This is wrong.
 
a = document.getElementsByTagName('*');
printArray(a);  // This is wrong.
 
a = [0,1,2,3];
a.buhu = 'wine';
printArray(a);  // This is wrong again.
 
a = new Array;
a[3] = 3;
printArray(a);  // This is wrong again.
 
// Recommended
function printArray(arr) {
  var l = arr.length;
  for (var i = 0; i < l; i++) {
    print(arr[i]);
  }
}

二元和三元操作符
操作符始终写在前一行, 以免分号的隐式插入产生预想不到的问题。. 操作符也是如此:

var x = a ? b : c;
 
var y = a ? longButSimpleOperandB : longButSimpleOperandC;
 
var z = a ? moreComplicatedB : moreComplicatedC;
 
var x = foo.bar().doSomething().doSomethingElse();

条件(三元)操作符 (?:)
三元操作符用于替代 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);
}

相关文章

  • 编码规范

    参考文档 CSS编码规范 强迫症->js注释规范 JS编写规范 1.JS编码个人规范 使用两空格缩进 除了五种必要...

  • js编写规范

    注释原则 1.如无必要,勿增注释:尽量提高代码本身的清晰性、可读性2.如有必要,尽量详尽:合理的注释、空行排版等,...

  • 前端开发规范

    前端代码规范 Front Standard Guide 前端 JS 项目开发规范 规范的目的是为了编写高质量的代码...

  • Vue.js 组件编码规范

    Vue.js 组件编码规范 目标 本规范提供了一种统一的编码规范来编写 Vue.js 代码。这使得代码具有如下的特...

  • TypeScrip编程规范风格指南

    TypeSctipt作为JS的超集,在编码规范上也做了很多规定,我们平时在编写TS时,可以按照下面的规范去完善,下...

  • JSX

    JSX是什么(javaScript XML) JSX 是React 编写组件的一种语法规范,可以看做是JS的扩展,...

  • 2017-12-25es6解构赋值

    2015年 ECMAscript 规范标准 js是实现es6 IE10以下 不支持,需要装babel 编写复...

  • 10

    js编写位置 !DOCTYPE html> js编写位置 js基本语法 !DOCTYPE html> ...

  • 从jQuery中学习js编写规范

    由于某些原因,文章已经删除,打算迁移到别处,目前正在寻找更合适的平台。 请大家关注我的新公众号ar_indus,随...

  • 前端(10 HTML知识)

    1.js代码编写 2.js编写位置 3.js基本语法

网友评论

      本文标题:js编写规范

      本文链接:https://www.haomeiwen.com/subject/gmmdwftx.html