std::vector教程
我经常听到有人听教程的人发现自己无法自行处理JavaScript项目。
发生这种情况的一个原因是，教程为您提供了一套整洁的步骤，而不是您自己找出这些步骤的实际过程。 人们在项目中挣扎的另一个原因是，他们将中间步骤与别人的成品进行比较，因此灰心。
接近项目的真相并不像教程（包括我的教程）所表明的那样整洁。 现实情况是，项目不是一小段地完成，而是花费大量的反复试验和大量参考资料来进行搜索，而不是散发出完美的代码。
在本文中，您将学习如何自行处理JavaScript项目。
重要说明：在阅读本文时，您将看到一些代码示例。 如果其中任何一个看起来很新或不熟悉，现在就可以略过它们。 本文的目的是让您了解进行项目的整个过程，而不是被技术细节所干扰。
至少，您需要熟悉一些JavaScript基础（以及一般的编程）。 这可能包括变量，函数，if语句，循环，数组，对象，DOM操作方法，例如 ， 和 。 完成本文后，您可以使用Google或在上查找它们。
熟悉这些概念后，您将可以更快地移动，因为您可以专注于创建项目，而不必担心如何编写if语句。
许多人急于通过此步骤，结果花费了更长的时间。 这就像尝试玩视频游戏的第3级，而又不熟悉第1级中的控件一样。很多可以避免的挫败感。
与其花时间尝试一系列线性步骤来完成您的项目，不如花些时间首先看一下全局。 制定总体计划。 什么样的事情需要发生？ 例如，如果您要制作一个倒数时钟，则可能需要一种测量时间的方法，一个保存数据的位置，一个显示数字的位置以及一种控制时钟的方法。
在此阶段，您不希望陷入技术细节的困境，因为您仍在考虑所需内容的一般想法。 只要您有一个总体计划，就会有一些路标，可以防止您迷失太大。 在软件设计上。 这种技术通常称为 。
有了您的计划后，您将需要弄清楚细节。 我最喜欢的方法是专门编写您希望项目的每个部分执行的操作。 关键是不要用简单的语言编写代码。 （这称为 。）这样，您可以清楚地考虑项目的工作方式，而不会被语法细节所干扰。
对于倒数时钟，您的笔记可能看起来像这样：
获取当前时间 指定结束时间 查找当前时间和结束时间之间的时差以获取剩余时间 重复获取倒数每一步的剩余时间 在倒计时的每一步在屏幕上显示剩余时间
您可以将各个部分分解成较小的部分，如下所示：
在倒计时的每一步在屏幕上显示剩余时间 将时间分为小时，分钟，秒 在一个容器中显示小时 在几分钟和几秒钟内做同样的事情
一旦逻辑被写完，编写代码的时间就会轻松得多。 这是因为为具体步骤（例如“从结束时间减去当前时间”）编写代码要比为整个项目（例如“建立倒数时钟”）编写代码要简单。
还要注意，您一开始并不需要制定一系列完美的步骤。 这是一个可变的过程，可以添加，删除，弄错，学习和改进。
写下步骤后，就可以开始编写少量代码。 对于倒数时钟，您可以从获取当前时间开始：
满意后，您可能会得到倒计时的结束时间：
全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
当您自己制作时钟时，可以像上面的代码示例中那样选择一个特定的结束日期，但是由于我不希望本文中的代码在某个日期之后停止工作，因此我将结束时间设置为从现在开始到10天的时间（注意，将10天转换为毫秒，因为这是JavaScript使用的单位）：
小段编写代码有一些好处：
在进行下一步之前，您将有机会确保各个功能正常工作。 当您一次又不被过多的活动部件分散注意力时，更容易思考正在做的事情。 您将移动得更快，因为您不想立即跟踪一百万个事物。 这样可以更轻松地发现并防止错误。 您可以根据需要进行实验和学习。 您通常会最终写出有用的代码，这些代码可以在其他地方使用。
准备好各个零件之后，就可以开始将您的项目放在一起了。 在此阶段，关键的挑战是确保一旦连接就可以独立工作。 这可能需要一些小的更改。
例如，以下是您可以将开始时间和结束时间放在一起以计算倒数时钟中的剩余时间的方法：
与试图一次完成一个整个项目相比，这种将较小的部分放在一起的方法要容易得多，因为这样一来，您无需同时跟踪头脑中的所有内容。
现在我们有了一个获取剩余时间的函数，我们可以重复运行该函数以使时间显示保持更新。
HTML：
JavaScript：
在上面的示例中，我们添加了函数，该函数在屏幕上显示剩余时间。 在函数的结尾，我们包括 ，它基本上说一旦浏览器准备好就再次运行 。 这使我们能够以不断更新时间显示。
您会注意到倒数计时完全以毫秒为单位。 下一步将所有内容转换为天，小时，分钟和秒。
使用到目前为止所学的方法（小步骤等），您可以先将毫秒转换为秒，查看其外观并将其放入函数中。 然后，您可以重复此过程来计算分钟，小时和天数。 最终结果可能如下所示：
至此，在项目中，您将进行大量的试验和测试，以确保一切正常。 一旦看起来可行，请查看是否可以将其破坏。 例如，如果用户单击此处或此处怎么办？ 如果输入之一是意外的怎么办？ 如果屏幕尺寸窄怎么办？ 一切都能在您期望的浏览器中运行吗？ 这个项目的任何部分是否有更有效的方法？
回到我们的倒数时钟示例，如果计时器达到零会发生什么？ 我们可以添加一个if语句，以确保时钟在零处停止：
请注意，在这种情况下我们使用1000毫秒（1秒）的原因是，如果我们使用零，则时钟将超调并最终为-1。 如果您的时钟单位小于秒，请使结束条件小于一秒。
我在撰写本文时，一个好朋友指出了这个问题，这只是代码第一次无法完美实现的另一个示例。
这完美地导致了下一点。
在进行项目时，获得外部帮助可能是重要的一步。 此帮助可以来自参考资料或其他人员。 之所以提出这一点，是因为有一个普遍的神话，即开发人员坐下来编写完美的代码，而不必查找任何内容或向任何人征求意见。
我经常听到，新开发人员惊讶地发现，有经验的开发人员会多久查找一次。 实际上，由于不可能一无所知，因此能够查找信息是您可以拥有的最有价值的技能之一。
工具和技术会发生变化，但是学习技能并不会消失。
在完成项目之前，您需要重构代码。 您可以问自己一些问题，以改善您的项目：
如果必须在简明性和可读性之间做出选择，通常会选择可读性，除非有巨大的性能原因。 可读性使您的代码更易于维护，更新和修复。
例如，如果您要一遍又一遍地在文档中搜索相同的元素，则可以将该元素存储在变量中，以减少代码的工作量。 我们已经在倒数时钟示例中完成了以下操作：
例如，像这样的函数名称将比更清晰。 这很重要，因为人们经常以认为有意义的方式命名事物，然后由于忘记了缩写的含义而迷失了方向。 一个清晰的测试是，是否需要向不熟悉代码的人解释过多的名称。
例如，您是否使用诸如“容器”之类的名称而很可能在其他地方使用？
您是否在变量中污染了全局范围？
保护全局范围的一种简单方法是将倒数时钟代码放入IIFE（ ）中。 这样，时钟就可以访问其所有变量，但没有其他方法可以访问。
例如，您是否曾经在一个地方更改过一个变量名而没有在其他地方更改过它？ 您是否已在对象中添加了一些内容但忘记了加逗号？
在我们的倒计时时钟示例中，很高兴看到前导零（所以10:09而不是10：9）。 一种方法是查看数字是否小于9，然后在数字前加上“ 0”，但这有点长。 我曾经看到一个代码示例，它有一个巧妙的技巧，那就是在前面添加一个“ 0”，然后使用来获取最后两位数字，无论如何。 所做的更改将使我们的代码如下所示：
您是否在重复可能在函数或循环中的代码？ 参考上面的内容，我们可以移动代码以将额外的零添加到输出到自己的函数中。 这样可以减少重复，并使内容更易于阅读。
几天后尝试返回您的代码。 从新的角度来看，您将开始看到可以使哪些零件更清洁，更高效。
重构时，您的代码将变得越来越优雅。 然后，您将完成产品的发布，然后人们会想知道您是如何编写如此完美的代码的。
几个月后，您将回顾它，意识到您可以做得更好。 正如我的一个朋友明智地说的那样，那是一件好事。 这意味着您正在进步。
如果您好奇的话，下面是时钟示例的现场演示（添加了一些样式）：
请参阅上的 （ ）的Pen 。
编码项目很少是线性过程。 如果我希望您从本文中删除一件事，那就是比起一次尝试做所有事情，细小的片段和试验会使您走得更远。
如果您过去曾经在JavaScript项目上苦苦挣扎，希望本文对您有所帮助，并且如果您有任何其他想法可以帮助您处理项目，我很乐意在评论中听到它们。
本文由和进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！