2019第一次前端面试总结

最新推荐文章于 2020-12-30 06:03:39 发布

原创最新推荐文章于 2020-12-30 06:03:39 发布 · 392 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

面试

本文记录了一次阿里巴巴前端开发岗位的电话面试过程及面试题目解析，包括BFC概念、元素居中方法、闭包原理及应用、事件冒泡与捕获机制等核心知识点。

仅向几家公司投递了简历，都没有回应，意外收到了阿里的面试通知，是电话面，慌的很（本以为做了素质测评才会收到面试通知。。。），匆匆准备了俩小时就开始面试了，结果可想而知（年少无知啊）。

===========================================================================================

还是看一下面试题吧。

一、BFC

BFC（块级格式化上下文）

二、 有一个未知宽高的元素，要求在页面上水平垂直居中

有一个未知宽高的元素，要求在页面上水平垂直居中

三、闭包

（1）闭包的概念

首先要理解JavaScript的独特的变量作用域。

JavaScript的变量分为局部变量和全局变量，在函数内部可以直接访问全局变量，但是函数外部却不能直接访问函数的局部变量，但是出于需要，有时要获取函数内部局部变量，可以在函数内部再定义一个函数func，让func作为子函数，函数的局部变量对于其子函数是完全公开的，也就是说子函数可以访问它的全部变量，但是函数无法访问子函数的内部变量，这就是链式作用域结构。子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

闭包就是可以读取其他函数内部变量的函数，是连接内部函数和外部函数的桥梁。

（2）在开发过程中什么环节使用闭包？

当需要读取函数内部的局部变量或者不使变量的内存在使用之后立即销毁时，要使用闭包，在实际开发中，闭包主要是用来封装变量，收敛权限

// 封装变量，收敛权限
function isClosure() {
        var list = []
        return function(option) {
            if(list.indexOf(option)!==-1) {
                console.log("已存在")
            } else {
                list.push(option)
                console.log("首次存入")
            }
        }
    }
    var f1 = isClosure();
    f1("a")
    f1("b")
    f1("a")

（3）针对内存泄漏的解决方案

内存泄漏的概念 不再用到的内存，没有及时释放，就叫做内存泄漏。

使用闭包有优点，可以访问函数内部的局部变量，也可以使内部变量一直保存在内存中，不会再内部函数调用后直接被销毁；

缺点也很明显，因为内部变量的值一直保存在内存中，会占用大量的内存空间，数据量大时会严重影响性能，并且由于内部函数可以修改函数内部局部变量的特性，别有用心者可以借助内部函数随意修改内部局部变量的值，在IE中会出现内存泄漏。

解决办法

可以在退出函数之前，将不使用的局部变量全部删除，即置为null；

也可以使用jQuery，jQuery为我们提供了另一个避免这种泄漏的工具。用.data()方法，将信息附加到DOM元素。由于这里的数据并非直接保存在扩展属性中（jQuery使用一个内部对象并通过它创建的ID来保存这里所说的数据），因此永远也不会构成引用循环，从而有效回避了内存泄漏问题。

四、事件中的冒泡和捕获机制

（1）两者的区别

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

事件冒泡和事件捕获的详细解释https://www.cnblogs.com/bfgis/p/5460191.html

（2）在什么环境下使用冒泡？

当页面有很多DOM事件需要处理，比如说有100个li元素进行处理，当点击其中一个li时，都有这个li对应的事件被触发，就可以使用事件委托，给父元素添加点击事件，每个事件都会有一个事件源，就是你真正操作的部分。Event对象提供了的target属性就是事件源，用于捕获真正被点击的节点元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       ul {
        height: 300px;
        background: pink;
       } 
       li {
        line-height: 30px;
        height: 30px;
       }
       li:nth-of-type(2n) {
        background: red;
       }
       li:nth-of-type(2n+1) {
        background: green;
       }
    </style>
</head>
<body>
    <ul id='ul'>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <script type="text/javascript">
        var oUl = document.getElementById('ul')
        oUl.addEventListener('click',function (e) {
            var name = e.target.nodeName.toLowerCase()
            if (name === 'li')
                console.log(name)
        })
    </script>
</body>
</html>

五、函数封装

（1）使用原生js封装一个addClass方法，为页面上DOM元素动态添加className

（2）使用原生js封装一个removeClass方法，动态删除DOM元素的class

封装addClass和removeClass方法链接

六、对一个数组去重

对一个数组去重的五种方法链接

以上就是这次面试的题了，因为太菜，面试官很快就结束了面试，不过作为一个打不死的小强，本博主绝对不会气馁的！