前端面试题总结（持续更新中···）

最新推荐文章于 2022-11-12 16:32:56 发布

545龙哥哥

最新推荐文章于 2022-11-12 16:32:56 发布

阅读量210

点赞数

分类专栏：龙哥哥前端笔记文章标签：前端面试 mvvm

本文链接：https://blog.csdn.net/longgege001/article/details/83154871

版权

龙哥哥前端笔记专栏收录该内容

15 篇文章 2 订阅

订阅专栏

1、什么是响应式设计？响应式设计的基本原理是什么？

2、Javascript的基本数据类型有哪些？

3、什么是闭包（closure），为什么要用它？

4、Jquery一个对象可以同时绑定多个事件，这是如何实现的？

5、如何实现浏览器内多个标签页之间的通信（页面间数据传输）？

6、null和undefined的区别？

7、MVVM与MVC的区别？

8、常用的块级元素、行内元素、行内块元素有哪些？

9、盒模型有几种？

1、什么是响应式设计？响应式设计的基本原理是什么？

页面的设计和开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、css media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明viewport：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

2、Javascript的基本数据类型有哪些？

JavaScript中有五种基本数据类型，它们分别是：undefined，null，boolean，number，string。

还有一种复杂数据类型-object。其中Object数据类型中包括Function、Array、Date等等。

3、什么是闭包（closure），为什么要用它？

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

详细请看http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

4、Jquery一个对象可以同时绑定多个事件，这是如何实现的？

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数

on() 方法事件处理程序到当前选定的jQuery对象中的元素。自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。

delegate() 方法为指定的元素添加一个或多个事件处理程序

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

//for example
$(document).ready(function() {
    $("button").on({
        click: function() {
            $("p").slideToggle()
        },
        mouseover: function() {
            $("body").css("background-color", "red");
        },
        mouseout: function() {
            $("body").css("background-color", "#fffffff")
        };
    });
});
$(document).ready(function(){
  $("p").bind("mouseover mouseout",function(){
    $("p").toggleClass("intro");
  });
});

5、如何实现浏览器内多个标签页之间的通信（页面间数据传输）？

方法一：使用storage（localStorage、sessionStorage）

使用storage事件监听添加、修改、删除的动作

window.addEventListener("storage",function(event){
        $("#name").val(event.key+”=”+event.newValue);
});

方法二：使用cookie

6、null和undefined的区别？

null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。

undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined<使用typeof运算得到 “undefined”。

需要注意的是：

ECMAScript认为undefined是从null派生出来的，所以把它们定义为相等的。

alert(null == undefined)    //true
alert(null === undefined)   //false 因为类型不相等

undefined是访问一个未初始化的变量时返回的值，而null是访问一个尚未存在的对象时所返回的值。因此，可以把undefined看作是空的变量，而null看作是空的对象。

平时在使用过程中，在定义一个想保存对象的变量时，就可以让该变量先保存null值，这样既能体现null是一个空指针对象，也能更好的区分null和undefined。

7、MVVM与MVC的区别？

mvc的模式：

View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的。

mvvm模式：

通信是双向的，View 与 Model 不发生联系，都通过 ViewModel传递。View的变动，自动反映在 ViewModel，反之亦然.

MVVM与MVC最大的区别就是：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。

8、常用的块级元素、行内元素、行内块元素有哪些？

常用的块级元素：div,p,h1~h6,ul,li,ol,dl,dd,table等，H5新增的有header,footer,section,aside等

常用的行内元素：span,a,label,em,strong,i,strike(中划线),b等

常用的行内块元素：img,textarea,input,td等

块级元素的特点：独占一行，高度，行高，宽度，外边距，内边距都可以设置

行内元素的特点：和其他元素都在一行上，遇到父级元素边界会自动换行，宽高无法设置，可以设置行高（注意：虽然行内元素设置行高之后会有位置的变化，但是并没有改变盒子大小。），可以设置左右magin,无法设置上下margin，可以设置padding（注意：设置padding不会改变其父元素盒子大小，并且设置上下padding和块元素的表现有点差异，块元素会直接把内容挤到中间，行内元素在设置padding-top时，如果上面没有足够的地方放置，则会设置失败，如下图）