前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
  • JavaScript Part 1

    • Ajax总结篇
    • Canvas 绘制八大行星
    • DOM编程之API学习总结篇
    • JavaScript事件机制
    • JavaScript代码片段100个
    • JavaScript作用域分析总结
    • JavaScript原型链回顾
    • JavaScript及jQuery中的各种宽高属性图解
    • JavaScript工程项目的一系列最佳实践
    • JavaScript常用API合集
    • JavaScript数组、字符串、对象常用方法
    • JavaScript数组方法总结篇
    • JavaScript深浅拷贝
    • JavaScript运动框架之速度时间版本
    • JavaScript运行机制Event Loop
    • JavaScript防抖节流原理
    • Javascript中的复制粘贴功能
    • Javascript数组详解
    • OOP之原型与原型链
    • Object.defineProperty详解
    • V8源码浅析JS数组常见方法
    • await 在 forEach 中不生效解决方案
    • iframe+表单跨域提交POST请求
    • javascript笔记总结篇
    • 业务中处理数据结构常用的JS方法
    • 作用域
    • 你真的掌握变量和类型了吗
    • 前后端分离之数据Mock
    • 原型与原型链
    • 原生JS补给(上)
    • 如何写出一个惊艳面试官的深拷贝
    • 带你填一些JS容易出错的坑
    • 彻底弄懂 JavaScript 执行机制
    • 执行上下文 执行栈
    • 正则回顾总结
    • 正则基础知识
    • 正则完整篇
    • 正则表达式
    • 浅析Promise原理
    • 浅谈JavaScript中的异步处理
    • 深拷贝 vs 浅拷贝
    • 聊一聊typeof instanceof 实现原理.
    • 聊一聊闭包
    • 高阶函数map reduce filter
  • JavaScript Part 2

  • CSS

  • HTML

  • Jquery

  • ES6

  • 小程序

  • Vue

  • React

  • 深入React

  • React Native

  • NodeJS

  • Angular

  • TypeScript

  • Webpack

  • 浏览器

  • 移动端

  • 前端工程化

  • Electron

  • HTTP

  • Nginx

  • Linux

  • 数据结构与算法

  • LeetCode算法题

  • 综合

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

轻量高效的开源JavaScript插件和库|博客系列

# 图片

  • baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。 demo
  • Lightgallery.js - 是一个功能齐全的JavaScript图像灯箱插件。 demo
  • viewerjs - 是一个图像预览插件。 demo
  • cropperjs - 是一个图片编辑器插件。 demo
  • photo-editor - 是一个本地图片编辑器插件。 demo
  • blazy.js - 是一个懒惰加载插件。 demo

# 布局

  • SuperEmbed.js - 是一个Javascript库,可检测出网页上的内嵌视频并使他们能够变成响应式元素。 demo
  • ScrollReveal - ScrollReveal插件使用户能够无比轻松地创建桌面和移动浏览器的网页滚动动画。 demo
  • Bricks.js - 是一款超快的用于固定宽度元素的“砖石”布局生成器。 demo

# 轮播图

  • Swipe - 准确的触摸滑块。 demo
  • Lory - 是一个由 Vanilla JavaScript 编写的拥有触摸功能的简约滑块。 demo
  • baguetteBox.js - 是一个简单、易用的响应式 Lightbox 图片库,它支持移动端上触滑动手势操作,无依赖。 demo

# 弹出层

  • Popper.js - 是一个轻量级的库用于管理工具提示和弹窗效果。 demo
  • SweetAlert2 - 是一个颜值很高而且可以自定义的警告弹出窗口插件,可以代替Javascript的弹出窗口。 demo
  • artDialog - 是一个经典、优雅的网页对话框控件。 demo
  • layer - 是一个web弹层组件。 demo

# 音频视频

  • Loud Links - 是一个轻量级的JavaScript库用于添加交互声音到您的站点。 demo
  • flv.js - B 站 HTML5 播放器内核开源。
  • Loud Links - 是一个轻量级 JavaScript 库,用于向您的网站添加交互音频。。 demo

# 编辑器

  • MediumEditor - 仿Medium.com的所见即所得在线编辑器工具栏。 demo
  • Substance - 是一个基于Web的内容自定义编辑器。 demo
  • flatpickr - 是一个轻量级的代码高亮库,适用于任何编程语言。 demo
  • pen - 是一个Markdown编辑器工具。 demo
  • aceAce( Ajax.org Cloud9 Editor)。 demo
  • CodeMirror浏览器端的代码编辑器。 demo
  • esprima用于综合分析的 ECMAScript 解析器。 demo
  • quill一个带有 API 的跨浏览器富文本编辑器。( demo)
  • ckeditor-releases 适用于每个人的 web 文本编辑器。 demo
  • editor 一个 markdown 编辑器,但仍在开发中。 demo
  • EpicEditor 一个可嵌入的 js Markdown的编辑器,拥有全屏编辑、即时预览、自动保存草稿和离线支持等功能。 demo
  • jsoneditor 查看、编辑和格式化 JSON 的 web 工具。 demo
  • vim.js  拥有持久化 ~/.vimrc 的 Vim 编辑器的 JavaScript 移植版本。 demo
  • Squire HTML5 富文本编辑器。 demo
  • TinyMCE JavaScript 富文本编辑器。 demo
  • trix 由 Basecamp 制作,适用于每天写作的富文本编辑器。 demo
  • Editor.md 由 Basecamp 制作,适用于每天写作的富文本编辑器。 demo

