JS - 关于一些代码规范

Souleigh ✨
• 阅读 1259

代码规范

源文件

[强制] JavaScript源文件必须以无BOM的UTF-8编码。

缩进

[强制] 必须采用4个空格缩进,不允许以Tab制表符或2个空格代替。

[强制] switch 中的 casedefault 必须保持缩进。

// 正例
switch (variable) {
    case '1':
        // do...
        break;
    case '2':
        // do...
        break;
    default:
        // do...
}

// 反例
switch (variable) {
case '1':
    // do...
    break;
case '2':
    // do...
    break;
default:
    // do...
} 

空格

[强制] 二元运算符两个操作数之间必须使用空格,但一元运算符与其操作数间不能有空格。

let a = !arr.length;
a++;
a = b + c; 

[强制]{ 前必须有1个空格。

// 正例

if (condition) {
}

set('attr', {
    some: 'xxx',
    any: 'yyy'
});

function funcName() {
}


// 反例

if (condition){
}

set('attr',{
    some: 'xxx',
    any: 'yyy'
});

function funcName(){
} 

[强制] if / else / for / while / function / switch / do / try / catch / finally 等关键字与括号之间都必须加一个空格。

// 正例

if (condition) {
}

while (condition) {
}

(function () {
})();


// 反例

if(condition) {
}

while(condition) {
}

(function() {
})(); 

[强制] 在创建对象的语句中,: 后必须加一个空格,: 前不能有空格。

// 正例
const obj = {
    a: 1,
    b: 2,
    c: 3
};

// 反例
const obj = {
    a : 1,
    b:2,
    c :3
}; 

[强制] 在函数声明、命名函数表达式和函数调用时,函数名称和 ( 间不能有空格。

// 正例

function funcName() {
}

const funcName = function funcName() {
};

funcName();


// 反例

function funcName () {
}

const funcName = function funcName () {
};

funcName (); 

[强制] ,; 前不能有空格。

// 正例
callFunc(a, b);

// 反例
callFunc(a , b) ; 

[强制] ([ 之后、 )] 之前不能有空格。

// 正例

callFunc(param1, param2, param3);

save(this.list[this.indexes[i]]);

needIncream && (variable += increament);

if (num > list.length) {
}

while (len--) {
}


// 反例

callFunc( param1, param2, param3 );

save( this.list[ this.indexes[ i ] ] );

needIncreament && ( variable += increament );

if ( num > list.length ) {
}

while ( len-- ) {
}


// 正例
const arr1 = [];
const arr2 = [1, 2, 3];
const obj1 = {};
const obj2 = {name: 'obj'};
const obj3 = {
    name: 'obj',
    age: 20,
    sex: 1
};

// 反例
const arr1 = [ ];
const arr2 = [ 1, 2, 3 ];
const obj1 = { };
const obj2 = { name: 'obj' };
const obj3 = {name: 'obj', age: 20, sex: 1}; 

[强制] 每行代码后不能有尾随空格。

换行

[强制] 必须在语句的结尾换行。

[强制] 单行字符数不能超过120个,超出则需要换行。

[强制] 如果需要换行,运算符必须放在新行的开头。

// 正例
if (user.isAuthenticated()
    && user.isInRole('admin')
    && user.hasAuthority('add-admin')
    || user.hasAuthority('delete-admin')
) {
    // Code
}

const result = number1 + number2 + number3
    + number4 + number5;


// 反例
if (user.isAuthenticated() &&
    user.isInRole('admin') &&
    user.hasAuthority('add-admin') ||
    user.hasAuthority('delete-admin')) {
    // Code
}

const result = number1 + number2 + number3 +
    number4 + number5; 

[强制] 如果括号中的内容有多行,必须为 )]} 另开一个新行,并使新行与 ([{ 所在行的缩进相对应。

// 正例
if (product) {
    product.load();
    if (user.isAuthenticated()
        && user.isInRole('admin')
        && user.hasAuthority('add-admin')
    ) {
        sendProduct(user, product);
    }
}
const arr = [
    'candy', 'sugar'
];

// 反例
if (product) {
    product.load();
    if (user.isAuthenticated()
        && user.isInRole('admin')
        && user.hasAuthority('add-admin')) {
        sendProduct(user, product);
    }
}
const arr = [
        'candy', 'sugar'
    ]; 

[强制] ,; 前不能有换行。

// 正例
const obj = {
    a: 1,
    b: 2,
    c: 3
};

foo(
    aVeryVeryLongArgument,
    anotherVeryLongArgument,
    callback
);


// 反例
const obj = {
    a: 1
    , b: 2
    , c: 3
};

foo(
    aVeryVeryLongArgument
    , anotherVeryLongArgument
    , callback
); 

[推荐] 建议换行和缩进遵循如下风格:

if (user.isAuthenticated()
    && user.isInRole('admin')
    && user.hasAuthority('add-admin')
) {
    // Code
}

foo(
    aVeryVeryLongArgument,
    anotherVeryLongArgument,
    callback
);

baidu.format(
    dateFormatTemplate,
    year, month, date, hour, minute, second
);

$('#items')
    .find('.selected')
    .highlight()
    .end();

const result = thisIsAVeryVeryLongCondition
    ? resultA : resultB;

const res = condition
    ? thisIsAVeryVeryLongResult
    : resultB; 

[强制] 如果使用多行代码块,elsecatch 必须另开一个新行。

// 正例

if (condition) {
    // some statements;
}
else {
    // some statements;
}

try {
    // some statements;
}
catch (ex) {
    // some statements;
}


// 反例

if (condition) {
    // some statements;
} else {
    // some statements;
}

try {
    // some statements;
} catch (ex) {
    // some statements;
} 

语句

[强制] 语句必须以 ; 结尾。

[强制] 如果只有一行,{} 不能被省略。

// 正例
if (condition) {
    callFunc();
}

// 反例
if (condition) callFunc();
if (condition)
    callFunc(); 

[强制] 函数定义的末尾不能有分号 ;

// 正例
function funcName() {
}

// 反例
function funcName() {
};

// 对于函数表达式,不能忽略分号
const funcName = function () {
}; 

[强制] 对象和数组的声明中不能有尾随逗号。

// 正例

const obj = {
    attr1: 'xxx',
    attr2: 'yyy'
};

const arr = [
    'xxx',
    'yyy'
];


// 反例

const obj = {
    attr1: 'xxx',
    attr2: 'yyy',
};

const arr = [
    'xxx',
    'yyy',
]; 

命名规约

[强制] 变量名、属性名及函数名的命名必须遵循 lowerCamelCase(小骆驼拼写法)。

const loadingModules = {};
function loadProduct() {
} 

[强制] class类的命名必须遵循 UpperCamelCase (Pascal),即大骆驼拼写法(帕斯卡拼写法)。

function Element(options) {
} 

[推荐] 缩略词的所有字符应当一并大写或一并小写。

function parseSVG() {
}
const svgParser; 

语法特性

兼容性

语法特性可以通过一些工具方法进行弥补,但不能通过修改内置JavaScript对象的原型来实现。

// 正例

import * as zrUtil from 'zrender/src/core/util';

zrUtil.each(array, function (val, index) {
    sum += val;
});

const result = zrUtil.map(array, function (val) {
    return parse(val);
});

const pos = zrUtil.indexOf(array, val);

const obj2 = zrUtil.extend({}, obj1);

function Element() {
    // ...
}


// 反例

array.forEach(function (val, index) {
    sum += val;
});

let result = array.map(function (val) {
    return parse(val);
});

const pos = array.indexOf(val);

const obj2 = Object.assign({}, obj1);

class Element {
    // ...
}

String.prototype.trim = function () {
}; 

变量

[强制] 优先使用const声明变量,且一行不能同时声明多个变量。

// 正例
const name = 'MyName';
const hangModules = [];
const missModules = [];
const visited = {};

// 反例
name = 'MyName';
const hangModules = [],
    missModules = [],
    visited = {}; 

条件判断

[强制] 对于相等运算符,== 只能用于检查是否为 null 或者 undefined,其余情况必须使用 ===

// 正例
if (age === 30) {
    // ...
}
if (type == null) {
    // ...
}

// 反例
if (age == 30) {
    // ......
} 

[推荐] 建议使用 xxx == null 来判断 nullundefined

[推荐] 尽量让 nullundefined 的含义相同。也就是说,不要让用户或开发者去区分变量是 null 还是 undefined

[推荐] 函数表达式或者函数声明不应该放在循环体中。

// 正例
function clicker() {
    // ......
}

for (let i = 0, len = elements.length; i < len; i++) {
    const element = elements[i];
    addListener(element, 'click', clicker);
}


// 反例
for (let i = 0, len = elements.length; i < len; i++) {
    const element = elements[i];
    addListener(element, 'click', function () {});
} 

类型转换

[推荐] 建议使用 + '' 将值转为字符串。

// 正例
num + '';

// 反例
new String(num);
num.toString();
String(num); 

[推荐] 建议使用 + 将值转为数值。

// 正例
+str;

// 反例
Number(str); 

[强制] 在使用 parseInt 时,必须传入第二个参数。

// 正例
parseInt(str, 10);

// 反例
parseInt(str); 

字符串,对象,数组

[强制] 必须使用 ' 而不是 " 定义字符串。

[强制] 必须使用对象字面量 {} 来创建简单对象。

// 正例
const obj = {};

// 反例
const obj = new Object(); 

[强制] 如果一个对象字面量的所有属性都不需要引号,引号必须省略。如果需要加引号,须使用 ' 而不是 "

// 正例
const info = {
    name: 'someone',
    age: 28
};

// 反例
const info = {
    'name': 'someone',
    'age': 28
};
const info2 = {
    "age": 40
}; 

[强制] 禁止修改内置对象的原型。

// 禁止
String.prototype.trim = function () {
}; 

[推荐] 尽可能使用 . 而不是 [] 访问对象的属性。

[推荐] 使用 for ... in ... 时,应当注意使用 hasOwnProperty 以防 Object 的原型在某些运行时环境中被添加一些额外属性的情况。

const newInfo = {};
for (const key in info) {
    if (info.hasOwnProperty(key)) {
        newInfo[key] = info[key];
    }
} 

[强制] 除非需要创建指定长度的数组,否则必须使用数组字面量 [] 创建数组。

// 正例
const arr = [];
const arr2 = new Array(1e4);

// 反例
const arr = new Array(); 

[强制] 不要使用 for in 语句对数组进行遍历。

其他

[强制] 不要使用 evalwith。允许使用new Function

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue
密钥管理系统-为你的天翼云资产上把“锁
本文关键词:数据安全,密码机,密钥管理一、你的云上资产真的安全么?1.2021年1月,巴西的一个数据库30TB数据被破坏,泄露的数据包含有1.04亿辆汽车和约4000万家公司的详细信息,受影响的人员数量可能有2.2亿;2.2021年2月,广受欢迎的音频聊天室应用Clubhouse的用户数据被恶意黑客或间谍窃取。据悉,一位身份不明的用户能够将Clubho
NVIDIA安培架构下MIG技术分析
关键词:NVIDIA、MIG、安培一什么是MIG2020年5月,NVIDIA发布了最新的GPU架构:安培,以及基于安培架构的最新的GPU:A100。安培提供了许多新的特性,MIG是其中一项非常重要的新特性。MIG的全名是MultiInstanceGPU。NVIDIA安培架构中的MIG模式可以在A100GPU上并行运行七个作业。多实