std::vector教程

tech2023-07-01 104

std::vector教程

I often hear that people who follow tutorials find themselves unable to approach JavaScript projects on their own.

我经常听到有人听教程的人发现自己无法自行处理JavaScript项目。

One reason this happens is that tutorials give you a neat set of steps rather than the actual process of figuring out those steps on your own. Another reason people struggle with projects is that they compare their intermediate steps with someone else’s finished product and get discouraged.

发生这种情况的一个原因是，教程为您提供了一套整洁的步骤，而不是您自己找出这些步骤的实际过程。人们在项目中挣扎的另一个原因是，他们将中间步骤与别人的成品进行比较，因此灰心丧气。

The truth of approaching a project isn’t as neat as the tutorials (mine included) make it seem. The reality is that rather than belting out lines of perfect code, projects are done in small pieces with plenty of trial and error and a healthy dose of searching through reference materials.

接近项目的真相并不像教程(包括我的教程)所表明的那样整洁。现实情况是，项目不是一小段地完成，而是花费大量的反复试验和大量参考资料来进行搜索，而不是散发出完美的代码。

In this article, you’ll learn how to approach JavaScript projects on your own.

在本文中，您将学习如何自行处理JavaScript项目。

Important note: As you go through this article, you’ll see some code examples. If any of them seem new or unfamiliar, it’s okay to skim over them for now. The purpose of this article is to have you understand the overall process of approaching a project rather than getting distracted by technical details.

重要说明：在阅读本文时，您将看到一些代码示例。如果其中任何一个看起来很新或不熟悉，现在就可以略过它们。本文的目的是让您了解进行项目的整个过程，而不是被技术细节所干扰。

首先适应基础 (First Get Comfortable With the Basics)

At a minimum, you’ll want to get familiar with some of the basics of JavaScript (and programming in general). This might include variables, functions, if statements, loops, arrays, objects, DOM manipulation methods, such as getElementById, querySelectorAll, and innerHTML. You can Google these or look them up on MDN when you’re done with this article.

至少，您需要熟悉一些JavaScript基础(以及一般的编程)。这可能包括变量，函数，if语句，循环，数组，对象，DOM操作方法，例如getElementById ， querySelectorAll和innerHTML 。完成本文后，您可以使用Google或在MDN上查找它们。

Once you’re comfortable with these concepts, you’ll move much faster because you can focus on creating your project instead of worrying about how to write an if statement.

熟悉这些概念后，您将可以更快地移动，因为您可以专注于创建项目，而不必担心如何编写if语句。

A lot of people rush past this step, and everything takes longer as a result. It’s like attempting to play Level 3 of a video game without getting comfortable with the controls back in Level 1. Lots of avoidable frustration.

许多人急于越过这一步骤，结果花费了更长的时间。这就像尝试玩视频游戏的第3级，而又不适应第1级中的控件一样。很多可以避免的挫败感。

制定一个计划 (Make a Plan)

Instead of jumping in and trying to do your project in a series of linear steps, take some time to look at the big picture first. Make a general plan. What sorts of things need to happen? For example, if you’re trying to make a countdown clock, you might need a way to measure time, a place to hold the data, somewhere to display the numbers, and maybe a way to control the clock.

不要花时间尝试一系列线性步骤来完成您的项目，而要花一些时间首先看一下全局。制定总体计划。什么样的事情需要发生？例如，如果您要制作一个倒数时钟，则可能需要一种测量时间的方法，一个保存数据的位置，一个显示数字的位置以及一种控制时钟的方法。

At this stage, you don’t want to get bogged down in technical details because you’re still thinking through the general ideas of what you want. As long as you have an overall plan, you’ll have guideposts that will prevent you from getting too badly lost. In software design. this technique is often referred to as a use-case analysis.

在此阶段，您不希望陷入技术细节的困境，因为您仍在思考所需内容的一般想法。只要您有一个总体规划，就会有一些路标，可以防止您迷失太大。在软件设计上。这种技术通常称为用例分析。

