JavaScript 新手应该做和不应该做的事情

自 Brendan Eich 创建 JS 以来，它经历了多次改版、修改、新增功能和框架的加入。在经历了动荡的岁月后，JS 已逐渐成型，成为我们在 2018 年所见的样子，而未来，它还有更大的发展空间。

今天，我认为 Atwood 的名言最能描述 JavaScript 的现状：“任何可以用 JavaScript 编写的应用程序最终都将用 JavaScript 编写。”几乎任何你能想到的东西都可以用 JavaScript 编写。

在这篇文章中，我们将为 JS 新手和曾经使用过该语言的人提供一些关于应该做什么和不应该做什么的提示。

在编写 JavaScript 代码时，有一些常见的经验法则需要牢记。这些规则涉及变量声明、命名约定、代码注释、力求编写更简洁的代码以及与 JavaScript 世界保持同步。让我们来探讨其中的一些。

变量

在变量命名方面，使用驼峰命名规则通常被认为是最佳实践。JSGuru 就是这样命名变量的。如果整个团队都遵循此规则，就能保持代码的统一性。

保持变量名简短、简洁且具有描述性也很重要。由于代码大多数情况下是共享的，因此应尽可能遵守这一点。读者应该能够弄清楚该变量中存储的内容或它所引用的内容，而无需将其记录到控制台并回溯代码。一个好的变量名应该告诉读者它在一段代码中的使用环境，而不是从用户的角度来指代它的值或用途。例如，“userAnswer”比“userInput”更好，因为从编码的角度来看，它清楚地指向了之前提出的问题。你确切地知道它指的是什么输入。同样，避免使用诸如“num”和“arr”之类的通用名称，至少不要在其后附加与其引用内容相关的信息，例如“selectedColors”。同样，“wantsSubscriptions”或“shouldRemember”比“trueOrFalse”更好。使用动词和复数/单数来帮助指示值，而不是使用与名称内的值类型相关的一些首字母缩写词。

让代码更简洁易读是一种很好的做法。您可以将变量声明放在脚本的开头，并在列表中第一个变量前面添加 var 或 let，并且只在第一个变量前面添加。逗号可以分隔其余变量，并在声明末尾添加分号。声明变量时，请先初始化变量，以避免出现未定义的值，然后再进行其他操作。

使用 let 或 const 替代 var

自 ES6（也称为 ECMAScript 2015）标准采用以来，变量应使用关键字 let 和 const 声明。放弃 var 关键字的原因是，它应该更清晰地阐明变量的用途及其使用环境。const 通常保存对不会随时间变化的值的引用，即使在对象和数组的情况下，允许对其进行变异。另一方面，关键字 let 表示值可能会被更改，或者将为特定变量赋值。如果您尝试更改 const 的值，JavaScript 会告知您，并帮助您避免错误。const 的一个典型用例是存储对 DOM 元素的引用，并且您希望始终将其保留在该变量中。关键字 let 适用于循环或数学算法，通常用于预期其值会发生变化的情况。使用 let 和 const 声明的变量不会像使用 var 声明的变量那样被提升。

评论

你有没有遇到过这种情况：查看旧代码时，却发现没有相关的注释？也许是你当时忘了写注释，也许是你不小心推迟了写注释的时间，结果后来又忘了。不管是什么情况，现在你面对着一堆象形文字，开始感到不知所措，因为你不知道从哪里开始阅读和理解它们。编写简洁的代码并遵循良好的命名约定当然会有所帮助，但更复杂的代码有时只需要一两条注释就能帮助读者更快地理解。我记得我多次回顾我的代码，花了不少时间弄清楚我写了什么以及我究竟是怎么写的。这时我才意识到在注释中写一些逻辑的重要性，它们可以作为注释，帮助我将来更快地理解代码。几乎毫无疑问，你会发现自己处于这样的情况：你试图理解你或其他人编写的代码，并希望有一些注释，以加快追赶的过程。

以此经验为动力，帮助你理解注释的重要性，并在下次编写复杂逻辑时牢记这一点。只需用一句话概括这段代码的精髓，相信我，你将来会感谢你自己。更重要的是，任何阅读你代码的人都会心存感激。另外，保持注释的幽默感和积极性总是有益的，因为消极和傲慢只会适得其反。

格式化代码

代码格式化有时会很棘手。为了解决这个问题，你可以尝试一下像 ESLint 或 JSLint 这样的代码检查工具（链接至官方网站）。这两个工具都能帮助你编写更简洁、更符合社区标准的代码。你至少可以使用空格和换行符将代码分组到相关的代码块中。这将使你的代码更具可读性，你也能更快地理解它！

效率

在本节中，我们将提醒你编程中总体效率的重要性。以下是一些新手在学习 JavaScript 时常犯的错误。

