一次前端面试

从事前端开发一段时间了，开发水平一直都没有什么提高。最近疫情被隔离在家，反省了一下自己的工作日常，觉得自己的学习方法有问题。一直有输入，但是从来没有输出。今天鼓起勇气，开始写我的第一篇输出。一是为了加深对知识的理解，二是对知识做一个总结和归纳。我的文章内容都是为了总结个人的知识点，如果有理解不正确的地方希望大家可以帮我纠正，我会积极理解消化，希望和大家共同进步。

1、es6里的promise有几种状态？可以解决什么问题？
（我的回答：等待状态、满足状态和拒绝状态。）
1.1 状态：
① pending，等待状态，如正在进行网络请求，或者定时器没有到时间。
② fulfill，满足状态，当我们主动回调resolvet时，就处于满足状态，并且会回调.then（）方法。
③ reject，拒绝状态，当我们主动回调reject时，就处于拒绝状态，并且会回调.catch（）方法。
1.2 可解决的问题：
① 可支持多个并发请求，获取返回数据。
② 解决回调地狱问题

2、如何实现一个div水平垂直居中？

（我的回答: 已知父元素和子元素宽高，使子元素在父元素内水平垂直居中。)

<style>
    
      .parent {
       width: 500px;
       height: 500px;
       background-color: pink; 
       position: relative;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: deeppink;
        position: absolute;
        top: 200px;
        left: 200px;
      }
      
    </style>

这个答案，我在回答的时候top和left是通过口算得出的，但实际开发中并不实用。面试官并没有问我还有没有其他的解决方法。以下还有几种方法可以实现元素垂直居中。
2.1 使用定位加-margin：

	.parent {
       width: 500px;
       height: 500px;
       background-color: pink; 
       position: relative;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: deeppink;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;   /* 这个值是-width/2*/
        margin-left: -50px;
      }

2.2 使用定位加margin: auto;

	.parent {
       width: 500px;
       height: 500px;
       background-color: pink; 
       position: relative;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: deeppink;
        display: inline-block;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
      }

3、如何理解MVVM模式？
（我的回答：就是model层、viewmodel层和view层，view和model不直接交互，靠viewmodel层在中间协调数据）
: MVVM用户操作图
描述：MVVM是前端的视图分层开发的思想，主要把前端页面分为Model层、ViewModel层、View层。ViewModel层是Model层和View层的协调者，它提供了数据的双向数据绑定。

4、DOM有哪几种类型？

（我的回答：Document节点、Node节点、Element节点。）

元素节点　　 Node.ELEMENT_NODE(1)
属性节点　　 Node.ATTRIBUTE_NODE(2)
文本节点　　 Node.TEXT_NODE(3)
CDATA节点 Node.CDATA_SECTION_NODE(4)
实体引用名称节点　 Node.ENTRY_REFERENCE_NODE(5)
实体名称节点　　 Node.ENTITY_NODE(6)
处理指令节点　　 Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点　 Node.COMMENT_NODE(8)
文档节点　 Node.DOCUMENT_NODE(9)
文档类型节点　　 Node.DOCUMENT_TYPE_NODE(10)
文档片段节点　　 Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点 Node.NOTATION_NODE(12)
5、原生DOM获取一个元素的方法？
我的回答： document.getelementById， document.getelementsByxxx。
完整答案：
通过ID获取：getElementById

通过name属性获取：getElementsByName

通过标签名获取：getElementsByTagName

通过类名获取：getElementsByClassName

通过选择器获取一个元素：querySelector

通过选择器获取一组元素：querySelectorAll

获取html标签的方法：document.documentElement

获取body标签的方法：document.body

6、原生js里有一个click事件，是先捕获还是先冒泡？什么是捕获？什么是冒泡？
（我的回答：先捕获后冒泡。事件触发需要经过三个阶段：事件捕获、触发事件、事件冒泡）
画张图在这里插入图片描述
我一共面了两家，这是第一家公司的全部面试问题，我这次面试的缺点是：所有的回答都只能在边缘进行，回答不完整也不深入。

猜你喜欢