前端面试基础整理

html、css相关

如何垂直居中一个浮动元素

• 父盒子有宽高

父元素相对定位，子元素绝对定位，top：50%；left：50%。margin负的左右二分之一的height，width

.content{ position: absolute; top: 50%; left: 50%; width: 100px; float: left; height: 100px; background-color: #ff6700; margin-top: -50px; margin-left: -50px; } 

• 父盒子没有高宽

父盒子相对定位，子盒子决定定位，上下左右都为0，margin：auto；

.content{ width: 200px; height: 200px; background-color: #ff6700; float: left; margin: auto; position: absolute; left: 0; top: 0; bottom: 0; right: 0; } 

说一下css的三大特性以及选择器的优先级

css三大特性：继承、优先级、层叠
选择器优先级：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承

简单说一下盒模型

盒模型: 内容 + padding + border + margin

有用过less这种预编译吗?用过它的那些方法

less是对css进行一个预编译,它重新定义了css样式的书写,样式可以嵌套,同时还定义了变量和函数

<!--定义变量--> @color: #ccc; .content{ background-color:@color; } <!--定义函数--> .textCenter(@marginT: 10px){ text-align:center; margin-top:@marginT; } 

Css3颜色渐变有那两种

线性渐变所用的属性是linear-gradien
径向渐变用到的属性是radial-gradient

说说H5和C3新增了那些特性

H5主要新增了一些语义化标签，比如header,nav,main等等，还有音频视频，本地存储等技术。
Css3新增了一些属性选择器，伪类选择器，过度transition，2D3D旋转transform，动画animation等

实现页面间通信有那些方法,他们有什么区别

可以使用H5新增的本地存储技术localstorage, 将数据存储到本地硬盘
使用cookie存储,sessitionStorage
区别:cookie兼容性较好,但是存储体积小只有时4kb,生命周期短,会话结束数据就消失,而且不安全容易被劫持。而其他两者不一样,存储体积大,存储时间长,除非手动删除否则不会消失。

说一下rem和em的区别

在css中的单位主要有px,em,rem
px单位是固定的像素,一但设置就无法适应页面大小而改变
em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
em相对于父元素，rem相对于根元素(参照的是html)

说一下flex弹性布局的属性

justify-content： //子元素水平排列的方式 center //居中 space-between //两端对齐 space-around // 子元素拉手分布 flex-start // 居左 flex-end //居右 align-items ： // 子元素的垂直居中的排列方式 enter // 居中 flex-end //底部 flex-start //开始 align-content : //多行的时候，子元素的垂直排列方式 center //居中 flex-end //底部 flex-start //开始 flx-direction： // 排列方式row 横向排列 row-reverse //横向反向排列 flex-wrap ： //子元素是否在一行显示 no-wrap //不换行 wrap //换行 

控制元素显示隐藏有那些方式,有什么区别

display:none和visibility:hidden
display:none控制隐藏的元素不占位置
visibility:hidden隐藏元素,但保留元素空间

js相关

怎样添加、移除、移动、复制、创建和查找节点

1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 （2）添加、移除、替换、插入 appendChild() removeChild() replaceChild() insertBefore() （3）查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id，唯一性 

说说js中操作数组字符串的方法

这个我在之前的文章也有总结过

谈谈你对闭包的理解

之所以有闭包是因为js存在一个变量作用域，变量的作用域分为局部全局作变量和局部变量，在js函数中，可以访问到外部定义的全局变量，但在函数外面却无法访问函数内部定义的局部变量。所以闭包就是用来解决函数外部无法访问函数内部的局部变量。
闭包是在一个函数内部，return一个子函数，在子函数中可以访问到父函数定义的局部变量。它可以读取函数内部的变量，让这些变量的值始终保持在内存中，避免变量全局污染。所以导致它不能被浏览器垃圾回收机制回收，容易造成页面性能问题，内存泄漏

垃圾回收机制

JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。

当一个变量的生命周期结束之后它所指向的内存就应该被释放。JS有两种变量，全局变量和在函数中产生的局部变量。局部变量的生命周期在函数执行过后就结束了，此时便可将它引用的内存释放（即垃圾回收），但全局变量生命周期会持续到浏览器关闭页面。

说一下原型和原型链

• 原型

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。这个对象的所有属性和方法，都会被构造函数的所拥有。
Prototype作为对象的内部属性，是不能被直接访问的，我们一般通过__proto__这个属性进行访问。
在原型对象中还有一个属性constructor，这个属性对应创建所有指向该原型的实例的构造函数

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象*有的内容，统一设置到原型对象中。

 

构造函数-实例-原型之间的关系.png

• 原型链

在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条
当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。如果没有则去原型的原型中寻找,直到找到Object对象的原型，Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined。

 

原型链.png 画的有点丑

事件机制和事件委托

事件流的三个阶段:
事件捕获
处于目标阶段
事件冒泡

事件委托:
事件委托是利用了事件的冒泡原理实现的,子元素的事件通过冒泡形式委托父元素执行

说一下JS面对对象有那些特性,怎样实现

• 对象三大特性:封装,继承,多态

• 封装:将面向过程每一步进行推进:对同种对象的属性和方法进行抽象，成为一个类(js中没有类的概念，实际上也是一个对象)，然后通过类的方法和属性来访问类

• 继承:在封装的基础上，将同类事物继续抽象，继承时，子类拥有父类的属性和方法，同时拥有自己特有的属性和方法

js的继承实现方法：
1.属性拷贝（浅拷贝）
2.属性拷贝（深拷贝）
3.原型式继承
4.原型链继承
5.借用构造函数
6.组合继承

• 多态:不同对象对同一事物做出不同的回应，通常出现在继承后对方法的重写

特点：对于同一个操作（指令），不同的对象表现出不同的反应 隐藏不同

谈谈你对同步异步的理解

• 同步:在执行完一个函数或方法之后，一直等待系统返回值或消息，这时程序是出于阻塞的，只有接收到返回的值或消息后才往下执行其他的命令。

• 异步:执行完函数或方法后，不必阻塞性地等待返回值或消息

• 区别:同步会阻塞程序的执行,效率低。异步可以同时执行多个程序,效率高

一次完整的HTTP请求是怎样一个过程

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

Ajax原理

ajax是用来实现页面异步加载,同步刷新。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
XMLHttpRequest对象的属性：
open准备发送请求的数据
send发送请求

onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息
readyState 对象状态值

Ajax中get请求和post有什么区别

GET和POST请求方式的差异
GET请求没没有请求体，请求的数据在xhr.open()里面拼接，xhr.send(null)
POST请求数据在xhr.send()里面，在设置请求体之前需要设置请求头

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") 

解决跨域

产生跨域是因为浏览器的同源策略：域名 协议 端口必须保持一致

• CORS

在服务器端设置响应头
header("Access-Control-Allow-Origin:*")
这种方式需要前后台的一个配后,而且相对而言不安全

• JSONP

利用script标签src天然支持跨域的特征,将请求的地址写在src,在script里面定义一个处理函数,并把函数名传递给后台,后台接收并返回这个函数的调用,将传递的参数以函数形参的方式传递给前端
这种通过src放送的是一个同步请求,而且只能发送get请求,和ajax不一样

• 方向代理

通过访问第三方服务器,让第三方服务器帮我们发送请求.

es6你知道多少

• 字符串扩展
  includes断字符串中是否包含子字符串,第一个参数表示要测试的子字符串,第二个参数表示从那个位置开始查找,不传默认从索引0开始。
  startsWith判断字符串是否以特定的字符串开始
  endsWith判断字符串是否以特定的字符串结束
  字符串填充:padStart()和padEnd()可以对字符串进行填充

• 解构赋值
  数组的结构赋值

    // 解构 let [a,b,c] = [1,2,3]; console.log(a,b,c); // 1 2 3 // 解构时设置默认值 let [a = 1,b,c] = [,5,6]; console.log(a,b,c); // 1 5 6 // 解构时没有的数据为undefined let [a = 1,b,c] = [4,5,]; console.log(a,b,c); // 4 5 undefined 

对象的解构赋值

let {name,age} = {name:'zxx',age:18} console.log(name,age); // zxx 18 // 顺序无关 let {name,age} = {age:18,name:'zxx'} console.log(name,age); // zxx 18 // 属性别名,一旦设置了别名,原来的名字就无效了 let {name:tag,age} = {age:18,name:'zxx'} console.log(name,age); // ReferenceError: name is not defined console.log(tag,age); // zxx 18 // 解构赋值时设置默认值 let {name:tag='zxx',age} = {age:18} console.log(tag,age); // zxx 18 

字符串的解构赋值

let [a,b,c,d] = 'zxx'; console.log(a,b,c,d); // z x x undefined let [a,b,c,d] = 'zxx'; console.log(a,b); z x // 得到字符串长度 let { length } = 'zxx'; console.log(length); // 3 

• 扩展运算符
  合并数组

let arr2 = [4,5,6]; let arr3 = [...arr1,...arr2]; console.log(arr3); // [1,2,3,4,5,6] 

• 箭头函数

let f = function(v) { return v; }; let f = v => v; 

• Promise

Promise 是异步编程的一种解决方案.简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，可以从改对象获取异步操作的消息。

// 1. 创建promise实例,在实例中执行异步操作(比如发送网络请求) // 2. 异步操作成功时,调用reslove函数传递数据 // 3. 异步操作失败时,调用reject函数传递错误信息 const promise = new Promise(function(resolve, reject) { // 异步操作 if (/* 异步操作成功 */){ resolve(value); } else { reject(error); } }); // 使用promise实例then方法接收reslove或reject返回的数据 promise.then(function(value) { // 此处数据即为reslove回来的数据 // success }, function(error) { // 此处数据即为reject回来的数据 // failure }); 

VUE相关

vue有那些指令

v-text v-bind v-for v-if v-on

谈谈MVVM

MVVM是一种分层次开发思想,它是CommonJS规范的实现
M代表module模型层
V代码view视图层
VM模型层和视图层之间没有任何的联系,而VM会充当一个调度者,将他们联系起来,实现双向数据绑定

组件化

从页面视图的角度出发，对页面功能的封装，实现项目可独立维护，可复用性大大提高

什么是Vue双向数据绑定?原理?

v-model指令、数据视图同步更新、使用的是ES5提供的Object.defineProperty()这个方法实现数据劫持

数据如何从模型同步到视图?当模型中数据发生变化时会触发Object.defineProperty的set方法,在这个方法内部能够劫持到数据的改变,然后就可以在该方法内部通知视图更新

视图中的数据如何同步到模型中?(v-model指令是怎么实现改变了元素中的数据同步到模型中)监听表单元素的change事件,在change事件中可以拿到用户输入的数据,然后给模型中的数据赋值

v-if和v-show的区别

v-if和v-show都是用来控制元素的显示和隐藏,当值是true，元素显示，值为false,元素隐藏

区别: v-if当切换布尔值时,会创建/删除元素；v-show当切换布尔值时,会改变元素的样式,display:block

Vue生命周期函数的理解?

生命周期就是在vue实例执行过程中会触发的一批函数,这些函数可以帮助我们处理不同时间段的业务逻辑

• 创建阶段
  • beforeCreatevue实例被创建出来,此时仅仅只是分配了内存,属性和方法都还没有挂载到vue实例上
  • created此时vue实例已经创建完毕,data中的属性和methods中的方法都已经挂载到vue实例上
• 渲染阶段
  • beforeMountvue实例中的数据被解析渲染到内存中的虚拟DOM上,真实中的DOM指令还没有被解析
  • mountedvue实例中的数据已经完全被渲染到了真实DOM中
    -更新阶段
  • beforeUpdate模型中的数据已经改变,但视图中的数据还没有同步更新
  • updated此时模型中的数据改变,视图层数据已经同步更新
• 销毁阶段
  -beforeDestroyvue中的数据和方法还能继续使用,但是指令不能再被vue解析
  • destroyedvue中的数据和方法都已经被销毁

说一下单向数据流

组件之间的传值,数据从父级组件传递给子组件，只能单向绑定。

• 父组件向子组件传值

  在父组件中定义数据,通过属性绑定的形式绑定到子组件上,在子组件中定义props接收传递过来的变量

• 子组件向父组件传值

  在子组件中使用this.$emit触发一个自定义的方法名,然后传递数据第一个参数就是自定义的方法名,第二个参数就是需要传递给父组件的数据

  this.$emit('func',this.msg) 

  在父组件中使用子组件时,绑定一个事件,事件名称和子组件触发的方法名同名

  <div id='app'> <son @func = 'getmsg'></son> </div> 

vue-router路由模式有几种,原理分别是什么?

vue-router路由库是用哪种技术实现的,总共有两种,分别叫hash模式和history模式,默认是hash模式

• hash模式:地址上带有#号;url地址可以放在任意标签中打开;可以兼容低版本的浏览器

  hash模式原理:监听hashchange事件,可以调用window.location.hash获取到锚点值,和路由规则进行匹配,匹配到之后将路由规则中定义的组件渲染到页面
  history模式:地址上没有#号,更加符合URL形式;url地址不能重复打开;

• history模式原理:利用HTML5新提供的history.pushState API 来完成 URL 跳转而无须重新加载页面

  history模式需要后台进行相关配置:要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面

Vuex怎么用,它相对与localstorage有什么优点和缺点

vuex的核心是：state,getter,actions,mutations

• state用来定义存放公共数据

  this.$store.state.msg 

• mutations定义方法

  this.$store.commit('change','我是被修改的数据') 

• getters用于获取数据 进行一些操作 类似于Vue实例中的过滤器和计算属性

   this.$store.getters.fixmsg 

• actionactions和mutations都是定义对数据进行操作的方法,mutations中都是同步方法,mutations中定义异步方法

  this.$store.dispatch('asyncchange','我是被异步修改的数据') 

区别
localstorage无法实现双向数据绑定,模型层的数据改变视图中数据不会发生改变,vuex数据不能持久化,需要结合localstorage使用,比较臃肿,小型项目不建议使用