七个糟糕的 JavaScript 代码实践，看看自己这样操作过没有？

佚名 2023-03-28 原文

在我这几年的工作生涯中，我写过很多烂代码，对此我深有体会。

我的同事们一直认为我的代码是臭代码，但我认为他们不欣赏我的艺术，所以，今天我把自己之前踩过的坑，总结了一下，也希望可以帮助你避免这些糟糕的操作。

1.代码尽量写在一行

哦，我的天啊！你愿意我做你的同事吗？

我只用一行代码就清除了一个网页的所有cookies，是不是很牛逼？

document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`))

哦！请原谅我！没有一点可读性可言，我头疼，也许我应该这样做。

const cookies = document.cookie.split(';')
cookies.forEach(cookie => {
  cookie = cookie.replace(/^ +/, '') // 
  cookie = cookie.replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`)
  document.cookie = cookie
})

2.在控制台打印错误

你有这种编码习惯吗？只关注请求的成功状态，忽略失败的请求。

出于调试目的，我总是在控制台上打印错误消息。

try {
  fetch(url, {
    method: 'post',
    ...
  })
} catch (err) {
  // When the request goes wrong, we don't have any perception
  console.log(err)
}

或许我们应该向用户提供一条友好的警告消息，告诉他发生了错误。

try {
  fetch(url, {
    method: 'post',
    ...
  })
} catch (err) {
  Toast(err.message)
}

3.使用神奇的数字

我猜你已经多次看到这个神奇的数字，它的真正含义是什么？

或许只有他的第一作者才能看得懂！

// index1.js
if (status === 1 || status === 2) {
  // ...
} else if (status === 3) {
  // ...
}


// index2.js
if (status === 1 || status === 2) {
  // ...
}

我们可以定义常量来表示它的含义，如果我们能添加清晰简洁的注释就更好了。

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,
  // ...
}


// index1.js
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
  // ...
} else if (status === STATUS.notRealName) {
  // ...
}
// index2.js
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
  // ...
}

4. 滥用回调函数

现在是 2023 年了，我们不应该再滥用回调了，那太可怕了。

那看起来我们是一个非常初级的前端开发工程师。

fetch('/a')
  .then((a) => {
    fetch('/b', { a })
      .then((b) => {
        fetch('/c', { b })
          .then((c) => {
            console.log(c)
          })
      })
  })

JavaScript 为我们提供了 await 关键字，所以让我们简化上面的代码。

const a = await fetch('/a')
const b = await fetch('/b', { a })
const c = await fetch('/c', { b })


console.log(c)

哇，它使我们的代码更简单，具有更好的可读性和可维护性。

5.给函数设置10个参数

这可能有点夸张，好吧，我想表达的是，如果一个函数被设计成传递很多参数，那么它的可读性就会变差，甚至会让我们不清楚如何使用它。

比如这个例子，我就晕了，不知道怎么给它传递正确的值。

const getUser = (name, weight, mobile, gender, address, hobby, ...) => {
  // ...
  return ...
}


getUser('fatfish', 100, 183, ....)

我们必须尝试重新发明 getUser，是的，使用一个对象来传递它需要的信息会让你看起来像一个专家。

const getUser = (options) => {
  const { name, weight, mobile, gender, address, hobby, ... } = options
  // ...
  return ...
}


getUser({
  name: 'fatfish',
  weight: 100,
  mobile: 183
  ...
})

6. 使用+号将字符串转换为数字

仅使用 + 号将字符串转换为数字看起来很简单。

const str = '123456'
const num = +str


console.log(num) // 123456

但是使用 Number 或 parseInt 应该是一个更语义化和更清晰的选择。因为从他们身上可以看出我们的目的是转换成数字。

const str = '123456'
const num1 = Number(str)
const num3 = parseInt(str)


console.log({ num1, num2 }) // { "num1": 123456, "num2": 123456 }

7.直接修改node_modules中的代码

哇！这一定是一件超级离谱的事情，我直接修改了node_modules中的代码来解决第三个npm包的问题，因为它已经被git忽略了，所以我的电脑上只有我有那个部分。

后来项目移交给其他部门后，我修复的问题又出现了……

// .gitignore
node_modules/
dist/
// ...

写在最后

朋友们，如果你还这些糟糕的操作，请及时调整过来，如果你还有一些其他不好的JavaScript习惯，也记得及时纠正。

JavaScript 糟糕 span style color 开发前端 $JavaScrip 代码实践

有关七个糟糕的 JavaScript 代码实践，看看自己这样操作过没有？的更多相关文章

ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2
很好奇，就使用rubyonrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？最佳答案不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提
ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
ruby - 难道Lua没有和Ruby的method_missing相媲美的东西吗？ - 2
我好像记得Lua有类似Ruby的method_missing的东西。还是我记错了？最佳答案表的metatable的__index和__newindex可以用于与Ruby的method_missing相同的效果。关于ruby-难道Lua没有和Ruby的method_missing相媲美的东西吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/7732154/
ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2
在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中，它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has
ruby-on-rails - rails 目前在重启后没有安装 - 2
我有一个奇怪的问题:我在rvm上安装了rubyonrails。一切正常，我可以创建项目。但是在我输入“railsnew”时重新启动后，我有“程序'rails'当前未安装。”。SystemUbuntu12.04ruby-v"1.9.3p194"gemlistactionmailer(3.2.5)actionpack(3.2.5)activemodel(3.2.5)activerecord(3.2.5)activeresource(3.2.5)activesupport(3.2.5)arel(3.0.2)builder(3.0.0)bundler(1.1.4)coffee-rails(
ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2
我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re
ruby-on-rails - 浏览 Ruby 源代码 - 2
我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru
ruby - 模块嵌套代码风格偏好 - 2
我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。最佳答案这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的
ruby - 寻找通过阅读代码确定编程语言的ruby gem？ - 2
几个月前，我读了一篇关于rubygem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？最佳答案是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：
没有类的 Ruby 方法？ - 2
大家好!我想知道Ruby中未使用语法ClassName.method_name调用的方法是如何工作的。我头脑中的一些是puts、print、gets、chomp。可以在不使用点运算符的情况下调用这些方法。为什么是这样？他们来自哪里？我怎样才能看到这些方法的完整列表？最佳答案 Kernel中的所有方法都可用于Object类的所有对象或从Object派生的任何类。您可以使用Kernel.instance_methods列出它们。关于没有类的Ruby方法？，我们在StackOverflow