不用代码写 (Write It Without Code)

Now that you have your plan, you’ll want to figure out the details. My favorite way to do this is to write specifically what you want each part of your project to do. The key is to write it not in code but in plain language. (This is called pseudocode.) That way, you can think clearly about what your project is doing without getting distracted by syntax details.

有了您的计划后，您将需要弄清楚细节。我最喜欢的方法是专门编写您希望项目的每个部分执行的操作。关键是不要用简单的语言编写代码。 (这称为伪代码。)这样，您可以清楚地考虑项目的工作方式，而不会被语法细节所干扰。

For a countdown clock, your notes might look something like this:

对于倒数时钟，您的笔记可能看起来像这样：

Get current time

获取当前时间 Specify end time

指定结束时间 Find difference between current time and end time to get remaining time

查找当前时间和结束时间之间的时差以获取剩余时间 Repeatedly get the remaining time for each step of the countdown

重复获取倒数每一步的剩余时间 Show remaining time on screen at each step of the countdown

在倒计时的每一步在屏幕上显示剩余时间

You can break individual parts into smaller pieces like so:

您可以将各个部分分解成较小的部分，如下所示：

Show remaining time on screen at each step of the countdown

在倒计时的每一步在屏幕上显示剩余时间

Divide time into hours, minutes, seconds

将时间分为小时，分钟，秒 Show hours in one container

在一个容器中显示小时 Do the same for minutes and seconds

在几分钟和几秒钟内做同样的事情

Once you have your logic written out, you’ll have a much easier time writing code. This is because it’s simpler to write the code for a concrete step such as “subtract current time from end time” than it is to write the code for a whole project like “build a countdown clock.”

一旦逻辑被写完，编写代码的时间就会轻松得多。这是因为，为诸如“从结束时间减去当前时间”之类的具体步骤编写代码要比为整个项目(如“建立倒数时钟”)编写代码要简单。

Also note that you won’t need to have a perfect series of steps written out at the beginning. This is a fluid process where it’s okay to add things, remove things, get things wrong, learn, and improve.

还要注意，您一开始并不需要制定一系列完美的步骤。这是一个可变的过程，可以添加，删除，弄错，学习和改进。

建立小块 (Build Small Pieces)

Once you have your steps written out, you can start writing small pieces of code. For a countdown clock, you might start by getting the current time:

写下步骤之后，就可以开始编写少量代码。对于倒数时钟，您可以从获取当前时间开始：

const currentTime = new Date().getTime(); console.log(currentTime);

Once you’re satisfied, you might then get the countdown’s end time:

满意后，您可能会得到倒计时的结束时间：

const endTime = new Date(2017, 4, 4, 7, 30).getTime(); console.log(endTime);

When you’re making your own clock, you can pick a specific end date as in the code sample above, but since I don’t want the code in this article to stop working after a certain date, I’m going set the end time to 10 days from now instead (note the conversion of 10 days to milliseconds since those are the units JavaScript uses):

当您自己制作时钟时，可以像上面的代码示例中那样选择一个特定的结束日期，但是由于我不希望本文中的代码在某个日期之后停止工作，因此我将结束时间设置为从现在开始到10天的时间(请注意将10天转换为毫秒，因为这是JavaScript使用的单位)：

const endTime = new Date().getTime() + 10*24*60*60*1000; console.log(endTime);

Here are some benefits of writing your code in small pieces:

小段编写代码有一些好处：

You get a chance to make sure the individual pieces of functionality work before moving on to the next steps.

在进行下一步之前，您将有机会确保各个功能正常工作。 It’s easier to think through what you’re doing when you’re not distracted by too many moving parts at a time.

当您一次又不被过多的运动部件分散注意力时，更容易思考正在做的事情。 You’ll move faster because you’re not trying to keep track of a million things at once.

您将移动得更快，因为您不想立即跟踪一百万个事物。 It’s a lot easier to spot and prevent errors this way.

这样可以更容易发现和防止错误。 You can experiment and learn as needed.

