js书写规范

js书写规范

参考文献:https://github.com/airbnb/javascript

1. 使用 const 与 let 代替 var (const / let)

  1.1、常量使用 const 定义,避免使用 var 定义:这样可以确保无法重新分配,这可能导致错误并难以理解代码。

// bad
var a = 1;
var b = 2;

// good
const a = 1;
const b = 2;

  1.2、使用 let 代替 var 定义变量:let是像var这样的块作用域而不是函数作用域。

// bad
var count = 1;
if (true) {
  count += 1;
}

// good, use the let.
let count = 1;
if (true) {
  count += 1;
}

 

  注意: let 和 const 都是块作用域

2. 对象(Object)

  2.1 使用文字形式创建对象

// bad
const item = new Object();

// good
const item = {};

 

  2.2、使用对象方法的简写

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

 

  2.3、使用属性速记:因为简短而具有描述性

const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// good
const obj = {
  lukeSkywalker,
};

 

  2.4:、在对象声明的开头对速记属性进行分组。

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};

// good
const obj = {
 // 速记属性统一放前面或者后面 lukeSkywalker, anakinSkywalker, episodeOne:
1, twoJediWalkIntoACantina: 2, episodeThree: 3, mayTheFourth: 4, };

 

  2.5、仅引用无效标识符的属性:更容易阅读,因为他改善了语法突出显示的功能,并且还易于通过许多JS引擎进行优化。

// bad
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
};

// good
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
};

 

3. 数组(Arrays)

  3.1、应尽量使用文字语法创建数组(如果有必要,特殊情况除外,如:new Array(10).fill(true))

// bad
const items = new Array();

// good
const items = [];

 

  3.2、使用 spread(‘…’)操作符copy数组

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];

 

  3.3、使用 spreads(‘…’)操作符将可迭代的对象转化为数组,而不是使用 Array.from([])

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

// good
const nodes = Array.from(foo);

// best
const nodes = [...foo];

 

  3.4、Array.from 用于将类似数组的对象转换为数组

const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

// bad
const arr = Array.prototype.slice.call(arrLike);

// good
const arr = Array.from(arrLike);

 

  3.5、使用 Array.from 而不是spread …来映射可迭代对象,因为它避免了创建中间数组。

// bad
const baz = [...foo].map(bar);

// good
const baz = Array.from(foo, bar);

 

  3.6、如果数组有多行,则在打开和关闭数组括号之前使用换行符(因为一行的宽度是有限的,而数列的高度是无限的,这样有利于代码的阅读)

// bad
const arr = [
  [0, 1], [2, 3], [4, 5],
];

const objectInArray = [{
  id: 1,
}, {
  id: 2,
}];

const numberInArray = [
  1, 2,
];

// good
const arr = [[0, 1], [2, 3], [4, 5]];

const objectInArray = [
  {
    id: 1,
  },
  {
    id: 2,
  },
];

const numberInArray = [
  1,
  2,
];

    3.7、在数组方法回调中使用return语句。如果函数主体由一个返回单一的表达式的语句组成,则可以省略 return

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => x + 1);

inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  } else {
    return false;
  }
});

// good
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  }

  return false;
});

 

 4. 结构

  4.1、访问和使用对象的多个属性时,请使用对象分解:解构可避免您为这些属性创建临时引用,打包时能够优化代码

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

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

 

   4.2、使用数组解构

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

 

  4.3、对多个返回值对象解构时应当使用对象,而不是数组

// bad
function processInput(input) {
  // then a miracle occurs
  return [left, right, top, bottom];
}

// 调用者需要按照顺序调用
const [left, __, top] = processInput(input);

// good
function processInput(input) {
  // then a miracle occurs
  return { left, right, top, bottom };
}

// 调用者可以选择需要的数据
const { left, top } = processInput(input);

 

5.  字符串处理

  5.1、字符串应当使用单引号 

// bad
const name = "Capt. Janeway";

// bad - 模板字符串中应当包含插值
const name = `Capt. Janeway`;

