近些日子，随着 JavaScript 擅长做更多的事情，它也变得很难被全部掌控（更不用说不可能）。对这门语言更好的理解以及更多的经验意味着更多的工作机会。因此，花费时间来学习新东西很有用。学习编程最好的也是最常用用的方法是通过做不同的 项目。这个方法可以让你同时掌控编程的不同方面。花费少量时间，获得大量成果，获取更多的经验，这就是你要做的事情。

所以，在这篇文章中，我们将会讨论一些感动人心的项目创意，以此来提高你的技艺。它们涵盖了简单到复杂、小项目到大项目的全部过程。我们来看看你将会通过项目学到什么，以及预期你能到达的成果。让我们开始吧！

一、作品集网站

非常有用并且很有意思的做法；一个作品集网站是可以轻易且最容易完成的项目。它是一个绝佳的方式，即便是经验丰富的编程者，也可用来尝试新的框架和库。另外，最后，你会在某天发现一些有用的东西。与 JS 的生态系统一起，你还可学到其他的网站开发术语和概念。静态网站 （generator），（headless） 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 阅读器，这将都会学到相同的东西。我们要把主要的精力放在应用本身 - 他应该是一个响应式的 Progressive Web App （PWA）。如果你知道，PWA 是一个的网站，在满足一些要求后，可以像原生的应用一样 "安装" 在手机或者桌面上使用。它变得越来越受欢迎，所以，非常值得学习。

你还会另外一样东西就是REST API 这个概念以及其相关的所有工具。JavaScript Fetch API 大概是这儿最有用的。除此之外，你会学会标准的 HTTP 协议和库就像是 Axios.

四、网站分析

我们都知道谷歌几乎垄断了的网络分析。但是抛弃 Google Analysis 并且做一个自己的 分析工具，如何？与之前的列出的项目相比，这无疑是更耗精力和时间的项目，但它确实是个令人兴奋的项目。

网站分析工具可以分为两部分 - 用户端和服务端，一个可选的仪表盘。当做第一部分时，你必须要了解如何一些 Web API 来获取数据。这取决于你想收集什么 （输入热图，位置，花费的时间等），你必须要使用不同的 API。有些苦可以帮你做这些事，但是它们不常见。还有，你可以需要使用到 cookies 或者 Web Storage。

服务端，你必须熟练掌握 Node.js。与客户连接 （无论实时与否），数据处理，数据库管理可能是是你最需要关注来处理的事了。 你还可以做一个美观的仪表盘来更好的分析数据。

总而总之，当你完成这个项目时，你将会得到一个完整的网络分享包，它可以帮你检查所有项。

五、本机应用程序

现在我们进入了更通用的领域。随着JS越来越流行，你可以用它制作一个成熟的本地应用程序也就不足为奇了。而且，这正是你应该考虑做的！

如果你想要桌面，你可以把前面提到的一些想法和 Electron结合起来, 你就有了一个应用程序！ Electron是一个基于Node.js和Chromium项目的框架，它允许您将几乎任何JavaScript项目转换为本机应用程序。它很容易启动，但提供了许多 additional APIs 对于更高级的用例. 不幸的是， Electron 不适用于移动设备，所以我们只能寻找替代品。 像 Apache Cordova这样的项目, 可以让你的应用程序“原生”，只需把它放在一个WebView中，让你访问一些额外的api，但这样的方法并没有太多的“原生性”。

NativeScript 和 React Native 给你提供一些更好的选择。它们将JS代码绑定到各自平台的本机元素，从而提高性能并给您这种本机的感觉。顾名思义，React Native与React紧密相连，而NativeScript同时支持Vue和Angular，以及普通的JavaScript或TypeScript。

六、开源库

好吧，一个开源库  能教你什么？要知道，我并不关注你的库（或框架）可以做什么或者怎么做，就是关注它将开源这个简单是事实。加入这个有无数编程者组成的庞大的社区（特别是 JS），不是为了教你如何编码（你应该早已会编码）。 甚至不是无偿提供一些的想法。它可以让你获得前所未有的经验。

从编程的角度来看，你必须精通 Git。你还需要知道如何写出 高质量代码 和 测试。但是，编程之外这些领域最重要。当你推广你的项目时会做 营销 和 社会参与 。当处理 issue 和 pull-request 时会进行讨论 和 时间管理 。所以的事情都是不可见，但是非常重要的。一个杰出的编程者不应该仅仅局限于如何写代码，更应该超越它。这就是开源能教给你的东西。

七、游戏

最重要的是，我们有个可以个人完成的最通用和复杂的项目创意。我说的就是开发 一个游戏。在这儿，一切取决于你的的想象力以及编程技巧。

我想说的是，对于 JS 游戏，WebGL 或者 Canvas API 是必须的。 像 PixiJS 或者 Three.js 这样的库在你构建大型项目时可能特别有用。服务端编码也是需要的，至少网络游戏是这样的。最后，当 JS 不足以满足时开发，你还需要转向 WebAssembly，这是另一个话题了。

因此，如我所说，一个游戏，取决于它的复杂度，它会成为你做过的最好的项目。如果你可以独自搞定一个 MMO RTS ，那你将会成为真正的大师。 ;) 不过，请记住，这个必定不会是速成的。

想法

那么，这些是我列出最棒的 JS 项目想法了。如果你有其他项目想法可以推荐，请在评论中让我知道。另外，你是否愿意去实践任何一个我所列出的项目吗?