微前端大作业

文章目录

1. 1. css实现垂直水平居中
2. 2. IE8兼容背景透明
3. 3. IE8浏览器的DOM兼容
4. 4. 未能解决的问题。

这两天做了网易微前端的大作业，中间遇到了很多问题，通过解决这些问题学到了不少东西向。把在完成大作业过程中的问题记录下来以便日后温故。

css实现垂直水平居中

作业要求兼容IE8，一开始用的方法是:

.parent{position: relative;} 
.child{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

但是这个方法只有IE9及以上版本浏览器支持。所以有经过一番寻找终于找到了解决方案：

// 支持IE7+
.parent{position: relative;} 
.child{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left:-199px; margin-top:-139px; 
}

IE8兼容背景透明

现代高级流量器已经兼容了css的rgba属性，但是这个属性在IE8中不支持。IE的低版本支持一个特殊的属性，即filter。一开始使用这个filter属性时有个问题，就是背景是透明了，但是背景内的内容也透明了。代码如下面：

.back{
	filter:Alpha(opacity=80); background:#000;
}

经过在网上搜索发现了一个解决方案，如下：

//css
.back {
	background:rgba(255, 255, 255, 0.6)!important;
	filter:Alpha(opacity=60); background:#fff; /*　使用IE专属滤镜实现IE背景透明*/ 
}
.back content{ 
	position:relative; /*实现IE内容不透明*/
}

//html结构：
<div>
	<div class="back">
		<div class="content"></div>
	</div>
</div>

经过仔细琢磨，发现只要是.back内的内容添加poistion属性就可以是其不再透明。

IE8浏览器的DOM兼容

IE8并不兼容W3C的标准事件模型，且没有实现document.getElementsByClassName()函数。
下面是一个兼容IE的事件注册和删除代码：

//事件注册
function addEvent(element, type, listener){
	if (!!element.addEventListener){
		element.addEventListener(type, listener, false);
	}else if (element.attachEvent){
		element.attachEvent('on'+type, listener);
	}
}
//事件删除
function removeEvent(element, type, listener){
	if (!!element.removeEventListener){
		element.removeEventListener(type, listener, false);
	}else if (element.detachEvent){
		element.detachEvent('on'+type, listener);
	}
}

下面是一个兼容IE的getElementsByClassName()函数：

/**
 * 兼容IE的类选择器getElementsByClassName
 *
 * @param {string} className 类名称
 * @return {Array.<HTMLElement>} 返回匹配的元素列表
 */
function getElementsByClassName(className,context){
	var context = context || document;
	var result = [];
	if(context.getElementsByClassName){
		result = context.getElementsByClassName(className);
	}else{
		var temp = context.getElementsByTagName("*");
		for(var i = 0, len = temp.length; i < len; i++){
			var node = temp[i];
			if(hasClass(node, className)){
				result.push(node);
			}
		}
	}
	return result;
}

function hasClass(element, className){
	var classNames = element.className;
    if (!classNames) {
        return false;
    }
    classNames = classNames.split(/\s+/);
    for (var i = 0, len = classNames.length; i < len; i++) {
        if (classNames[i] === className) {
            return true;
        }
    }
    return false;
}

另外还需要用到cookie，所以在完成作业过程中封装了处理cookie的函数：

function setCookie (name, value, expires, path, domain, secure) {
	var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
	if (expires){
		cookie += ';expires='+expires.toGMTString();
	}
	if (path){
		cookie += ';path='+path;
	}
	if (domain){
		cookie += ';domain='+domain;
	}
	if (secure){
		cookie += ';secure='+secure;
	}
	document.cookie = cookie;
}

function getCookie(){
	var cookie = {};
	var all = document.cookie;
	if (all === ''){
		return cookie;
	}
	var list = all.split("; ");
	for (var i = 0; i < list.length; i++){
		var item = list[i];
		var p = item.indexOf('=');
		var name = item.substring(0,p);
		name = decodeURIComponent(name);
		var value = item.substring(p+1);
		value = decodeURIComponent(value);
		cookie[name] = value;
	}
	return cookie;
}

function removeCookie(name, path, domain) {
	document.cookie = name + '=' 
		+ '; path=' + path 
		+ '; domian=' + domain 
		+ '; max-age=0';
}

IE8不支持element.previousElementSibling属性，所以也封装了一个previousElementSibling( el )方法：

function previousElementSibling( el ) {
    if( el.previousElementSibling ) {
        return el.previousElementSibling;
    } else {
        while( el = el.previousSibling ) {
            if( el.nodeType === 1 ) return el;
        }
    }
}

未能解决的问题。

IE8中由于浏览器限制不能实现Ajax的跨域访问，所以不能在本地访问作业中提供的API接口。解决跨域问题可通过JSONP或者可以使用Frame代理、Web Socket等技术。不过在现代浏览器中已经实现了CORS(Cross-Origin Resource Sharing)的支持，可以实现跨域的资源访问。所以这里没有深入去了解这些技术。

我的作业