日常见到的一些js轮子

FileSaver.js

• 主要文件下载原理还是通过 a 标签来进行的
• 主要区分了跨域、不跨域
• 跨域的话，直接 a 标签点击
• 不跨域的话，手动请求返回，生成由blob转化的url，然后再点击

与传统的直接 a标签点击 下载，多了一步转化为blob转化过程，可以避免浏览器闪动，或者特殊格式（例如json），浏览器直接打开现象的发生。

新知识

URL.revokeObjectURL

创建经常有，释放往往会被忽略。

• URL.revokeObjectURL 释放由 URL.createObjectURL()创建的对象URL

判断是否跨域

function corsEnabled (url) {
  var xhr = new XMLHttpRequest()
  // use sync to avoid popup blocker
  xhr.open('HEAD', url, false)
  try {
    xhr.send()
  } catch (e) {}
  return xhr.status >= 200 && xhr.status <= 299
}

click事件兼容性写法

// `a.click()` doesn't work for all browsers (#465)
function click (node) {
  try {
    node.dispatchEvent(new MouseEvent('click'))
  } catch (e) {
    var evt = document.createEvent('MouseEvents')
    evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80,
                          20, false, false, false, false, 0, null)
    node.dispatchEvent(evt)
  }
}

vue-typed-js

• 基于 typed.js 的 vue版打字机效果

• typed.js 是主要是基于setTimeout来控制出字速度。

Motio

• 用作精灵动画和平移的jquery插件
• 基于 requestAnimationFrame 来实现速度控制

Bounce.js

• 基于 css3 实现动画效果
• 基于 Grunt 构建的项目
• 基于 CoffeeScript 编写的项目

favico.js

• 一个js库可以使用徽标、图像、视频等来设置网页的favicon，即网页标题栏上的小图标
• 进一步了解可见：favico.js笔记
• 实现原理：根据 canvas 来生成新的favicon

animejs

• 压缩后仅7kb, 易用，能实现较复杂的效果

dayjs

• 日期处理库

onlinenetwork

• 判断是否断网了

ua-device

• userAgent解析库

IconPark

• IconPark提供了超过2000个高质量图标，并且提供了一个界面来帮你定制图标。

Numeral-js

• 一个用于格式化和处理数字的javascript库

Hammer.js

• 手势
• A javascript library for multi-touch

headtrackr

• 用于实时脸部追踪和头部追踪的 JS 库

其他

后续再继续补充。。。

参考

• 能解决 90% 需求的js库
• 前端常用网站汇总，一定有你想要的