js书写规范
admin
2024-02-04 12:49:02
0

参考文献: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;
});
  1. 结构

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 occursreturn [left, right, top, bottom];
}// 调用者需要按照顺序调用
const [left, __, top] = processInput(input);// good
function processInput(input) {// then a miracle occursreturn { 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;// goodlet 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) 即可

相关内容

热门资讯

安卓双系统添加应用,轻松实现多... 你有没有想过,你的安卓手机里可以同时运行两个系统呢?听起来是不是很酷?想象一边是熟悉的安卓系统,一边...
pipo安卓进系统慢,探究pi... 最近是不是发现你的Pipo安卓系统更新或者运行起来特别慢?别急,今天就来给你好好分析分析这个问题,让...
怎样使用安卓手机系统,安卓手机... 你有没有发现,安卓手机已经成为我们生活中不可或缺的一部分呢?从早晨闹钟响起,到晚上睡前刷剧,安卓手机...
双系统安卓安装caj,轻松实现... 你有没有想过,你的安卓手机里装上双系统,是不是就能同时享受安卓和Windows系统的乐趣呢?没错,这...
安卓使用ios系统教程,安卓用... 你是不是也和我一样,对安卓手机上的iOS系统充满了好奇?想要体验一下苹果的优雅和流畅?别急,今天我就...
安卓系统gps快速定位,畅享便... 你有没有遇到过这样的情况:手机里装了各种地图导航软件,但每次出门前都要等上好几分钟才能定位成功,急得...
安卓手机系统更新原理,原理与流... 你有没有发现,你的安卓手机最近是不是总在提醒你更新系统呢?别急,别急,让我来给你揭秘一下安卓手机系统...
安卓系统通知管理,全面解析与优... 你有没有发现,手机里的通知就像是一群调皮的小精灵,时不时地跳出来和你互动?没错,说的就是安卓系统的通...
安卓系统手机哪买,揭秘哪里购买... 你有没有想过,拥有一部安卓系统手机是多么酷的事情呢?想象你可以自由安装各种应用,不受限制地探索各种功...
安卓系统 ipv4,基于安卓系... 你知道吗?在智能手机的世界里,有一个系统可是无人不知、无人不晓,那就是安卓系统。而在这个庞大的安卓家...
目前安卓是什么系统,探索安卓系... 亲爱的读者,你是否曾好奇过,如今安卓系统究竟是什么模样?在这个科技飞速发展的时代,操作系统如同人体的...
安卓6.0系统比5.0,从5.... 你有没有发现,自从手机更新了安卓6.0系统,感觉整个人都清爽了不少呢?没错,今天咱们就来聊聊这个话题...
安卓2.36系统升级,功能革新... 你知道吗?最近安卓系统又来了一次大变身,那就是安卓2.36系统升级!这可不是一个小打小闹的更新,而是...
安卓系统源码怎么打开,并可能需... 你有没有想过,安卓系统的源码就像是一扇神秘的门,隐藏着无数的技术秘密?想要打开这扇门,你得掌握一些小...
安卓8.0系统体验视频,智能革... 你有没有听说安卓8.0系统最近可是火得一塌糊涂啊!作为一个紧跟科技潮流的数码达人,我当然要来给你好好...
宣传系统漫画app安卓,探索安... 亲爱的读者们,你是否曾在某个午后,百无聊赖地打开手机,想要寻找一些轻松愉悦的读物?今天,我要给你介绍...
鸿蒙替换安卓系统吗,开启智能生... 你知道吗?最近科技圈里可是炸开了锅,因为华为的新操作系统鸿蒙系统,据说要大举进军手机市场,替换掉安卓...
手机安卓系统深度清理,解锁手机... 手机里的东西是不是越来越多,感觉就像一个装满了杂物的储物柜?别急,今天就来教你一招——手机安卓系统深...
安卓上的windows系统,融... 你有没有想过,在安卓手机上也能体验到Windows系统的魅力呢?没错,这就是今天我要跟你分享的神奇故...
安卓系统焦点变化事件,Andr... 你知道吗?在安卓系统的世界里,最近发生了一件超级有趣的事情——焦点变化事件。这可不是什么小打小闹,它...