谷歌与Airbnb的JS代码规范

谷歌JS代码规范

规范代码原因:代码规范是为了保持源代码编写模式一致,便于维护代码,可读性高。

1、使用空格代替tab

规范随后指出应该使用2个,而不是4个空格带实现缩进。(除了每一行的终止符序列,ASCII水平空格符(0x20)是唯一一个可以出现在源文件中任意位置的空格字符)

谷歌与Airbnb的JS代码规范
 

2、不能省略分号

每个语句必须以分号结尾。不允许依赖于JS自动添加分号的功能。分号是必须的,是不可省略的。

谷歌与Airbnb的JS代码规范

2、不推荐代码水平对齐

对代码进行水平对齐会在代码中添加若干多余的空格,这让相邻两行的字符看上去处于一条垂直线上。

谷歌与Airbnb的JS代码规范

3、杜绝var

使用const或let来声明所有局部变量。如果变量不需要被重新赋值,默认应该使用const。应该拒绝使用关键字var。

谷歌与Airbnb的JS代码规范

4、优先使用箭头函数

箭头函数提供了一种简洁的语法,并且避免了一些关于this指向的问题。相比较与function关键字,开发者应该优先使用箭头函数来声明函数,尤其是声明嵌套函数。

谷歌与Airbnb的JS代码规范

5、使用模板字符串取代连接字符串

在处理多行字符串时,模板字符串比复杂的拼接字符串要表现的更出色。

谷歌与Airbnb的JS代码规范

6、不要使用续行符分割长字符串

在JS中,\也代表着续行符。(尽管ES5中允许这么做,但如果在\后跟着某些结束空白符,这种行为会导致一些错误,而这些错误在审阅代码时很难注意)

oogle推荐下面这样的写法,而Airbnb则认为应该顺其自然,不做特殊处理,该多长就多长

谷歌与Airbnb的JS代码规范

7、优先使用for...of

以前我认为for...in适合遍历Object,而for...of适合遍历数组。因为我喜欢这种各司其职的使用方式。

尽管Google的规范与这种使用方式相冲突,但Google对for...of的偏爱依然让我觉得十分有趣。

8、不要使用eval语句

除非是在code loader中,否则不用使用eval或是Function(...string)结构。这个功能具有潜在的危险性,并且在CSP环境中无法起作用。

谷歌与Airbnb的JS代码规范

9、常量的命名规范

常量命名应该使用全大写格式,并用下划线分割

如果你确定一定以及肯定一个变量值以后不会被修改,你可以将它的名称使用全大写模式改写,暗示这是一个常量,请不要修改它的值。

遵守这条规则时需要注意的一点是,如果这个常量是一个函数,那么应该使用驼峰式命名法。

谷歌与Airbnb的JS代码规范

10、每次只声明一个变量

每一个变量声明都应该只对应着一个变量。不应该出现像let a = 1,b = 2;这样的语句。

谷歌与Airbnb的JS代码规范

11、使用单引号

只允许使用单引号包裹普通字符串,禁止使用双引号。如果字符串中包含单引号字符,应该使用模板字符串。

谷歌与Airbnb的JS代码规范

12、暂时不要使用ES6 module

由于ES6模块的语义尚不完全确定,所以暂时不要使用,比如export和import关键字。一旦它们的相关规范制定完成,那么请忽略这一条规则。

谷歌与Airbnb的JS代码规范

总结

以上代码规范仅供参考,Airbnb的代码规范比Google的代码规范,选择你脑海中时刻遵守的一份代码规范即可。

Airbnb Javascript 代码规范重要点总结es6

1.对所有的引用使用 const 而非 var。这能确保你无法对引用重复赋值。

当需要变动引用时,使用let。

 const和let都是块级作用域。

2.创建对象的方式:

  const item = {};

  使用对象属性的简写,且为简写的属性分组。

3.创建数组的方式:

  const arr = [ ];

  使用arr.push()去替代直接赋值。

  使用拓展运算符去赋值数组: arrCopy = [...arr];

  使用Array.from()把一个类数组对象转换成数组:

    const foo = document.querySelectorAll('.foo');

    const nodes = Aarry.from(foo);

4.解构:

  使用解构存取和使用多属性对象:

