JavaScript常用工具函数汇总(浏览器环境)

前端业务中比较常用的JavaScript工具函数,浏览器环境常用,可直接拷贝在项目里使用。这里统一整理,方便查阅,本文章会持续更新。

一、file转为base64

/**
 * file转为base64
 * @param {*} file file对象
 * @param {*} callback
 */
export const fileToDataURL = (file, callback) => {
 let freader = new FileReader();
 freader.readAsDataURL(file);
 freader.onload = function (e) { callback(e.target.result); }
}

二、blob流转换为base64

/**
 * blob流转换为base64
 * @param {*} blob blob对象
 * @param {*} callback
 */
export const blobToDataURL = (blob, callback) => {
 let freader = new FileReader();
 freader.readAsDataURL(blob);
 freader.onload = function (e) { callback(e.target.result); }
}

三、base64转换为blob

/**
 * base64转换为blob
 * @param {*} dataurl base64
 */
export const dataURLtoBlob = (dataurl) => {
 let arr = dataurl.split(','),
  mime = arr[0].match(/:(.*?);/)[1],
  bstr = atob(arr[1]),
  n = bstr.length,
  u8arr = new Uint8Array(n);
 while (n--) {
  u8arr[n] = bstr.charCodeAt(n);
 }
 return new Blob([u8arr], { type: mime });
}

四、base64转换为file,IE低版本不兼容

/**
 * 将base64转换为file,IE低版本不兼容
 * @param {*} dataurl base64
 * @param {*} filename 文件名
 */
export const dataURLtoFile = (dataurl, filename) => {
 let arr = dataurl.split(','),
  mime = arr[0].match(/:(.*?);/)[1],
  bstr = atob(arr[1]),
  n = bstr.length,
  u8arr = new Uint8Array(n);
 while (n--) {
  u8arr[n] = bstr.charCodeAt(n);
 }
 return new File([u8arr], filename, { type: mime });
}

五、图片url转化成base64

/**
 * 图片url转化成base64
 * @param {*} url 图片url
 * @param {*} callback
 * @param {*} outputFormat 图片格式
 */
export const imgUrlToDataURL = (url, callback, outputFormat) => {
  let canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image;
  img.crossOrigin = 'Anonymous';
  img.src = url + "?timeStamp=" + new Date().getTime();
  img.onload = function () {
    canvas.height = img.height;
    canvas.width = img.width;
    // ctx.drawImage(img, 0, 0);
    ctx.drawImage(this, 0, 0, img.width, img.height);
    let dataURL = canvas.toDataURL(outputFormat || 'image/png');
    // callback.call(this, dataURL);
    callback && callback(dataURL)
    canvas = null;
  };
}

六、获取窗口尺寸

export function getViewportSize() {
 let w = 0;
 let h = 0;
 if (window.innerWidth) {
  w = window.innerWidth
  h = window.innerHeight
 } else if (document.body && document.body.clientWidth) {
  w = document.body.clientWidth
  h = document.body.clientHeight
 } else if (document.documentElement && document.documentElement.clientWidth) {
  w = document.documentElement.clientWidth
  h = document.documentElement.clientHeight
 }
 return { w, h }
}

七、浏览器环境检测

const ua = window.navigator.userAgent.toLowerCase()

// 是否微信
export const isWx = () => ua.match(/MicroMessenger/i) == 'micromessenger'

// 是否ipad
export const isIpad = () => ua.indexOf('ipad') > -1

// 是否iphone
export const isIphone = () => ua.indexOf('iphone os') > -1

// 是否uc
export const isUc = () => ua.indexOf('ucweb') > -1

// 是否windows pc
export const isWindows = () => ua.indexOf('windows') > -1

// 是否android
export const isAndroid = () => ua.indexOf('android') > -1 || ua.indexOf('adr') > -1

// 是否ios
export const isIos = () => /(iphone|ipod|ipad|ios)/i.test(ua)

// 是否qq浏览器
export const isQq = () => ua.indexOf('mqqbrowser') > -1 && ua.indexOf(' qq') < 0

// 是否qq内置浏览器
export const isQQInstalled = () => ua.indexOf(' qq') > -1 && ua.indexOf('mqqbrowser') < 0

八、开启与关闭全屏

// 开启全屏
export function launchFullscreen(element) {
 element = element || document.documentElement
 if (element.requestFullscreen) {
  element.requestFullscreen()
 } else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen()
 } else if (element.msRequestFullscreen) {
  element.msRequestFullscreen()
 } else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullScreen()
 }
}

// 关闭全屏
export function exitFullscreen() {
 if (document.exitFullscreen) {
  document.exitFullscreen()
 } else if (document.msExitFullscreen) {
  document.msExitFullscreen()
 } else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen()
 } else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen()
 }
}

九、返回顶部/指定位置,实现滚动动画

/**
 * @param {*} number 距离页面顶部的距离
 * @param {*} time 滚动所需时间 单位ms
 */
