开源巨献：年度最佳 JavaScript 和 CSS 开源库推荐
临风如竹
7年前
<p><a href="/misc/goto?guid=4959757173772405112" rel="nofollow,noindex">Tutorialzine</a> 每个月都会公布一次当月新增的 JS 和 CSS 库。2018 新年之际，该网站整理出了 2017 年最受用户欢迎和喜爱的一些 JS 和 CSS 库，供大家学习和参考。</p> <p><img src="https://simg.open-open.com/show/36db01d89ec32af97be3ebcf31c5eaa4.png"></p> <p><a href="/misc/goto?guid=4959757173865977679" rel="nofollow,noindex">JavaScript 本地存储库 localForage</a></p> <p><img src="https://simg.open-open.com/show/5097d3f0339349e66aece4f85c1feac8.png"></p> <p>localForage 是一个 JavaScript 库，提升了应用程序的离线体验，通过使用异步的数据存储，提供简单的类似 localStorage 的 API，允许开发者存储多种类型数据。</p> <p><a href="/misc/goto?guid=4959757173941838321" rel="nofollow,noindex">CSS3 驱动的动画滚动库 AOS</a></p> <p><img src="https://simg.open-open.com/show/26f5cd44762f0c6885261caf32f64a7e.png"></p> <p>AOS（Animate on scroll）是小型动画滚动库，可在页面滚动时给元素添加动画效果。CSS3 驱动，效果类似于 WOWJS。</p> <p><a href="/misc/goto?guid=4959731079963674787" rel="nofollow,noindex">响应式邮件标识语言 MJML</a></p> <p><img src="https://simg.open-open.com/show/42baa24dfa3e47e9bbbc8b0b12d4e7d2.png"></p> <p>MJML 是一个标识语言，用来减少编写响应式邮件的复杂度。其语义语法在展示丰富邮件内容时更加简单和直观。该项目提供一个开源的引擎用来将 MJML 标识语言转成 HTML。</p> <p><a href="/misc/goto?guid=4959757174051456604" rel="nofollow,noindex">基于浏览器的代码编辑器 Monaco-Editor</a></p> <p><img src="https://simg.open-open.com/show/9735bf227afe8936d34bb37249f654a1.png"></p> <p>Monaco Editor 是微软开源的基于 VS Code 的代码编辑器，运行在浏览器环境中。编辑器提供代码提示，智能建议等功能。供开发人员远程更方便的编写代码。</p> <p><a href="/misc/goto?guid=4959757174139958596" rel="nofollow,noindex">Web 虚拟现实框架 A-Frame</a></p> <p><img src="https://simg.open-open.com/show/ff99873b5de0c831c6b1d21ed783cf0a.png"></p> <p>A-Frame 是 Mozilla 开源的网页虚拟现实体验（ WebVR ）框架，可用于桌面、iPhone（即将支持安卓）以及 Oculus Rift。A-Frame 可以让创建 WebVR 体验变得更简单。</p> <p><a href="/misc/goto?guid=4958854183104309941" rel="nofollow,noindex">Web 前端 UI 框架 Bootstrap 4</a></p> <p><img src="https://simg.open-open.com/show/a4a1faf46f422ef895fd18276a56e1be.png"></p> <p>Bootstrap 4 带来了许多变化和新特性，包括基于 flexbox 的网格系统，新的和重新定义的组件，以及更快的 ES6 JavaScript 插件。 另一个很酷的新功能是自动布局模式。 它允许开发人员忽略列的大小，可自动分配该行中的空间。</p> <p><a href="/misc/goto?guid=4959757174250706538" rel="nofollow,noindex">前端代码格式化工具 Prettier</a></p> <p><img src="https://simg.open-open.com/show/93218ae0c0f4d6536449c02d38360701.png"></p> <p>Prettier 是一个自发性的 JavaScript 格式化程序，受到来自 ES2017，JSX 和 Flow 的语言功能的高级支持的启发。 它删除所有原始格式，并确保所有输出的 JavaScript 符合一致的风格。</p> <p>GPU 加速的 JavaScript <a href="/misc/goto?guid=4959757174332173214" rel="nofollow,noindex">GPU.js</a></p> <p><img src="https://simg.open-open.com/show/1dc5a751609cad714d540130a785b8f4.png"></p> <p>用于在 GPU 中运行浏览器 JavaScript 代码的库。 使用 GPU.js，您可以通过将专门编写的 JS 编译成可通过 WebGL 在 GPU 上运行的着色器语言来更快速地执行复杂的计算。 如果 WebGL 不可用，则函数将回退到常规 JavaScript。</p> <p><a href="/misc/goto?guid=4959754872246507071" rel="nofollow,noindex">HTTP 客户端 R2</a></p> <p><img src="https://simg.open-open.com/show/57e8a0c3573a538e389e2f7a89a730e5.png"></p> <p>这是一个更轻量级的 HTTP 客户端解决方案，它建立在浏览器原生的 Fetch API 的基础之上，并为 Node.js 提供优化。</p> <p><a href="/misc/goto?guid=4959757174438423675" rel="nofollow,noindex">控制 headless Chrome 的 Node.js API：Puppeteer</a></p> <p><img src="https://simg.open-open.com/show/c3f0251d53e07247f2da309f41951935.png"></p> <p>Puppeteer 是一个控制 headless Chrome 的 Node.js API 。它是一个 Node.js 库，通过 <a href="/misc/goto?guid=4959757174520499803" rel="nofollow,noindex">DevTools 协议</a> 提供了一个高级的 API 来控制 <a href="/misc/goto?guid=4959757174597411881" rel="nofollow,noindex">headless</a> Chrome。它还可以配置为使用完整的（非 headless）Chrome。</p> <p><a href="/misc/goto?guid=4959757174687394699" rel="nofollow,noindex">跨浏览器的桌面通知插件 Push.js</a></p> <p><img src="https://simg.open-open.com/show/f1ba7f663c79bdd2f0579af41d1f9895.png"></p> <p>Push.js，是一款跨浏览器的Javascript桌面通知插件。这个通知API允许在当下流行的浏览器上使用，像Chrome, Safari, Firefox,和IE 9+。可以推送一个通知到用户桌面。如果用户的浏览器不支持这个新的API，会回滚到使用旧的实现方式。</p> <p><a href="/misc/goto?guid=4959757174755594492" rel="nofollow,noindex">模块化拖放库 Draggable</a></p> <p><img src="https://simg.open-open.com/show/1f7376fab4268cf85f7859153aefb7ee.png"></p> <p>Draggable 是一个简单易用的模块化拖放库。 它提供了出色的拖放功能，快速的 DOM 重新排序，干净的 API 和可访问的标记。 Draggable 附带额外的模块，可以添加更多的功能，如排序，交换和其他实用程序。</p> <p><a href="/misc/goto?guid=4959615966417575218" rel="nofollow,noindex">小型 vanilla JS 项目 Card</a></p> <p><img src="https://simg.open-open.com/show/41700fac647f301a8878ac472e0374b7.gif"></p> <p>Card 是一个小型的 vanilla JS 项目（带有一个 jQuery 版本），让信用卡表格更加有趣。</p> <p><a href="/misc/goto?guid=4958972673279128555" rel="nofollow,noindex">模块绑定器 Webpack</a></p> <p><img src="https://simg.open-open.com/show/c705994a4765549924fc050506142aad.png"></p> <p>Webpack 是一个模块绑定器，主要目的是在浏览器上绑定 JavaScript 文件。</p> <p><a href="/misc/goto?guid=4959757174904698632" rel="nofollow,noindex">机器学习 JavaScript 库 DeepLearn.js</a></p> <p><img src="https://simg.open-open.com/show/a9b6b2d2ed7667798ac3d1cbdf923c1f.png"></p> <p>DeepLearn.js 是 Google 推出的一个可用于机器智能并加速 WebGL 的开源 JavaScript 库，完全在浏览器中运行，不需要安装，不需要后端处理。</p> <p><a href="/misc/goto?guid=4959757174976596898" rel="nofollow,noindex">Node.js CMS 和 Web 应用程序平台 KeystoneJS</a></p> <p><img src="https://simg.open-open.com/show/7bd2e470d6d4aa9ecef218a540245d1b.png"></p> <p>KeystoneJS，以 Express 和 MongoDB 为基础搭建的 Node.js CMS 和 Web 应用程序平台。</p> <p><a href="/misc/goto?guid=4959757175060808634" rel="nofollow,noindex">在 Web 应用中创建 Poppers：Popper.js</a></p> <p><img src="https://simg.open-open.com/show/6c2ab876c79433eeea803c95acb70018.png"></p> <p>Popper.js 是用来在web应用中创建Poppers的库。</p> <p><a href="/misc/goto?guid=4959757175138464871" rel="nofollow,noindex">JavaScript GraphQL 客户端 Apollo Client</a></p> <p><img src="https://simg.open-open.com/show/fd788817b8713b198c60f4cda53533f5.png"></p> <p>Apollo Client 是一个全功能的GraphQL客户端，用于 React 、Angular 的交互。允许你轻松通过 GraphQL 获取数据并构建 UI 组件。</p> <p><a href="/misc/goto?guid=4959757175217060982" rel="nofollow,noindex">跨浏览器的 css3 动画库 Animate.css</a></p> <p><img src="https://simg.open-open.com/show/3690f175ddebe766eceafc521d437622.png"></p> <p>Animate.css 是一个有趣的，跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好使用方便。</p> <p> </p> <p>来自：https://my.oschina.net/editorial-story/blog/1622283</p> <p> </p>