2023最新前端规范
2023最新前端规范
-
- 【一】必要
-
- 一、 引用
- 二、对象
- 三、数组
- 四、字符
- 五、属性
- 六、变量
- 七、比较运算符和等号
- 八、注释
- 九、类型转换和强制类型转换
- 十、命名规范
- 十一、VUE相关规范
-
-
- 1）组件
- 2）.js / .ts文件命名规范
- 3）view目录下的文件
- 4）.less文件命名规范
- 5）其他细则
-
- 【二】推荐
-
- 一、解构
- 二、循环（迭代器）
- 三、控制语句
- 四、对象
【一】必要
一、 引用
- 使用 const 定义你的所有引用；避免使用 var。
为什么? 这样能够确保你不能重新赋值你的引用，否则可能导致错误或者产生难以理解的代码
// bad
var a = 1;
// good
const a = 1;
- 如果你必须重新赋值你的引用， 使用 let 代替 var。
为什么? let 是块级作用域，而不像 var 是函数作用域.
// bad
var count = 1;
if (true) {
count += 1;
}
// good, use the let.
let count = 1;
if (true) {
count += 1;
}
二、对象
- 使用字面语法来创建对象
为什么？更简洁且效率更高
// bad
const item = new Object();
// good
const item = {};
- 在对象声明的时候将简写的属性进行分组
为什么? 这样更容易的判断哪些属性使用的简写。
const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';
// bad
const obj = {
episodeOne: 1,
twoJediWalkIntoACantina: 2,
lukeSkywalker,
episodeThree: 3,
anakinSkywalker,
};
// good
const obj = {
lukeSkywalker,
anakinSkywalker,
episodeOne: 1,
twoJediWalkIntoACantina: 2,
episodeThree: 3,
};
- 只使用引号标注无效标识符的属性
为什么? 总的来说，我们认为这样更容易阅读。 它提升了语法高亮显示，并且更容易通过许多 JS 引擎优化。
// bad
const bad = {
'foo': 3,
'data-blah': 5,
};
// good
const good = {
foo: 3,
'data-blah': 5,
};
- 不能直接调用 Object.prototype 的方法，如： hasOwnProperty 、 propertyIsEnumerable 和 isPrototypeOf。
为什么?
1）
const obj = Object.create(null)
const text1 = obj.hasOwnProperty(‘a’)
const text2 = Object.prototype.hasOwnProperty.call(obj, ‘a’)
console.log(text1) // 报错
console.log(text2) // false
2）
可能导致意外行为或服务安全漏洞。例如，web 客户端解析来自远程服务器的 JSON 输入并直接在结果对象上调用 hasOwnProperty 是不安全的，因为恶意服务器可能发送一个JSON值，如 {“hasOwnProperty”: 1}，扰乱业务和安全。
// bad
console.log(object.hasOwnProperty(key));
// good
console.log(Object.prototype.hasOwnProperty.call(object, key));
// best
const has = Object.prototype.hasOwnProperty; // 在模块范围内的缓存中查找一次
// ...
console.log(has.call(object, key));
三、数组
- 使用字面语法创建数组
为什么？更简洁且效率更高
// bad
const items = new Array();
// good
const items = [];
- 使用数组展开方法 … 来拷贝数组
// bad
const len = items.length;
const itemsCopy = [];
let i;
for (i = 0; i < len; i += 1) {
itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];
四、字符
- 使用单引号 ‘’ 定义字符串
// bad
const name = "Capt. Janeway";
// bad - 模板文字应该包含插值或换行。
const name = `Capt. Janeway`;
// good
const name = 'Capt. Janeway';
- 当以编程模式构建字符串时，使用字符串模板代替字符串拼接
为什么? 字符串模板为您提供了一种可读的、简洁的语法，具有正确的换行和字符串插值特性。
// bad
function sayHi(name) {
return 'How are you, ' + name + '?';
}
// bad
function sayHi(name) {
return ['How are you, ', name, '?'].join();
}
// bad
function sayHi(name) {
return `How are you, ${ name }?`;
}
// good
function sayHi(name) {
return `How are you, ${name}?`;
}
- 不要在字符串上使用 eval() ，它打开了太多漏洞
- 永远不要定义一个参数为 arguments
为什么？因为arguments为每个函数的隐式参数
// bad
function foo(name, options, arguments) {
// ...
}
// good
function foo(name, options, args) {
// ...
}
5.不要使用 arguments, 选择使用 rest 语法 … 代替
为什么？… 明确了你想要拉取什么参数。 更甚, rest 参数是一个真正的数组，而不仅仅是类数组的 arguments 。
// bad
function concatenateAll() {
const args = Array.prototype.slice.call(arguments);
return args.join('');
}
// good
function concatenateAll(...args) {
return args.join('');
}
- 使用默认的参数语法，而不是改变函数参数。
// really bad
function handleThings(opts) {
// No! We shouldn’t mutate function arguments.
// Double bad: if opts is falsy it'll be set to an object which may
// be what you want but it can introduce subtle bugs.
opts = opts || {};
// ...
}
// still bad
function handleThings(opts) {
if (opts === void 0) {
opts = {};
}
// ...
}
// good
function handleThings(opts = {}) {
// ...
}
- 总是把默认参数放在最后。
// bad
function handleThings(opts = {}, name) {
// ...
}
// good
function handleThings(name, opts = {}) {
// ...
}
- 永远不要使用函数构造器来创建一个新函数。
为什么? 以这种方式创建一个函数将对一个类似于 eval() 的字符串进行计算，这将打开漏洞。
// bad
var add = new Function('a', 'b', 'return a + b');
// still bad
var subtract = Function('a', 'b', 'return a - b');
- 不要再赋值函数已有的参数。
为什么? 重新赋值参数会导致意外的行为，尤其是在访问 arguments 对象的时候。 它还可能导致性能优化问题，尤其是在 V8 中。
// bad
function f1(a) {
a = 1;
// ...
}
function f2(a) {
if (!a) { a = 1; }
// ...
}
// good
function f3(a) {
const b = a || 1;
// ...
}
function f4(a = 1) {
// ...
}
五、属性
- 访问属性时，使用点符号，使用变量访问属性时，使用 [ ] 表示法。
const luke = {
jedi: true,
age: 28,
};
// bad
const isJedi = luke['jedi'];
// good
const isJedi = luke.jedi;
六、变量
- 使用 const 或者 let 声明每一个变量，并把 const 声明的放在一起，把 let 声明的放在一起。
为什么？
1） 这样更容易添加新的变量声明，而且你不必担心是使用 ; 还是使用 , 或引入标点符号的差别。 你可以通过 debugger 逐步查看每个声明，而不是立即跳过所有声明。
2）这在后边如果需要根据前边的赋值变量指定一个变量时很有用。
// bad
let i, len, dragonball,
items = getItems(),
goSportsTeam = true;
// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;
// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;
- 不要链式变量赋值。
为什么? 链式变量赋值会创建隐式全局变量。
// bad
(function example() {
// JavaScript 把它解释为
// let a = ( b = ( c = 1 ) );
// let 关键词只适用于变量 a ；变量 b 和变量 c 则变成了全局变量。
let a = b = c = 1;
}());
console.log(a); // throws ReferenceError
console.log(b); // 1
console.log(c); // 1
// good
(function example() {
let a = 1;
let b = a;
let c = a;
}());
console.log(a); // throws ReferenceError
console.log(b); // throws ReferenceError
console.log(c); // throws ReferenceError
// 对于 `const` 也一样
七、比较运算符和等号
- 使用 === 和 !== 而不是 == 和 !=
- 对于布尔值使用简写，但是对于字符串和数字进行显式比较。
// bad
if (isValid === true) {
// ...
}
// good
if (isValid) {
// ...
}
// bad
if (name) {
// ...
}
// good
if (name !== '') {
// ...
}
// bad
if (collection.length) {
// ...
}
// good
if (collection.length > 0) {
// ...
}
- 在 case 和 default 的子句中，如果存在声明 (例如. let, const, function, 和 class)，使用大括号来创建块 。
为什么? 语法声明在整个 switch 块中都是可见的，但是只有在赋值的时候才会被初始化，这种情况只有在 case 条件达到才会发生。 当多个 case 语句定义相同的东西是，这会导致问题问题。
// bad
switch (foo) {
case 1:
let x = 1;
break;
case 2:
const y = 2;
break;
case 3:
function f() {
// ...
}
break;
default:
class C {}
}
// good
switch (foo) {
case 1: {
let x = 1;
break;
}
case 2: {
const y = 2;
break;
}
case 3: {
function f() {
// ...
}
break;
}
case 4:
bar();
break;
default: {
class C {}
}
}
- 三目表达式不应该嵌套，通常是单行表达式。太多了应该采用分离的办法。
【备注：js代码】
// bad
const foo = maybe1 > maybe2
? "bar"
: value1 > value2 ? "baz" : null;
// 分离为两个三目表达式
const maybeNull = value1 > value2 ? 'baz' : null;
// better
const foo = maybe1 > maybe2
? 'bar'
: maybeNull;
// best
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;
- 使用该混合运算符时，使用括号括起来。 唯一例外的是标准算数运算符 (+, -, *, & /) 因为他们的优先级被广泛理解。
为什么? 这能提高可读性并且表明开发人员的意图。
八、注释
-
在编写代码注释时，使用 /** … */ 来进行多行注释，而不是 // 。
-
使用 // 进行单行注释。 将单行注释放在需要注释的行的上方新行。 在注释之前放一个空行，除非它在块的第一行。用一个空格开始所有的注释，使它更容易阅读。
// bad
const active = true; //is current tab
// good
// is current tab
const active = true;
// bad
function getType() {
console.log('fetching type...');
// set the default type to 'no type'
const type = this.type || 'no type';
return type;
}
// good
function getType() {
console.log('fetching type...');
// set the default type to 'no type'
const type = this.type || 'no type';
return type;
}
// also good
function getType() {
// set the default type to 'no type'
const type = this.type || 'no type';
return type;
}
九、类型转换和强制类型转换
- 转换为字符串，首推String()
为什么？其他方法都有它的问题，或者会出现执行出错的可能；
let reviewScore = 9;
// bad
const totalScore = new String(reviewScore); // typeof totalScore is "object" not "string"
// bad
const totalScore = reviewScore + ''; // Symbol('123') + ‘’报错
// bad
const totalScore = reviewScore.toString(); // 值为null 或者undefined就会报错
// good
const totalScore = String(reviewScore);
- 转为数字类型，首推Number或者parseInt指定10为基数。
const inputValue = '4';
// bad
const val = new Number(inputValue);
// bad
const val = +inputValue;
// bad
const val = inputValue >> 0;
// bad
const val = parseInt(inputValue);
// good
const val = Number(inputValue);
// good
const val = parseInt(inputValue, 10);
- 如果你要用位运算且这样最好的情况下，请写下注释，说明为什么这样做和你做了什么。
- 转换为布尔类型
const age = 0;
// bad
const hasAge = new Boolean(age);
// good
const hasAge = Boolean(age);
// best
const hasAge = !!age;
十、命名规范
- 在命名对象、函数和实例时使用驼峰命名法（camelCase）.且避免单字母或者拼音命名。用你命名来描述功能。
// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}
// good
const thisIsMyObject = {};
function thisIsMyFunction() {}
- 文件名应该和默认导出的名称完全匹配。也就是export/import/filename 的命名规范要相同，是PascalCase 就都是PascalCase ，是camelCase 都是camelCase 。
- 关于缩略词和缩写，必须全部是大写或者全部是小写。
为什么? 名字是为了可读性，不是为了满足计算机算法。
// bad
import SmsContainer from './containers/SmsContainer';
// bad
const HttpRequests = [
// ...
];
// good
import SMSContainer from './containers/SMSContainer';
// good
const HTTPRequests = [
// ...
];
// also good
const httpRequests = [
// ...
];
十一、VUE相关规范
1）组件
-
组件应该命名为多个单词的，且格式为单词大写开头（PascalCase）如’TodoItem’。
-
基础组件（也就是展示类的、无逻辑的或无状态的组件）命名应该全部以一个特定的前缀开头，比如 Base、App 或 V。
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
- 单列组件（每个页面只用一次）命名应该以The前缀命名，以示其唯一性。
components/
|- TheHeading.vue
|- TheSidebar.vue
- 紧密耦合的组件（父组件和子组件），其中子组件应该以父组件名作为前缀命名，
- 组件名的单词顺序，应该以表属性名词开头，由描述性的修饰词结尾。
- 组件名使用完整的单词而不是缩写（编辑器会自动补全单词而不用每次都手敲，完整单词带来的好处是方便后期维护）
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
2）.js / .ts文件命名规范
- 属于类的.js文件，除index.js外，使用
PascalBase风格； - 其他类型的.js文件，使用
camelCase风格； - 属于
Api的，统一加上Api后缀；
3）view目录下的文件
除index.vue之外，其他.vue文件统一用PascalBase风格；
4）.less文件命名规范
统一使用kebab-case命名风格；
5）其他细则
- 在DOM模板中不能有自闭和标签的组件。但是在单文件组件（*.vue）/字符串模板种，没有内容的标签需要自动闭合；
为什么呢？HTML 并不支持自闭合的自定义元素；
而没有内容的单文件组件/字符串模板加上末尾闭合标签显得更已读，也使代码变得简洁；
<MyComponent/>
<my-component/>
- DOM模板（html文件）中的组件名，应该以kebab-case格式；
在 单文件（*.vue） 模板/字符串模板中用PascalCase (首字母大写命名)、camelCase (驼峰命名)、kebab-case (短横线命名) 都可以，但不建议用驼峰，非常不醒目
为什么呢？HTML是大小写不敏感的，在DOM模板中必须仍使用kebab-case。
<!-- 在 DOM 模板中 -->
<my-component></my-component>
<!-- 在 单文件.vue 模板/字符串模板中，我们推荐首字母大写，更醒目和方便(自动补全名字) -->
<MyComponent></MyComponent>
- Prop 的定义要详细。提交的代码中，prop 的定义应该尽量详细，至少需要指定其类型。
反例
// 这样做只有开发原型系统时可以接受
props: ['status']
- 为你写的一般页面和组件样式设置作用域（scoped），或者项目名+组件名包裹；
为什么？ 组件和布局组件中的样式可以是全局的
<template>
<button class="button button-close">X</button>
</template>
<!-- 使用 `scoped` attribute -->
<style scoped>
.button-close {
background-color: red;
}
</style>
- 如果在函数内部中需要用到函数外部变量的值，需要把该变量以参数的方式传入函数，让外部参数以函数内部参数的身份去使用。
为什么？会使得数据逻辑脉络更清楚，更易追踪。
<button @click="onSendOut(params, info.orderId)">发 货button>
- methods中的方法名:
1）驼峰的写法；
2）方法名为英语单词禁用拼音；
3）如果是事件需要在前面加上on；
4)获取数据需为 getXXXData 格式；
5）处理数据需要为 handleXXXData格式
如：
onSubmitForm() / getListData() / handleListData()
【二】推荐
一、解构
- 在访问和使用对象的多个属性的时候使用对象的解构。
为什么? 解构可以避免为这些属性创建临时引用。
// 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}`;
}
- 使用数组解构
const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;
- 对于多个返回值使用对象解构，而不是数组解构。
为什么? 你可以随时添加新的属性或者改变属性的顺序，而不用修改调用方。
// bad
function processInput(input) {
// 处理代码...
return [left, right, top, bottom];
}
// 调用者需要考虑返回数据的顺序。
const [left, __, top] = processInput(input);
// good
function processInput(input) {
// 处理代码...
return { left, right, top, bottom };
}
// 调用者只选择他们需要的数据。
const { left, top } = processInput(input);
二、循环（迭代器）
- 你应该使用 JavaScript 的高阶函数代替 for-in 或者 for-of。
使用 map() / every() / filter() / find() / findIndex() / reduce() / some() / … 遍历数组， 和使用 Object.keys() / Object.values() / Object.entries() 迭代你的对象生成数组。
为什么? 因为它们返回纯函数。
const numbers = [1, 2, 3, 4, 5];
// bad
let sum = 0;
for (let num of numbers) {
sum += num;
}
sum === 15;
// good
let sum = 0;
numbers.forEach((num) => {
sum += num;
});
sum === 15;
// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;
// bad
const increasedByOne = [];
for (let i = 0; i < numbers.length; i++) {
increasedByOne.push(numbers[i] + 1);
}
// good
const increasedByOne = [];
numbers.forEach((num) => {
increasedByOne.push(num + 1);
});
// best (keeping it functional)
const increasedByOne = numbers.map(num => num + 1);
三、控制语句
- 如果你的控制语句 (if, while 等) 太长或者超过了一行最大长度的限制，则可以将每个条件（或组）放入一个新的行。 逻辑运算符应该在行的开始。
为什么? 要求操作符在行的开始保持对齐并遵循类似方法衔接的模式。 这提高了可读性，并且使更复杂的逻辑更容易直观的被理解。
// bad
if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
thing1();
}
// bad
if (foo === 123 &&
bar === 'abc') {
thing1();
}
// bad
if (foo === 123
&& bar === 'abc') {
thing1();
}
// bad
if (
foo === 123 &&
bar === 'abc'
) {
thing1();
}
// good
if (
foo === 123
&& bar === 'abc'
) {
thing1();
}
// good
if (
(foo === 123 || bar === 'abc')
&& doesItLookGoodWhenItBecomesThatLong()
&& isThisReallyHappening()
) {
thing1();
}
- 避免嵌套
当出现多种条件判断从而需要多重嵌套代码的时候，可以用
if + return的方式，这样更加简洁和易读
// bad
function func(a, b, c, d){
if(a !== null){
if (b !== 2){
if (c !== "OK"){
// code
}
}
}
}
// good
function func(a, b, c, d){
if(a === null) return
if (b === 2) return
if (c === "OK") return
// code
}
四、对象
- 更倾向于用对象扩展操作符，而不是用 Object.assign 浅拷贝一个对象。 使用对象的 rest 操作符来获得一个具有某些属性的新对象。
// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // 变异的 `original` ಠ_ಠ
delete copy.a; // 这....
// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }
const { a, ...noA } = copy; // noA => { b: 2, c: 3 }