const scrolling = (number = 0, time) => {
  if (!time) {
    document.body.scrollTop = document.documentElement.scrollTop = number;
    return number;
  }
  // 设置循环的间隔时间 值越小消耗性能越高
  const spacingTime = 20;
  // 计算循环的次数
  let spacingInex = time / spacingTime;
  // 获取当前滚动条位置
  let nowTop = document.body.scrollTop + document.documentElement.scrollTop;
  // 计算每次滑动的距离
  let everTop = (number - nowTop) / spacingInex;

  let scrollTimer = setInterval(() => {
    if (spacingInex > 0) {
      spacingInex--;
      ScrollTop(nowTop += everTop);
    } else {
      clearInterval(scrollTimer); // 清除计时器
    }
  }, spacingTime);
};

// 滚动到距离页面顶部500px的位置 动画时间为300ms
// scrolling(500, 300);

十、实现锚点滚动

// 运用了H5的scrollIntoView方法,这是一个实验中的功能,IE 8以下、Safari 6以下、Safari on iOS 5以下不兼容
const scrollToAnchor = (anchorName) => {
  if (anchorName) {
    // 找到锚点
    let anchorElement = document.getElementById(anchorName);
    // 如果对应id的锚点存在,就跳转到锚点
    if (anchorElement) {
      anchorElement.scrollIntoView({
        behavior: 'auto', // 定义动画过渡效果, "auto"或 "smooth" 之一。默认为 "auto"
        block: 'start', // 定义垂直方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "start"
        inline: 'nearest', // 定义水平方向的对齐, "start", "center", "end", 或 "nearest"之一。默认为 "nearest"
      });
    }
  }
}

以上就是JavaScript常用工具函数汇总(浏览器环境)的详细内容,更多关于JavaScript 工具函数的资料请关注我们其它相关文章!

时间: 2020-09-15

JavaScript常用工具函数库汇总

