2023最新前端规范

2023最新前端规范

    • 【一】必要
      • 一、 引用
      • 二、对象
      • 三、数组
      • 四、字符
      • 五、属性
      • 六、变量
      • 七、比较运算符和等号
      • 八、注释
      • 九、类型转换和强制类型转换
      • 十、命名规范
      • 十一、VUE相关规范
          • 1)组件
          • 2).js / .ts文件命名规范
          • 3)view目录下的文件
          • 4).less文件命名规范
          • 5)其他细则
    • 【二】推荐
      • 一、解构
      • 二、循环(迭代器)
      • 三、控制语句
      • 四、对象

【一】必要

一、 引用

  1. 使用 const 定义你的所有引用;避免使用 var。

为什么? 这样能够确保你不能重新赋值你的引用,否则可能导致错误或者产生难以理解的代码

// bad
var a = 1;

// good
const a = 1;
  1. 如果你必须重新赋值你的引用, 使用 let 代替 var。

为什么? let 是块级作用域,而不像 var 是函数作用域.

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

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

二、对象

  1. 使用字面语法来创建对象

为什么?更简洁且效率更高

// bad
const item = new Object();

// good
const item = {};
  1. 在对象声明的时候将简写的属性进行分组

为什么? 这样更容易的判断哪些属性使用的简写。

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,
};
  1. 只使用引号标注无效标识符的属性

为什么? 总的来说,我们认为这样更容易阅读。 它提升了语法高亮显示,并且更容易通过许多 JS 引擎优化。

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

// good
const good = {
  foo: 3,
  'data-blah': 5,
};
  1. 不能直接调用 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));

三、数组

  1. 使用字面语法创建数组

为什么?更简洁且效率更高

// bad
const items = new Array();

// good
const items = [];
  1. 使用数组展开方法 … 来拷贝数组
// bad
const len = items.length;
const itemsCopy = [];
let i;

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

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

四、字符

  1. 使用单引号 ‘’ 定义字符串
// bad
const name = "Capt. Janeway";

// bad - 模板文字应该包含插值或换行。
const name = `Capt. Janeway`;

// good
const name = 'Capt. Janeway';
  1. 当以编程模式构建字符串时,使用字符串模板代替字符串拼接

为什么? 字符串模板为您提供了一种可读的、简洁的语法,具有正确的换行和字符串插值特性。

// 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}?`;
}
  1. 不要在字符串上使用 eval() ,它打开了太多漏洞
  2. 永远不要定义一个参数为 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('');
}
  1. 使用默认的参数语法,而不是改变函数参数。
// 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 = {}) {
  // ...
}
  1. 总是把默认参数放在最后。
// bad
function handleThings(opts = {}, name) {
  // ...
}

// good
function handleThings(name, opts = {}) {
  // ...
}
  1. 永远不要使用函数构造器来创建一个新函数。

为什么? 以这种方式创建一个函数将对一个类似于 eval() 的字符串进行计算,这将打开漏洞。

// bad
var add = new Function('a', 'b', 'return a + b');

// still bad
var subtract = Function('a', 'b', 'return a - b');
  1. 不要再赋值函数已有的参数。

为什么? 重新赋值参数会导致意外的行为,尤其是在访问 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) {
  // ...
}

五、属性

  1. 访问属性时,使用点符号,使用变量访问属性时,使用 [ ] 表示法。
const luke = {
  jedi: true,
  age: 28,
};

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

// good
const isJedi = luke.jedi;

六、变量

  1. 使用 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;
  1. 不要链式变量赋值。

为什么? 链式变量赋值会创建隐式全局变量。

// 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` 也一样

七、比较运算符和等号

  1. 使用 === 和 !== 而不是 == 和 !=
  2. 对于布尔值使用简写,但是对于字符串和数字进行显式比较。
// bad
if (isValid === true) {
  // ...
}

// good
if (isValid) {
  // ...
}

// bad
if (name) {
  // ...
}

// good
if (name !== '') {
  // ...
}

// bad
if (collection.length) {
  // ...
}

// good
if (collection.length > 0) {
  // ...
}
  1. 在 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 {}
  }
}
  1. 三目表达式不应该嵌套,通常是单行表达式。太多了应该采用分离的办法。
    【备注: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;
  1. 使用该混合运算符时,使用括号括起来。 唯一例外的是标准算数运算符 (+, -, *, & /) 因为他们的优先级被广泛理解。

为什么? 这能提高可读性并且表明开发人员的意图。

八、注释

  1. 在编写代码注释时,使用 /** … */ 来进行多行注释,而不是 // 。

  2. 使用 // 进行单行注释。 将单行注释放在需要注释的行的上方新行。 在注释之前放一个空行,除非它在块的第一行。用一个空格开始所有的注释,使它更容易阅读。

// 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;
}

九、类型转换和强制类型转换

  1. 转换为字符串,首推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);
  1. 转为数字类型,首推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);
  1. 如果你要用位运算且这样最好的情况下,请写下注释,说明为什么这样做和你做了什么。
  2. 转换为布尔类型
