js 代码规范

1、变量声明

(1)使用let或const替换var声明变量。
(2)变量声明前,需要考虑该变量是常量还是一个可变化的,选用合适的方式声明。
原因:var没有块作用域的概念,存在变量声明提升,并可以跨块级作用访问。

// bad 
var a = 1;
// good
let b = 1;
const c = 1;

(3)字符串属性值必须通过单引号括起来,不能用双引号;如果字符串属性值太长,注意换行,用注意需要通过+连接。

// bad
let a = "a";
// good 
let a = 'a';

(4)使用let或const声明每一个变量,不能通过逗号的形式紧跟的声明。并且每一个变量后必须紧跟一个分号。

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

(5)将let和const进行分组处理

// bad
const a = 1;
let b = 1;
const c = 3;
let d = 2;
// good
const a = 1;
const c = 3;
let b = 1;
let d = 2;

(6)变量的声明要做到,即用即定义,不能把所有的变量都定义在开头,并且要做到意义明确,要别人知道这个变量的作用,不能用a,b,a1等类似作为变量名。以降低代码阅读成本。

(7)禁止使用链式赋值。
js引擎先去作用域链找b这个变量, 如果找到则使用这个b , 如果找不到则抛错(严格模式下) 或者在window作用域下创建一个全局变量b(非严格模式) , b = c 其实是一个 赋值表达式 , 它是有返回值的 , 返回的就是c本身;

// bad
const a = b = c = 1;
// good
const a = 1;
const b = 1;
const c = 1;

(8)初始值。建议声明变量时复制一个初始值。对于引用类型,初始值可赋值为null。

2、引用

对象
(1)使用字面值创建对象。

// bad 
let obj = new Object();
// good
let obj = {};

(2)不能使用保留字作为属性名,如果属性名的命名不符合标识符命名规则的话,需要通过单引号引起来。如果出现此现象,统一所有属性名都用单引号引用起来。
标识符命名规则
以字母、下划线或者$符号开头
由字母、下划线、$符号和数字组成

// bad
let obj = {
   default: { clark: 'kent' },
   private: true,
 };
// good
let obj = {
  defaults: { clark: 'kent' },
  hidden: true,
};

// bad
let obj = {
	name: '',
	age: 12,
	'more-info': ''
};
// good
let obj = {
	'name': '',
	'age': 12,
	'more-info': ''
}

(3)动态属性名,如果属性名是变量,可以通过[]的方式。

const a = 'a'let obj = {
	[a]: true 
};
// 但是不推荐,以下方式
obj[[b]] = false;

(4)简化对象的方法声明

// bad
let obj = {
	getValue: function() {}
};
// good
let obj = {
	getValue() {}
}

(5)简化属性名。如果属性名和属性值的变量名称一致,可省略属性名。

const a = true;
// bad
let obj = {
	a: a
};
// good
let obj = {
	a
}
//

并且简写属性名的数据要放在一块.

// bad 
const a = true;
const b = true;
let obj = {
	name: '',
	a,
	age: 12,
	b
}
// good
let obj = {
	a,
	b,
	name: '',
	age: 12
}

(6)获取属性值。通过点或[]的形式获取值。建议只有在属性名命名不符合规则或属性名为变量是使用[]的方式获取属性值。
原因:[]方式在存取属性值时会进行表达式运行。而点方式是直接存取属性值,理论上执行效率会比数组表示法高。

let obj = {
	name: '',
	'name-info': ''
};
// bad 
obj['name'];
// good
obj.name;
// good 
obj['name-info'];

(7)书写方式

  • 每一组属性单独占一行。
  • 除最后一组属性后不加逗号,其他后面都要紧跟逗号。
// bad
let obj = {
	name: '', age: '', hobby: '',
};
// bad
let obj = {
	name: ''
	, age: ''
	, hobby: ''
};
// good 
let obj = {
	name: '',
	age: '',
	hobby: ''
};

数组
(1)通过字面值的方式创建数组。

// bad
let arr = new Array();
// good
let arr = []

(2)数组操作。禁止通过下标的方式添加数据

// bad
arr[arr.length] = '';
// good
arr.push('');

(3)通过拓展符(…)复制数组。

let arrCopy = [...arr];

(4)通过Array.from实现类数组的转化。类数组

const arr = Array.from(foo);
解构

通过解构减少临时引用属性。
对象

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

数组

