文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

作为前端工程师,你应该了解的十个 JavaScript 技巧

2024-11-30 03:10

关注

因此,今天我想跟你分享 10 个关于 JavaScript的小技巧,希望可以帮助你避免编写我曾经写过的垃圾代码。

1.Promise回调地狱

Promise 提供了一种优雅的方式来处理 JavaScript 中的异步操作。这也是避免“回调地狱”的解决方案之一。但我不太明白这是什么意思,所以我写了这段代码。

我做了这些事情:

// ❌
getUserInfo()
  .then((userInfo) => {
    getArticles(userInfo)
      .then((articles) => {
        Promise.all(articles.map((article) => getArticleDetail(article)))
          .then((articleDetails) => {
            console.log(articleDetails)
          })
      })
  })

我在这里根本没有利用 Promise。我们应该像下面的代码片段一样处理它:

// ✅
getUserInfo()
  .then((getArticles)
  .then((articles) => {
    return Promise.all(articles.map((article) => getArticleDetail(article)))
  })
  .then((articleDetails) => {
    console.log(articleDetails)
  })

2. 不处理错误消息

我经常只写请求成功的代码逻辑,而忽略请求失败的代码逻辑。

// ❌
const getUserInfo = async () => {
  try {
    const userInfo = await fetch('/api/getUserInfo')
  } catch (err) {


  }
}

这是缺乏经验的做法,我们应该给出一个用户友好的提示,而不是什么也不做。

// ✅
const getUserInfo = async () => {
  try {
    const userInfo = await fetch('/api/getUserInfo')
  } catch (err) {
    Toast(err.message)
  }
}

3.为函数设置太多参数。

当一个函数的参数太多时,它的可读性就会降低,甚至让我们不知道如何正确地传递参数。

举个例子:

我们想要获取用户的一些基本信息,比如姓名、性别、年龄等。

// ❌
const getUserInfo = (name, age, weight, gender, mobile , nationality, hobby, address) => {
  // ...
}
getUserInfo('fatfish', 100, 2000, ...)

那太糟了。如果你的同事写出这样的代码,你会殴打他吗?

事实上,当函数参数过多时,应该使用对象来传递所需的信息,这样其可读性和可扩展性就会提高。

// ✅
const getUserInfo = (options) => {
  const { name, gender, age, mobile, weight, nationality, hobby, address } = options
  // ...
}
getUserInfo({
  name: 'fatfish',
  age: 100,
  weight: 2000
  // ...
})

4.使用幻数

小伙伴们,你们有写过这样的代码吗?很多地方用数字来进行逻辑判断似乎很正常。是的,这让我很困惑 1、2、3 到底是什么意思。

❌
// component1.js
if (status === 1 || status === 2) {
  // ...
} else if (status === 3) {
  // ...
}
// component2.js
if (status === 1 || status === 2) {
  // ...
}

我们最好将这些数字定义为常量。

// ✅
// constants.js
export const STATUS = {
  // It is an adult and has real-name authentication
  adultRealName: 1,
  // It is a minor and has real-name authentication
  minorRealName: 2,
  // Not real-name authentication
  notRealName: 3,
  // ...
}
// component1.js
import { STATUS } from './constants.js'
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
  // ...
} else if (status === STATUS.notRealName) {
  // ...
}
// component2.js
import { STATUS } from './constants.js'
// component2.js
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
  // ...
}

5.使用.length判断字符串的长度

大多数时候,我们使用.length,判断字符串的长度是安全的,但是在表单输入的情况下要小心使用。

当我们输入 🍫 时,nameLen 的值为 2 — 这不是很奇怪吗?

// ❌

是的,这是有原因的,你猜怎么着?

// ✅

6.永远不要写代码注释

我们经常向别人抱怨:“你为什么不写代码注释呢?” 但实际上,我从来没有写过!

// ❌
const fn = (dpr) => {
  if (dpr >= 2) {
    // ...
  } else {
  }
}

天哪,你知道“dpr”是什么意思吗?我没想到这意味着窗口设备PixelRatio。

// ✅
// dpr: Please enter a value for window.devicePixelRatio
const fn = (dpr) => {
  if (dpr >= 2) {
    // ...
  } else {
  }
}

7. 无意义的代码注释

与其写无意义的代码注释,还不如不写代码注释,因为它浪费你的时间。

你不妨解释一下“a”的含义或使用有意义的变量名称!

// ❌
let a = 1 // Set the value of "a" to 1

8. 随机命名

过去,我常常编写随机命名变量的尴尬代码片段。

// ❌
const mw = 375

朋友们,请不要向我学习。你应该给变量一个正确且有意义的名称。

✅
const maxWidth = 375

9. 不删除已弃用的代码

很多时候,我们的网站会不断调整功能,有新的和废弃的功能,但我总是担心以后会用到它们,所以我只是注释它们,而不是删除它们。

其实这种担心完全没有必要,因为以后用的可能性很小。即使以后要用到,也可以通过‘git’进行追溯。

10. 一千多行组件代码

我在一个组件中编写了一千多行代码。这太糟糕了,我们应该将组件的功能进一步拆分为更小的组件。

最后

以上就是我今天想与你分享的全部内容,希望对你有用,最后,感谢你的阅读,如果你觉得不错的话,请记得关注我,点赞我,这样你将会阅读到更多文章内容。

来源:web前端开发内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