前进经验-常用JS-弹框,消息，缓存，滚动条上拉下拉，全屏，样式变量

//定义全局变量函数
var uzStorage = function() {
	var ls = window.localStorage;
	return ls;
};
//定义全局变量u
var u = {};
//设置缓存
u.setStorage = function(key, value) {
	var v = value;
	if (typeof v == 'object') {
		v = JSON.stringify(v);
		v = 'obj-' + v;
	} else {
		v = 'str-' + v;
	}
	var ls = uzStorage();
	if (ls) {
		ls.setItem(key, v);
	}
};
//获取缓存
u.getStorage = function(key) {
	var obj;
	tryF(function() {
		var ls = uzStorage();
		if (ls) {
			var v = ls.getItem(key);
			if (!v) {
				return;
			}
			if (v.indexOf('obj-') === 0) {
				v = v.slice(4);
				obj = JSON.parse(v);
			} else if (v.indexOf('str-') === 0) {
				obj = v.slice(4);
			}
		}
	});
	return obj;
};

//清空缓存
u.clear = function() {
	uzStorage().clear();
};
var urlData = {};
var thatObj = {
	isStorage: false,
	
};

//设置缓存
function set_cache(key,value){
    if(key=='') return false;
    localStorage.setItem(key, value);
}

//读取缓存
function get_cache(key){
    return localStorage.getItem(key);
}

//删除缓存
function remove_cache(key){
    localStorage.removeItem(key);
}

