我从独自搭建第一个网站中学到的 4 件事

CSS很奇怪

种子智能

事件监听器很挑剔

需要评论

结论

上周，我和西雅图 Flatiron 学校的同学们完成了第三单元的项目；任务是使用原生 JavaScript 和 Ruby on Rails 后端构建一个单页应用程序。剩下的就交给我们了，我决定做《危险边缘》（Jeoparody）！这是我第一个完全自己搭建的网站，我从中学到了很多东西。所以，我觉得在我的博客文章里，写下我学到的最重要的东西会很有帮助。

CSS很奇怪

在开始这个项目之前，我对自己的 CSS 技能相当有信心。我之前学过Codecademy 的 CSS 课程，也用过控制台，所以我觉得这很简单。当你不知道自己不知道什么的时候……

我最大的难题是如何让 div 中的文本垂直居中。“这怎么这么难？”我花了至少一个小时调整 padding、margin、height 和 width 之后，不禁自问。最后我发现，只需用 ap 标签换行就能解决问题！除非……文本比较长，需要换行变成多行。这个问题我到现在还没搞清楚。

种子智能

说到我自认为已经完全掌握的事情：数据库的填充。我发现了一个很棒的 AP​​I，jService，它包含了《危险边缘》每一季的所有线索和类别。总共大概有 185,000 条线索！我兴奋极了！我设置了线索和类别模型，找到了遍历 API 每一页的最佳方法，然后就开始填充了。

十五分钟过去了，种子设置失败了！我很快就明白了，不能想当然地认为一个拥有十万多个条目的 API 就是完美的。大量的线索重复出现，有空字符串、缺失值等等，不一而足。经过反复试验，最终的解决方案是创建两个 if 语句，在将每个线索添加到数据库之前对其进行检查。第一个 if 语句确保线索确实包含我想要的键：问题、答案和类别。第二个 if 语句确保值不仅仅是空字符串。

clues.each do |clue|
  if clue.key?("question") && clue.key?("answer") && clue.key?("category")
    if !clue["question"].empty? && !clue["answer"].empty? && !clue["category"]["title"].empty?
      create_clue(clue)
    end
  end
end

事件监听器很挑剔

我使用事件监听器的经验不多，但掌握它们显然很重要。我在我的网站上实现的第一个事件监听器非常简单。当用户首次访问页面时，他们会输入用户名并点击提交按钮。事件监听器听到“点击”后会执行相应的操作：

document.getElementById('submit').addEventListener("click", function(e){
  e.preventDefault();
  username = document.getElementById('username').value.toLowerCase();
  findUser(username);
})

无需“移除”这个事件监听器，因为它所在的 div 在用户登录后就会被隐藏。很简单！我使用的下一个事件监听器是针对每个线索 div 的。我已经想出了如何在用户点击 div 后移除其上的美元金额，但事件监听器仍然存在。我尝试了几种方法，最终寻求了帮助。我的导师给了我一个非常简单的解决方案：只需为被点击的线索 div 添加一个“clicked”类即可。这样我就可以在事件监听器中写入以下内容：

if (clueDiv.classList.contains('clicked')) {
  return;
}

所以再次强调，事件监听器仍然存在于每个线索 div 上，但如果用户点击他们已经点击过的 div，它就会直接返回。简单！我的最后一个事件监听器是最让我头疼的。一旦用户点击了某个线索，就会出现一个 div，询问他们答对了还是答错了。

我添加了一个事件监听器，监听“Y”或“N”的按键，然后就高高兴兴地继续玩了。很快我意识到，用户在完成线索之后很长一段时间内都可以继续按“Y”，他们的分数可能会一直增加！因此，我最终不得不尝试移除事件监听器。经过反复尝试，我发现 removeEventListener 有点挑剔。之前我一直把整个函数写在事件监听器内部，而不是引用一个单独的函数。当你尝试移除监听器时，这种方法行不通！简而言之，这是唯一的解决方案：

document.body.addEventListener("keydown", yesOrNo);
document.body.removeEventListener("keydown", yesOrNo);

需要评论

我一直很擅长在代码中写注释，但直到开始这个项目，我才意识到注释的必要性。后端设置好后，我写了第一个获取请求，一切就开始了……我完全进入状态了。

当我全神贯注地编写代码时，很容易忘记写一条简短的注释来帮助未来的自己。但这非常重要！因为即使我认为我确切地知道所有代码的作用，我最终还是会去睡觉。第二天，当我阅读代码时，我完全不知道发生了什么。所以，别忘了给自己留点注释，以免将来的自己头疼。

结论

总而言之，我从搭建我的第一个网站中学到了很多。如果你是编程新手，我强烈建议你先搭建一个单页应用。这是一个很好的练习，并且帮助我巩固了HTML、CSS和JavaScript的知识。祝你编程愉快！