现在，我们不得不处理遗留的代码，在代码库的黑暗和阴森的一面中穿行，通常有一个模糊的、含糊的和令人不安的文档--如果有的话。在这种情况下，重构组件似乎是不可避免的。
或者你需要管理日期和数组，或者操作DOM--只是没有必要为这种简单的任务添加一个外部依赖，但我们需要找出_最好的_方法来做。探索轻量级的vanilla JavaScript片段也是一个好主意--最好是那些没有任何第三方依赖的片段。幸运的是，现在并不缺乏这样的工具。
更多有用的工具。
30秒代码
30 Seconds of Code是一个巨大的JavaScript短代码片段库，包括处理基元、数组和对象的助手，以及算法、DOM操作函数和Node.js工具。你还可以找到大量用于Python、React Hooks、React Components和Node.js的小型实用程序。它还具有有用的JavaScript作弊表。
HTML Dom
HTML Dom提供了超过120个无懈可击的普通JavaScript片段，从切换密码的可见性到创建可调整大小的分割视图，所有这些都支持现代浏览器和IE11+。
Vanilla JavaScript Toolkit
Vanilla JavaScript Toolkit提供了一个不断增长的vanilla JavaScript方法、辅助函数、插件、锅炉板、polyfills和学习资源。另外，Chris Ferdinandi还经营着一个香草JS学院，每天都有大量关于香草JS的开发者提示在他的通讯中发送。
从jQuery迁移到Vanilla JavaScript
如果你发现自己仍然处于在jQuery上运行的传统系统的土地上，有许多资源可以让你用更多的轻量级和标准化的选择来慢慢脱离jQuery。其中一个很好的指南是Tobias Ahlin的Cheat sheet for moving from jQuery to vanilla JavaScript，这是一个实用的参考指南，包括一些最常见的jQuery模式和它们在JavaScript中的对应关系。
还有许多其他有用的资源值得一看。
- PlainJS、You Might NotNeed jQuery和You Don't Need jQuery都是关于vanilla JavaScript片段的重要参考资料。这些网站提供了从用户界面和输入到媒体、导航和视觉效果的代码片段库（不仅有jQuery的使用案例，还有几乎所有的传统代码）。
- Learn Vanilla JS的特点是围绕vanilla JS的书籍、课程、常青资源、社区和播客。一个奇妙的资源库，值得密切关注。
- JavaScript Framework Diet是Sebastian De Deyne正在进行的关于常见任务的系列文章，不用JavaScript框架就能解决。你会学到选择元素、事件委托、文件结构、下拉菜单以及进入和离开的转换。
5K以下的微型库
Micro.js是一个由Thomas Fuchs收集的小型JavaScript库和实用程序库。所有库都是分组的，大小都在5K以下，只做一件事，而且只做一件事--做得很好。
单行代码
Phuoc Nguyen发布了Single-Line-Of-Code，这是一个关于数组、日期和时间、DOM操作、函数、数字和对象的JavaScript实用工具库。
Vanilla JS代码挑战
30天香草JS代码挑战是Wes Bos的一个免费视频课程，你将在30天内学习构建30个东西，有30个教程--没有任何框架、编译器、库或锅炉板。这是一个提高你的JavaScript技能的好方法。你还可以以GitHub的形式获得所有30天的挑战和解决方案。
Vanilla JavaScript视频速成课程是另一个免费的视频课程，有43节，从JavaScript DOM开始，一直到异步JS、Babel和Webpack以及JavaScript密码生成器。
本土化的JavaScript日期和时间格式
我们还需要像Moment.js或date-fns这样的库来格式化JavaScript日期和时间吗？现在的本地浏览器功能相当不错，浏览器的支持也很好，但不一定，正如Elijah Manor所指出的。
Elijah总结了三种处理时间和日期的不同方法。当你想要一个只包含数字的日期，一个长字的日期，或者一个以不同语言输出的日期时，toLocaleDateString 方法就很方便。如果你只需要输出一个JavaScript日期对象的时间部分，还有toLocaleTimeString 。
最后，通用方法toLocaleString ，让你把前几个方法中的一个或所有选项都传到一个方法中。Elijah建立了一个CodeSandbox游乐场，你可以在那里试验不同的方法。
this 对比一下。that
对一个主题的深入了解，实际上在于理解解决同一问题的不同方法之间的微妙差别。nodeName 与tagName 有何不同？两个增量运算符有什么不同，例如：++value 和value++?this vs.that是一个友好的参考网站，正是为了解决这类问题。
Phuoc Nguyen的小资料库不断增长，解释了JavaScript和TypeScript的属性和函数之间的差异，以及DOM、HTML和CSS。另外，WTF.js也是一个不断增长的资料库，其中包含了围绕JavaScript的常见头痛问题、麻烦和意外行为。
编写干净、可重用的代码
没有人喜欢处理写得不好的代码，但在现实中，这种情况经常发生。为了帮助我们做得更好，Ryan McDermott从Robert C. Martin的书《_Clean Code_for JavaScript》中改编了软件工程原则。其结果是，在JavaScript中制作可读、可重用和可重构的软件的实用指南。
从使变量具有意义和解释力，到限制函数的数量和处理错误，该指南比较了好的和坏的代码例子。当然，并不是每条原则都要严格遵守，但这些指南可以帮助你评估你和你的团队所编写的JavaScript代码的质量。
JavaScript的正确方法
学习一门新的语言可能是一个相当大的挑战，尤其是当有这么多的工具和框架可以让你发挥出它的最大作用时，就像JavaScript一样。为了防止你在所有的可能性中迷失方向，并帮助你从头开始学习最佳实践，William Oliveira和Allan Esquina编写了《JavaScript的正确方法》指南。
该指南既针对初学者，也针对想深入了解JavaScript最佳实践的有经验的开发者，它收集了来自顶级开发者的文章、技巧和窍门，涵盖了从最基本的代码风格、工具、框架、游戏引擎、阅读资源、截屏等所有内容，使开发者的生活更加轻松。该指南有八种语言版本。一个充满了JavaScript智慧的金矿。
如果你需要再次深入了解JavaScript，Kyle Simpson的《你不知道的JS》总是一个很好的起点（Kyle目前正在编写第二版，也有很多书籍和视频课程可以探索）。
挑选合适的JavaScript框架
在选择一个新的JavaScript框架时，有很多选择。但是你需要一个吗？如果需要的话，如何挑选合适的呢？Sacha Greif的12点检查表强调了在评估任何新的JavaScript库时需要记住的12点。最值得注意的是，功能、性能、学习曲线、兼容性和记录。
Perf-Track跟踪框架的规模性能。它基本上跟踪Angular、React、Vue、Polymer、Preact、Ember、Svelte和AMP在移动和桌面上的Core Web Vitals方面的性能。该数据集目前仍来自2020年，但它让我们了解到使用这些框架的网站在野外的表现如何。例如，使用Gatsby的React比使用Create React应用创建的网站表现更好。
Tim Kadlec也围绕这个问题进行了一些研究，比较了jQuery、Vue.js、Angular和React。最终的结果是：目前的框架在优先考虑功能较弱的设备和帮助缩小桌面和移动之间的差距方面做得还不够。这些数据至少可以给你一些背景，让你做出更明智的决定。
独立的普通JS库
下面的库是微小的、没有任何依赖性的香草式JavaScript库。正如它们是轻量级的，有时你可能需要做一些调整，例如为屏幕阅读器提供公告，或支持传统的浏览器。你可能也想看看《无障碍前端组件完整指南》。
- 360度视图
ThreeSixty.js是一个将图像精灵变成360度图像的工具。 - 动画
Anime.js是一个轻量级的动画库，可与CSS属性、SVG、Dom属性和JavaScript对象一起使用。此外，Sal.js也是一个轻量级的滚动动画库。 - 数据可视化
Clusterize.js是一个小型的JavaScript库，用于显示大型数据集。 - 过滤
MixItUp 3提供动画过滤、排序、插入和删除。 - 表格
Choices.js是一个可配置的<select>-box/text输入插件。 - 图片全屏预览
Intense Image Viewer，一个用于全屏查看图片的库。 - 图片库
PhotoSwipe，支持触摸手势和浏览器历史API。 - Masonry Layout
Columns.js和Waterfall.js是用Vanilla JavaScript编写的Masonry布局的选项。 - 媒体播放器
媒体播放器，一个跨浏览器、可访问、可定制的媒体播放器，用普通JavaScript编写。 - 模态
Scott O'Hara的accessible_modal_window。 - 视差
Rellax.js是一个轻量级的vanilla JavaScript视差库（如果你绝对需要）。 - Reactive states
Reef，一个用于创建反应式、基于状态的UI的轻量级库。 - 搜索
InstantSearch.js是一个开源的 UI 库，可以让你在前端应用程序中建立一个搜索界面。 - 滑块和旋转木马
Siema,Glide,Splide.js和Swipe.js。 - 滑出式导航
Slideout.js是一个用于移动视图的触摸滑出式导航菜单。 - Spinners
Spin.js动态地创建旋转的活动指示器，不需要图像或依赖性，作为本地ES模块分发。 - 粘性元素
HC-Sticky使页面上的任何元素在自定义滚动时可见。也可以考虑在CSS中使用position="sticky"来代替）。 - 粘性导航
MenuSpy，一个用于粘性导航条的小的JavaScript，当用户滚动页面的部分时，它就会发生变化。 - 表格过滤器和列表
List.js为普通的HTML列表和表格添加搜索、排序和过滤器。 - 表格排序
Tablesort是一个简单的表格排序组件。 - 过渡
Barba.js是视差的一个很好的替代方案，页面之间有流畅的过渡。 - 倾斜
Tilt-Vanilla.js是一个平滑的3D倾斜的JavaScript库。 - Typewriter Text Effect
Typewriter JS生成了一个打字机效果。 - Visual sparkles
Speckle.js是一个JavaScript模块，可以为任何元素添加响应的、风格化的斑点。 - WYSIWIG文本编辑器
Froala、Etherpad和SunEditor是香草式的JavaScript所见即所得文本编辑器。如果你想建立自己的编辑器，ContentTools是一个为HTML内容建立所见即所得编辑器的库。