// good
const name = 'Capt. Janeway';

 

  5.2、字符串不应使用字符串连接跨多行写入:字符串损坏很难使用,并且使代码的可搜索性降低。

// bad
const errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';

// bad
const errorMessage = 'This is a super long error that was thrown because ' +
  'of Batman. When you stop to think about how Batman had anything to do ' +
  'with this, you would get nowhere fast.';

// good
const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

  5.3、代码构建字符串时,应当使用模板字符串,而不是使用 ‘+’连接符:模板字符语法更精简易懂并有适当的换行和插值功能

const str1 = '123'
const str2 = '234'
// bad
const newStr = str1 + str2

//good
const newStr = `${str1}${str2}`

 

  5.4、在不必要的情况下,不要使用转义字符与eval()方法

6. 方法(Function)

  6.1、使用命名函数表达式而不是函数声明:这样更利于进行模块化开发

// bad
function foo() {
  // ...
}

// bad
const foo = function () {
  // ...
};

// good
// lexical name distinguished from the variable-referenced invocation(s)
const short = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
};

  6.2、不要在非功能块(如:while、if 等)中声明方法

  6.3、永远不要使用 arguments 作为函数参数,或者通过arguments的获取参数

// bad
function concatenateAll() {
// 把调用方法的参数截取出来 const args
= Array.prototype.slice.call(arguments); return args.join(''); } // good function concatenateAll(...args) { return args.join(''); }

 

  6.4、使用默认参数语法,而不是对函数参数进行修正,并且应当将函数的默认值参数放在函数的最后

// really bad
function handleThings(opts) {
  // 我们不能修改函数的参数
  // 如果 opts = false,那么则有可能变为 {}
  // 这样做可能出现一些问题
  opts = opts || {};
  // ...
}

// still bad
function handleThings(opts) {
  if (opts === void 0) {
    opts = {};
  }
  // ...
}

// good  因为opts为默认值参数,应放在函数参数的最后
function handleThings(id, opts = {}) {
  // ...
}

 

  6.5、不应该对函数的参数进行处理,这样将难以理解

var b = 1;
// bad
function count(a = b++) {
  console.log(a);
}
count();  // 1
count();  // 2

  6.7、不要更改和重新分配函数的参数值,若需要,应当建立副本进行变更,否则将可能出现错误

  6.8、最好使用点差运算符…来调用可变参数函数。这样代码更干净

// bad
const x = [1, 2, 3, 4, 5];
console.log.apply(console, x);

// good
const x = [1, 2, 3, 4, 5];
console.log(...x);

 

  6.9、若有多行或函数参数有多个时应当提行

// bad
function foo(bar,
             baz,
             quux) {
  // ...
}

// good
function foo(
  bar,
  baz,
  quux,
) {
  // ...
}

// bad
console.log(foo,
  bar,
  baz);

// good
console.log(
  foo,
  bar,
  baz,
);

 

7. 箭头函数

  7.1、当您必须使用匿名函数时(如传递内联回调时),请使用箭头函数符号。

  7.2、使用匿名函数时,及时只有一个参数,也应当使用 ( )  将参数括起来

  7.3、如果函数主体由单个语句组成时,请省略花括号并使用隐式返回。否则,请保留括号并使用return语句

// bad(匿名函数使用箭头函数)
[1, 2, 3].filter((item) => { return item === 1 || item === 2 })

// good  表达式有多行时应当换行
[1, 2, 3].filter((item) => (
item === 2 ||
item === 1
))

 

8.  js类与构造函数参考原文献

9. 模块

  9.1、使用 improt / export 导出和导入模块:模块就是未来

// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;

// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;

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

  9.2、不要使用 * as xxx 并且不要在导入中导出 这样可以保证有单一的导出

// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';

// good
import AirbnbStyleGuide from './AirbnbStyleGuide';
// bad // filename es6.js export { es6 as default } from './AirbnbStyleGuide'; // good // filename es6.js import { es6 } from './AirbnbStyleGuide'; export default es6;

 

  9.3、仅从一个位置的路径导入。

