分享 10 个前端开发者需要知道的 JS 技巧

英文 | https://javascript.plainenglish.io/as-a-front-end-engineer-10-javascript-tricks-and-tips-you-should-know-about-6f4df0082407

前言

过去，我写了很多垃圾代码，现在看起来很糟糕。

当我再次看到那些代码片段时，我什至怀疑自己是否适合做程序员。

所以，这里有 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.Magic number

朋友们，你们写过这样的代码吗？在很多地方使用数字进行逻辑判断似乎很正常。是的，它让我感到困惑 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 authenticationadultRealName: 1,// It is a minor and has real-name authenticationminorRealName: 2,// Not real-name authenticationnotRealName: 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 来判断字符串的长度是安全的，但在表单输入的情况下要小心。

当我们输入

分享 10 个前端开发者需要知道的 JS 技巧相关推荐

前端开发者应该知道的 Centos/Docker/Nginx/Node/Jenkins 操作
点击上方程序员成长指北,关注公众号回复1,加入高级 Node 进阶交流群来源:ask_the_sky https://juejin.cn/post/6951684431597797389 服务器 ...
前端开发者应该知道的 Centos/Dokcer/Nginx/Node/Jenkins 操作( 长文)
服务器作为开发的一环,并且现在非常多的商业公司部署在生产环境上的服务器都是CentOS系统! 让我们了解了解也在情理之中! 作为前端开发者,我们应该跳出自己的一亩三分地,跳出舒适区.扩大自己的技术广度 ...
分享一些前端开发者需要知道的 API 接口常识
作者: 胡涂阿菌链接:https://www.cnblogs.com/tanshaoshenghao/p/16215751.html 说实话,我非常希望自己能早点看到本篇文章,大学那个时候懵懵懂懂, ...
前端开发者应该知道的 CSS 小技巧
一些小技巧让你的CSS技术更专业使用:not()去除导航上不需要的边框为body添加行高垂直居中任何元素逗号分离的列表使用负nth-child选择元素使用SVG图标文本显示优化在纯CS ...
前端开发者需要知道的 package.json
在一个 JavaScript 项目中,package.json 是一个必须的文件,它的作用是管理项目中使用到的外部依赖包,同时它也是 NPM 命令的入口文件. package.json包含描述一个特定 ...
js 正则或_Web前端工程师要知道的JS 常用正则表达式
说起正则表达式,相信从事web前端开发的人一定很熟悉,正则表达式通常被用来检索.替换那些符合某个模式(规则)的文本,是web前端开发中经常会用到的.今天,就为大家分享JS常用的正则表达式以及创建正则表 ...
每一位Android开发者应该知道的Android体系架构和开发库
Android的体系架构鼓励组件重用,允许开发者发布共享Activity.Service并且访问其他应用程序的数据,还可以根据开发者制定的安全限制进行管理.话虽如此,今天我将分享一些关于Android ...
达内html5是什么,Web前端工程师应该知道的HTML5相关知识有哪些
今天小编要跟大家分享的文章是关于Web前端工程师应该知道的HTML5相关知识有哪些?随着互联网技术的快速发展,人们对互联网的使用越来越大,对于界面和用户体验的要求越来越高.因此Web前端越来越火,前端 ...
为数不多的人知道的 Kotlin 技巧及解析(三)
本文没有什么奇淫技巧,都是一些在实际开发中常用的技巧 Google 引入 Kotlin 的目的就是为了让 Android 开发更加方便,自从官宣 Kotlin 成为了 Android 开发的首选语言之 ...

分享 10 个前端开发者需要知道的 JS 技巧

分享 10 个前端开发者需要知道的 JS 技巧相关推荐

最新文章

热门文章