const arr = [1, 2, 3];
// bad
const arr1 = arr[1];
const arr2 = arr[2];
// good
const [arr1, arr2] = arr;
// 两个变量互换值
const a = 1;
const b = 2;
[a, b] = [b, a];

也可以对解构出来的属性名起别名

let obj = {
	name: ''
};
const {name: nameAilas} = obj;
模板字符串

如果字符串中有变量,通过模板字符串替换普通的字符串

const name = 'lihua';
// bad
let str = 'My name is ' + name;
// good
let str = `My name is ${name}`;
函数

(1)声明
对用普通的函数不建议通过函数表达式的方式声明。
原因:函数声明会把整个函数提升,而函数表达式只会把函数的引用变量名提升

// bad
const fun = funtion() {};
// good 
function fun() {};

(2)不要把参数命名为 arguments。这将取代原来函数作用域内的 arguments 对象。

// bad
function fun(name, arguments) {};
// good
function fun(name, options, args) {};

(3)不建议使用arguments。可通过(…)替换。
原因:arguments是一个伪数组,不是一个真正的数组。

// bad
function fun() {
   const args = Array.prototype.slice.call(arguments);
   return args.join('');
};
// good 
function fun(...args) {
    return args.join('');
};

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

// bad
function fun (opt) {
	opt = opt || {};
};
// good 
function fun (opt = {}) {};

(5)通过箭头函数简写普通函数

// bad
[1, 2, 3].map(function(item, index) {});
// good
[1, 2, 3].map((item, index) => {});
// 当只有一个参数时,可去掉括号
[1, 2, 3].map(item => {});
// 当函数体只有一个return返回时,可去掉花括号
[1, 2, 3].map(item => item > 2);
类型

通过class替换构造函数

// bad
function Fun(name) {
	this.name = name;
}
// good
class Fun() {
   constructor(name) {
     this.name = name ;
   }
};
模块

使用ES6中import/export 替换 require

// bad
const modal = requrie('');
// good
import modal from '';
// best
import { modal } from '';

全局公共函数文件,不建议export一个对象的方式,而是export一个个函数的形式。这样可以实现按需导入的。

// bad
util.fun = function() {};
export default util;
// bad
export default {
	fun
}
// good
export function fun() {};
import {fun} from '';
高阶函数

通过高阶函数替换for-of。

const arr = [1, 2, 3];
// bad
let sum = 0;
for (let num of arr) {
  sum += num;
};
// good
arr.forEach((num) => sum += num);
// beat 
sum = arr.reduce((total, num) => total + num, 0)

了解每一个高阶函数的特性,根据逻辑需要选取合适的高价函数,而不是一股脑的使用。

// 如果只是遍历
const arr = [1, 2, 3];
// bad 
arr.map(item => {});
// good
arr.forEach(item => {});

如果数据量特别大的话,尤其是遍历操作,推荐使用普通for循环,不建议使用forEach等高价函数,因为高阶函数底层封装的也是for循环,循环调用回调函数。

const arr = [];
// beat
for (let i = 0, len = arr.length; i < len; i++) {}
条件判断

优选使用 === 和 !==,而不是 == 和 !=
通过方法 ToBoolean 强制转换的规则

  • 引用类型 被计算为 true
  • undefined 和 null 为false
  • 布尔值被计算为布尔值
  • number类型,如果为-0,+0 或 NaN 被计算为 false,其他的为 true
  • string 类型,如果为空字符串,被计算为 false,其他的为 true
// bad
if (name !== '') {
}
// good
if (name) {
}
// bad
if (arr.length > 0) {
}
// good
if (arr.length) {}

对NaN,不能通过 === 或 == 进行判断,而是通过isNaN()方法。
原因:任何数据都不等于 NaN,包括自身。

const name;
// bad
if (name === NaN) {
}
// good
if (isNaN(name)) {
}

一个变量对于不能数据的多次判断。

const status = 1;
// bad
if (status === 1 || status === 2 || status === 3) {
}
// good
if ([1, 2, 3].includes(status)) {
}

对于过多的else-if 可以根据逻辑需要,用switch-case替换if。但是switch最后建议加一个default:break; 默认条件。

const num = 99;
// bad
if (num === 10) {
} else if (num === 20) {
} else if (num === 30) {
} else {
}
// good
switch(num) {
	case: 10:
	break;
	case: 20:
	break;
	case: 30;
	break;
	default:
	break;
}

对于复杂的判断建议将其拿出来。

