18-07-23

132 阅读2分钟

每日笔记 18-07-23


字符串重复拼接的方法

String.prototype.repeat(num)

'123'.repeat(3);
//123123123

post请求的四种常见content-type

  1. application/x-www-form-urlencoded

浏览器的原生 form 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据,提交的数据按照 key1=val1&key2=val2 的方式进行编码,key 和 val 都进行了 URL 转码

  1. multipart/form-data

使用表单上传文件时

  1. application/json

告诉服务端消息主体是序列化后的 JSON 字符串

  1. text/xml

使用 HTTP 作为传输协议,XML 作为编码方式的远程调用规范,不如json方式灵活


固定宽高的垂直居中

.test{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 200px;
	height: 100px;
	margin-left: -100px;
	margin-top: -50px;
}

js代码规范

  1. 使用空格代替tab,使用2个空格代替tab的首缩进
  2. 不能省略分号
  3. 杜绝使用var
  4. 使用模板字符串代替连接字符串
  5. 不使用eval语句
  6. 使用单引号
  7. 定义常量全大写

一个自写的jsonp函数

function JSONP(url,config){
	var data = config.data || [];
	var paraArr=[],paraString='';//get请求的参数。
	var urlArr;
	var callbackName;//每个回调函数一个名字。按时间戳。
	var script,head;//要生成script标签。head标签。
	var supportLoad;//是否支持 onload。是针对IE的兼容处理。
	var onEvent;//onload或onreadystatechange事件。
	var timeout = config.timeout || 0;//超时功能。
 
	for(var i in data){
		if(data.hasOwnProperty(i)){
			//encodeURIComponent 将一些特殊字符转义(:;/?:@&=+$,#)而encodeURI并不转义这些字符
			paraArr.push(encodeURIComponent(i) + "=" +encodeURIComponent(data[i]));
		}
	}
 
	urlArr = url.split("?");//链接中原有的参数。
	if(urlArr.length>1){
		paraArr.push(urlArr[1]);
	}
 
	callbackName = 'callback'+new Date().getTime();
	paraArr.push('callback='+callbackName);
	paraString = paraArr.join("&");
	url = urlArr[0] + "?"+ paraString;
 
	script = document.createElement("script");
	/*为了实现IE下的onerror做的处理。JSONP的回调函数总是在script的onload事件(IE为onreadystatechange)之前就被调用了。
因此我们在正向回调执行之时,为script标签添加一个属性,然后待到onload发生时,再检测有没有这个属性就可以判定是否请求成功,
没有成功当然就调用我们的error。*/
	script.loaded = false;
 
	//将回调函数添加到全局。
	window[callbackName] = function(arg){
		var callback = config.callback;
		callback(arg);
		script.loaded = true;
	}
 
	head = document.getElementsByTagName("head")[0];
	head.insertBefore(script, head.firstChild) //chrome下第二个参数不能为null
	script.src = url;
 
	supportLoad = "onload" in script;
	onEvent = supportLoad ? "onload" : "onreadystatechange";
 
	script[onEvent] = function(){
 
		if(script.readyState && script.readyState !="loaded"){
			return;
		}
		if(script.readyState == 'loaded' && script.loaded == false){
			script.onerror();
			return;
		}
		//删除节点。
		(script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));	
		script = script[onEvent] = script.onerror = window[callbackName] = null;
 
	}
 
	script.onerror = function(){
		if(window[callbackName] == null){
			console.log("请求超时,请重试!");
		}
		config.error && config.error();//如果有专门的error方法的话,就调用。
		(script.parentNode && script.parentNode.removeChild(script))&& 
		(head.removeNode && head.removeNode(this));	
		script = script[onEvent] = script.onerror = window[callbackName] = null;
	}
 
	if(timeout!= 0){
		setTimeout(function() {
			if(script && script.loaded == false){
				window[callbackName] = null;//超时,且未加载结束,注销函数
				script.onerror();				
			}
		}, timeout);
	}
}