11.js中的兼容写法

/**
 * 
 * @authors 叽歪Q (1727728017@qq.com)
 * @date    2018-08-23 10:00:10
 * @version 1.0
 */

// -------------------------------------------------------------
// document.getElementsByClassName(cls) 不兼容 IE 6,7,8  封装重写
/**
 * [myGetEleByClassName document.getElementsByClassName(cls) 不兼容 IE 6,7,8  封装重写] 
 * @param  {String} cls [样式类名]
 * @return {object}     [数组]
 */
 function myGetEleByClassName(cls){
 	var classList = [];
		// 1.获取页面所有的标签
		var allElement = document.getElementsByTagName("*");
	// 2.遍历所有标签
	for (var i = 0; i < allElement.length; i++) {
		// 3.判断寻找包含目标类名cls的标签
		var clslist = allElement[i].className.split(" ");
		// 4.遍历类名数组
		if(clslist.indexOf(cls)!=-1){
			pushitem:for (var j = 0; j < clslist.length; j++) {
				if (clslist[j]==cls) {
				// 5.将寻找结果存入新数组
				classList.push(allElement[i]); 
				break pushitem;
			}
		} 
	}
}
	// 6.返回结果
	return classList;
}
// -------------------------------------------------------------


// -------------------------------------------------------------
// 获取子节点元素 W3C制定的 oUl.childNodes 返回结果包含了文本（换行）节点 不好使  封装重写
/**
 * [myChildNodes 获取子节点元素]
 * @param  {object} obj [节点对象]
 * @return {object}     [子节点数组]
 */
 function myChildNodes(obj){
	// 1.新建数组存结果
	var childList = [];
	// 2.获取目标对象的所以子节点（包括换行）
	var oList = obj.childNodes;
	// 3.遍历子节点数组
	for (var i = 0; i < oList.length; i++) {
		// 4.判断子节点类型 如果 nodeType==1 即为元素节点 则存入新数组
		if (oList[i].nodeType==1) {
			childList.push(oList[i])
		}
	}
	// 5.返回结果
	return childList;
} 
// -------------------------------------------------------------


// -------------------------------------------------------------
// 将新节点插入到某节点后面 封装
/**
 * [myInsertAfter 将新节点插入到某节点后面 封装]
 * @param  {object} parentElem   [父节点]
 * @param  {object} newElem      [新节点]
 * @param  {object} positionElem [插入位置]
 * @return {object}              []
 */
 function myInsertAfter(parentElem,newElem,positionElem){
 	var insPosition = positionElem.nextElementSibling||positionElem.nextSibling;
 	parentElem.insertBefore(newElem, insPosition);
 } 
// -------------------------------------------------------------



// -------------------------------------------------------------
// 获取滚动条高宽  
// document.documentElement.scrollTop;   document.body.scrollTop; window.pageYOffset;
// 三者各不兼容  封装 重写获取滚动条高宽

// 页面会有 带DTD 标准的页面		document.documentElement.scrollTop
// 非标准 没有 DTD (没有声明头)	document.body.scrollTop
// IE9以上 						window.pageXOffset

//它的简单兼容写法
// document.documentElement.scrollTop||document.body.scrollTop
/**
 * [myScroll 获取滚动条高宽  ]
 * @return {[type]} []
 */
 function myScroll(){
    //  ie9以上, google,火狐都能用,
    if(window.pageXOffset!=null){
    	return {
    		"left":window.pageXOffset,
    		"top":window.pageYOffset
    	}
    }else if(document.compatMode=="CSS1Compat"){
         // 标准 DTD (有声明头)
         return {
         	"left":document.documentElement.scrollLeft,
         	"top":document.documentElement.scrollTop
         }
     }
    // 非标准 没有 DTD (没有声明头 (怪胎)),和ie 6 7 8
    return {
    	"left":document.body.scrollLeft,
    	"top":document.body.scrollTop
    }
    
}

// -------------------------------------------------------------



// -------------------------------------------------------------
// 获取style样式兼容写法 
// window.getComputedStyle(elt: Element, pseudoElt?: DOMString)   IE9+及非IE
// obj.currentStyle												  IE8及以下
// 兼容 封装 重写
/**
 * [myGetStyle 获取style样式兼容写法]
 * @param  {object} obj  [节点对象]
 * @param  {String} attr [样式属性]
 * @return {String}      [样式值]
 */
 function myGetStyle(obj,attr){
 	if(window.getComputedStyle){
 		return window.getComputedStyle(obj, null)[attr];
 	}else{
 		return obj.currentStyle[attr];
 	}

 }