// bad
if (oldPath && (srcX == oldPath.srcX && srcY == oldPath.srcY
            && tarX == oldPath.tarX && tarY == oldPath.tarY)) {}
// good 
const flag = srcX == oldPath.srcX && srcY == oldPath.srcY
            && tarX == oldPath.tarX && tarY == oldPath.tarY;
if (oldPath && flag) {
}
代码块

if后必须带有大括号包裹所有的多行代码块。

// bad
if (name)
	return;
// good
if (name) {
	return;
}
运算

推荐使用赋值运算符

let text = 'hello';
// bad
text = text + 'world';
// good
text += 'world';
注释

多行注释用 /** */
单行注释用 //

// bad
// make() returns a new element
// based on the passed in tag name
//
// @param {String} tag
// @return {Element} element
function make(tag) {

  // ...stuff...

  return element;
}
// good
/**
 * make() returns a new element
 * based on the passed in tag name
 *
 * @param {String} tag
 * @return {Element} element
 */
function make(tag) {

  // ...stuff...

  return element;
}

单行注释。在对象上面另起一行使用单行注释。在注释前插入空行。

// bad
const active = true;  // is current tab
// good
// is current tab
const active = true;

使用 FIXME 标注问题。
使用 TODO 标注解决方式。

function fun() {
	// FIXME: shouldn't use a global here
	total = 0;
}
function fun() {
 	// TODO: total should be configurable by an options param
	let total = 0;
}
空格

大括号前必要有一个空格

// bad
if (){}
// good
if () {}

在控制语句(if、switch 等)的小括号前放一个空格。在函数调用及声明中,不在函数的参数列表前加空格。

// bad
if() {}
// good
if () {}

使用空格把运算符隔开。

// bad
const x=y+5;
// good
const x = y + 5;

在使用长方法链时进行缩进。使用前面的点 . 强调这是方法调用而不是新语句。

// bad
 $('#items').find('.selected').highlight().end().find('.open').updateCount();
// good
 $('#items')
   .find('.selected')
   .highlight()
   .end()
   .find('.open')
   .updateCount();

单行对象在 {} 内部前后各加一个空格。

// bad
const {firstName, lastName} = obj;
// good
const { firstName, lastName } = obj;
类型

类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null。

// string
typeof variable === 'string'
// number
typeof variable === 'number'
// boolean
typeof variable === 'boolean'
// Function
typeof variable === 'function'
// Object
typeof variable === 'object'
// RegExp
variable instanceof RegExp
// Array
variable instanceof Array
// 对于Array与Object 推荐使用如下
if (Array.isArray(arr)) {}
// null
variable === null
// null or undefined
variable == null
// undefined
typeof variable === 'undefined'

类型转换
转换成 string 时,使用 + ‘’

// good
num + '';
// bad
new String(num);
num.toString();
String(num);

转换成 number 时,通常使用 +

// good
+str;
// bad
Number(str);

string 转换成 number,要转换的字符串结尾包含非数字并期望忽略时,使用 parseInt。

var width = '200px';
parseInt(width, 10);

转换成 boolean 时,使用 !!

let num = 3.14;
!!num;

number 去除小数点,使用 Math.floor / Math.round / Math.ceil,不使用 parseInt。

// good
var num = 3.14;
Math.ceil(num);
// bad
var num = 3.14;
parseInt(num, 10);
其他
  • 避免全局查找。会沿着作用域链查询,尤其不要再for循环中使用全局属性,应该在局部作用域中保存对全局属性的引用。
  • 如果循环次数有限的话,建议直接多次调用函数,这样会更快。
  • 减少js语句数量,能合并的语句尽量合并合并成一条语句。
  • 迭代性值(递增或者递减),都要尽可能使用组合语句
const name = values[i++]
替代
const name = values[i];
i++;
  • 没有用到引用,方法,变量以及参数,建议删除。
  • 注释掉的代码,建议删除。
  • 不要乱使用console打印日志。
  • 使用解构替换 Object.assign 赋值
    • 浅拷贝
      • 解构
      • Object.assign
      • Object.create 通过构建原型链
    • 深拷贝
      • JSON.parse(JSON.stringify(obj))
      • 递归算法
// bad
let stationInfo = Object.assign({}, this.pathArr[index], this.factStepsRouteData[index]);

