常用的js封装方法

1解决ie和其他浏览器解决事件冒泡的问题

function stopBubble(e) {
	if(e.stopPropagation)
	{
		e.stopPropagation();
	}
	else{
		e.cancelBubble();
	}
}

2解决ie 和其它浏览器为元素绑定事件的函数

function addEvent (element,eventtype,handle){
if(element.addEventListener){
	element.addEventListener(eventtype,handle,false);  
	//优先使用这种方法添加事件，是因为这种方法可以反复为同一个元素添加多个事件 
}
else if(element.attachEvent){
	element.attachEvent('on' + eventtype,function(){
		handle.call(element);  //ie浏览器添加事件
	} )
}
else {
	element['on' + eventtype] = handle; 
	// element.onclick = function () {}
}
}

3同理 解决ie和其它浏览器为元素移出绑定事件的函数

function removeEvent(element, type, handler) {

if (element.removeEventListener) {

//非IE浏览器采用dom2级事件处理，type为事件类型如：click，handler为事件处理函数，false代表事件采用冒泡处理模型，如果是true代表 采用捕获型处理模型

//除了netbeans采用捕获型处理模型，其他都采用冒泡型处理模型

//如果是非IE浏览器添加事件为：removeEventListener

element.removeEventListener(type, handler, false);

} else if (element.detachEvent) {

//如果为IE浏览器，添加事件采用 detachEvent

element.detachEvent('on' + type, handler);

} else {

//dom0级事件处理，如果删除事件采用赋值null

element['on' + type] = null;
}
},

4兼容ie和其他浏览器 获取事件对象本身

function getEvent(event) {
return event ? event : window.event; 
},

5兼容ie和其它浏览器 获取事件发生源头元素（标签）

function getEventElement(event) {

//获取事件作用元素

return event.target || event.srcElement;

}

6兼容ie和其它浏览器阻止元素默认事件的方法

function preventDefault(event) {

//阻止默认的事件行为

if (event.preventDefault) {

event.preventDefault();

} else {

event.returnValue = false;

}
}

7兼容ie和其它浏览器获取css样式

第一个形参被获取样式的元素,第二个形参样式的名称，用来获取css上的样式具体的值
第一参数举例 document.getElementsByClassName(“test”)[0]
第二参数举例 “color”

function getCssStyle(element,attribute){
	if(window.getComputedStyle){
		return	window.getComputedStyle(element,null)[attribute];	
	}
	else{
		return	element.currentStyle[attribute];
	}	
}

8写一个查看屏幕尺寸的方法，想办法做到兼容

window.getScreenSize = function(){
//在标准模式下执行，w3c标准
if(window.innerWidth){
	return {
		width : window.innerWidth,
		height : window.innerHeight,
	}
}
//在标准模式下执行
else if(document.documentElement.clientWidth){
	return{
		width : document.documentElement.clientWidth,
		height : document.documentElement.clientHeight,
	}
	}
	else if (document.compatMode === 'BackCompat' )
	{
		//在怪异模式下执行
		return{
			width : document.body.clientWidth,
			height : document.body.clientHeight,
		}
	}
	else {
		
	}

}

9兼容多浏览器的获取当前滚动条位置的方法

   window.getScrollOffset = function(){
	if(window.pageXOffset){
		return {
			x : window.pageXOffset,
			y : window.pageYOffset,
		}
	}
	else{
		return{
		x: document.body.scrollLeft + document.documentElement.scrollLeft,
		y: document.body.scrollTop + document.documentElement.scrollTop,
	}
	}
	}

10兼容ie浏览器关于ajax的封装

/* 封装ajax函数
 * @param {string}opt.method http连接的方式，包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
 * @param {object}opt.data 发送的参数，格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */
/*1常规封装*/
function ajax(opt) {
    opt = opt || {};
    opt.method = opt.method.toUpperCase() || "GET"; //GET：用"GET"方式发送数据,只能256KB;POST：用"POST"方式发送数据,可以大到4MB
    opt.url = opt.url || "";
    opt.async = opt.async || true; //同步异步
    opt.dataType = opt.dataType || "text"; //所传的数的数据类型
    opt.contentType = opt.contentType || "application/x-www-form-urlencoded; charset=utf-8"; //默认表单格式 opt.dataType='json'
    opt.data = opt.data || null;
 
 
    var xmlHttp = getXmlHttp(); //获取XML 对象
 
    var postData = getAjaxParama(opt.data); //data
 
    if (opt.contentType === "application/json;charset=utf-8" && opt.dataType === "json") {
        postData = JSON.stringify(opt.data); //转化为字符串
    }
 
    if (opt.method === 'POST') {
        xmlHttp.open(opt.method, opt.url, opt.async);
        xmlHttp.setRequestHeader('Content-Type', opt.contentType); //而POST请求需要设置请求头，用来传递参数
 
    } else if (opt.method === 'GET') {
        postData = opt.url.indexOf("?") >= 0 ? "&" + postData : "?" + postData; //GET请求，参数是拼接到url上面；
        xmlHttp.open(opt.method, opt.url + postData, opt.async);
        postData = null; //重置参数
    }
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4) {
            var status = xmlHttp.status;
            if (status >= 200 && status < 300) {
                opt.success && opt.success(xmlHttp.responseText);
            } else {
                opt.error && opt.error(status);
            }
        }
    };
 
    xmlHttp.send(postData);
 
    function getXmlHttp() {
        var obj = null;
        //非IE浏览器创建XmlHttpRequest对象
        if (window.XMLHttpRequest) obj = new XMLHttpRequest();
 
        //IE浏览器创建XmlHttpRequest对象
        if (window.ActiveXObject) {
            try {
                obj = new ActiveXObject('Microsoft.XMLHTTP');
            } catch (e) {
                try {
                    obj = new ActiveXObject("msxml2.XMLHTTP");
                } catch (ex) {}
            }
        }
        return obj;
 
    }
 
    function getAjaxParama(data) {
        var params = [];
 
        for (var key in data) {
            params.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
        }
        return params.join('&'); //添加&字符串
 
    }
 
}

11兼容所有浏览器，清除字符串前后空格

function trim(str) {
    if (str & typeof str === "string") {
        return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符
    }
}

12倒计时的封装函数

/**
 * [limitFormatTime js倒计时函数]
 * @param  {[type]} date [2019.05.09 20:10:10]
 * @return {[type]}      [description]
 */
function limitFormatTime(date) {
    // 日期格式为
    date = date.replace(/\./g,'/'); 
    var timestamp = (new Date(date)).valueOf();
    var nowstr = (new Date()).valueOf();
    var chazhi = (timestamp - nowstr)/1000;
    if (chazhi < 0) {
        chazhi = 0;
    }
    var d = Math.floor(chazhi / 3600 / 24),
    h = Math.floor((chazhi / 3600) % 24),
    m = Math.floor((chazhi % 3600) / 60),
    s = Math.floor((chazhi % 3600) % 60);
    if (h < 10) {
        h = "0" + h;
    }
    if (m < 10) {
        m = "0" + m;
    }
    if (s < 10) {
        s = "0" + s;
    }
    return {
      d: d, // 天
      h: h, // 时
      m: m, // 分
      s: s // 秒
    }
}

13 js canvas 封装扇形图

//原型
var Canvas = function(ele,num,color){
	this.ele = ele;
	this.num = num;
	this.ctx = this.ele.getContext("2d");		
	this.color = color || ["#21a74f","#b3e5f1","#3498db","#2ecc71","#f1c40f","#e67e22","#ff2d52"];
	this.draw();
}


