• 前端工程师的这些编码陋习应该避免
  • 发布于 2个月前
  • 69 热度
    0 评论
  • BruceLe
  • 1 粉丝 39 篇博客
  •   
作为一个编程4年的的前端工程师,一路走来踩过许多坑。希望我的经验能让你少踩些坑,在编程的路上走的更顺些!

一. 禁用var声明
只使用const或let声明变量。并且首选const,当一个变量需要重新赋值时,才使用let。并且在创建变量时就应该给变量赋值。

原因:
1.var缺乏作用域的限制,很容易导致全局作用域污染,引发“命名冲突”和“错误赋值”等问题。
2.var存在变量提升,可能导致在变量声明之前就使用变量,产生未定义的情况。
3.var允许重复声明同一变量,容易导致意外修改已有变量的值,引发代码错误。
注意:我们最好在创建变量时就进行赋值,这样可以防止我们的代码出现,声明了变量但未赋值的情况。

代码示例:
// ❌ 错误做法
var old = "";

// ✅ 正确做法
const immutable = "John";
let counter = 1;
counter++; // counter === 2;
// 堆代码 duidaima.com
// 将对象和数组声明为const,以防止类型更改
const user = {firstname: "John", lastname: "Doe"};
const users = ["Mac", "Roe"];
二.使用严格相等运算符(===
在进行相等比较时,只使用严格相等运算符(===)进行比较。

原因:
1.双等号(==)在进行类型比较时会默认进行类型转换,导致不同类型的值也可能被判定为相等。
2.严格相等运算符(===)不仅比较两个值的值,还会比较它们的数据类型。只有值和类型都相同时才会返回 true。
注意:在使用双等号进行0作为假值会错误地等于false,

代码示例:
// ❌ 错误做法
1 == "1"; // true
0 == false; // true
"" == 0; // true
null == undefined; // true
[1] == true; // true
"false" == false; // false

// ✅ 正确做法
1 === 1; // true
1 === "1"; // false
0 === false; // false
三.使用模板字符串来拼接内容
使用模板字符串(反引号标记)来拼接字符串,而不是使用加号(+)。

原因:
1.模板字符串允许在字符串中插入变量或表达式,使得代码更加清晰易读。
代码示例:
const name = 'Alice';
const age = 30;
// ❌ 错误做法
// 字符串拼接 
const greeting = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.'; 
console.log(greeting); // Hello, my name is Alice and I am 30 years old. 
// 多行字符串(使用\n换行) 
const multiLineString = 'This is a\nmulti-line\nstring.'; 
console.log(multiLineString); // This is a // multi-line // string.
// 堆代码 duidaima.com
// ✅ 正确做法
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Hello, my name is Alice and I am 30 years old. 

// 多行字符串 
const multiLineString = ` This is a
                          multi-line 
                          string. `;
console.log(multiLineString); 
//This is a 
// multi-line 
// string.
四.在语句末尾使用分号
在行末使用分号结尾是一种很好的习惯,虽然不使用分号,编译器也不会进行报错,但在我们项目越来越庞大代码越来越复杂时,分号可以帮助我们更好的理解代码。维护起来也会更加轻松。

以for循环为例:
代码示例:
// ❌ 错误做法
for (let i = 0 i < numbers.length i++) {
  console.log(numbers[i]);
} // 报错:Uncaught SyntaxError: Unexpected identifier
// ✅ 正确做法
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
在上面的示例中,缺少分号会导致编译器认为它是一个表达式,但是它实际上是三个独立不同的表达式,这样的结果就是会引起报错。

五. 使用对象代替多个参数
在定义函数时,给函数定义多个参数的做法是很愚蠢的一种写法,因为,当需要传的参数变的很多很复杂时,代码的阅读和维护就变的很困难,而使用对象参数是一种很好的替代方案。

代码示例:
// ❌ 错误做法
function avatarUrl(avatar, format = "small", caption = true,) {
  //函数内容
}
avatarUrl(user.avatar, 'thumb', false)
当我们在使用上面这个函数时,很难知道哪些参数被使用了以及他的含义是什么。例如上面avatarUrl的最后一个参数false,就很难让人理解它代表的是什么意思呢?所以我们在维护时,必须要阅读完函数的定义才能知道他的每个参数代表什么意思。而且当我们需要改变参数的顺序时,不得不改变所有地方的函数调用。

但是如果我们使用对象来传参,一个顺序的改变并不会影响到所有地方的调用:
// ✅ 正确做法
function avatarUrl(avatar, options={format: 'small', caption: true}) {
  // 函数内容
}

avatarUrl(user.avatar, {
caption: false , 
format: "thumb"
})
六. 利用提前返回简化逻辑
在编写代码时,我们经常会用到if/else来进行判断,而且可能会进行多层嵌套,但是过多过深的嵌套会使的我们的代码可读性变差并且很难维护,所以我们使用return来解决这个问题。提前返回可以减少大量的不必要的else条件,提高代码的可读性

代码示例:
// ❌ 错误做法
function doSomething() {
  if (user) {
    if (user.role === "ADMIN") {
      return 'Administrator';
    } else {
      return 'User';
    }
  } else {
    return 'Anonymous';
  }
}

// ✅ 正确做法
function doSomething() {
  if (!user) return 'Anonymous'
  if (user.role === "ADMIN") return 'Administrator'

  return 'User'
}
七. 熟练掌握内置函数
JavaScript给我们提供了许多内置的Array、Object、String函数。我们需要精通并掌握它们,这样让我们写起代码时来事半功倍。

代码示例:
//我们要过滤掉admin属性值为false的对象
// ❌ 错误做法
const users = [
  {
    username: "JohnDoe",
    admin: false
  },
  {
    username: "Todd",
    admin: true
  },
];
const admins = [];

function getAdmins() {
  users.forEach((user) => {
    if (user.admin) admins.push(user)
  })

  return admins
}
// ✅ 正确做法
function getAdmins() {
  return users.filter((user) => user.admin)
}
八.禁止使用缩写
当初学者在刚开始编写代码时,很容易为了贪图方便和快,就用缩写来进行命名,虽然这样是方便的当时的工作,但是却为后期的维护埋下了定时炸弹。让后续的代码阅读和维护变的难上加难。
// ❌ 错误做法
function someFunction() {
  events.forEach(e => {
    e.tickets.forEach(t => {
      `${e.name} for ${t.full_name}`
    })
  })
}

// ✅ 正确做法
function someFunction() {
  events.forEach(event => {
    event.tickets.forEach(ticket => {
      `${event.name} for ${ticket.full_name}`
    })
  })
}
很明显的是,在下面的例子中我们在阅读和维护时都不用猜测参数e和t代表什么意思和作用,根据命名就可以知道它的作用和含义。极大的提高了代码的可读性和后期的维护。

九. 使用可选链操作符(?.)来代替&&的前置非空判断
在遇到对象的某个属性可能为空(null)或者不存在(undefined)时,我们都要提前对对象进行判空,很多人第一时间都会想到使用&&进行前置非空判断,但是其实遇到这种情况,我们使用可选链操作符(?.也能达到一样的效果,并且可读性更强。

示例1:
// ❌ 错误做法
function doSomething(params) {
  if (params && params.filter) return 'Foo'

  return 'Bar'
}

// ✅ 正确做法
function doSomething(params) {
  if (params?.filter) return 'Foo'

  return 'Bar'
}
十. 用for...of代替for循环
传统的for循环需要我们手动创建索引变量并且需要根据条件判断来进行递增/递减操作,而for...of内置了一个迭代器可以自动帮我们遍历数组中的所有值,这样我们的代码可以变的更加简洁,也可以减少手动操作出差的情况。
let users = ["Fedor Emelianenko", "Cyril Gane", "Conor McGregor"];

// ❌ 错误做法
// 这样可以避免在每次迭代时重新评估长度
let usersCount = users.length;
for (let i = 0; i < usersCount; i++) {
    console.log(users[i]);
}
// ✅ 正确做法
for(let user of users) {
  console.log(user);
}
十一. 可读性代码胜过聪明代码
永远记住,我们写的代码是给其他开发人员以及未来的自己看的。我们编写的代码的目的是为了解决某个问题,而不是让我们的代码成为一个问题(bug)。不要为了炫技而写代码,我们要写出每个人都能理解和调试的代码。
用户评论