# 字符串

  • selecting - 一个允许你获取用户选定文本的库。
  • string.js - 额外的 JavaScript 字符串方法。 demo
  • he - 健壮的 HTML 实体编码/解码器。
  • multiline - 多行字符串。
  • query-string - 解析和字符串化 URL 查询字符串。
  • URI.js - URL 操作库。 demo
  • jsurl - 轻量的 URL 操作库。
  • sprintf.js - 实现字符串格式化。
  • url-pattern - 让 url 和其它字符串进行比正则表达式匹配更简单。字符串和数据可相互转化。
  • Numeral.js - 格式化和操作数字的 JS 库。 demo

# 表单

  • validator.js - 轻量级的JavaScript表单验证,字符串验证。 demo
  • List.js - 是一个轻量级的为列表、表格或其他任何HTMLL标签增加了搜索,排序,过滤器和灵活性等元素。 demo
  • Algolia Places - 是一个能让你在网页轻易实现搜索栏自动完成功能。 demo
  • Cleave.js - 是一个会在你输入时格式化你的<input/>标签里面的内容。 demo
  • validator.js - 是一个简单、轻量级,但功能强大的 Validator 组件。 demo
  • axios - 是一个基于浏览器和node的HTTP请求库,绿色环保只有12kb。

# 存储

  • store.js - 本地存储localstorage的封装,提供简单的API。 demo
  • cookie.js - 对操作cookie的封装,提供简单的AIP 兼容IE6。 demo
  • store.js - 为所有浏览器封装了LocalStorage,隐秘地使用localStorage、globalStorage和用户数据。
  • localForage - 改善后的离线存储。封装了IndexedDB、WebSQL和localStorage。 demo
  • cross-storage - 获得权限后,能跨域名本地存储。
  • basket.js - 用 localStorage 加载和缓存脚本的资源加载器。 demo
  • bag.js - 可以缓存脚本和加载资源,增加了键值对接口和对localStorage/websql/indexedDB 的支持。
  • basil.js - 智能的 JavaScript 数据持久层库。
  • Cookies - 客户端 Cookie 操作库。
  • DB.js - 基于 Promise 的、封装了 IndexedDB 的库。 demo
  • lawnchair.js - 简单的客户端 JSON 存储。 demo

# 动画

  • anime.js - 是一个灵活轻便的JavaScript动画库。 demo
  • three.js - 是一个JS 3D库。 demo
  • loaders.css - CSS 动画加载效果。 demo
  • Hover.css - 一款基于 CSS3 的悬停特效合集。 demo
  • Effeckt.css - 一个包含众多精妙的 CSS3 切换和动画效果库。 demo
  • Magic Animations - 一个独特的 CSS3 动画特效包。 demo
  • Transformicons - 一个结合 SVG、CSS 和 HTML 技术,让图标、按钮和符号具有变种(特殊)动画效果的库。 demo
  • SpinKit - 一款 CSS 加载动画合集,可高度自定义动画效果。 demo
  • d3-ease - 这是一个让动画更为平滑的 Easing 库。
  • ScrollMagic - 一个用来创建魔幻滚动交互的 JavaScript 库,可以像使用进度条一样使用滚动条。 demo
  • ScrollReveal - 一款页面滚动显示动画,可以播放一次也可以播放无限次,能让页面更加有趣,更吸引用户眼球。。 demo
  • RELLAX.js - 是一款主打轻量级的纯 JavaScript 视差效果库。 demo
  • CountUp.js - 可以用来快速创建以一种更有趣的动画方式显示数值数据。 demo
  • Dynamics.js - 可以创建物理运动动画效果 JavaScript 库。 demo
  • Mojs - 一个拥有极简的声明式 API ,能够轻松掌控运动轨迹,为运动图形而生的工具库。 demo
  • React FLIP Move - 一个翻转移动的库,旨在解决当列表的顺序发生变化时,项目列表动画化的问题。 demo
  • tween.js - 是一个JS 平滑动画库。 demo
  • vivus - JavaScript库,使SVG绘制动画。 demo
  • Choreographer-js - 是一个用于处理复杂动画的简单库。 demo
  • minirefresh - 优雅的H5下拉刷新。零依赖。 demo