您可以根据需要进行实验和学习。 You’ll often end up writing helpful pieces of code you can use elsewhere.

您通常会最终写出有用的代码，这些代码可以在其他地方使用。

拼凑在一起 (Put the Pieces Together)

With your individual pieces ready, you can start putting your project together. For this stage, the key challenge is to make sure the pieces that worked on their own will still work once they’re connected. This might require some small changes.

准备好各个组件之后，就可以开始将项目放在一起了。在此阶段，关键的挑战是确保一旦连接就可以独立工作。这可能需要一些小的更改。

For example, here’s how you might put together the start time and end time to calculate the remaining time in a countdown clock:

例如，您可以按照以下方法将开始时间和结束时间放在一起，以计算倒计时时钟中的剩余时间：

This method of putting smaller pieces together is much easier than trying to make an entire project all at once because this way, you don’t need to keep track of everything in your head at the same time.

与试图一次完成一个整个项目相比，这种将较小的部分放在一起的方法要容易得多，因为这样一来，您无需同时跟踪头脑中的所有内容。

Now that we have a function to get the remaining time, we can run the function repeatedly to keep the time display updated.

现在我们有了一个获取剩余时间的函数，我们可以重复运行该函数以使时间显示保持更新。

The HTML:

HTML：

The JavaScript:

JavaScript：

// set our end time const endTime = new Date().getTime() + 10*24*60*60*1000; // calculate remaining time from now until deadline function getRemainingTime(deadline){ const currentTime = new Date().getTime(); return deadline - currentTime; } // store clock div to avoid repeatedly querying the DOM const clock = document.getElementById('clock'); // show time repeatedly function showTime(){ const remainingTime = getRemainingTime(endTime); clock.innerHTML = remainingTime; requestAnimationFrame(showTime); } requestAnimationFrame(showTime);

In the above example, we’ve added a showTime function that displays the remaining time on the screen. At the end of the function, we include requestAnimationFrame(showTime), which basically says run showTime again as soon as the browser is ready. This allows us to keep updating the time display in a highly performant manner.

在上面的示例中，我们添加了showTime函数，该函数在屏幕上显示剩余时间。在函数的结尾，我们包括requestAnimationFrame(showTime) ，它基本上说一旦浏览器准备好就再次运行showTime 。这使我们能够以高性能的方式不断更新时间显示。

You’ll notice the countdown is entirely in milliseconds. The next step will be to convert everything into days, hours, minutes, and seconds.

您会注意到倒数计时完全以毫秒为单位。下一步是将所有内容转换为天，小时，分钟和秒。

Using the approaches you’ve learned so far (small steps, etc.), you could first convert milliseconds to seconds, see how that looks, and put it in your function. Then you can repeat this process to calculate minutes, hours, and days. The end result might look something like this:

使用到目前为止所学的方法(一些小步骤等)，您可以先将毫秒转换为秒，查看其外观并将其放入函数中。然后，您可以重复此过程以计算分钟，小时和天数。最终结果可能如下所示：

实验与测试 (Experiment and Test)

By this point in your project, you will have done plenty of experimenting and testing to make sure everything works. Once it seems to work, see if you can break it. For example, what if the user clicks here or there? What if one of the inputs is unexpected? What if the screen size is narrow? Does everything work in the browsers you expect? Is there a more efficient approach to any part of this project?

至此，在您的项目中，您将进行大量的试验和测试，以确保一切正常。一旦看起来可行，请查看是否可以将其破坏。例如，如果用户单击此处或此处怎么办？如果输入之一是意外的怎么办？如果屏幕尺寸狭窄怎么办？一切都可以在您期望的浏览器中运行吗？这个项目的任何部分是否有更有效的方法？

Going back to our countdown clock example, what happens if the timer reaches zero? We can add an if statement to make sure the clock stops at zero:

回到我们的倒计时时钟示例，如果计时器达到零会发生什么？我们可以添加一个if语句，以确保时钟在零处停止：

