好用的67个前端工具、库和资源

这个列表包含许多种类的资源,所以这里我将它们分组整理。

Javascript 库

Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库

Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库

Fullpage.js— 快速实现全屏滚动特性

Typed.js — 打字机效果

Waypoints.js — 滚动到某个元素位置时触发一个功能

Highlight.js — web 语法高亮

Chart.js — 使用 JavaScript 创建漂亮的图表

Instantclick — 能够明显加速网站加载时间,鼠标 hover 时预加载资源

Chartist — 另一个图表库

Motio — 一个基于动画和平移的雪碧图库

Animstion — CSS 实现动画过渡的 jQuery 插件

Barba.js — 流式页面过渡

TwentyTwenty — 一个对比图片的可视化 diff 工具

Vivus.js — 在 SVG 上绘制动画

Wow.js — 滚动时展现动画

Scrolline.js — 页面滚动时显示滚动进度

Velocity.js — 快速流畅的 JavaScript 动画

Animate on scroll — 漂亮的页面滚动元素动画

Handlebars.js — Javascript 模板

jInvertScroll — 视差滚动

One page scroll — 又一个页面滚动库

Parallax.js — 对智能设备方向变化做出响应的视差引擎

Typeahead.js — 搜索补全

Dragdealer.js — 炫酷拖拽

Bounce.js — 创建炫酷的 CSS3 动画

Pagepiling.js — 全屏滚动

Multiscroll.js — 两列垂直反向滚动

Favico.js — 动态 favicon

Midnight.js — 固定头部切换效果

Anime.js — 动画库

Keycode — 获取键盘按键的 JavaScript keycode

Sortable — 拖拽插件

Flexdatalist — 自动补全

Slideout.js — 移动应用侧滑导航

Jquerymy — 使用 jQuery 实现双向数据绑定

Cleave.js — 实时格式化输入内容

Page — 客户端单页应用路由

Selectize.js — 用来添加 tag 的 Hybrid 选择框

Nice select — 创建漂亮的选择框的 jQuery 库

Tether — 使用固定定位来创建相关元素

Shepherd.js — 为应用创建新手引导

Tooltip — tooltip 提示框

Select2 — Jquery 选择框插件

IziToast — 通知弹窗实现

IziModal — 模态框实现

CSS 库 / 设计相关

Animate.css — 动画库

Flat UI Colors — 扁平化设计配色

Material design lite— 基于 Google material design 的框架

Colorrrs — 随机颜色生成器

Section separators — CSS 实现区域分割

Topcoat — 框架

Create ken burns effect — 使用 CSS3 动画实现 Ken burns 特效

DynCSS — 给 CSS 添加 function,动态化 CSS

Magic animations — CSS3 实现动画特效

CSSpin — css spinners 合集

Feather icons — Icon 集合

Ion icons — Icon 集合

Font awesome — Icon 集合

Font generator — 组合多个字体创建混合字体

On/Off switch — 使用 CSS 创建 on/off 开关、radio 按钮

UI Kit — 框架

Bootstrap — 框架

Foundation — 框架

有用的产品/链接

cheatsheet — 可以写在

中的所有标签

Ghost — 基于 Node.js 的博客平台

What runs — 一个用于网站技术分析的 Chrome 插件

Learn anything — 一个强大的用于分析某个主题的思维导图

以上就是好用的67个前端工具、库和资源 的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1544959.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:24:04
下一篇 2025年12月21日 16:24:12

