2022最新前端规范

最新推荐文章于 2024-09-26 14:22:52 发布

web18296061989

最新推荐文章于 2024-09-26 14:22:52 发布

阅读量229

点赞数

分类专栏：前端 html 面试文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/web18296061989/article/details/123154236

版权

这篇博客详细介绍了2022年前端编码规范，包括引用、对象、数组、字符、属性、变量、比较运算符和等号、注释、类型转换、命名规范以及VUE相关规范。推荐使用const和let、字面量语法、数组展开、单引号字符串、字符串模板、避免eval()等，同时强调了解构、循环优化、控制语句和对象操作的最佳实践。

摘要由CSDN通过智能技术生成

2022最新前端规范

【一】必要

一、引用

使用 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’;
当以编程模式构建字