前端面试的葵花宝典

最新推荐文章于 2022-07-12 18:21:33 发布

weixin_33694172

最新推荐文章于 2022-07-12 18:21:33 发布

阅读量775

点赞数 2

CC 4.0 BY-SA版权

文章标签：面试前端数据结构与算法 ViewUI

原文链接：https://juejin.im/post/5a92721b6fb9a0635f7e98a5

打算三月中旬开始找一份合适的工作,现在开始整理些面试题，也是顺便对于自己知识系统的整理

css部分

(1)css3选择器

子元素选择器：> 、 nth-child(n)、nth-of-type(n)
>比较常见，用于选择当前标签的所有子元素
:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的，
也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素，
而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele
复制代码

nth-child(n)、nth-of-type(n)区别这里附上一个小例子：代码如下:


<ul class="demo"> 
  <p>zero</p> 
  <li>one</li> 
  <li>two</li> 
</ul> 
上面这个例子，li:nth-child(2)选择的是<li>one</li>节点
，而 li:nth-of-type(2)则选择的是<li>two</li>节点
复制代码

兄弟选择器：+和~

+用于选择当前标签后面一个同级元素

li:nth-child(2) + li{}   //选择第二个元素之后的一个同级元素
复制代码

~用于选择当前标签后面的所有同级元素

li:nth-child(2) ~ li{}   //选择第二个元素之后所有的同级元素
复制代码

(2)盒子垂直水平居中

定位

1.盒子宽高已知,position:absolute;left:50%;top:50%;margin-left:-自身一半的宽度;margin-top:-自身一半的高度
2.盒子宽高未知,position:absolute;left:0;top:0;right:0;bottom:0;margin:auto
复制代码

table-cell布局

父级
 display:table-cell;vertical-align:middle;子级 margin 0 auto;
复制代码

定位 + transform;适用于盒子宽高不定

 position:relative/absolute;left:50%;top:50%; transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 
复制代码

flex布局

父级：
   display: flex;align-items: center;justify-content: center;

复制代码

浏览器问题

1.同源策略与跨域

首先介绍下浏览器的策略
● 端口相同
● 域名相同
● 协议相同
复制代码

按照阮老师的说法，目前，如果非同源，共有三种行为受到限制。

Cookie、LocalStorage 和 IndexDB 无法读取。
Dom无法获取
Ajax请求
如何实现跨域，在有些必要的场合突破这些限制呢
复制代码

AJAX请求的跨域

针对AJAX请求，有两种跨域方式

JSONP 只支持get请求，不支持post请求；兼容性较好
CORS 支持所有请求；不兼容老旧浏览器

jsonp跨域

jsonp是利用script标签可以跨域访问资源的特性，在页面动态插入script标签，向服务器发出数据请求，服务器接到请求后将数据放在一个指定名字的回调函数中传回

function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};
复制代码

cors跨域 cors请求的局限就小很多了，它是一个W3C标准，允许向跨源服务器，发起XMLHttpRequest请求。支持IE10及其以上。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。

对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信

js方面

1.数组的排序算法-冒泡排序

思想：冒泡排序思想：每一次对比相邻两个数据的大小，小的排在前面，如果前面的数比后面的大就交换这两个数的位置要实现上述规则需要用到两层for循环，外层从第一个数到倒数第二个数，内层从外层的后面一个数到最后一个数

var times=0;  
var bubbleSort=function(arr){  
    for(var i=0;i<arr.length-1;i++){  
        for(var j=i+1;j<arr.length;j++){  
            if(arr[i]>arr[j]){//如果前面的数据比后面的大就交换  
                var temp=arr[i];  
                arr[i]=arr[j];  
                arr[j]=temp;  
            }  
        console.log("第"+(++times)+"次排序后："+arr);  
        }  
    }   
    return arr;  
}  
console.log("The result is:"+bubbleSort(arr));  
复制代码

项目问题：

这个是最重要的感觉每次回答的都不好；实际项目中遇到的问题；

1.滚动穿透问题

滚动穿透是指在移动端当有fixed遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，原因click事件的300毫秒延迟造成的

解决方案：position：fixed

body.modal-open{
    position:fixed;
    width:100%;
}
复制代码

这种方式同样会当弹出层弹出时滚动条会丢失，所以还需要是使用js来保存滚动条的位置，在关闭弹出层时将滚动条还原

var ModalHelper = (function(bodyCls){
    var scrollTop;//在闭包中定义一个用来保存滚动条的变量
    return {
        afterOpen:function(){//在弹出之后记录保存滚动条的位置，并且给body添加，modal-open
            scrollTop = document.scrollingElement.scrollTop;
            document.body.classList.add(bodyCls);
            document.body.style.top = -scrollTop + 'px'
        },
        beforeClose:function(){//关闭时将，modal-open一处并还原之前保存的位置
            document.body.classList.remove(bodyCls);
            document.scrollingElement.scrollTop = scrollTop;
        }
    }
})('modal-open')
复制代码

移动端输入框被键盘挡住问题

由于页面没有滑动到底部：解决方案如下

setTimeout(function(){
    document.body.scrollTop = document.body.scrollHeight;
},300);
复制代码

未完待续。。。。。等面试回来再补充