通过有趣的实验改善JavaScript学习

本文经Mark Brown同行评审。感谢所有SitePoint的同行评审员，使SitePoint的内容达到最佳状态！

Web开发领域的学习永无止境。我们的行业不断更新和改进，我们也应该如此！不幸的是，跟上潮流可能令人筋疲力尽，但并非必须如此。在本文中，我将向您展示小型实验如何成为一种有趣且有效的新知识学习方法，并确保学习和保持最新状态始终充满乐趣。

关键要点

• 小型实验可以成为一种有趣且有效的方法，用于学习Web开发和JavaScript中的新知识。通过设定一些规则，例如准备工作、安排任务、避免最后期限以及给自己一些娱乐时间，学习可以变得更愉快，不那么令人筋疲力尽。
• 回顾您的实验可以帮助您提高技能和知识。问问自己，执行过程中出现的问题是否可以通过更好的准备来避免，或者如何改进已执行工作的质量，这些都能提供宝贵的见解。
• 有大量资源和工具可用于激发灵感和学习。从CodePen、Dribbble或Behance等视觉资源，到Node.js、Electron、Cordova和React Native等JavaScript运行时，再到API、库、框架，甚至Raspberry Pi、Arduino和LEGO® MINDSTORMS®等物理世界工具，都有各种各样的选择可以帮助您增强JavaScript技能。

保持实验的趣味性

您是否做过副项目？如果您做过，我相信您曾经做过一个项目，一开始非常有趣，但很快就变成了混乱不堪的局面。陷入困境并不有趣，而且会严重损害副项目以及工作的动力。这其中的主要原因通常是范围蔓延或压力，而您应该在业余时间放松身心。通过强制执行一些规则，我们可以确保不会遇到不愉快的意外：

1. 准备您的工作。确保您确切地知道实验有多大以及它包含什么内容。如果太多，将其分成易于管理的块，每个块都有开始和结束，或者放弃。
2. 安排任务。不要每个晚上都熬夜。只需每周安排一到两次，每次一到两个小时即可。
3. 没有最后期限。包括您在内的每个人都需要放松。设定目标是可以的，错过目标也应该可以。
4. 给自己一些娱乐时间。虽然你不应该拖延，但生活不仅仅是一堆待办事项清单上的勾选。花时间享受劳动成果。

进行小型实验并不意味着它们不能成为更大项目的一部分。例如，以数据可视化项目为例。它可能需要一些时间，但很容易分成较小的任务：

• 设置构建工作流程
• 查找并获取有趣的数据（这是一个很酷的API列表，可以激发您的灵感）
• 使用Node.js获取和处理数据，利用ES2015特性
• 比较并选择一种技术（canvas、WebGL、DOM/SVG）或库（d3.js、p5.js、THREE.js）来可视化数据
• 使用您选择的工具可视化数据

我使用Trello看板来跟踪我所有的实验。在那里，我会列出和计划它们，并在开始实验之前添加相关信息。对于较大的项目，我倾向于专门为该项目创建一个新的看板，并为每个任务添加卡片。任何替代方案都足够。记录事情可以消除我头脑中的杂音！

回顾实验

除了通过实际操作新事物来学习之外，实验也是提高自我的绝佳机会。回顾您的实验，并问问自己以下问题：

1. 执行过程中出现的问题是否可以通过更好的准备来避免？如果是，怎么办？
2. 已执行工作的质量如何，我该如何改进？
3. 我能否更有效地准备我的实验？

回顾和改进我们所做的事情会给我们带来经验——这在我们的行业中非常宝贵。沟通和记录也是如此。许多实验回顾都构成了很棒的博客文章。

虽然与JavaScript关系不大，但我特别有趣的一个实验是在Sass中创建矢量图形，我将坐标图转换为路径，并将其栅格化为单像素框阴影。我不仅学习了我以前不太熟悉的Sass功能，还必须研究一些算法。

寻找灵感

如果您不确定接下来要学习什么，最好随时掌握一些资源来获取灵感。

如果您喜欢视觉效果和艺术，CodePen是一个不错的起点。精选作品通常充满了令人惊叹的笔触，值得仔细研究以了解其工作原理。如果您感觉更冒险，可以尝试Dribbble或Behance。

SitePoint由来自不同背景的许多作者提供支持。因此，JavaScript频道充满了各种各样的JavaScript精华。

运行时环境

您可能已经知道JavaScript可以在浏览器中运行，但您知道也可以在浏览器之外运行JavaScript吗？

• Node.js是迄今为止最流行的非浏览器JavaScript运行时。使用它，您可以编写脚本、命令行界面或桌面应用程序等等。它可在Windows、OS X和Linux上运行。
• Electron允许您使用传统的HTML、CSS和JavaScript构建跨平台桌面应用程序。
• Cordova允许您使用HTML、CSS和JavaScript构建移动应用程序。
• React Native允许您使用React框架构建移动应用程序。

浏览器API

在过去几年中，浏览器中引入了许多新的API，允许您做各种有趣的事情。

• Service Worker API是一个大型API，允许我们执行各种操作，例如提供离线支持。
• WebRTC是一个API，允许我们与另一台计算机建立实时连接并传递音频和视频数据。

一些API允许我们使用设备硬件，例如读取传感器或让设备执行某些操作（例如振动）。