// good 
const stationInfo = {...this.pathArr[index], ...this.factStepsRouteData[index]};
Vue 优化
  • Vue 中尽量避免一次性渲染大量数据,采用分批渲染效果会更好。
    如表格加载过量数据,可以采用分批异步渲染
init(data) {
    if (!data.length) {
		return;
	}
    requestAnimationFrame(async () => {
        const num = 100;
        this.data.push(...data.slice(0, num));
        this.setData(data.slice(num));
    })
},
  • 采用组件化。这样不仅利于我们维护,而且在性能上也会有很大的提升。
    在 Vue2.x 之后 Vue 的响应式是以组件为粒度进行更新的,只要修改了当前组件中所使用的数据,组件就会整个去进行更新(主要在diff算法)。
    如,一个表格加载过量数据,这是在这个组件进行按钮操作,修改data中的数据,vue就会将该组件整个重新渲染一遍。所以,应将按钮操作单独提取出来。
  • 无论是动态插槽还是静态插槽,为了保持数据的准确性,子组件都会被强制刷新渲染。可用作用域插槽替代。静态插槽内容的生成是在父组件内完成,而作用域插槽里面的内容是封装在一个 fn 的函数里面,这个不同之处就是作用域插槽的内容不会在父组件中生成,而是等待子组件去调用 fn 函数,在子组件里面生成内容,这也就意味着只有当作用域里插槽面所使用的数据发生变化时,子组件才会被通知更新。
<div>
	静态插槽
div>

<template #[myName]>
  	动态插槽
template>

<template #default>
  作用域插槽
template>
// 静态插槽编译
// 编译代码
function render() {
  with(this) {
    return _c('MyTable', {
      attrs: {
        "keys": keys,
        "tableData": tableData,
        "columns": columns
      }
    }, [_v("静态插槽")])
  }
}

// 作用域插槽编译
function render() {
  with(this) {
    return _c('MyTable', {
      attrs: {
        "keys": keys,
        "tableData": tableData,
        "columns": columns
      },
      scopedSlots: _u([{
        key: "default",
        fn: function () {
          return [_v("作用域插槽")]
        },
        proxy: true
      }])
    })
  }
}
案例

1、案例1
js 代码规范_第1张图片
冗余的判断,此处应该只需要判断是否为真值即可。但是还要注意一下变量是否为0的情况。

if (item.qualityFinishTime) {
}

2、案例2js 代码规范_第2张图片
简化属性名

let body = {
	inPlanOrderList,
	rateProjectSettingIds,
	...
}

3、案例3
在这里插入图片描述
高阶函数使用不正确;不必要的判断;没有分号

this.dataDetail.forEach(item => {
	item.ifCodeReading = item.ifCodeReading === '1';
});

4、案例4
js 代码规范_第3张图片
js 代码规范_第4张图片
没有适用的方法,应该删除,这样只会增加代码体积,并不利于阅读。

5、案例5
js 代码规范_第5张图片
不必要的console打印,语句后没有分号。

6、案例6
js 代码规范_第6张图片
像这种代码注释,应该考虑是否有用,没有用应该删除。

7、案例7
js 代码规范_第7张图片
这种深度克隆没有必要。

let carList = [
  {
    carNo: this.formItem.carNo,
    driver: this.formItem.driver,
    tel: this.formItem.tel,
    carBusinessType: 'in'
  }
]
if (this.formItem.businessType === 'move') {
  carList.push({
    carNo: this.formItem.outCarNo,
    driver: this.formItem.outDriver,
    tel: this.formItem.outTel,
    carBusinessType: 'out'
  })
}
const body = {
	wmsInPlanDTO: this.formItem,
	wmsInCarInfoDTOList: carList,
	wmsInPlanDetailDTOList: this.data,
	wmsQualityDTOList: this.qualityDataList,
	codecDynamicFeeRateDTOS: this.selectChargeList
};

8、案例8
js 代码规范_第8张图片
没有必要声明 dataList 变量

const body = {
    ownerCode: this.ownerCode,
    materialAndPacks: [row]
}

9、案例9
js 代码规范_第9张图片
解构是一种浅复制赋值。

const {matTypCode, matName, packageType, 
storageType, factoryCode, country} = this.formItem;
materialAndPacks.push({
  matTypCode,
  matName,
  packageType,
  storageType,
  factoryCode,
  country
})

10、案例10
js 代码规范_第10张图片
为什么需要判断数组的长度,直接循环不行吗?

