7 个最佳 JavaScript 项目助你精进技能

投资组合网站

聊天

新闻聚合器

网站分析

原生应用

开源库

游戏

想法

这篇文章取自我的博客，因此请务必查看以获取更多最新内容。

如今，JavaScript 的功能越来越强大，想要完全掌握它变得越来越难（当然，也并非不可能）。对这门语言的理解和经验越丰富，你的职业发展机会也就越多。因此，学习新知识绝对值得你花时间。学习编程的最佳方式之一就是通过做不同的项目。这种方法可以让你一次性掌握编程的不同方面。项目花费的时间越短，结果越好，你在某些方面的经验就越丰富。

因此，在这篇文章中，我们将讨论一些最令人兴奋的项目创意，助你提升技能。这些项目难度适中，规模大小不一。我们将看看你通过这些项目能学到什么，以及预期能取得什么样的成果。让我们开始吧！

投资组合网站

作品集网站不仅实用，而且趣味十足；它是你能轻松完成的项目之一。即使对于经验丰富的程序员来说，这也是尝试新框架和库的好方法。而且，最终你还会学到一些未来可能有用的东西。除了 JS 生态系统，你还可以在此过程中学习其他一些 Web 开发术语和概念。静态网站（生成器）、（无头）CMS和JAMStack可能是其中最值得关注的。此外，你还能提升 HTML 和 CSS 技能。

聊天

现在我们稍微提高一下难度。开发一个聊天应用需要前端和后端的经验。除非你想利用点对点 ( P2P ) 连接（这需要更多知识，比如WebRTC），否则你需要使用Node.js。另一方面，这会带你进入一个全新的世界。

Node.js 自然而然地拥有自己的生态系统、库和框架。其中最流行的框架Express封装了一些不太友好的 Node.js API。此外，如果不体验NPM，就无法使用 Node.js ——NPM 是最大的软件包存储库，包含数百万个可用的开源 JS 库和工具！

总而言之，你不仅会提升前端和 Node.js 技能，而且（很有可能）会了解WebSocket。它是一个用于实时通信的协议——很多应用程序都需要它。你还会了解Socket.IO——一个与所有实时功能紧密相关的非常出色的库。

新闻聚合器

完成聊天应用的开发后，你可以继续开发一个新闻聚合器——一个用于积累新闻的网站。Echo JS和Hacker News (HN) 就是这类网站的典型例子。后者提供了一个公共 API，你可以使用它来实现你自己版本的 HN 阅读器。这比从头开始创建新闻聚合器要简单一些，而且它已经非常受欢迎，甚至可以被视为老式 TODO 应用的替代品！

无论您是要创建自己的新聚合器还是 HN 阅读器，您将学到的东西几乎相同。这里主要关注的是应用程序本身——它应该是一个响应式渐进式 Web 应用程序(PWA)。如果您不了解，PWA 只是一个网站，在满足一些要求后，可以像原生应用程序一样在移动设备和桌面设备上“安装”和使用。它正变得越来越流行，因此非常值得学习。

你还将学习REST API的概念及其所有相关工具。JavaScript Fetch API可能是其中最重要的部分。除此之外，你还将学习标准HTTP协议和Axios等库。

网站分析

我们都知道，谷歌在网络分析领域几乎占据了垄断地位。但是，放弃谷歌分析，自己开发分析工具怎么样？这肯定比上面列出的任何一个项目都要求更高、更耗时，但毫无疑问，它绝对是一个令人兴奋的项目！

网站分析工具分为两部分：用户端和服务器端，以及一个可选的仪表板。在执行第一部分时，您很可能需要了解一些 Web API 来收集数据。根据您想要了解的内容（输入热图、位置、停留时间等），您需要使用不同的 API。有一些库可以帮您实现这一点，但并不常见。此外，您可能还需要使用Cookie或Web 存储。

在服务器端，你必须充分运用你的 Node.js 知识。与用户的连接（无论是否实时）、数据处理和数据库管理可能是你将要处理的最重要工作。你还可以创建一个美观的仪表板，以便更好地分析数据。

总而言之，如果您完成了该项目，您将获得一个完整的网络分析包，它可以满足您的所有要求。

原生应用

现在我们进入更通用的领域。随着 JS 越来越流行，用它开发一个功能齐全的原生应用也就不足为奇了。而这正是你应该考虑做的！

如果您打算在桌面端使用，可以将前面提到的一些想法与Electron结合，这样就能开发出一个应用了！Electron 是一个基于 Node.js 和Chromium项目的框架，它允许您将几乎任何 JavaScript 项目转换为原生应用。它易于上手，但也提供了许多额外的 API，以满足更高级的用例。遗憾的是，Electron 不支持移动端，所以我们只能寻找替代方案。有一些像Apache Cordova这样的项目，只需将您的应用放入WebView中并允许您访问一些额外的 API，即可将其变成“原生”应用，但这种方法缺乏太多的“原生”特性。

NativeScript和React Native为您提供了一些更好的选择。它们将您的 JS 代码绑定到相应平台的原生元素，从而提升性能并赋予您原生体验。顾名思义，React Native 与 React 紧密相关，而 NativeScript 则支持 Vue 和 Angular，以及纯 JavaScript 或 TypeScript。

开源库

好吧，那么创建一个开源库能教会你什么呢？要知道，我关注的不是你的库（或框架）能做什么，也不是它如何实现，而是它开源的简单事实。加入这个由无数程序员组成的庞大社区（尤其是 JS 社区），并不意味着教你如何编程（你应该已经知道这一点）。这甚至与免费提供某些东西的理念无关。而是你从中获得的前所未有的经验。

从编程的角度来看，你必须精通Git。你还需要知道如何编写高质量的代码和测试。但是，编程领域之外的一切才是最重要的。推广项目时的市场营销和社交参与。处理问题和拉取请求时的讨论和时间管理。所有这些事情虽然不可见，但却非常重要。一个优秀的程序员不仅应该懂得如何编码，更应该超越这一点。这就是开源可以教给你的。

游戏

最重要的是，我们可能有一个最灵活、最复杂的项目构想。我说的是创建一个游戏。在这里，一切都取决于你的想象力……以及编程技能。

我认为对于 JS 游戏来说，WebGL或Canvas API是必备的。PixiJS或Three.js等库在大型项目中可能尤其有用。服务器端编程也是必不可少的，至少对于网络游戏来说是这样。最后，当 JS 不够用时，你需要转向WebAssembly，这又是另一个话题了。

所以，正如我所说，一款游戏，取决于它的复杂程度，可能是你能做的最好的事情。如果你能独自完成一款MMO RTS游戏，那么你就是一位真正的编程大师了。;) 不过，请记住，这不会是一个快速的过程。

想法

以上就是我列出的最佳 JS 项目创意。如果您还有其他推荐的想法，请在评论区告诉我。另外，您愿意尝试一下以上列出的任何项目吗？如果您喜欢这篇文章，请分享并在Twitter、Facebook或Reddit上关注我。您也可以访问我的YouTube 频道并点赞或订阅。感谢您的阅读！