• 环境光传感器提供有关环境光线亮度的信息，我们可以使用它来调整我们的网站或应用程序。
• 电池状态相当不言自明；我们可以请求电池状态。较重的应用程序可以使用它来启用省电模式。
• 地理位置向我们提供有关用户位置的信息。
• 我们可以利用网络信息向客户端提供较小的文件。
• 通知对于许多应用程序（例如聊天应用程序）非常有用。
• 您是否正在构建一个使用鼠标进行输入的游戏？指针锁定是您的朋友。
• 接近传感器可以让您了解用户与设备的距离。也许这可以用来检测拥抱？
• 设备方向允许我们检测方向变化时。
• 振动允许我们振动设备，这对于游戏来说非常棒。

库和框架

大多数库的目的是轻松完成任务，因此拥有使用它们的经验总是有益的。更流行的库和框架（例如Angular和React）甚至可能是工作的必备条件。一两个实验也可以成为您为面试做准备的好方法。

要知道库和框架的寿命有限。虽然它们很有用，但您应该能够理解它们解决的问题，并能够在没有它们的情况下解决这些问题。

架构

• Angular是一个MVC框架，许多团队仍在使用。
• React是一个用于渲染视图的库。
• Polymer是一个用于创建Web组件的库。
• Lodash.js、Underscore.js和Ramda.js都是函数式编程库。一些团队喜欢使用它们，但许多团队并不喜欢。无论哪种方式，对函数式编程的良好理解都是一项非常受欢迎的技能。

视觉

• D3.js是一个图形和DOM操作库，如果您想使用SVG或HTML渲染图形，它非常有效。
• p5.js是一个受Processing启发的库（一个灵活的软件速写本和一种用于“>在视觉艺术的背景下学习如何编码”的语言）。它有一系列丰富的函数来绘制形状和进行计算。
• Three.js是一个高级3D API，用于抽象掉WebGL的困难部分。

物理世界

就我个人而言，当我可以编写软件来做物理世界中的事情时，我真的很兴奋。如果您也是如此，请考虑购买以下任何一套：

• Raspberry Pi是一款信用卡大小的单板计算机，非常适合教学或学习。
• Arduino类似于Raspberry Pi，但更侧重于电子方面。
• LEGO® MINDSTORMS®是一款可以控制LEGO硬件的微型计算机。有什么不喜欢的呢？
• Johhny-Five是一个用于机器人技术和物联网的JavaScript框架，可以安装在Arduino或类似设备上。

以上所有内容都可以用JavaScript编程，或者能够运行JavaScript。

结论

小型实验是一种学习新事物的绝佳实践方法。另一个好处是它们可以帮助您改进工作方式，这在我们的行业中非常宝贵。通过强制执行一些规则，我们可以保持实验的趣味性，激励自己学习更多知识并变得更好。

对于那些陷入困境的人，我希望本文能激励您开始一个新的、有趣的实验。对于那些不确定接下来要处理什么的人，我希望本文能给您一些灵感。或者您可能有一些关于实验的好主意？或者我可能遗漏了什么？无论哪种方式，我都非常乐意在下面的评论中听到您的声音。

关于JavaScript学习实验的常见问题

我可以做哪些实用的项目来提高我的JavaScript技能？

您可以进行许多实用的项目来提高您的JavaScript技能。例如，您可以创建一个简单的计算器、一个数字时钟或一个天气应用程序。这些项目将帮助您了解JavaScript如何与HTML和CSS交互以创建功能性Web应用程序。您还可以尝试创建一个待办事项列表应用程序，这将帮助您了解如何使用JavaScript操作文档对象模型(DOM)。

我如何在Google实验中使用JavaScript？

Google实验是一个平台，允许您测试和展示您的JavaScript技能。您可以使用JavaScript创建交互式实验并与世界分享。要在Google实验中使用JavaScript，您需要对JavaScript的工作原理以及如何使用它来操作Web元素有一个基本的了解。

JavaScript在创建交互式网页中的作用是什么？

JavaScript在创建交互式网页中起着至关重要的作用。它允许您根据用户操作来操作网页上的元素。例如，您可以使用JavaScript在用户单击按钮时更改网页的内容，或在网页上为元素添加动画。

我如何使用JavaScript创建动画？

JavaScript提供了多种在网页上创建动画的方法。您可以使用requestAnimationFrame方法创建流畅的动画。此方法告诉浏览器执行动画，并请求浏览器在下一个重绘之前调用指定函数来更新动画。

JavaScript在Web开发中的重要性是什么？

JavaScript是Web开发的基本组成部分。它允许您通过操作网页上的元素来创建交互式和动态网页。如果没有JavaScript，网页将是静态的，并且对用户操作没有响应。

我如何提高我的JavaScript编码技能？

提高JavaScript编码技能的最佳方法是练习。您可以进行各种项目，例如创建计算器或待办事项列表应用程序，来练习您的技能。您还可以参加CodePen等平台上的编码挑战来测试您的技能。

学习JavaScript有哪些资源？

有许多资源可用于学习JavaScript。Codecademy、freeCodeCamp和Mozilla Developer Network等网站提供关于JavaScript的免费教程和指南。您还可以在YouTube上找到许多视频教程。

我如何调试我的JavaScript代码？

您可以使用浏览器开发者工具中的控制台来调试JavaScript代码。控制台允许您记录消息、显示错误和实时运行JavaScript代码。

JavaScript在前端开发中的作用是什么？

JavaScript是前端开发的关键部分。它允许您创建交互式和动态网页，验证用户输入并与Web服务器通信。

我如何使用JavaScript与Web服务器交互？

您可以使用JavaScript向Web服务器发送请求并接收响应。这是使用fetch API或XMLHttpRequest对象完成的。这允许您更新网页的部分内容而无需重新加载整个页面。

以上是通过有趣的实验改善JavaScript学习的详细内容。更多信息请关注PHP中文网其他相关文章！