let statusCheck = true;
this.selectDataList.forEach(item => {
	if (item.orderStatus === '2') {
		statusCheck = false;
	}
});

11、案例11
js 代码规范_第11张图片

if ([10, 11].includs(index)) {
  const values = data.map(item => +item[column.property]);
  if (!values.every(value => isNaN(value))) {
    switch (index) {
      case 10:
        sums[index] = `${this.totalData.changeQtySum}`;
        break;
      case 11:
        sums[index] = `${this.totalData.transferWeightSum}KG`;
        break;
      default:
      	break;
    }
  } else {
    sums[index] = '';
  }
}

12、案例12
js 代码规范_第12张图片
注释问题。

13、案例13
在这里插入图片描述
这种判断没有必要吧,直接赋值就行

body.receivableCustomerCode = this.formItem.customerCode

14、案例14
js 代码规范_第13张图片
(1)newVal与oldVal两个参数根本没有用到。
(2)body的声明与赋值
(3)对于if这个判断有必要吗,只有在this.formItem和this.data1都为undefined的是否if判断才为false。

data1: {
 handler(newVal) {
   const body = {
   	codecFeeRateProjectDTO: this.formItem,
   	codecFeeRateProjectSettingDTOS: newVal
   };
   this.updateEditData({
	   	id: this.id, 
	   	body, 
	   	hasSaved: this.hasSaved
	});
 },
 deep: true
}

15、案例15
js 代码规范_第14张图片
这种可以通过解构方式。

const {
	customerId, 
	invoiceTile,
	financialOrderCurrency,
	settlementCurrency,
	invoiceType,
	echangeRate} = this.orderSelectList[0];

16、案例16
js 代码规范_第15张图片
这种数据的转换,大部分应该在后端处理。

17、案例17
js 代码规范_第16张图片
js 代码规范_第17张图片
(1)typeList的声明可以省略
(2)在子组件中getEditInfo方法中detail逻辑已被注释掉,而且只用到其中一个字段值,只获取这一个字段值就行。并在图一中应该判断list是否有数据,不能直接通过下标获取,否则会得到undefined,在接下来的获取字段值时就会报错。

18、案例18
js 代码规范_第18张图片
这种三元判断,可以通过初始值和if判断替换

let load = 'addBillLoad';
let msg = '是否生成账单';
if (ifApply) {
	load = 'addBillApplyLoad';
	msg = '是否生成账单并提交?';
}
或者
const load = ifApply ? 'addBillApplyLoad' : 'addBillLoad';
const msg = ifApply ? '是否生成账单并提交?' : '是否生成账单';

19、案例19
在这里插入图片描述
indexOf 与 includes 公共混淆了吧
indexOf 返回的是下标,没有返回-1
includes 是否存在,返回的是布尔值

if (this.listQuery.containerNumArr.includes(',')) {}if (this.listQuery.containerNumArr.indexOf(',') !== -1) {}

20、案例20
js 代码规范_第19张图片
可否改造成以下

list.forEach(item => {
	const {
		chargeType, 
		chargeTypeCode, 
		chargeType1, 
		chargeTypeCode1,
		...
	} = item;

	item[chargeType] = chargeTypeCode;
	item[chargeType1] = chargeTypeCode1;
	....
	// 多了这层循环操作
	['', 'undefined', 'null'].forEach(it => {
		if (item.hasOwnProperty(it)) {
			delete item[it];
		}
	});
});

21、案例21
js 代码规范_第20张图片(1)if判断条件优化。
(2)数组数据的添加,完全不用if判断,两者之间只有transportStatus不同而已。

22、案例22
js 代码规范_第21张图片
变量声明,分号。

23、案例23
js 代码规范_第22张图片
这种props传值的方式太繁重了。可通过vuex或者通过provide/inject方式
以下为provide/inject
js 代码规范_第23张图片
js 代码规范_第24张图片
minix文件

24、案例24
js 代码规范_第25张图片
像这种字典数据一个一个调用,很影响性能。完全可以通过一个接口获取到所有需要的字典数据。

最后注意
  • 不要声明无用的变量和代码,做到每一句,每一行代码有用。
  • 在写之前,要根据逻辑构思好每一句代码。
  • 选用合适的高阶函数或方法处理数据。
  • 代码排版要条理清晰,关键逻辑处,注释要明确思路。
  • HTML编写要合理,不能一股脑写,避免重复HTML语句。

你可能感兴趣的:(javascript)