# 时间

  • moment - 是一个日期处理类库,用于解析、检验、操作、以及显示日期。 demo
  • date-fns - 现代JavaScript日期实用程序库。 demo
  • luxon - 在JS中使用日期和时间的库。 demo
  • timesheet.js - 是一个时间展示片段插件。 demo
  • date.js - 是一个格式化时间、过去时间展示、解决因时区变更插件。
  • timeago.js - 格式化时间显示多久以前的插件。 demo
  • rome - 可定制的日期(和时间)选择器。无依赖,可选 UI。 demo
  • moment-timezone - 基于 moment.js 的时区库。 demo
  • date - 拥有人性化的 Date() 方法。 demo
  • ms.js - 小巧的毫秒转换工具。

# 其它

  • hotkeys - 是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键。 demo
  • clipboard.js - 现代复制到剪贴板。没有Flash,gzip压缩只有3KB 。 demo
  • translater.js - 这是一个利用HTML注释的页面翻译解决方案。 demo
  • scrollama - 为 Scrollytelling 开发的现代、轻量级的 JavaScript 库。 demo
  • Push.js - 是一个跨浏览器的Javascript桌面通知插件。 demo
  • onlinenetwork - js判断是否断网了。
  • iNotify - 是一个实现浏览器的 title 闪烁、滚动、声音提示、chrome、等系统通知。 demo
  • tesseract.js - 是一个文字识别转换,可以运行在浏览器和服务器NodeJS上。 demo
  • Leaflet.js - 是一个开源的移动友好交互式地图 JavaScript 库。体积仅有 33 KB。 demo
  • CurrencyFormatter.js - 是一款简单纯JS格式化155种不同国家货币格式库,gzip压缩后仅7KB。 demo
  • Feature.js - 是一个快速、简单、轻量级的浏览器功能检测库。它没有任何的依赖,并且 gzip 压缩后仅有1kb。 demo
  • screenfull.js - 极小、跨平台的 JavaScript 全屏插件。 demo

# 加载器

  • requirejs - JS模块化工具
  • SeaJS - JavaScript模块加载框架
  • loadjs - JavaScript模块加载框架
  • ESL - 浏览器端AMD标准加载器

# 构建工具

  • webpack - 前端构建工具
  • Gulp - 自动化构建工具
  • Babel - 下一代JavasScript语法编译器
  • PostCSS - 利用JS插件转换CSS样式的工具
  • Grunt - JavaScript世界的构建工具
  • rollup.js - JS模块打包器
  • webpack-dashboard - webpack开发服务器的CLI仪表板
  • traceur-compiler - 支持ES6的JS编译器
  • brunch - 超快的HTML5构建工具
  • Helium-css - 显示网站中未使用的CSS

# 测试

← 虚拟DOM(二)

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
  • JavaScript Part 1

    • Ajax总结篇
    • Canvas 绘制八大行星
    • DOM编程之API学习总结篇
    • JavaScript事件机制
    • JavaScript代码片段100个
    • JavaScript作用域分析总结
    • JavaScript原型链回顾
    • JavaScript及jQuery中的各种宽高属性图解
    • JavaScript工程项目的一系列最佳实践
    • JavaScript常用API合集
    • JavaScript数组、字符串、对象常用方法
    • JavaScript数组方法总结篇
    • JavaScript深浅拷贝
    • JavaScript运动框架之速度时间版本
    • JavaScript运行机制Event Loop
    • JavaScript防抖节流原理
    • Javascript中的复制粘贴功能
    • Javascript数组详解
    • OOP之原型与原型链
    • Object.defineProperty详解
    • V8源码浅析JS数组常见方法
    • await 在 forEach 中不生效解决方案
    • iframe+表单跨域提交POST请求
    • javascript笔记总结篇
    • 业务中处理数据结构常用的JS方法
    • 作用域
    • 你真的掌握变量和类型了吗
    • 前后端分离之数据Mock
    • 原型与原型链
    • 原生JS补给(上)
    • 如何写出一个惊艳面试官的深拷贝
    • 带你填一些JS容易出错的坑
    • 彻底弄懂 JavaScript 执行机制
    • 执行上下文 执行栈
    • 正则回顾总结
    • 正则基础知识
    • 正则完整篇
    • 正则表达式
    • 浅析Promise原理
    • 浅谈JavaScript中的异步处理
    • 深拷贝 vs 浅拷贝
    • 聊一聊typeof instanceof 实现原理.
    • 聊一聊闭包
    • 高阶函数map reduce filter
  • JavaScript Part 2

  • CSS

  • HTML

  • Jquery

  • ES6

  • 小程序

  • Vue

  • React

  • 深入React

  • React Native

  • NodeJS

  • Angular

  • TypeScript

  • Webpack

  • 浏览器

  • 移动端

  • 前端工程化

  • Electron

  • HTTP

  • Nginx

  • Linux

  • 数据结构与算法

  • LeetCode算法题

  • 综合