JavaScript中常用函数方法的封装

1.cookie的封装

//定义cookie
function setCookie(key,val,options){
	options = options || {};
	var path = options.path?";path="+options.path:"";
	if(options.expires){
		var d = new Date();
		d.setDate(d.getDate()+options.expires);
		var exp = ";espires"+d;
	} else {
		var exp = "";
	}
	document.cookie = key + "=" + val + path + exp; 
}
//删除cookie
function removeCookie(key,options){
	options = options || {};
	options.expires = -1;
	setCookie(key,null,options);
}
//获取cookie
function getCookie(key){
	var date = document.cookie;
	var arr = date.split(";");
	for(var i = 0;i < arr.length;i++){
		if(arr[i].split("=")[0] === key){
			return arr[i].split("=")[1];	
		}
	}
	return "";
}

2.ajax 的封装

//Get
function ajaxGet(url,callback,data){
	data = data || {};
	var str = "";
	for(var i in data){
		str += `${i}=${data[i]}&`;
	}
	var d = new Date();
	url = url + "?" + str + "(这里可以随意添加字符串，只要符合js的命名规则就行)" + d.getTime();
	var xhr =  new XMLHttpRequest();
	xhr.open("get",url,true);
	xhr.onreadystatechange = function(){
		xhr.readyState;
		if(xhr.readyState == 4 && xhr.status == 200){
			callback(xhr.responseText);
		}
		xhr.send();
	}
}

//Post
function ajaxPost(url,callback,data){
	data = data || {};
	var str = "";
	for(var i in data){
		str += `${i}=${data[i]}&`;
	}
	var xhr = new XMLHttpRequest();
	xhr.open("post",url,true);
	xhr.onstatechange = function(){
		xhr.readyState;
		if(xhr.readyState == 4 && xhr.status == 200){
			callback(xhr.responseText);
		}
	}
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xhr.send(str);
}

3.json封装

function json(url,callback,data){
	data = data || {};
	var str = "";
	for(var i in data){
		str += `${i}=${data[i]}&`;
	}
	url = url + "?" + str.slice(0,str.length-1);
	var script = document.creatElement("script");
	script.src = url;
	document.body.appendChild("script");
	window[data[data.columnName]] = function(res){
		callback(res);
	}
}

4.动画函数的封装

function animate(dom,cssObj,duration,callback){
	var interval = 20;
	var nowObj = {};
	for(var i in cssObj){
		nowObj[i] = parseInt(getStyle(dom,1));
	}
	var allCount = duration / interval;
	var count = 0;
	var timer = setinterval(function(){
		count++;
		for(var i in cssObj){
			var distance = cssObj[i] - nowObj[i];
			var step = distance / allCount;
			if(i.toLowerCase() === "opacity"){
				dom.style[i] = nowObj[i] + count*step;
			} else {
				dom.style[i] = nowObj[i] + count*step + 'px';
			}
		}
		if(count >= allcount){
			clearinterva(timer);
			if(callback){
				callback();
			}
		}
	},interval);
	function getStyle(dom,cssProp){
		if(window.getComputedStyle){
			return window.getComputedStyle(dom)[cssProp];
		} else {
			return dom.currentStyle[cssProp];
		}
	}
}