const age = 0;

// bad
const hasAge = new Boolean(age);

// good
const hasAge = Boolean(age);

// best
const hasAge = !!age;

十、命名规范

  1. 在命名对象、函数和实例时使用驼峰命名法(camelCase).且避免单字母或者拼音命名。用你命名来描述功能。
// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}
  1. 文件名应该和默认导出的名称完全匹配。也就是export/import/filename 的命名规范要相同,是PascalCase 就都是PascalCase ,是camelCase 都是camelCase 。
  2. 关于缩略词和缩写,必须全部是大写或者全部是小写。

为什么? 名字是为了可读性,不是为了满足计算机算法。

// bad
import SmsContainer from './containers/SmsContainer';

// bad
const HttpRequests = [
  // ...
];

// good
import SMSContainer from './containers/SMSContainer';

// good
const HTTPRequests = [
  // ...
];

// also good
const httpRequests = [
  // ...
];

十一、VUE相关规范

1)组件
  1. 组件应该命名为多个单词的,且格式为单词大写开头(PascalCase)如’TodoItem’。

  2. 基础组件(也就是展示类的、无逻辑的或无状态的组件)命名应该全部以一个特定的前缀开头,比如 Base、App 或 V。

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
  1. 单列组件(每个页面只用一次)命名应该以The前缀命名,以示其唯一性。
components/
|- TheHeading.vue
|- TheSidebar.vue
  1. 紧密耦合的组件(父组件和子组件),其中子组件应该以父组件名作为前缀命名,
  2. 组件名的单词顺序,应该以表属性名词开头,由描述性的修饰词结尾。
  3. 组件名使用完整的单词而不是缩写(编辑器会自动补全单词而不用每次都手敲,完整单词带来的好处是方便后期维护)
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
2).js / .ts文件命名规范
  1. 属于类的.js文件,除index.js外,使用PascalBase风格;
  2. 其他类型的.js文件,使用camelCase风格;
  3. 属于Api的,统一加上Api后缀;
3)view目录下的文件

除index.vue之外,其他.vue文件统一用PascalBase风格;

4).less文件命名规范

统一使用kebab-case命名风格;

5)其他细则
  1. 在DOM模板中不能有自闭和标签的组件。但是在单文件组件(*.vue)/字符串模板种,没有内容的标签需要自动闭合;

为什么呢?HTML 并不支持自闭合的自定义元素;
而没有内容的单文件组件/字符串模板加上末尾闭合标签显得更已读,也使代码变得简洁;


<MyComponent/>

<my-component/>

  1. DOM模板(html文件)中的组件名,应该以kebab-case格式;
    在 单文件(*.vue) 模板/字符串模板中用PascalCase (首字母大写命名)、camelCase (驼峰命名)、kebab-case (短横线命名) 都可以,但不建议用驼峰,非常不醒目

为什么呢?HTML是大小写不敏感的,在DOM模板中必须仍使用kebab-case。

<!--DOM 模板中 -->
<my-component></my-component>

<!-- 在 单文件.vue 模板/字符串模板中,我们推荐首字母大写,更醒目和方便(自动补全名字) -->
<MyComponent></MyComponent>
  1. Prop 的定义要详细。提交的代码中,prop 的定义应该尽量详细,至少需要指定其类型。
反例
// 这样做只有开发原型系统时可以接受
props: ['status']
  1. 为你写的一般页面和组件样式设置作用域(scoped),或者项目名+组件名包裹;

为什么? 组件和布局组件中的样式可以是全局的

<template>
  <button class="button button-close">X</button>
</template>

<!-- 使用 `scoped` attribute -->
<style scoped>
.button-close {
  background-color: red;
}
</style>
  1. 如果在函数内部中需要用到函数外部变量的值,需要把该变量以参数的方式传入函数,让外部参数以函数内部参数的身份去使用。

为什么?会使得数据逻辑脉络更清楚,更易追踪。

<button @click="onSendOut(params, info.orderId)">发 货button>
  1. methods中的方法名:
    1)驼峰的写法;
    2)方法名为英语单词禁用拼音;
    3)如果是事件需要在前面加上on;
    4)获取数据需为 getXXXData 格式;
    5)处理数据需要为 handleXXXData格式
如:
onSubmitForm() / getListData() / handleListData()

【二】推荐

一、解构

  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}`;
}
  1. 使用数组解构
const arr = [1, 2, 3, 4];

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

// good
const [first, second] = arr;
  1. 对于多个返回值使用对象解构,而不是数组解构。

为什么? 你可以随时添加新的属性或者改变属性的顺序,而不用修改调用方。

// 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);

二、循环(迭代器)

  1. 你应该使用 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);

三、控制语句

  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();
}

  1. 避免嵌套

当出现多种条件判断从而需要多重嵌套代码的时候,可以用 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

}

四、对象

  1. 更倾向于用对象扩展操作符,而不是用 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 }

你可能感兴趣的:(前端,javascript,Vue,前端,javascript,vue.js)