What Tutorials Don't Tell You: How to Approach Projects

Master the skills of JavaScript project development and say goodbye to tutorial dependencies! This article will guide you on how to complete JavaScript projects independently, rather than just following the tutorial steps. We will explore the entire process from project planning to code optimization to seeking help and code refactoring.

Many developers complain that tutorials can only help them complete specific projects, but they cannot independently deal with new challenges. This is because tutorials usually only provide steps, not ideas for solving problems. In addition, comparing your intermediate results with others' finished products is also easy to be frustrating.

The actual project development is not as concise and clear as shown in the tutorial. It is an iterative process full of trials, errors and information reviews. This article will help you master the methods of independently developing JavaScript projects.

Important tip: The article contains some code examples. If you have any unfamiliarity, you can skip it first. This article focuses on understanding the project development process, rather than focusing on technical details.

Step 1: Consolidate the basic knowledge

First of all, it is crucial to be familiar with JavaScript (and programming basics). This includes variables, functions, conditional statements, loops, arrays, objects, and DOM manipulation methods (e.g. getElementById, querySelectorAll and innerHTML). You can use Google or MDN to view relevant information at any time.

Solid basics can help you focus on the project itself, rather than the grammatical details, thus improving efficiency.

Step 2: Make a plan

Don't rush to write code, first look at the project from a macro perspective. Develop an overall plan to clarify the goals that need to be achieved. For example, to develop a countdown timer, you need to consider time measurement, data storage, digital display, and timing control.

At this stage, there is no need to worry about technical details, just form an overall plan to avoid losing direction. In software design, this is often referred to as use case analysis.

Step 3: Describe logic (pseudocode) in natural language

After having a plan, you need to refine the details. It is recommended to use natural language rather than code to describe the functionality of each section (this is called pseudocode). This allows you to think clearly about project logic without being distracted by grammatical details.

For example, the pseudo-code of the countdown timer might be as follows:

• Get the current time
• Specify end time
• Calculate the remaining time
• Loop to get the remaining time
• Show the remaining time

Single parts can be further refined:

• Show the remaining time
  • Decompose time into hours, minutes, seconds
  • Show hours, minutes and seconds in different containers

With a clear logical description, it will be much easier to write code.

Step 4: Block construction

From the pseudo-code, start writing small pieces of code. For the countdown timer, you can first get the current time:

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

Then get the end time:

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

The benefits of block construction:

• Ensures that each function block works properly before being connected.
• Reduce the cognitive burden of dealing with multiple parts simultaneously.
• Improve efficiency and avoid processing too much information at the same time.
• It is easier to detect and avoid errors.
• Easy to experiment and study.
• Can create reusable code snippets.

Step 5: Integrate code snippets

After preparing each function block, start integrating. The key is to make sure that the individual functional blocks still work properly after being connected, which may require some minor tweaks.

For example, integrate the start time and end time to calculate the remaining time:

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

This approach is easier than building the entire project in one go, as it avoids the cognitive burden of dealing with all the details simultaneously.

Next, we can call this function repeatedly to update the time display. HTML code:

// ... (获取endTime的代码) ...

function getRemainingTime(deadline) {
  const currentTime = new Date().getTime();
  return deadline - currentTime;
}

console.log(getRemainingTime(endTime));

JavaScript code:

<div id="clock"></div>

Finally, convert milliseconds to days, hours, minutes, and seconds and add some styles.

Step 6: Testing and Experiment

After the code seems to work fine, try to break it. For example, what happens when a user clicks on a different location? What happens when entering unexpected values? Does the screen size work properly if it is small? Will it work properly in the expected browser? Is there a more efficient way?

Step 7: Seek help

Ask help at any stage, which can be from reference materials or from others. Experienced developers often check information, which is not a shame.

Step 8: Code Refactoring

Before the project is completed, the code needs to be refactored. Here are some issues to consider:

• Is the code concise and easy to read?
• Is the code efficient?
• Are the naming of functions and variables clear?
• Is there a naming conflict?
• Is the global scope contaminated?
• Did the editing process cause an error?
• Does the output need to be polished?
• Is there redundancy in the code?
• Is it necessary to look at the project from a new perspective?

By refactoring, the code will become more elegant.

Summary

Coding items are rarely a linear process. Small step iterations and experiments are more effective than doing all the work in one go.

I hope this article can help you overcome the difficulties in JavaScript project development. If you have other effective project development methods, please share them in the comment section.

The above is the detailed content of What Tutorials Don't Tell You: How to Approach Projects. For more information, please follow other related articles on the PHP Chinese website!