从事前端开发一段时间了,开发水平一直都没有什么提高。最近疫情被隔离在家,反省了一下自己的工作日常,觉得自己的学习方法有问题。一直有输入,但是从来没有输出。今天鼓起勇气,开始写我的第一篇输出。一是为了加深对知识的理解,二是对知识做一个总结和归纳。我的文章内容都是为了总结个人的知识点,如果有理解不正确的地方希望大家可以帮我纠正,我会积极理解消化,希望和大家共同进步。
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是前端的视图分层开发的思想,主要把前端页面分为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事件,是先捕获还是先冒泡?什么是捕获?什么是冒泡?
(我的回答:先捕获后冒泡。事件触发需要经过三个阶段:事件捕获、触发事件、事件冒泡)
画张图
我一共面了两家,这是第一家公司的全部面试问题,我这次面试的缺点是:所有的回答都只能在边缘进行,回答不完整也不深入。