随机面试题

Posted 2022-07-05 web-chuan

1.截取字符串abcdefg里面的cde

　　str.substring(2,5)  str.substr(2,3)  str.slice(2,3)

2.清除浮动的几种方式，各自优缺点

　　（1：使用空标签清除浮动clear:both。

　　　　原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

　　　　优点：通俗易懂，容易掌握

　　　　缺点：会添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦

　　　　建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

　　（2：父级div定义overflow:hidden

　　　　原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

　　　　优点：简单，代码少，浏览器支持好

　　　　缺点：不能和position配合使用，因为超出的尺寸的会被隐藏

　　　　建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用

　　（3：父级div定义伪类:after和zoom(用于非IE浏览器)

　　　　原理：IE8以上和非IE浏览器才支持:after，原理和方法1有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

　　　　优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。

　　　　缺点：代码多，要两句代码结合使用，才能让主流浏览器都支持

　　　　建议：推荐使用，建议定义公共类，以减少CSS代码

3.闭包是什么，有什么特性

　　　　为什么产生闭包：javascript语言的特别之处就在于：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。出于种种原因，我们有时候需要获取到函数内部的局部变量。但是，上面已经说过了，正常情况下，这是办不到的！只有通过变通的方法才能实现。那就是在函数内部，再定义一个函数。

　　　　什么是闭包： 闭包就是能够读取其他函数内部变量的函数。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

　　　　优点：最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中，不会在f1调用后被自动清除。

　　　　缺点：

　　　　　　1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

　　　　　　2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

4.IE常见的兼容问题

　　　　（1：不同浏览器的标签默认外补丁margin和内补丁padding不同

　　　　　　   发生概率：100%

　　　　　　   解决方案：使用CSS通配符*，设置内外补丁为0

　　　　（2：块属性标签float之后，又有横向的margin值，在IE6中显示会比设置的大（IE6双边距bug）

  　　　　　    发生概率：90%

　　　　　　   解决方案：在float标签样式控制中加入display:inline;

　　　　（3：滚动条到顶端的距离（滚动高度）到左端的距离

　　　　　　   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

　　　　　　   var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

　　　　（4: 获取className的集合

　　　　　　　obj.getElementsByClassName（IE不支持）

 　　　　（5:   获取非行内样式兼容

　　　　　　　window.getComputedStyle ? getComputedStyle(obj,true)[attr] : obj.currentStyle[attr];

　　　　　(6：获取事件对象的兼容

　　　　　　   evt = evt || window.event

　　　　 （7：获取键盘按键编码值的兼容

　　　　　　   var key = evt.keyCode || evt.charCode || evt.which;

　　　　（8：阻止事件冒泡的兼容和阻止超链接的默认行为的兼容

　　　　　　  e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; 事件冒泡

　　　　　　  evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;组织默认行为

　　　　 （9：添加事件监听器的兼容和移除事件监听的兼容

　　　　　　  obj.addEventListener(event,fn,boo);和obj.attachEvent(‘on‘ + event,fn);

　　　　　　  obj.removeEventListener(event,fn,boo);和obj.detachEvent(‘on‘ + event,fn);

　　　　（10：获取事件源的兼容

　　　　　　  var target = event.target || event.srcElement;

5.如何居中不定宽高的div

　　　提供三种方法，供参考

　　　　　　使用Flex

　　　　　　只需要在父盒子设置：display: flex; justify-content: center;align-items: center;

　　　使用 CSS3 transform

　　　　　　父盒子设置:position:relative

　　　　　　Div 设置: transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

　　　使用 display:table-cell 方法

　　　　　　父盒子设置:display:table-cell; text-align:center;vertical-align:middle;

　　　　　　Div 设置: display:inline-block;vertical-align:middle;