1. 获取 DOM 元素

如果每次看到 document.getElementById 代码里到处都是，我都能得到一美元，那我现在肯定是百万富翁了。如果 DOM 元素实际上没有改变，就把它存到一个变量里，以后再用。

    let container = document.getElementById("someElementId"); 
        container.innerHTML = "<h1>Hello World!</h1>";
        container.addEventListener('mouseover', function(e) {
            this.innerHTML = "<h1>Hello Again!</h1>";
        })

这在 jQuery 中尤其常见，我们都见过这样的代码：

    $('#button').addClass('actioned');
    $('#button').hover(function () { ... });
    $('#button').click(function () { ... });

而不是：

let button = $('#button');
    button.addClass('actioned');
    button.hover(function () { ... });
    button.click(function () { ... });

您还应该记住，通过 Id 获取 DOM 元素是最快的方法，因此您应该尽可能使用它而不是其他方法，如 document.getElementsByClassName、document.getElementsByTagName document.querySelector 等。

2. 循环中的 DOM 操作

这是一个不该做的事情的例子。这里我们在循环中获取了一个 DOM 元素。这意味着我们每次迭代都没有必要获取它，并且每次迭代之后还要填充它的内部 HTML。

function processArray(myArray) {
    for (let i = 0; i < myArray.length; i++){
      let div = document.getElementById("container");
      div.innerHTML = div.innerHTML + myArray[i];
      if (i < myArray.length - 1) {
        div.innerHTML = div.innerHTML + ", ";
      }
    }
  }

优化此代码的第一步是将 fetch 语句移到循环上方。这样做不会改变此代码块的逻辑，但会显著提升代码速度，同时减少内存占用。为了避免每次迭代都不断更新 DOM（这非常耗时），最好将 innerHTML 也移出循环。

    let container = document.getElementById("someElementId"); 
        container.innerHTML = "<h1>Hello World!</h1>";
        container.addEventListener('mouseover', function(e) {
            this.innerHTML = "<h1>Hello Again!</h1>";
        })

这些示例帮助我们在讨论代码效率时牢记两点。首先，在循环之外声明变量；其次，减少 DOM 操作并确保合理使用它们。

此外，创建新变量时务必记住使用 let 而不是 var。

但是，用 let 定义的全局变量不会像用 var 定义的变量一样被添加为全局窗口对象的属性。

严格模式

当我们的目标是创建更健壮的 JavaScript 代码时，我们鼓励使用“严格模式”。严格模式将（之前被接受的）“错误语法”转化为真正的错误。这意味着，尝试向错误输入的变量的属性添加值（在常规模式下会创建一个新的全局变量）现在会抛出错误。在严格模式下，任何对不可写属性、仅使用 getter 的属性、不存在的属性、不存在的变量或不存在的对象进行的赋值都会抛出错误。

了解最新的 JavaScript 标准也许是此列表中最重要的事情。

首先，您的代码将是现代化的，并且很可能接近当时的行业标准。此外，通过使用最新功能，您和所有其他开发人员都在鼓励和创造浏览器实现这些功能的需求，并开始开箱即用地支持它们。现在，这是在 Babel 等转换工具的帮助下完成的。如果您不熟悉 Babel，简而言之，它将最新的 JavaScript 代码“翻译”成当今浏览器可以理解的格式。Babel 读取您的 JavaScript 代码并将您使用的最新功能编译为所有浏览器都可以理解的 ES5。有些浏览器已经支持 ES6 功能，但使用 Babel 和类似的工具仍然是必要的，因为我们希望我们的 JavaScript 能够被所有浏览器和旧版本支持。

有关 Babel 的更多信息，我建议您访问他们的网站，他们有一份很棒的文档，可以帮助您快速入门。

更重要的是，你的生活会变得更加轻松！最新的 JavaScript 特性令人惊叹，而且随着每个规范的出台，它们也变得越来越好。它们改进了旧的处理方式，例如使用 Promises 或 Async/Await 来避免陷入回调金字塔的厄运。

学习新事物意味着要离开舒适区，但相信我，一旦掌握，就再也回不去了。我推荐学习以下几个特性：数组方法（map、reduce、filter）、async/await，当然还有我最喜欢的——字符串字面量。

重要的是要记住，你可以随时提升你的编程技能，写出更简洁的代码。这是一场马拉松，而不是短跑冲刺，所以如果你的代码不够简洁，也不要感到不知所措。最重要的是，它有效！随着时间的推移，当你经验更丰富，并开始遵循行业标准时，你就能写出更简洁的代码。即便如此，你仍然会拥有巨大的改进空间，就像所有事情一样！所以不要灰心，这需要时间。

希望这篇文章对您有所帮助。下次再见，Jelena，下期告一段落……