Canvas.prototype.draw=function(){
	var j=0,j1=0,j2=0,angle=0;
	var sum=0;
	for(var i=0;i<this.num.length;i++){
		sum=sum+this.num[i];
	}
	for(var i=0;i<this.num.length;i++){
		j=2*Math.PI*this.num[i]/sum;
		j2=j1+j;
		this.ctx.beginPath();
		this.ctx.fillStyle=this.color[i];
		this.ctx.arc(this.ele.width/2,this.ele.height/2,120,j1,j2,false);
		this.ctx.lineTo(this.ele.width/2,this.ele.height/2);
		this.ctx.closePath();
		this.ctx.fill();
		angle=j1+j/2;		
		j1=j1+j;
	}
}
//实例调用
var ele1=document.getElementById("canvas");
ele1.width = 600; //改变画布的分辨率宽度
ele1.height = 600; //改变画布分辨率高度
var num1=[1,1,1,1,1,1,1]; //数组之间数的比例将会影响对应所占扇形的大小，
//将圆平均分为七份
//可以自己定义颜色为数组，第三个参数，与第二个数组参数的长度一致

// 第一个参数为canvas对应的dom节点，第二个参数为不同扇形所占比例数组，第三个参数为颜色数组
var can1 = new Canvas(ele1,num1);

14将文件转为base64

const File2Base64 = (f) =>
  new Promise((resolve, reject) => {
    try {
      const reader = new FileReader();

      reader.onload = function () {
        resolve(reader.result);
      };

      reader.readAsDataURL(f);
    } catch (e) {
      reject(e);
    }
  });

15时间常用封装函数

时间格式函数封装

/**
 * 格式化时间
 * @param {Date} t 时间戳
 * @param {string} format yyyy-MM-dd hh:mm:ss
 * @returns {string} 2011-11-11 11:11:11
 */
export const formatTime = (t, format = 'yyyy-MM-dd hh:mm:ss') => {
  const date = {
    'M+': t.getMonth() + 1,
    'd+': t.getDate(),
    'h+': t.getHours(),
    'm+': t.getMinutes(),
    's+': t.getSeconds(),
    'q+': Math.floor((t.getMonth() + 3) / 3),
    'S+': t.getMilliseconds(),
  };

  if (/(y+)/i.test(format)) {
    format = format.replace(RegExp.$1, (t.getFullYear() + '').substr(4 - RegExp.$1.length));
  }

  for (const k in date) {
    if (new RegExp('(' + k + ')').test(format)) {
      format = format.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? date[k] : ('00' + date[k]).substr(('' + date[k]).length),
      );
    }
  }
  return format;
};

/**
 * 格式化时间成时间实例 2020-02-02 22:22:22 -> 2020/02/02 22:22:22
 * @param {string} t 时间 2020-02-02 22:22:22
 */
export const formatTime2Date = (t) => {
  // 2020-02-02 22:22:22 -> 2020/02/02 22:22:22
  // 避免 iOS 出问题
  return new Date(t.replace(/-/g, '/'));
};

时间距今函数封装，格式化时间成文字

/**
 * 格式化时间成文字
 * @param {Date} t 时间
 */
export const formatTime2Text = (t) => {
  const st = t.getTime();
  const now = new Date().getTime();
  const timeLag = Math.ceil((now - st) / 1000);

  if (timeLag <= 60) {
    return '一分钟前';
  }

  if (timeLag <= 60 * 4) {
    return '三分钟前';
  }

  if (timeLag <= 60 * 6) {
    return '五分钟前';
  }

  if (timeLag <= 60 * 11) {
    return '十分钟前';
  }

  if (timeLag <= 60 * 31) {
    return '半小时前';
  }

  if (timeLag <= 60 * 61) {
    return '一小时前';
  }

  if (timeLag <= 60 * 61 * 2) {
    return '两小时前';
  }

  if (timeLag <= 60 * 60 * 3) {
    return '三小时前';
  }

  if (timeLag <= 60 * 60 * 6) {
    return '半天前';
  }

  if (timeLag <= 60 * 60 * 24) {
    return '一天前';
  }

  if (timeLag <= 60 * 60 * 24 * 2) {
    return '两天前';
  }

  if (timeLag <= 60 * 60 * 24 * 3) {
    return '三天前';
  }

  return formatTime(t).split(' ')[0];
};

16将number转为ABC

export const getStrAZ = (n: number) => {
  return String.fromCharCode(65 + n);
};