前端面试题之简答题

1. 简述MVVM和MVC的组成及两者的内在联系？

MVC 主要是后端的分层开发思想；组成：Model, View , Controller。
MVVM是前端页面的分层开发思想；组成：Model, View , ViewModel，主要关注于视图层。

2. Vue中v-show和v-if指令的区别？

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组 件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为 真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只 是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需 要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3. 按顺序写出Vue的生命周期。

Vue 生命周期可以分为 8 个阶段

1. beforeCreate（创建前）
2. created（创建后）
3. beforeMount（载入前）
4. mounted（载入后）
5. beforeUpdate（修改前）
6. updated（修改后）
7. beforeDestroy（销毁前）
8. destroyed（销毁后）

4. vue router跳转和location.href有什么区别？

使用location.href=’/url’来跳转，简单方便，但是刷新了页面；
使用history.pushState(’/url’)，无刷新页面，静态跳转；
引进router，然后使用router.push(’/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。

5. $.extend()与 $fn.extend()这两个好像，但又不一样，主要区别在哪里呢？

$.extend是用来扩充jquery类属性或者方法所用 而 $ .fn.extend是用来扩充jquery实例的属性或者方法所用

6. 简述一下$(“元素名称”).offset()的作用及返回的数据格式？

offset() 方法设置或返回被选元素 相对于文档的偏移坐标。
返回第一个匹配元素的偏移坐标，它返回一个带有2个属性( 以像素为单位的 top 和 left 位置)的对象

7. 简述什么是事件冒泡，如何阻止事件冒泡？

在一个对象上触发某类事件（比如单击 onclick 事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即 document 对象（有些浏览器是 window）
阻止事件冒泡的几种方法
第一种：event.stopPropagation();
第二种：return false;
第三种：event.preventDefault();

8. jQuery框架中监听Ajax事件的方法有哪些？

ajaxStart()AJAX请求开始时执行函数。
ajaxStop()AJAX请求结束时执行函数。
ajaxComplete()AJAX请求完成时执行函数。
ajaxError()AJAX请求发生错误时执行函数。
ajaxSuccess()AJAX请求成功时执行函数。
ajaxSend()AJAX请求发送前执行函数。Ajax事件。

9. 简述一下ES6的promise对象?

异步编程解决方案，主要用来解决回调地狱问题。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

10. CSS3中新增的单位有那些，简述每个单位的使用场景?

vw相对于视口的宽度。视口被均分为100单位的vw
vh相对于视口的高度。视口被均分 100单位的vh
使用场景:不借助 js 的情况下实现 word 文档效果

rem相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

欢迎大家阅读，本人见识有限，写的博客难免有错误或者疏忽的地方，还望各位指点，在此表示感激不尽。文章持续更新中…