微前端大作业
这两天做了网易微前端的大作业,中间遇到了很多问题,通过解决这些问题学到了不少东西向。把在完成大作业过程中的问题记录下来以便日后温故。
css实现垂直水平居中
作业要求兼容IE8,一开始用的方法是:1
2
3
4
5
6
7.parent{position: relative;}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
但是这个方法只有IE9及以上版本浏览器支持。所以有经过一番寻找终于找到了解决方案:1
2
3
4
5
6
7
8// 支持IE7+
.parent{position: relative;}
.child{
position: absolute;
top: 50%;
left: 50%;
margin-left:-199px; margin-top:-139px;
}
IE8兼容背景透明
现代高级流量器已经兼容了css的rgba属性,但是这个属性在IE8中不支持。IE的低版本支持一个特殊的属性,即filter。一开始使用这个filter属性时有个问题,就是背景是透明了,但是背景内的内容也透明了。代码如下面:1
2
3.back{
filter:Alpha(opacity=80); background:#000;
}
经过在网上搜索发现了一个解决方案,如下:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15//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的事件注册和删除代码:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16//事件注册
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()函数:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36/**
* 兼容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的函数:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42function 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 )方法:1
2
3
4
5
6
7
8
9function 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)的支持,可以实现跨域的资源访问。所以这里没有深入去了解这些技术。
我的作业