function getFullName({ firstName, lastName }) {
return `${firstName} ${lastName}`;
}

  对数组也使用解构赋值:

const arr = [1, 2, 3, 4];
const [first, second] = arr; // 等同于first = arr[0],second = arr[1]

  返回多个值时使用对象解构:这样不用在意属性的顺序

谷歌与Airbnb的JS代码规范
function returnInput (input) {
...
return { left, right, top, bottom };
}
const { left, right } = processInput(input);
谷歌与Airbnb的JS代码规范

5.Strings

  程序化生成字符串时,使用模板字符串代替字符串链接

function sayHi(name) { return `How are you, ${name}?`; }

6.函数

  使用函数声明代替函数表达式

function foo() {
}

  立即调用的函数表达式:

(()=> {
console.log('Welcome to the Internet. Please follow me.');
})();

  永远不要在非函数代码块(if,while)中声明一个函数,把那个函数赋给一个变量。

谷歌与Airbnb的JS代码规范
let test;
if (current) {
test = () => {
...
};
}
谷歌与Airbnb的JS代码规范

  不要使用arguments,可以选择rest语法...替代。rest是一个真正的数组,且能明确你要传入的参数

function cont(...args) {
return args.join('');
}

  直接给函数的参数指定默认值,不要使用一个变化的函数参数

function fn(opts = {}) {...}

7.构造器

  总是使用class,避免直接操作prototype。

  使用extends继承。

  方法可以返回this来帮助链式调用。

8.模块

  总是使用模组(import/export)而非其他非标模块系统。

import { es6 } from './AirbnbStyleGuide';
export default es6;

  不要使用通配符import以确保只有一个默认export

  不要从import中直接export

9.迭代器

  使用高阶函数如map()/reduce()去替代for-of

const number = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;
...

10.属性

  使用 . 访问对象的属性。

  当通过变量访问属性时使用中括号[]  

11.变量

  一直使用const来声明变量以防止全局污染,且用const为每一个变量声明。

  将所有的const和let分组。

12.提升

  使用let和const不会被提升,所以必须声明在前面。

  匿名函数的表达式的变量名会被提升但是函数内容不会

  命名的函数表达式的变量名会被提升,但是函数名和函数内容不会

  函数声明的名称和哈你数体都会被提升。

  以上和js的解析机制有关。

13.优先使用 === 和 !==  而非 == / !=

  条件表达式中:

    对象被计算为true

    undefined / null 都为false

    数字除  +0 / -0 / NaN 外 都为true

    字符串除‘ ’外都为true

14.代码块

  使用大括号包裹所有的多行代码块,单行不必。

15.注释

  使用/**...*/作为多行注释

  使用//作为单行注释,在评论对象上另起一行,且在注释前插入空行

  使用 // FIXME 标注问题

  使用 // TODO 标注问题的解决方式

16.空格

  在块末和新语句前插入空行

17.类型转换

  字符串:不要使用 + ‘ ’

//  => this.reviewScore = 9;
const totalScore = String(this.reviewScore);

  数字:使用parseInt,并带上转换类型的基数

谷歌与Airbnb的JS代码规范
const inputValue = '4';
const val = Number(inputValue); // 或者
const val = parseInt(inputValue, 10);
谷歌与Airbnb的JS代码规范

  布尔:

谷歌与Airbnb的JS代码规范
const age = 0;
const hasAge = Boolean(age); // 或者
const hasAge = !!age;
谷歌与Airbnb的JS代码规范

18.命名规则

  使用帕斯卡式命名构造函数或类

  不要使用下划线结尾或开头来命名属性和方法

  不要保存this的引用。使用箭头函数或Function#bind

  如果文件只输出一个类,那你的文件名必须和类名完全保持一致(帕斯卡式)

  如果文件导出默认的函数,文件名与该函数名一致。(驼峰式)

19.存取器

  属性的存取函数不是必须的

  使用getValue()和setValue('...')

  如果属性是布尔值,使用isVal() 或 hasVal()

谷歌与Airbnb的JS代码规范

以上总结是借用他人文章总结,如果作者介意,请联系我。可以删除。

上一篇:JavaScript必备:Google发布的JS代码规范(转)


下一篇:阅读Google的C++代码规范有感