function showTime(){ ... // ensure clock only updates if a second or more is remaining if(remainingTime >= 1000){ requestAnimationFrame(showTime); } }

Note that the reason we used 1000 milliseconds (1 second) in this case is that if we used zero, the clock would overshoot and end up at -1. If your clock is using smaller units than seconds, then make the ending condition smaller than one second.

请注意，在这种情况下我们使用1000毫秒(1秒)的原因是，如果我们使用零，则时钟将超调并最终为-1。如果您的时钟单位小于秒，请使结束条件小于一秒。

A good friend pointed out this issue as I was working on this article, and it’s just another example of how code might not come out perfect the first time.

我在撰写本文时，一个好朋友指出了这个问题，这只是代码第一次无法完美实现的另一个示例。

This leads perfectly into the next point.

这完美地导致了下一点。

获得外部帮助 (Get Outside Help)

Getting outside help can be an important step at any point when doing a project. This help can come from reference materials or other people. The reason I bring this up is that there’s a common myth that developers sit down and write perfect code without having to look anything up or ask anyone for advice.

在进行项目时，获得外部帮助可能是重要的一步。此帮助可以来自参考资料或其他人员。之所以提出这一点，是因为有一个普遍的神话，即开发人员坐下来编写完美的代码，而不必查找任何内容或向任何人征求意见。

I’ve often heard that newer developers are surprised to know how frequently an experienced developer will look things up. In fact, since it’s impossible to know everything, being able to look up information is one of the most valuable skills you can have.

我经常听到，新开发人员惊讶地发现，有经验的开发人员会多久查找一次。实际上，由于不可能一无所知，因此能够查找信息是您可以拥有的最有价值的技能之一。

Tools and techniques change, but the skill of learning doesn’t go away.

工具和技术会发生变化，但是学习技能并不会消失。

重构代码 (Refactor Your Code)

Before you finish your project, you’ll want to refactor your code. Here are some questions you can ask yourself in order to improve your project:

在完成项目之前，您需要重构代码。您可以问自己一些问题，以改善您的项目：

您的代码简洁易读吗？ (Is your code concise and readable?)

If you have to make a choice between conciseness and readability, you’ll usually want to pick readability unless there’s a huge performance reason. Readability makes your code easier to maintain, update, and fix.

如果必须在简洁性和可读性之间做出选择，通常会选择可读性，除非有很大的性能原因。可读性使您的代码更易于维护，更新和修复。

您的代码有效吗？ (Is your code efficient?)

For example, if you’re searching your document for the same element over and over, you could store the element in a variable instead, to make your code do less work. We’ve already done this in our countdown clock example with the following piece:

例如，如果您要一遍又一遍地在文档中搜索相同的元素，则可以将该元素存储在变量中，以减少代码的工作量。我们已经在倒数时钟示例中完成了以下操作：

// store clock div to avoid repeatedly querying the DOM const clock = document.getElementById('clock');

您是否对函数和变量使用了清晰的命名？ (Have you used clear naming for your functions and variables?)

For example a function name like showTime would be much clearer than st. This is important because people often name things thinking they make sense, and then they get lost later because they forgot what their abbreviations meant. A good test for clarity is whether you’d have to explain a name too much to someone who is unfamiliar with the code.

例如，像showTime这样的函数名称将比st更清晰。这很重要，因为人们经常以认为有意义的方式命名事物，然后由于忘记了缩写的含义而迷失了方向。一个清晰的良好测试是，是否需要向不熟悉代码的人解释过多的名称。

有潜在的命名冲突吗？ (Are there any potential naming collisions?)

For example, are you using names like “container” that are highly likely to be used elsewhere?

例如，您是否使用诸如“容器”之类的名称而很有可能在其他地方使用？

Are you polluting global scope with too many variables?

您是否在变量中污染了全局范围？

One easy way to protect global scope is to throw your countdown clock code into an IIFE (immediately-invoked function expression). That way, the clock can access all its variables, but nothing else can.

保护全局范围的一种简单方法是将倒数时钟代码放入IIFE( 立即调用的函数表达式 )中。这样，时钟就可以访问其所有变量，但是没有其他方法可以访问。

(function(){ // code goes here })();

编辑过程是否引起任何错误？ (Has the editing process caused any errors?)

For instance, have you changed a variable name in one place without changing it everywhere else? Have you added something to an object but forgotten to put in an extra comma?

例如，您是否曾经在一个地方更改过变量名称，而没有在其他地方更改过？您是否已将某些内容添加到对象中，但又忘了添加逗号？

输出是否需要打磨？ (Does the output need to be polished?)

In our countdown clock example, it would be nice to see leading zeroes (so 10:09 instead of just 10:9). One way would be to see if a number is less than 9, and then put a ‘0’ in front of it, but that’s kind of long. I saw a code sample once that had a neat trick which was to add a ‘0’ in the front and then use slice(-2) to just take the last two digits no matter what. The changes would make our code look like this:

在我们的倒计时时钟示例中，很高兴看到前导零(所以10:09而不是10：9)。一种方法是查看数字是否小于9，然后在其前面加上“ 0”，但这有点长。我曾经看到一个代码示例，它有一个巧妙的技巧，那就是在前面添加一个“ 0”，然后使用slice(-2)来取最后两位数字，无论如何。所做的更改将使我们的代码如下所示：

您的代码是否多余？ (Is your code unnecessarily redundant?)

Are you repeating code that could be in a function or a loop instead? With reference to the above, we could move the code to add an extra zero to the output into its own function. This reduces duplication and makes things easier to read.

您是否在重复可能在函数或循环中的代码？参考上面的内容，我们可以移动代码以将额外的零添加到输出到自己的函数中。这样可以减少重复，并使内容更易于阅读。

function pad(value){ return ('0' + Math.floor(value)).slice(-2); } const seconds = pad((remainingTime/1000) % 60);

以崭新的眼光看这个项目对您有帮助吗？ (Would it help to look at this project with fresh eyes?)

Try coming back to your code after a few days. With a fresh perspective, you’ll start to see which parts can be made cleaner and more efficient.

几天后尝试返回您的代码。从新的角度来看，您将开始看到可以使哪些零件更清洁，更高效。

As you refactor, your code will start to seem more and more elegant. Then you’ll put out the finished product and people will wonder how you wrote such perfect code.

重构时，您的代码将变得越来越优雅。然后，您将完成产品的发布，然后人们会想知道您是如何编写如此完美的代码的。

A few months later, you’ll look back on it and realize you could have made it so much better. As a friend of mine wisely said, that’s a good thing; it means you’re making progress.

几个月后，您将回顾它，意识到您可以做得更好。正如我的一个朋友明智地说的那样，那是一件好事。这意味着您正在进步。

In case you’re curious, here’s a live demo of the clock example (with some added styles):

如果您感到好奇，下面是时钟示例的现场演示(带有一些添加的样式)：

See the Pen requestAnimationFrame Countdown by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen requestAnimationFrame Countdown 。

回顾 (Recap)

A coding project is rarely a linear process. If there’s one thing I’d like you to take away from this article, it’s that small pieces and experimentation will take you farther than trying to do everything at once.

编码项目很少是线性过程。如果我希望您从本文中删除一件事，那就是比起一次尝试做所有事情，细小的片段和试验会让您走得更远。

If you’ve struggled with JavaScript projects in the past, I hope this article has been helpful, and if you have any other ideas that have helped you approach projects, I’d love to hear them in the comments.

如果您过去曾经在JavaScript项目上苦苦挣扎，希望本文对您有所帮助，并且如果您有任何其他想法可以帮助您处理项目，我很乐意在评论中听到它们。

This article was peer reviewed by Vildan Softic and Matt Burnett. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

本文由Vildan Softic和Matt Burnett进行了同行评审。感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

翻译自: https://www.sitepoint.com/how-to-approach-javascript-projects-what-the-tutorials-dont-tell-you/

std::vector教程

最新回复(0)