// bad
import foo from 'foo';
// … some other imports … //
import { named1, named2 } from 'foo';

// good
import foo, { named1, named2 } from 'foo';

// good
import foo, {
  named1,
  named2,
} from 'foo';

  9.4、通常只应该导出常量(也就是 const 定义的常量)

  9.5、如果一个模块只有单一的导出,应当首选 exprot default  {}, 而不是 export const foo = {}

  9.6、应该将所有的导出放置文件最顶部

  9.7、多行导入应当换行,每行只显示一个导入

// bad
import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';

// good
import {
  longNameA,
  longNameB,
  longNameC,
  longNameD,
  longNameE,
} from 'path';

 

10. 属性

  10.1、访问属性时,在非必要(比如 变量 访问属性时)的情况下应使用点符号

const luke = {
  jedi: true,
  age: 28,
};

// bad
const isJedi = luke['jedi'];

// good
const isJedi = luke.jedi;

 

11. 变量 与 常量(let 与 const)

  11.1、始终使用const或let来声明变量,不这样做将导致全局变量,污染全局名称空间

// bad
superPower = new SuperPower();

// good
const superPower = new SuperPower();

  11.2、 对每个变量或赋值使用一个const或let声明。

// bad
const items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

// bad
// (compare to above, and try to spot the mistake)
const items = getItems(),
    goSportsTeam = true;
    dragonball = 'z';

// good
const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';

  11.3、对所有const进行分组,然后对所有let进行分组。(统一将 const 放在 let 的前面)

  11.4、在需要它们的地方分配变量,但是将它们放在合理的位置。

// bad - unnecessary function call
function checkName(hasName) {
  const name = getName();

  if (hasName === 'test') {
    return false;
  }

  if (name === 'test') {
    this.setName('');
    return false;
  }

  return name;
}

// good
function checkName(hasName) {
  if (hasName === 'test') {
    return false;
  }

  const name = getName();

  if (name === 'test') {
    this.setName('');
    return false;
  }

  return name;
}

  11.5、不要链接变量分配:链接变量分配会创建隐式全局变量。

// bad
let a = b = c = 1;

// good
  let a = 1;
  let b = a;
  let c = a;

  11.6、避免使用 ++ 或 –,使用 += 或 -= 代替(eslint规范)

  11.7、在 = 后边应避免换行,若需要请使用 ( ) 将内容括起来

  11.8、全局常量应当全部大写

12. 运算符

  12.1、 == 与 != 应使用  === 与 !== 替代

  12.2、注意 if 判断,因遵循如下规则

    · object 为 true

    · undefined的结果为false

    · Null 的结果为 false

    · Booleans 的结果为 boolean值

    · Numbers +0, -0,NaN 为false,否则为true

    · 如果为空字符串“”,则字符串的计算结果为false,否则为true

13、块

  13.1、将括号与所有多行块一起使用。

// bad
if (test)
  return false;

// good
if (test) return false;

// good
if (test) {
  return false;
}

// bad
function foo() { return false; }

// good
function bar() {
  return false;
}

  13.2、如果您将多行代码块与if和else一起使用,请将else与if块的右括号放在同一行。

// bad
if (test) {
  thing1();
}
else {
  thing3();
}

// good
if (test) {
  thing1();
} else {
  thing3();
}

 

  13.3、如果if块始终执行return语句,则随后的else块是不必要的。

// bad
function foo() {
  if (x) {
    return x;
  } else {
    return y;
  }
}

// good
function foo() {
  if (x) {
    return x;
  }
return y; }

 

14. 空格(具体遵循eslint规范)

  14.1、始终使用 2 个空格作为块之间的间距

  14.2、在前括号【{ }, ( )】之前放置1个空格

// bad
function test(){
  console.log('test');
}

// good
function test() {
  console.log('test');
}

 

  14.3、在控制语句中的左括号前放置1个空格(如果,则等)。在函数调用和声明中,参数列表和函数名称之间不能留空格。

