15 个有趣的 JavaScript 与 CSS 库详情-js教程-PHP中文网

首页

web前端

js教程

15 个有趣的 JavaScript 与 CSS 库详情

黄舟

Mar 03, 2017 pm 02:52 PM

在十一月份的前端技术列表中，我们整合了一些令人感到惊叹的 GitHub 项目，其中包含了新的 CSS 框架、node.js包管理器，以及用于实现图标、加载效果、工具提示的纯 CSS 解决方案。

那么，让我们一起来看看吧。Have Fun ！

1. Wing

Wing 是一个微型（压缩后仅有4KB）响应式的 CSS 框架，它提供了一个 12 列响应式网格以及基础的样式组件集，可为你的建站工作打下坚实的基础。当然，这个项目最酷的地方在于，它绝大多数的 HTML 元素都是自动样式化的，而不需要任何额外的类。希望你会喜欢！

HERE：Wing 项目地址

2. Shave

Shave 是一个零依赖、轻量级的 JavaScript 插件，它能截断多行文本，以适应基于 max-height 设定好的 html 元素，并将原始文本字符串存储在隐藏的元素中，以便你的文本能够完整地保留在页面中。Shave 不依赖任何库，同时它在 jQuery 中提供了一个独立版本的插件。

HERE：Shave 项目地址

3. Cerebral

一个 JavaScript MVC 应用程序状态管理器，并且它有独立的调试器。在 Cerebral 中，应用程序的状态被存储在单个的树模型中，该模型管理着所有服务器端和客户端的状态。

而调试器具有对模型、控制器以及视图的实时管理权限。

HERE：Cerebral 项目地址

4. Wenk

Wenk 是一个轻量级纯 CSS 写的文本工具提示库。虽然它的压缩版仅有700字节，但它依然能够管理并提供一些定制选项。诸如不同提示工具的大小、位置和文本对齐。

HERE：Wenk 项目地址

5. CSS Loader

CSS Loader 是一个非常有用加载器。它允许开发人员利用纯 CSS 文件，以及一个空元素便可以快速的创建加载指示器。

HERE：CSS Loader 项目地址

6. Yarn

相信近期 Facebook 推出的开源 Node.js 包管理器 Yarn，大家已经有所耳闻了。它具备强大的缓存系统，能够大大降低包的安装时间，并且能够为参与一个项目的所有用户维持相同的节点模块（node_modules）目录结构，有助于减少难以追踪的 bug 和在多台机器上复制。

虽然，它与 NPM 产生背景不同，但使用 Yarn 几乎可以等同于使用 NPM ，开发人员需要更快的了解它哦！

HERE：Yarn 项目地址

7. Canvas Gauges

Canvas Gauges 是一个利用纯 JavaScript 和 HTML5 Canvas（画布）打造的可完全自定义的仪表，你可以用它来创建诸如机动车速度表、温度计等类型的测量设备。

由于它的代码量很小，并且没有依赖，同时适用于物联网设备。你可以通过网站的示例来了解它。

HERE：Canvas Gauges 项目地址

8. CSS Icon

CSS Icon 是一个汇聚了500+ 纯 CSS 代码实现的图标集网站。使用起来也十分简单，当你点击了某一个图标，便会弹出图标对应的 HTML 与 CSS 代码，同时你可以直观的了解到 CSS 代码的什么部分，实现了图标的哪些元素。

如此棒的项目，是不是得给满分呢？快来 Enjoy吧！

HERE：CSS Icon 项目地址

9. CurrencyFormatter.jsCurrencyFormatter.js 是一款简单实用的纯 JS 格式化货币库。它支持 155 种不同国家的货币格式，以及超过 700 种不同语言的本地化设置。

此外，它还能处理某些不采用的货币格式，功能非常强大。

HERE：CurrencyFormatter.js 项目地址

10. KUTE.js

一款具有高性能的原生 JavaScript 动画引擎：KUTE.js. 它的核心库提供了所有基本的动画方法，你可以添加许多插件来丰富 KUTE 的功能。同时，它还具备单独的扩展，可以同时与jQuery、SVG、CSS属性等一起工作。

HERE：KUTE.js 项目地址

11. Vue Material

Vue Material 是一个根据 Material Design 规范构建的轻量级 Vue.js 框架。它旨在提供一组可重用的高品质组件和一系列 UI 元素，通过 Vue2.0 支持现代的 Web 浏览器来构建应用程序。

该库也很容易实现，除了 Vue.js 之外没有任何依赖。

HERE：Vue Material 项目地址

12. Test Cafe

Test Cafe 是一个纯 Node.js 编写的用于测试 Web 应用程序端到端的解决方案。它基于 Node.js，并且不需要安装 NPM 包之外的任何东西——不需要浏览器插件以及编译器。

一旦你编写了测试，运行 Test Cafe，它将为你进行浏览器测试、收集结果并创建报告。

HERE：Test Cafe 项目地址

13. Core.css

Core.css 是一个用于构建响应式网站的轻量级框架。它压缩后仅有 1.3kb，同时它没有预先设定的元素和内置动画。所以适用于搭建任何小型的 Web 项目。

HERE：Core.css 项目地址

14. Flv.js

B站相信大家都不会陌生，而 Flv.js 就是由 bilibili 网站开源的 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发（ECMAScript 6 编写），没有用到 Flash。

它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流，并实时转封装为 fmp4 ，通过 Media Source Extensions 喂给浏览器，实现了 FLV 格式视频的播放。

HERE：Flv.js 项目地址

15. Next.js

Next.js 是一个基于 React 的通用 JavaScript 框架。它提供了一种便利的方式来创建新的 JavaScript Web 应用程序。开发人员不必在搭建 Webpack 或 Babel 的配置上花费太多的时间了。

HERE：Next.js 项目地址

译者注：关于 Next.js 的详细介绍可以看这里。

以上就本文所有的分享，希望你能找到适合你项目的前端库。

以上就是15 个有趣的 JavaScript 与 CSS 库详情的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。