1、垂直方向的平滑滚动
/**
* 垂直方向的平滑滚动
* @param el dom元素
* @param from y轴移动的开始坐标
* @param to y轴移动的目标位置坐标
* @param duration 滚动时间
* @param endCallback 滚动结束的回调
*/
const scrollTop = function(el,from=0,to,duration=500,endCallback){
if(!window.requestAnimationFrame){
window.requestAnimationFrame=(
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.msRequestAnimationFrame||
function (callback){
return window.setTimeout(callback,1000/60);
}
);
}
const difference=Math.abs(from-to);
const step=Math.ceil(difference/duration*50);
function scroll(start,end,step){
if(start===end){
endCallback&&endCallback();
return;
}
let d=(start+step>end)?end:start+step;
if(start>end){
d=(start-step<end)?end:start-step;
}
if(el===window){
window.scrollTo(d,d);
}else{
el.scrollTop=d;
}
window.requestAnimationFrame(()=>scroll(d,end,step));
}
scroll(from,to,step);
};
2、检测传入的参数类型
/**
* 检测传入的参数类型
* @param obj {All} 需要进行参数检测的对象
* @return {String} 所属类型字符串
*/
export function typeOf(obj) {
const toString = Object.prototype.toString;
const map = {
"[object Boolean]": "boolean",
"[object Number]": "number",
"[object String]": "string",
"[object Function]": "function",
"[object Array]": "array",
"[object Date]": "date",
"[object RegExp]": "regExp",
"[object Undefined]": "undefined",
"[object Null]": "null",
"[object Object]": "object"
};
if (obj instanceof Element) return "element";
return map[toString.call(obj)];
}
3、深拷贝
/**
* 深拷贝函数
* @param target {object} 需要拷贝的目标对象
* @returns {object} 拷贝完成的新对象
*/
export function deepCopy(target) {
const flag = typeOf(target);
let copy;
if (flag === "array") {
copy = [];
for (var i = 0, len = target.length; i < len; i++) {
copy.push(deepCopy(target[i]));
}
} else if (flag === "object") {
copy = {};
for (var k in target) {
copy[k] = deepCopy(target[k]);
}
} else {
copy = target;
}
return copy;
}
4、获取字符串的字节数
/**
* 获取字符串的字节数 -- 中文2,英文1
* @param str
* @returns {number}
*/
export function getLength(str) {
let realLength = 0,
charCode = -1;
for (let i = 0; i < str.length; i++) {
charCode = str.charCodeAt(i);
if (charCode >= 0 && charCode <= 128) {
realLength += 1;
} else {
realLength += 2;
}
}
return realLength;
}
5、base64转化成file文件
/**
* base64转化成file文件(兼容ie)
* @param {*} base64Data
* @param {*} fileName
*/
export const dataURLtoFile = function (base64Data, fileName) {
let blob = dataURLtoBlob(base64Data);
let file = blobToFile(blob, fileName);
return file;
};
function dataURLtoBlob(base64Data) {
let arr = base64Data.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 });
}
function blobToFile(theBlob, fileName) {
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
}
6、将秒转化为时分秒
export const formatSeconds = function (value) {
if (!value) {
return '';
}
var theTime = parseInt(value); // 秒
var middle = 0; // 分
var hour = 0; // 小时
if (theTime > 60) {
middle = parseInt(theTime / 60);
theTime = parseInt(theTime % 60);
if (middle > 60) {
hour = parseInt(middle / 60);
middle = parseInt(middle % 60);
}
}
var result = '' + parseInt(theTime) + '秒';
if (middle > 0) {
result = '' + parseInt(middle) + '分' + result;
}
if (hour > 0) {
result = '' + parseInt(hour) + '时' + result;
}
return result;
};
7、判断手机设备类型
export const whichDevice = function () {
const device = {};
const ua = navigator.userAgent;
const android = ua.match(/(Android);?[\s/]+([\d.]+)?/);
const ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
const ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/);
const iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);
device.ios = false;
device.android = false;
if (android) {
device.android = true;
}
if (ipad || iphone || ipod) {
device.ios = true;
}
return device;
};
8、获取地址栏上指定参数
/**
* 获取url地址栏指定参数
* @returns {*param}
*/
export const getPageUrlParam = function(name) {
//获取?后面的参数
let urlSearch = location.search || location.hash;
let urlValue = '';
//以?*&来拆分
let params = urlSearch.split(/[?*&]/);
for (let i = 0; i < params.length; i++) {
//如果url参数里包含传递过来name字段,则取=后面的部分
if (params[i].indexOf(name) >= 0) {
urlValue = params[i].split('=')[1];
return urlValue;
}
}
return urlValue;
};
9、对象深度查找
/**
* 对象深度查找
* @param target {Object} 需要处理的原始对象
* @param callback {Function} filter函数,接收一个参数,即当前调用环境对象
* @returns {Object} 符合筛选条件的对象
*/
function findDeeply(target, callback) {
const flag = typeOf(target);
let result;
if (flag === 'array') {
for (let i = 0, item; (item = target[i++]); ) {
result = findDeeply(item, callback);
if (result) return result;
}
} else if (flag === 'object') {
if (callback(target)) {
return target;
}
for (let k in target) {
result = findDeeply(target[k], callback);
if (result) return result;
}
}
}
10、监听浏览器的回退按钮事件(H5的手机自带左滑回退事件)
window.removeEventListener('popstate', urlChange);
window.addEventListener('popstate', urlChange);
function urlChange() {
// this.$route vue中获取当前路由信息做一些处理
}