VIPKID面经

面试体验很好，一面小哥感觉是谦逊又很平易近人，像身边的同学，也说了前端后期职业上可能出现的瓶颈期，二面的时候遇到了南理工的面试官。。。尴了个尬，又回想到考研那天在南理工偌大校园里的失落与难过，而三年之后，我又过上了几个月苦行僧的生活，同样的迷茫，同样的无助，对未知未来的期待与失落每天都在上演，不过和三年前不一样的是现在心态逐渐平缓，明白了尽人事听天命就好，羡慕的生活自己最后也会有，一切都是最好的安排，这三年也印证这一点。
步入正题，问了几个我没答上已经答的不太好的问题，特此记录：

1.如何封装一个dialog插件？(从样式、布局、JS三方面答，包括方法的输出，调用时候的参数)

插件是我们天天都在用的，例如轮播图插件、Element-UI里面的各种插件，现在封装一个dialog插件，就是一个提示显示框，有按键。
确定插件对外暴露的方法(调用方法)有：
.show(options)显示插件
其中options里面的参数有：title标题；content主内容；skin 皮肤，就是给dialog加的类名，方便重置样式；btns 按钮组名字，默认两个按钮，一个是confirm，一个是concel；confirm 点击confirm按钮时的回调，如确认；cancel 点击cancel按钮的回调，如取消；animation 过渡动画，默认为1，可选0与2
.hiden() 关闭dialog
写布局(html),生成DOM

<!-- 最外层 -->
<div class="dialog-wrapper">
  <!-- 居中主要层 -->
  <div class="dialog">
    <!-- 标题 -->
    <div class="title">消息提示</div>
    <!-- 主要内容 -->
    <div class="content">提示内容</div>
    <!-- 按钮组 -->
    <div class="buttons">
      <div class="btn cancel-btn">取消</div>
      <div class="btn confirm-btn">确认</div>
    </div>
  </div>
</div>

编写CSS
dialog-wrapper 采用fixed布局，盒子模型，水平垂直居中
dialog-wrapper .dialog 相对定位，采用W3C盒子模型
.dialog-wrapper .dialog .buttons 采用盒子模型
.dialog-wrapper .dialog .close-btn .confirm-btn 绝对定位
定义slideDown slideUp fadeIn fadeOut scaleIn scaleOut六种动画，from{}to{}形式，把动画加到各节点上
JS封装
由于只暴露两个方法，所以用自执行函数，将show(options)、hide(index)方法暴露，自己的方法getNeedElement()、bindEvent(confirm,cancel)放在私有方法中。
show()方法编写
①解构赋值，获得title那些参数 ②定义skin 类名
③给当前动画赋值 ④生成按钮 ⑤生成最终的HTML
⑥将HTML添加到body上 ⑦获取需要的节点，调用getNeedElement()
⑧为节点绑定事件，调用bindEvent(confirm,cancel)方法
⑨最终返回elem
hide()方法编写
①将最外层执行的动画固定
②内容层执行关闭动画
③移除elem节点
bindEvent()方法编写
①给confirm按钮绑定hide()事件
②给cancel按钮绑定hide()事件
getNeedElement()方法编写
获取所有节点

2.BFC是什么？作用是什么？

BFC(块级格式化范围)，决定了元素如何对其内容进行定位，可以理解为一个独立容器，并且这个容器里的box布局与这个容器外的毫不相干。
产生BFC的条件：满足以下任意一个都可以
①float的值不为none
②overflow的值不为visible
③display的值为table-cell、table-caption、inline-block中任何一个
④position的值不为relative和static
作用：
①不和浮动元素重叠
②清除元素内部浮动 把父元素设为BFC
③解决上下相邻两元素重叠 因为在标准文档流中，块级标签之间竖直方向的margin会以大的为准

3.遍历数组的方法？

1.for循环
2.forEach()方法 实际性能比forEach弱
3.for…in…循环 效率最低 一般遍历对象
4…map()遍历
5.for…of…遍历

希望有hr面吧，秋招一个月了还没见过hr面。。。可怜巴巴