// -------------------------------------------------------------


// -------------------------------------------------------------
// 事件监听器
// IE9及以上 其他浏览器
	// box.addEventListener(“click”, func, false) 
	// box.removeEventListener(“click”, func) 
// 在IE8及以下的浏览器中， 我们可以使用以下方式： 
	// box.attachEvent("onclick", fn);   //添加事件
	// box.detachEvent("onclick", fn);   //移除事件
// 封装事件监听器， 兼容IE浏览器， 谷歌， 火狐

//添加事件
function myAddEvent(obj, type, fn, useCapture){
	if (obj.addEventListener) {  
		obj.addEventListener(type, fn, useCapture);
	}
	else {
		obj.attachEvent("on"+type, fn);
	}
}
//移除事件
function myRemoveEvent(obj, type, fn, useCapture){
	if (obj.removeEventListener) {
		obj.removeEventListener(type, fn, useCapture);
	}
	else {
		obj.detachEvent("on"+type, fn);
	}
}

//调用
// addEvent(box, "click", fn, false);
// function fn(){
//       alert("click 按钮1");
// }
// box.onclick = function(){
//       removeEvent(box, "click", fn, false);
// }
// -------------------------------------------------------------


// -------------------------------------------------------------
function mySetCookie(name, value, date, path, domain, secure){
	var strCookie = "";
	if(name != null && name != ""){
		strCookie += encodeURIComponent(name) + "=" + encodeURIComponent(value) + ";";
	}
	if(typeof(date) == "number"){
		var date = new Date();
		date.setDate(date.getDate() + Number(date));
		strCookie += "expires=" + date + ";"
	}
	if(path){
		strCookie += "path=" + path + ";"
	}
	if(domain){
		strCookie += "domain=" + domain + ";"
	}
	if(secure){
		strCookie += "secure";
	}
	document.cookie = strCookie;
	return decodeURIComponent(document.cookie);
}
function myRemoveCookie(key){
    mySetCookie(key, "", -1);
}
function myGetAllCookie(){
    var obj = {};
    var strCookie = decodeURIComponent(document.cookie);//name=value
    //name=value; name1=value1
    var arr = strCookie.split(";");
    for(var i = 0; i < arr.length; i++){
        var arr2 = arr[i].trim().split("=");
        obj[arr2[0]] = arr2[1];
    } 
    return obj;
}
function myGetKeyCookie(key){ 
    var obj = myGetAllCookie(); 
    return obj[key];
}
// -------------------------------------------------------------




// 匀速运动封装
function myLinear(ele, attr, target){
	// 清除定时器，防止多次点击生成多个定时器
    clearInterval(ele.timer); 
    // 开启定时器
    ele.timer = setInterval(function(){
    	// 设置步长
        var steps = parseInt(myGetStyle(ele,attr)) < target ? +10 : -10; 
        // 新的位置 = 原来位置 + 步长
        ele.style[attr] = parseInt(myGetStyle(ele,attr)) + steps + "px"; 
        // 如果 目前位置-目标位置 小于步长 则清除定时器 直接运动至target
        if(Math.abs(parseInt(myGetStyle(ele,attr)) - target) <= Math.abs(steps)){
            clearInterval(ele.timer);
            ele.style[attr] = target + "px";
        }
        console.log('Running-----myLinear');
    },40)

}

// 缓冲运动封装
function myEaseOut(ele,attr,target){
	// 清除定时器，防止多次点击生成多个定时器
	clearInterval(ele.timer);
		// 开启定时器
	ele.timer = setInterval(function(){
		// 设置步长
		var step = (target-parseInt(myGetStyle(ele,attr)))/10;
		step = step>0 ? Math.ceil(step):Math.floor(step);
		// 新的位置 = 原来位置 + 步长
		ele.style[attr] = parseInt(myGetStyle(ele,attr)) + step + "px"; 
		// 如果 目前位置==目标位置 则清除定时器 
		if (parseInt(myGetStyle(ele,attr))==target) {
			clearInterval(ele.timer);
		}
        console.log('Running-----myEaseOut');
	},30)
}

