面试要问的问题

一、JS相关

1、在什么情况下需要使用setTimeout(fun,0)?

ans:当需要执行的语句跟上下文语句存在依赖关系,但是无法判断先后顺序时,需要放到运行队列的队尾执行,这时就要用到setTimeout(fun,0)。

2、DOM文档加载的步骤(即浏览器与服务器建立连接到页面加载完毕发生的事情)

解析HTML结构。

加载外部脚本和样式表文件。

解析并执行脚本代码。

DOM树构建完成。

// window.addEventListener("DOMContentLoaded", function(){}, false)

// $(document).ready(function(){})

加载图片等外部文件。

页面加载完毕。

// window.addEventListener("load", function(){}, false)

// window.onload() = function(){}

// $(document).load(function(){})

PS. addEventListener的第三个参数?如何阻止冒泡?

3.检查是不是字符串?如果要求区分数组、对象、正则表达式和字符串呢?

Object.prototype.toString.call()

为什么要使用Object.prototype上的toString方法?因为第三方库或你自己的代码可能重写实例的toString方法。通过Object.prototype,我们可以强制实现实例原来的toString行为。


二、CSS相关

1、BFC折叠

画出以下代码呈现出的效果(标注高度和背景色)。

如何把a的高度撑起来?

.a{background: red;}

.b{background: yellow; height: 100px;}

.c{background: blue; height: 100px; margin-bottom: 20px;}

<div class="a"><div class="c"></div></div>

<div class="b"></div>

ans1:.a{overflow: hidden;}

ans2:.a::after{content: ''; display: table;}

ans3:.a::after{content:''; display: block; height: 1px; margin-top: -1px; opacity: 0;}

2、居中方法

ans1: transform: translate(-50%, -50%);

ans2: .wrap::after{content: ''; display: inline-block; height: 100%; vertical-align: middle;} .inner{vertical-align: middle;}

ans3: .wrap{display: table-cell; vertical-align:middle; height:font-size ≈ 1:0.893} .inner{vertical-align: middle;}

3、border-radius(较冷门)

border-radius: 1-4 length|%/1-4 length|%;

4、闭包

var li = document.getElementsByTagName('li');

for(var i = 0; i < li.length; i++){

  li[i].addEventListener('click',function(e){

    console.log(i);

  })

}


三、Vue

1、描述你知道的/用过的生命周期?

beforeCreate-created-beforeMont-Monted

2、如何监听一个实例中某个data的变化?

watch

PS. deep: true 有什么作用?


四、小程序




最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容