// bad
if(isJedi) {
  fight ();
}

// good
if (isJedi) {
  fight();
}

// bad
function fight () {
  console.log ('Swooosh!');
}

// good
function fight() {
  console.log('Swooosh!');
}

 

  14.4、 用空格隔开运算符。

// bad
const sum=1+23+5

// gold
const sum = 1 + 2 +5

 

  14.5、 在块之后和下一条语句之前保留空白行。// bad

const arr = [ function foo() { }, function bar() { }, ]; return arr; // good
const arr = [
function foo() { }, function bar() { }, ]; return arr;

 

  14.6、不要在括号内添加空格,不要在方括号内添加空格

// bad
function bar( foo ) {
  return foo;
}

// good
function bar(foo) {
  return foo;
}

// bad const foo = [ 1, 2, 3 ]; console.log(foo[ 0 ]); // good const foo = [1, 2, 3]; console.log(foo[0]);
 

 

  14.7、在花括号内添加空格。

// bad
const foo = {clark: 'kent'};

// good
const foo = { clark: 'kent' };

 

  

语句后边的分号、逗号遵循 eslint(常用通用配置:standard) 即可

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/2589.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 如何查看vue版本号

    如何查看vue版本号在cmd控制台内,输入npm-v可查看到npm的版本号;vue-V可看到vue的版本号。

  • Linux pstack命令[通俗易懂]

    Linux pstack命令[通俗易懂]概要打印运行进程的栈信息(快照),包括一个进程下的所有线程的栈信息。语法pstackpid解释pstack是封装了gdb功能的shell脚本,通过”threadapplyallbt”的命令获得输出所有的线程堆栈信息,再用sed进行替换和过滤#RunGDB,stripoutunwantednoise.$GDB–quiet$readnever-nx/proc/$1/exe$1<<EOF2>&1|

  • IP地址和域名的关系

    IP地址和域名的关系1、ip地址和域名是一对多的关系,一个ip地址可以有多个域名,但是相反,一个域名只能有一个ip地址;2、ip地址是数字型的,为了方便记忆,才有了域名,通过域名地址就能找到ip地址;3、ip,全称为互联网协议地址,是指ip地址,意思是分配给用户上网使用的网络协议的设备的数字标签;4、常用的ip地址分为IPv4和IPv6两大类;什么是IP地址1、IP地址是IP协议提供的一种统一的地址格式,他为互联网上的每一台主机和每一个网络都分配一个唯一的逻辑地址,以此来屏蔽物理地址的差异;

  • word文档怎么打印成册子_零基础学word文档

    word文档怎么打印成册子_零基础学word文档Word2003是微软公司提供的一款文字处理软件,可以对文字进行排版和编辑、分段等各种处理,最终将编辑好的内容打印出来,是办公室一族中必备的办公软件之一。Word2003具有一个“书籍折页”的功能,能够在一页纸上打印两页的内容,打印后可以从中缝装订成折叠的小册子,更便于携带和阅读,具体怎么来设置呢?就让Word联盟为大家带来分享!动画演示:①打开“页面设置”对话框,切换到

  • C++中getchar()的使用方法「建议收藏」

    C++中getchar()的使用方法「建议收藏」1getchar()简介getchar()是C语言中的函数,C++中也包含了该函数。getchar()函数的作用是从标准的输入stdin中读取字符。也就是说,getchar()函数以字符为单位对输入的数据进行读取。2getchar()读取缓冲区方式在控制台中通过键盘输入数据时,以回车键作为结束标志。当输入结束后,键盘输入的数据连同回车键一起被输入到输入缓冲区中。在程序中第一次调用getchar…

    2022年10月18日
  • SplitContainer控件设置固定比例

    SplitContainer控件设置固定比例SplitContainer控件2个panel如何设置均等大小.(竖直拆分)先随意设置空间高的大小,然后如果想要均等显示,则直接设置SplitterDistance为高的一半,即可!随后任意改变控件大小,都不会改变均等显示比例。同理3:7,4:6…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号