//写入cookie
function setCookie(name,value){
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

//获取cookie
function getCookie(name){
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
    return unescape(arr[2]);
    else
    return null;
}

//删除cookie
function delCookie(name){
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
    document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

function setTitle(title){
	document.title=title;
}

window.addEventListener("resize", function() {
	
});
function initiCSSData(css) {
	for(var attr in css){
		document.documentElement.style.setProperty(attr,css[attr]);
	}
}

/**
 * 全局css变量info
 */
var webCssInfo = {
	'--color_mian': '#ffcc00',
};
/**
 * 设置css变量，public.js
 */
initiCSSData(webCssInfo);

window.onload = function(){
	// $(document).ready(function() {
		initiReadyBefore();
		initiReady();
	// });
};

var readys = [];
var readyBefores = [];

function tryF(e, err) {
	try {
		e(e);
	} catch (error) {
		//console.log(error);
		if (err) {
			err(error);
		}
	}
}
function initiReadyBefore() {
	for (var i = 0; i < readyBefores.length; i++) {
		tryF(function() {
			(readyBefores[i])();
		});
	}
}
function initiReady() {
	for (var i = 0; i < readys.length; i++) {
		tryF(function() {
			(readys[i])();
		});
	}
}
/**
 * @param {Object} fun
 * @param {Object} before
 */
function ready(fun, before) {
	if (before) {
		readyBefores.push(fun);
	} else {
		readys.push(fun);
	}
}
ready(function(){
	console.log('ready-before');
},true);

function backPage(){
	window.history.back();
	// window.history.go(-1);
}


function dataObj(data_) {
	var obj = {};
	tryF(function() {
		obj = eval('(' + data_ + ')');
	}, function(error) {
		tryF(function() {
			obj = JSON.parse(data_);
		}, function(error) {

		});
	});
	return obj;
}

function setFullscreen(is) {
	if (is) {
		var element = document.documentElement;
		if (element.requestFullscreen) {
			element.requestFullscreen()
		} else if (element.msRequestFullscreen) {
			element.msRequestFullscreen()
		} else if (element.mozRequestFullScreen) {
			element.mozRequestFullScreen()
		} else if (element.webkitRequestFullscreen) {
			element.webkitRequestFullscreen()
		}
	} else {
		if (document.exitFullscreen) {
			document.exitFullscreen()
		} else if (document.msExitFullscreen) {
			document.msExitFullscreen()
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen()
		} else if (document.webkitExitFullscreen) {
			document.webkitExitFullscreen()
		}
	}
}
/***
<div id="toastMsgView" class="absolute all zindex10k no_pointer none" data-tag="消息提示话框">
	<div class="flex all absolute zindex5k">
		<div class="dui-page margin_auto margin_bottom_45" style="">
			<div class="toast-box">
				<div class="toast-content">
					<p><span class="msg"></span></p>
				</div>
			</div>
		</div>
	</div>
</div>
**/
var toast = {
	msgs: [],
	isShow: false,
	show: function(msg, show) {
		if (show && this.isShow) {
			this.msgs.push(msg);
			return;
		}
		this.isShow = show;
		if (show) {
			if (jQuery.isEmptyObject(msg)) {
				return;
			}
			$("#toastMsgView .msg").text(msg.msg);
			$("#toastMsgView").removeClass("none");
			setTimeout(function() {
				if (msg.success) {
					tryF(function() {
						msg.success();
					})
				}
				toast.show();
			}, 3000);
		} else {
			$("#toastMsgView").addClass("none");
			for (var i = 0; i < this.msgs.length; i++) {
				var msg = this.msgs[i];
				if (!jQuery.isEmptyObject(msg)) {
					setTimeout(function() {
						toast.show(msg, true);
					}, 300);
					this.msgs[i] = '';
					break;
				}
			}
		}
	},
};
/***
<div id="dialogUitl" class="flex all absolute zindex6k pointer none" data-tag="对话框">
			<div class="margin_auto flex_column shaky">
				<div class="dui-page ">
					<div class="sdk-box">
						<div class="sdk-content">
							<p></p>
							<div class="sdk-footer">
								<div class="sdk-btn-1 active" onclick="dialogUitl.show({},false,-1)"></div>
								<div class="sdk-flex"></div>
								<div class="sdk-btn-2 active" onclick="dialogUitl.show({},false,0)"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
*/
var dialogUitl = {
	infos: [],
	info: {},
	isShow: false,
	show: function(info, show, type) {
		if (show && this.isShow) {
			this.infos.push(info);
			return;
		}
		this.isShow = show;
		if (show) {
			this.info = info;
			if (jQuery.isEmptyObject(info)) {
				return;
			}
			if('type' in info){
				$("#dialogUitl div[data-type="+info.type+"]").removeClass("none");
			}
			$("#dialogUitl p").text(info.content);
			$("#dialogUitl .sdk-btn-1").text(info.cancelText);
			$("#dialogUitl .sdk-btn-2").text(info.okText);
			tryF(function(){
				disableScroll();
			})
			$("#dialogUitl").removeClass("none");
		} else {
			info = this.info;
			tryF(function() {
				tryF(function(){
					enableScroll();
				})
				info.success({
					confirm: type == 0
				});
			});
			$("#dialogUitl div[data-type]").addClass("none");
			$("#dialogUitl").addClass("none");

			for (var i = 0; i < this.infos.length; i++) {
				var infoTwo = this.infos[i];
				if (!jQuery.isEmptyObject(infoTwo)) {
					setTimeout(function() {
						dialogUitl.show(infoTwo, true);
					}, 300);
					this.infos[i] = null;
					break;
				}
			}
		}
	},
};

function testMsg() {
	toast.show({
		msg: "消息1"
	}, true); 
	toast.show({
		msg: "消息2"
	}, true);
	toast.show({
		msg: "消息3"
	}, true);

	dialogUitl.show({
		type:'warning',
		content: '对话框测试1',
		cancelText: '取消',
		okText: '确定',
		success: function(e) {
			console.log("success", e);
		}
	}, true);
}

function addWindowScroll(fun){
	$(window).scroll(function(e){
		var scrollTop=e.currentTarget.scrollY;
		var clientHeight=e.currentTarget.innerHeight;
		var scrollHeight=document.documentElement.scrollHeight || document.body.scrollHeight;
		if(Math.ceil(clientHeight+scrollTop)>=scrollHeight){
			fun({
				type:'tolower',
				scrollTop:scrollTop,
				target:e.currentTarget
			});
		}else if(scrollTop<=0){
			fun({
				type:'toupper',
				scrollTop:scrollTop,
				target:e.currentTarget
			});
		}else{
			fun({
				type:'scroll',
				scrollTop:scrollTop,
				target:e.currentTarget
			});
		}
	});
}
function addScroll(selector,fun){
	$(selector).scroll(function(e){
		var scrollTop=e.target.scrollTop;
		var clientHeight=e.target.clientHeight;
		var scrollHeight=e.target.scrollHeight;
		if(Math.ceil(clientHeight+scrollTop)>=scrollHeight){
			fun({
				type:'tolower',
				scrollTop:scrollTop,
				target:e.target
			});
		}else if(scrollTop<=0){
			fun({
				type:'toupper',
				scrollTop:scrollTop,
				target:e.target
			});
		}else{
			fun({
				type:'scroll',
				scrollTop:scrollTop,
				target:e.target
			});
		}
	});
}

样式篇——前端经验-Flex弹性布局-弹框，快速布局，样式扩展无局限，微粒样式