对象或数组的深拷贝 /** * 对象或数组的深拷贝 * @param {*} cloneObj 被克隆的对象 * @param {*} targetObj 克隆的目标对象 * @param {*} isOverride 若属性重复,是否覆盖被克隆对象的属性 */ function deepClone(cloneObj, targetObj, isOverride = true) { const _toString = Object.prototype.toString if (_toString

JQuery 操作Javascript对象和数组的工具函数小结

JQuery操作非集合数组函数 $.trim(value) 这个函数很简单,从value中删除任何前导或尾随的空白字符.空白字符为任何匹配Javascript正则表达式\s的任何字符.包括空格.换页.换行.回车.tab.垂直指标符等. $.each(container, callback) 对container的每一项进行迭代,为每一项调用回调函数callback. container 可以是对象或数组.如果是js对象,则迭代其每个属性:如果是数组,则迭代其每个元素. callback 回调函数

JavaScript常用工具函数大全

本文实例总结了JavaScript常用工具函数.分享给大家供大家参考,具体如下: 为元素添加on方法 Element.prototype.on = Element.prototype.addEventListener; NodeList.prototype.on = function (event, fn) {. []['forEach'].call(this, function (el) { el.on(event, fn); }); return this; }; 为元素添加trigger方

js实现的光标位置工具函数示例

本文实例讲述了js实现的光标位置工具函数.分享给大家供大家参考,具体如下: 这里介绍的一款textarea中光标位置工具函数的例子. html代码: <p>文本框:</p> <textarea name="" id="textarea" cols="30" rows="10"> sASASADASDasfaDFDsfsDFAfdFADf </textarea> <butto

javascript函数式编程程序员的工具集

如果你仔细看了到目前为止出现过的示例代码,你会发现这里面的一些方法不太熟悉. 它们是map().filter()和reduce()函数,它们对任何语言的函数式编程都至关重要. 它们可以让你不必使用循环和语句,写出更简洁的代码. map().filter()和reduce()函数组成了函数式程序员工具集的核心部分,这个工具集包括一系列纯的. 高阶的函数,它们是函数式方法的主力.实际上,它们是纯函数和高阶函数的典型,它们以一个函数为输入, 返回一个输出结果,并且不产生副作用. 然而它们是浏览器中EC

JavaScript常用函数工具集:lao-utils

在工作中经常会频繁使用一些方法.或做类型判断.数据转换等,为了方便,将一些功能封装成函数整理成工具集lao-utils 使用 Node.js npm install lao-utils --save AMD/CMD.浏览器环境 引入dist目录下源码文件 函数 uuid()  生成一个uuid串(伪guid) is(x,y)  比较字符x和字符y是否相等 eg: 特殊例子:laoUtils.is(-0,+0); //false,laoUtils.is(NaN,NaN); //true isInt

两个比较有用的Javascript工具函数代码

1.大家在实际工作中,会写各式各样的赋值语句. 比如最常用的obj.style.display = "none"; 如果这样的赋值语句一多,obj.style一排下来都要看晕了 下面我的base.js中的extend函数可以允许用json格式赋值属性甚至是函数句柄 复制代码 代码如下: /** * 扩展函数 * @param target 需要扩展的对象 * @param params 要往target里放的属性和方法 */ function extend(target, params

JS开发常用工具函数(小结)

1.isStatic:检测数据是不是除了symbol外的原始数据 function isStatic(value) { return( typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'undefined' || value === null ) } 2.isPrimitive:检测数据是不是原始数据 function isPrimit

JSChart轻量级图形报表工具(内置函数中文参考)

因为网上讲这个框架的文章不是很多,而且它本身对中文支持不是很好,手册什么的都是英文的,虽然不是很多,但考虑到一些新手可能没有时间和精力来阅读参考手册,为了让更多的朋友了解它,所以工作之余就大概的翻译了一下它的内置函数,因为时间仓促,有些地方翻译的很大概,也难免混杂了一些错误,算是抛砖引玉吧,希望大家不明白的地方亲手测试一下,参照它的官方提供的例子很容易上手. JSChart内置函数参考 colorizeBars(array colordata)设置柱状图各矩形颜色. colorizePie(ar

JavaScript中cookie工具函数封装的示例代码

一. 语法 1.1 获取当前页面的所有cookie: var allCookies = document.cookie; allCookies 是一个字符串,其中包含了以分号分隔的cookie列表字符串 (即 key=value 键值对). 1.2 写一个新cookie: document.cookie = updatedCookie; updatedCookie是一个键值对形式的字符串.只能用这个方法一次设置或更新一个cookie,而且写入并不是覆盖,而是添加.例如: document.coo

C++中const用于函数重载的示例代码

常成员函数和非常成员函数之间的重载 首先先回忆一下常成员函数 声明:<类型标志符>函数名(参数表)const: 说明: (1)const是函数类型的一部分,在实现部分也要带该关键字. (2)const关键字可以用于对重载函数的区分. (3)常成员函数不能更新类的成员变量,也不能调用该类中没有用const修饰的成员函数,只能调用常成员函数. (4)非常量对象也可以调用常成员函数,但是如果有重载的非常成员函数则会调用非常成员函数. 重载看例子: #include<iostream> u

vue项目中axios请求网络接口封装的示例代码

每个项目网络请求接口封装都是很重要的一块,第一次做Vue项目,我们的封装方法如下: (1).新建一个js文件,取名api.js (2).引入 axios ,mint-UI ,如下图: import axios from 'axios' import {MessageBox, Toast} from 'mint-ui' axios.defaults.timeout = 50000//默认请求超时时间 axios.defaults.headers = '请求头' (2).封装get方法 export

微信小程序工具函数封装

本文实例为大家分享了微信小程序工具函数封装的具体代码,供大家参考,具体内容如下 const formatTime = date => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = date.getHours() const minute = date.getMinutes() const second = date.getSec

javascript 中Cookie读、写与删除操作

 javascript 中Cookie读.写与删除操作 前言: 在这个前端横行的时候,页面之间的交互需要数据的传递,有的数据通过url传参的形式可以很好地解决,但是对于部分需要改变的参数,你如说从页面A到页面B选择数据,然后从页面B将数据再传到页面A(典型的栗子就是收货地址的选择),针对这一块我是通过存储cookie来解决的. 对于cookie的操作我给出了一些简单的封装,当然也借鉴了前辈们经验,自己糅合了一下,对于cookie的操作,无非是读写和删除,我们首先来看一下写的操作,有写才有读,进而

JavaScript中的工厂函数(推荐)

在学习jQuery的时候,我们经常会看到"工厂函数"这个概念,那么究竟什么是"工厂函数"呢?我们来看看概念,"所谓工厂函数,就是指这些内建函数都是类对象,当你调用他们时,实际上是创建了一个类实例".意思就是当我调用这个函数,实际上是先利用类创建了一个对象,然后返回这个对象.由于Javascript本身不是严格的面向对象的语言(不包含类),实际上来说,Javascript并没有严格的"工厂函数",但是在Javascript中,我

深入认识javascript中的eval函数

1)介绍javascript中的eval函数的用法 (2)如何在函数内执行全局代码 ►先来说eval的用法,内容比较简单,熟悉的可以跳过. eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要特别注意的是对象声明语法"{}"并不能返回一个值,需要用括号括起来才会返回值,简单示例如下: 复制代码 代码如下: var code1='"a" + 2'; //表达式 var c

javascript中cookie对象用法实例分析

本文实例讲述了javascript中cookie对象用法.分享给大家供大家参考.具体如下: 属性 name          唯一必须设置的属性,表示cookie的名称 expires       指定cookie的存活周期,如不设置,浏览器关闭自动失效 path           决定cookie对于服务器对于其他网页的可用性,一般情况下,   cookie对同一目录下的所有页面都可用,当设置path属性后,cookie只对指定路径及子路径下的所有网页有效 domain           

JavaScript中的Function函数

首先给大家介绍JavaScript中function定义函数的几种方法: 1.最基本的作为一个本本分分的函数声明使用. 复制代码 代码如下: function func(){} 或 复制代码 代码如下: var func=function(){}; 2.作为一个类构造器使用: function class(){} class.prototype={}; var item=new class(); 3.作为闭包使用: (function(){ //独立作用域 })(); 4.可以作为选择器使用:

javascript中Array()数组函数详解

在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. Array()是一个用来构建数组的内建构造器函数.数组主要由如下三种创建方式: array = new Array() array =