// function myMultiEaseOut(ele,obj){
// 	clearInterval(ele.timer);
// 	ele.timer = setInterval(function(){
// 		var status = true;
// 		for (var key in obj) {
// 			var current = parseInt(myGetStyle(ele,key));
// 			var target = parseInt(obj[key]);
// 			var step = (target - current)/10;
// 			step = step>0?Math.ceil(step):Math.floor(step);
// 			ele.style[key] = current + step + "px";
// 			if (target!=current) {
// 				status = false;
// 			}
// 		}
// 		if (status) {
// 			clearInterval(ele.timer);
// 		}
//         console.log('Running-----myMultiEaseOut');
// 	},30)
// }
function myMultiLinear(ele,obj){
	clearInterval(ele.timer);
	ele.timer = setInterval(function(){
		var status = true;
		for (var key in obj) {
			var current = parseInt(myGetStyle(ele,key));
			var target = parseInt(obj[key]);
        	var step = current < target ? +10 : -10;  
			ele.style[key] = current + step + "px";
			if (Math.abs(current - target) > Math.abs(step)) {
				status = false;
			} 
		}
		if (status) {
			clearInterval(ele.timer);
		}
        console.log('Running-----myMultiLinear');
	},30)
}

function myMultiEaseOut(ele,obj,secmini,fn){
	secMini = secmini||30;
	console.log(secmini,secMini)
	//1. 清除定时器
    clearInterval(ele.timer);
    //2.开启定时器
    ele.timer = setInterval(() =>{

        var bflag = true;
        for(var attr in obj){
            var current = 0;
            var target = 0;
            if(attr == "opacity"){
                current = myGetStyle(ele, attr) * 100;
                target = obj[attr] * 100;
            } else {
                current = parseInt(myGetStyle(ele, attr));
                target = parseInt(obj[attr]);
            }
            //2.1 步长=(目标-当前的位置)/10;
            var step = (target - current) / 10;
            //2.2 判断 步长
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //2.3  新的位置=当前的位置+步长

            if(attr == "opacity"){
                ele.style.opacity = (current + step) / 100;
                ele.style.filter = `alpha(opacity=${(current + step)})`
            } else if(attr == "zIndex"){
                ele.style.zIndex = obj[attr];
            } else {
                ele.style[attr] = current + step + "px";
            }
            if(current != target){
                bflag = false;
            }
        }
        if(bflag){
            clearInterval(ele.timer);
            if(fn && typeof(fn) == "function"){// 如果 fn不等于 undefined ,就是 true
                fn.bind(ele)(ele);
            }
        } 
        console.log(secMini)
    },secMini)
} 



function createXHR () {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	}
	return new ActiveXObject('Msxml.XMLHTTP');
}


// 使用 getAllResponseHeaders()获取整个响应头信息
// console.log(xhr.getAllResponseHeaders());
// 使用 getResponseHeader()获取单个响应头信息
// console.log(xhr.getResponseHeader('Content-Type'));

// 使用 setRequestHeader()设置单个请求头信息 放在open方法之后, send方法之前
// xhr.setRequestHeader(“MyHeader”, Zhang);


function ajax (obj) {
	obj.type = obj.type?obj.type:'get';
	obj.dataType = obj.dataType?obj.dataType:'json';
	obj.async = obj.async?obj.async:true;

	var xhr = createXHR();
	return new Promise(function (resolve,reject) {
		if (obj.type=='get') {
			xhr.open('get',obj.url+"?"+getParam(obj.data),obj.async);
			xhr.send(null);
		}else{
			xhr.open('post',obj.url,obj.async);
			xhr.setRequestHeader('content-Type','application/x-www-form-urlencode');
			xhr.open(getParam(obj.data));
		}
		if (obj.async) {
			xhr.onreadystatechange = function () {
				if (xhr.readyState == 4) {
					retRes();
				}
			}
		}else{
			retRes();
		}
		function retRes () {
			if (xhr.status==200) {
				if (obj.dataType=='json') {
					resolve(JSON.parse(xhr.responseText)); 
				}else if (obj.dataType=='xml') {
					resolve(xhr.responseXML);  
				}else {
					resolve(xhr.responseText);
				}
			}else{
				reject({msg:'error'});
			}

		}
	})
}
function getParam (data) {
	var str = "";
	for (var key in data) {
		str += key+'='+data[key]+'&';
	}
	return str;
}