面试

Loading动画:

loading 准备了一个loading组件,用来写Loading动画。因为是全局Loading,所以在vuex中我定义了一个状态来控制这个Loading动画的显示隐藏当我请求数据的时候,我就把这个Loading的状态给他改为一个true然后让他显示咱们那个Loading然后当我数据请求成功之后给他隐藏掉  这一块我用的是拦截器来获取那个请求的状态。

拦截器:

首先我们下载axios用axios封装了一个拦截器刚开始那个Loading是默认隐藏的当我在页面挂载的时候让他那个Loading动画给显示把他的状态给改成true 当我的axios使用then请求成功之后在回调里面把Loading给他隐藏,如果你想自己封装的话可以使用axios.interceptors.request.use(function(config)){}这个就在你请求之前做了什么

axios.interceptors.response.use(function(config)){}请求之后又做了什么也就是数据获取完成之后我们要做什么事请

闭包:

闭包我的理解就是函数嵌套当我一个函数里面套用另一个函数当我们那个内部函数使用外部函数的参数或者方法或属性的时候,外部函数在引用这个内部函数时他就形成了一个闭包。

也就时说一个函数执行完毕以后定义在内部的变量会被浏览器的垃圾回收机制所收回,但是闭包这样的并不会,因为内部函数依旧引用了外部函数的参数所以并不会被收回而是长期驻扎在内存当中

就好比我们现在有一个函数我在内部定义了一个var a=1 ;a++  然后alert这个a然后那我在调用一下这个函数alert出来a是个2然后我再次调用这个a他还是2 ,因为他这个浏览器不会储存这个a的值所以当我们再次调用的话他就会从新计算。但闭包就不会重新计算他会存在内存中当我们再次调用的时候内存中的值会再次加一他不会重新去计算这个值。

实际应用:

假如页面上有5个button,要给button绑定onclick事件,点击的时候,弹出对应button的索引编号

你循环他的长度之后你会发现你点击之后结果都是5因为onclick他是异步触发的当你在点击之后for循环已经执行完毕了那么i的值也就变成5了所以不管你点击那个结果都是5

在这里我们就可以使用闭包来解决这种问题了  在闭包的作用下,定义事件函数的时候,每次循环的i值都被封闭起来,当我们点击不同的i的时候就会得到不同的值

css盒模型  :::

盒模型分为标准盒模型,和IE盒模型

区别:::

标准盒模型在我们计算他的宽和高的时候只计算content就可以了

IE盒模型在我们计算他的宽和高的时候他包含了border 和padding还有content

css如何设置两种模型::

/* 标准模型 */ :  box-sizing:content-box;

/*IE模型*/  :box-sizing:border-box;

JS获取盒模型宽高::

1.  dom.style.width/height

 这种方式只能取到dom元素内联样式所设置的宽高,也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话,通过这种方法是获取不到dom的宽高的。

2. dom.currentStyle.width/height

  这种方式获取的是在页面渲染完成后的结果,就是说不管是哪种方式设置的样式,都能获取到。

  但这种方式只有IE浏览器支持。

3. window.getComputedStyle(dom).width/height

  这种方式的原理和2是一样的,这个可以兼容更多的浏览器,通用性好一些。

边距重叠解决方案(BFC)::

BFC:块级格式化上下文

怎么取创建bfc::

float属性不为none(脱离文档流)

position为absolute或fixed

display为inline-block,table-cell,table-caption,flex,inine-flex

overflow不为visible

应用场景::

自适应两栏布局

清除内部浮动

防止垂直margin重叠

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,608评论 0 7
  • HTML HTML5标签 媒体查询head部分写法 Doctype作用? 严格模式与混杂模式如何区分?它们有何意义...
    Mayo_阅读 666评论 0 8
  • 1.清除盒模型的浮动方式 way 1: 最后追加元素, 设置 clear:both; way 2: 伪元素清除 d...
    Hyb_7818阅读 655评论 0 0
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,539评论 0 25
  • 你曾是我的心事, 我曾把你写进日记; 随着日子的慢慢逝去, 你就成为了我人生的历史。 有些人可以一辈子铭记, 有些...
    琢玉书生阅读 359评论 0 2