相关推荐

  • 怎样零基础学习前端开发

    对于很多想转行的朋友来说,最大的担心就是觉得自己对计算机不太懂,最多会打个游戏,更别说计算机语言基础了。担心自己一点基础没有,不会学也学不会。下面我们就以前端开发为例,分享下如何零基础学会前端开发。 1.首先学习前端,必须要学会的就是HTML和CSS。 有关HTML和CSS的相关基础知识点,可以在P…

    好文分享 2025年12月21日
    000
  • javascript如何实现表单验证_有哪些最佳实践

    JavaScript表单验证核心是提交前快速反馈错误以提升体验,但不可替代后端校验;需结合原生API、解耦规则、无障碍支持及前后端协同。 JavaScript 表单验证的核心目标是:在用户提交前快速反馈错误,提升体验,同时不能替代后端校验。实现上应兼顾即时性、可访问性与健壮性,而非仅靠 onsubm…

    2025年12月21日
    000
  • javascript的数组去重有哪些方法_如何兼顾性能和可读性

    JavaScript数组去重首选[…new Set(arr)],简洁高效且语义清晰;大数组或旧环境用Map手动遍历实现O(n)性能;对象数组需自定义key比较逻辑;封装成uniqBy等函数可提升复用性与可读性。 JavaScript 数组去重有多种实现方式,兼顾性能和可读性关键在于:小数…

    2025年12月21日
    000
  • Javascript如何实现函数组合_如何构建管道数据流?

    函数组合(compose)从右到左执行,如f(g(h(x)));管道(pipe)从左到右执行,更符合阅读顺序;二者均通过reduce或reduceRight实现,依赖纯函数与一元化设计以保障可靠性。 函数组合和管道数据流的核心是把多个小函数像积木一样串起来,让数据从一个函数“流”向下一个,最终得到结…

    2025年12月21日
    000
  • javascript怎样进行物理模拟?_javascript的物理引擎如何集成?

    JavaScript需借助第三方物理引擎实现物理模拟,推荐Matter.js(2D易用)、Planck.js(高精度2D)、Cannon.js(3D)、Impulse.js(轻量);集成时应隔离物理循环与UI框架,谨慎同步状态以保证稳定性。 JavaScript 本身不内置物理模拟能力,但可以通过第…

    2025年12月21日
    000
  • javascript中的闭包是什么_它有哪些应用场景?

    闭包是JavaScript中函数能记住并访问其定义时词法作用域变量的机制,用于封装私有变量、解决循环事件绑定问题、实现柯里化与高阶函数、模块模式封装,但需防范内存泄漏。 闭包是 JavaScript 中一个函数能记住并访问其定义时所在词法作用域的变量,即使这个函数在别处执行。简单说,就是一个内部函数…

    2025年12月21日
    000
  • 如何使用javascript操作DOM_常见方法有哪些?

    JavaScript操作DOM的核心是通过内置API获取、修改、添加或删除页面元素;常用方法包括getElementById、querySelector、innerHTML、classList、createElement、addEventListener等,配合事件委托可高效实现动态交互。 Java…

    2025年12月21日
    000
  • 如何实现JavaScript验证表单_前端验证的最佳实践是什么

    JavaScript表单验证核心是提升体验与保障基础数据质量,但不可替代后端验证;需结合HTML5原生属性与JS增强交互,确保提示清晰可访问,并始终信任后端校验。 JavaScript 表单验证的核心目标是提升用户体验和保障基础数据质量,但它不能替代后端验证。前端验证应快速反馈、友好提示、不干扰正常…

    2025年12月21日
    000
  • JavaScript树形结构数据如何操作?

    JavaScript树形结构操作核心是递归与引用处理:查找需递归匹配id并判空children;添加需先定位父节点并初始化children;删除须从父级children中过滤目标节点;扁平化用DFS递归,还原依赖parent_id分组挂载。 JavaScript树形结构数据操作核心是递归和引用处理,…

    2025年12月21日
    000
  • 如何用javascript处理JSON数据_解析和序列化怎么做?

    JavaScript处理JSON靠JSON.parse()和JSON.stringify():前者将字符串转对象并支持reviver过滤,后者将对象转字符串并支持replacer和缩进;二者均不支持函数、undefined、Symbol及循环引用,需手动处理或容错。 JavaScript 处理 JS…

    2025年12月21日
    000
  • javascript CSP策略是什么_如何防止跨站脚本攻击?

    CSP是一种浏览器强制执行的白名单式安全策略,通过HTTP头或meta标签限制资源加载以防止XSS。需禁用内联脚本与eval、改用事件监听、显式声明第三方域名,并配合服务端转义等其他防护措施。 JavaScript CSP(Content Security Policy,内容安全策略)是一种浏览器安…

    2025年12月21日
    000
  • JavaScript服务端渲染_javascriptSEO优化

    服务端渲染(SSR)通过在服务器端生成完整HTML,使搜索引擎爬虫无需执行JavaScript即可抓取页面内容,从而提升JavaScript应用的SEO效果。Next.js、Nuxt.js等主流框架提供开箱即用的SSR支持,结合动态title与meta标签、语义化结构、Open Graph标签及si…

    2025年12月21日
    000
  • 什么是javascript代理_Proxy对象能拦截哪些操作

    Proxy是JavaScript用于拦截并自定义对象基本操作的代理构造函数,通过handler提供get、set、has、deleteProperty等trap拦截读写、枚举、构造等行为,支持校验、日志、响应式等场景。 JavaScript 的 Proxy 对象是一个用于创建代理(proxy)以拦截…

    2025年12月21日
    000
  • javascript的SEO优化有哪些方法_如何让单页应用被搜索引擎收录

    单页应用(SPA)需通过服务端渲染(SSR)、预渲染或动态渲染使爬虫获取完整HTML,辅以语义化标签、动态元信息、规范路由及Sitemap等基础SEO实践来提升搜索引擎收录效果。 单页应用(SPA)默认对搜索引擎不友好,因为传统爬虫难以执行 JavaScript 渲染页面内容。要让搜索引擎收录 SP…

    2025年12月21日
    000
  • JavaScript模块化有哪些规范_CommonJS和ES6有何区别?

    JavaScript模块化主流规范有CommonJS和ES6 Module两种广泛落地,前者用于Node.js默认环境,后者获现代浏览器及新版Node原生支持;AMD/CMD已基本淘汰。 JavaScript模块化主要有四种主流规范:CommonJS、AMD、CMD 和 ES6 Module(ESM…

    2025年12月21日
    000
  • javascript的Cookie是什么_如何设置和读取用户信息?

    Cookie是浏览器提供的客户端小型文本存储机制,用于保存登录状态等数据,由服务器通过Set-Cookie设置、浏览器自动回传,具大小限制、作用域控制及HttpOnly等安全属性。 Cookie 是浏览器提供的一种小型文本存储机制,用于在客户端(用户电脑)保存少量数据,比如登录状态、用户偏好或会话标…

    2025年12月21日
    000
  • JavaScript中如何实现模块化_CommonJS和ES6区别

    JavaScript模块化主要有CommonJS和ES6两种方式:前者用require/module.exports,运行时同步加载,Node原生支持;后者用import/export,编译时静态分析,浏览器和新Node版本原生支持;二者长期共存、各司其职。 JavaScript模块化主要靠 Com…

    2025年12月21日
    000
  • javascript的Date对象有哪些坑_如何处理时区和格式化问题

    JavaScript Date对象四大坑:一、字符串构造默认本地时区解析,无偏移ISO串按UTC解析致日期偏差;二、getXXX()方法返回本地时间值,需用getUTCXXX()获取UTC值;三、格式化方法行为不一致且难定制,推荐Intl.DateTimeFormat或专业库;四、Date仅存毫秒数…

    2025年12月21日
    000
  • javascript npm是什么_如何管理和使用第三方包?

    %ignore_a_1%是JavaScript的包管理工具,既指在线仓库npmjs.com,也指本地命令行工具,用于安装、更新、卸载和管理第三方模块;通过npm init初始化项目生成package.json,npm install安装依赖并更新node_modules与package-lock.j…

    2025年12月21日
    000
  • javascript函数如何工作_闭包在实际项目中有什么用途

    JavaScript函数是“一等公民”,执行时创建含词法环境和变量环境的执行上下文;闭包即函数与其定义时词法环境(含自由变量)的组合,实现私有状态、事件变量绑定、函数工厂等功能。 JavaScript 函数本质上是“一等公民”,可以被赋值、传递、返回,甚至在运行时动态创建。函数执行时会创建自己的执行…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信