目录：

三十一.  css实现垂直水平居中

三十二. SCSS或者LESS他们与普通的CSS有什么区别?

三十三. 请写出你知道的css的选择符类型。

三十四. 简述同步和异步的区别

三十五. Promise使用方式

三十六.如何把类数组转换为标准数组

三十七. 事件种类有哪几种

三十八. 请写出三个以上的jquery选择器

三十九.了解过各种框架中的路由吗?你对路由如何理解的？请简单概述一下

四十. 实现对象浅拷贝

四十一. 使用你学习过的框架或者库发出HTTP请求

四十二. ES6模块和COMMONJS模块(nodejs)的区别

四十三. ES6的继承

四十四. 创建一个函数，返回0-100之间的随机数

四十五. 判断对象是否是空对象

四十六. 写一个函数使用Promise将request方法封装成异步调用的形式，request方法传参说明如下：

四十七. 常见的浏览器端跨域通讯方法有哪些

四十八. 常见前端优化方案

四十九. split,splice,join的作用

五十. 单向数据流和双向绑定的区别

五十一. new RegExp（‘正则表达式’）和/正则表达式/(字面量写法)的区别

五十二. TCP连接过程中，三次握手和四次挥手的理解

五十三. jquery和vue的区别

五十四. 简述一下在项目中在自己开发的组件，解决了什么问题，如何实现

五十五. 行内元素和块级元素的区别，行内块级元素的兼容性如何使用？

五十六. 前后端分离的概念

五十七. 前后端数据交互

五十八. 简述一下vuex和作用

五十九. vue路由中的动态路由

六十. 什么是git

六十一. axios跨域解决方案

三十一.  css实现垂直水平居中

   思路一:text-align + line-height实现单行文本水平垂直居中

   思路二: text-align + vertical-align

   思路三；设置margin:0 auto

 

三十二. SASS或者LESS他们与普通的CSS有什么区别?

 

     Sass 和 Less 都是 CSS 扩展，目的都是使 CSS 更方便、更强大。它们的区别：

 

        1. Sass 更强大，Less 更简单。

 

        2. 编译环境不同，Sass 安装时需要 Ruby 环境，Sass 是在服务端处理的；而 Less 需要引入 Less.js 来处理 Less 代码输出css 到浏览器。

 

        3. 变量符不一样，Sass 是 $，Less 是 @。

 

1. Sass 允许使用条件语句，例如 if { } else { }， for { } 等，而 Less 不允许。

 

sass

ruby

三十三. 请写出你知道的css的选择符类型。

1、标签选择符：

如p{color:#F00; font-size:36px;}，使用<p>直接作用</p>

 2、类选择符：

如 .red{color:#C00;}，使用<p class=‘ red‘>直接作用</p>

3、ID选择符：

   如 #two{color:#600; font-family:'汉仪行楷简';}，使用<p id="two">直接作用</p>

4、包含选择符：

   如 p strong{color:#F00;}，使用<p><strong>直接作用</strong></p>

 5、通配选择符：

    如 *{color:#0C0; font-size:18px;}，可以控制所有的html元素，作用范围很广，但是效率较低

6、分组选择符（选择符分组）：

   如p,h1,div{color:#F00;font-size:36px;}，对p,h1,div都有效

7、标签指定式选择符：

   如p#one{ color:#F00;font-size:36px;}，只对id为one的p标签有效

8、组合选择符：

   将所有选择符类型组合使用

font

color

#0C0

 

三十四. 简述同步和异步的区别

同步：按照一定的顺序去执行，执行完一个才能执行下一个

异步：执行顺序是不确定的，由触发条件决定，什么时间执行也是不确定的

 

三十五. Promise使用方式

 var p = new Promise(function(resolve,reject){

      //做一些异步操作

      setTimeout(function(){

          console.log("执行完成");

          resolve("随便什么数据");     //执行成功的回调

//  reject("数据");     //失败回调

      }, 2000);

  });

 

三十六.如何把类数组转换为标准数组

【1、Array.prototype.slice.call

这种方法是借用了数组原型中的slice方法，返回一个数组。slice方法的内部实现:

Array.prototype.slice = function(start,end){

var result = new Array();

start = startII 0;

end = end | this.length; //使用call之后this指向了类数组对象

for(var i = start; i < end; i++){

result. push(this[i]);

}

return result;

}

用法: [].slice.call(类数组)，这是es5的用法

2、Array.form(类数组)，这是es6新增的函数

3、扩展运算符(...)】

参考第九题答案：

1.[].slice.call(类数组)

2. Array.from(类数组)

 

三十七. 事件种类有哪几种

鼠标事件 （继承MouseEvent接口）

键盘事件 （继承KeyboardEvent接口）

进度事件 （继承ProgressEvent接口）

拖拉事件 （继承DragEvent接口）

 

三十八. 请写出三个以上的jQuery选择器

1、#id     

     用法: $("#myDiv");    返回值  单个元素的组成的集合

     说明: 这个就是直接选择html中的id="myDiv"

 

    2、Element

      用法: $("div")     返回值  集合元素

      说明: element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素,例如div,

       input, a等等.

 

      3、class          

      用法: $(".myClass")      返回值  集合元素

      说明: 这个标签是直接选择html代码中class="myClass"的元素或元素组(因为在同一html页面中

      class是可以存在多个同样值的)

 

      4、*          

      用法: $("*")      返回值  集合元素

      说明: 匹配所有元素,多用于结合上下文来搜索

 element

 

三十九.了解过各种框架中的路由吗?你对路由如何理解的？请简单概述一下

路由的作用，通常都是用于URI与组件之间的映射，当访问不同的路径的时候可以通过路由找到对应的组件。

vue-router的用法:

1. 创建vue组件

2. 配置路由，把路径和创建的vue组件关联起来

3. 通过<router-link></router-link>中的路径，根据路由配置，找到对应的组件，并且把组件内容显示在<router-view/>

React中路由的用法:

创建组件，配置路由，通过jsx的方式创建。使用Link标签实现路由跳转，再通过Router,Route,RoutePath标签实现路由定义。

angular中路由的用法:

路由功能是由routeProvider服务 和 ng-view 搭配实现，ng-view相当于提供了页面模板的挂载点，当切换URL进行跳转时，不同的页面模板会放在ng-view所在的位置; 然后通过routeProvider 配置路由的映射

React

 

四十. 实现对象深拷贝

1，Object.assign

    let a={

        age:1

    }

    let b=Object.assign({},a)

    a.age=2

    console.log(b.age)

 2,let a={

     age:1

  }

   let b={...a}

   a.age=2

   console.log(b.age)

 

深拷贝是指源对象与拷贝对象互相独立，其中任何一个对象的改动都不会对另外一个对象造成影响。

四十一. 使用你学习过的框架或者库发出HTTP请求

axios.get("").then(function(res){}).catch(function(error){})

fetch("").then(function(res){return res.json();}).then(function(data){})

 

四十二. ES6模块和COMMONJS模块(nodejs)的区别

CommonJS 输出是值的拷贝，即原来模块中的值改变不会影响已经加载的该值，ES6静态分析，动态引用，输出的是值的引用，值改变，引用也改变，即原来模块中的值改变则该加载的值也改变。

      CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

      CommonJS 加载的是整个模块，即将所有的接口全部加载进来，ES6 可以单独加载其中的某个接口（方法），

      CommonJS this 指向当前模块，ES6 this 指向undefined

      CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

 

四十三. ES6的继承

//声明一个类

class People{

constructor(name,age){

this.name=name; this.age=age;

}

say(){

console.log(`大家好我是${this.name},今年${this.age}岁！`)//es6语法的模板字符串

}

}

var person = new People('邱权武',18)//新建People对象

person.say()//调用方法 //类的继承

class Student extends People{

constructor(name,age,score){

super(name,age)

this.score=score

}

 

say(){

console.log(`大家好我是${this.name},今年${this.age}岁,我这次的成绩是${this.score}！`)

 }

 }

var student =new Student('小王',23,98)

 student.say()

 

 

四十四. 创建一个函数，返回0-100之间的随机数

function random(min, max) {

      return Math.floor(Math.random() * (max - min)) + min;

 }

 （含min不含max）

function random(min, max) {

      return Math.floor(Math.random() * (max - min+1)) + min;

 }

 （含min含max）

floor

四十五. 判断对象是否是空对象

方法一：

if(JSON.stringify(value) === "{}"){

console.log（value+"为空对象"）

）

方法二：

if (Object.keys(value || {}).length == 0) {

console.log（value+"为空对象"）

}

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>小白教程(json.cn)</title>

</head>

<body>

<h1>Array keys()</h1>

<p>从数组中创建一个可迭代的对象，该对象包含数组的键。</p>

<p id="demo1"></p>

<p id="demo2"></p>

<p id="demo3"></p>

<p><strong>注意:</strong> IE11 及其更早的浏览器版本不支持 keys 方法。</p>

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var x = fruits.keys();

document.getElementById("demo1").innerHTML = x.next().value;

document.getElementById("demo2").innerHTML = x.next().value;

document.getElementById("demo3").innerHTML = x.next().value;

</script>

</body>

四十六. 写一个函数使用Promise将request方法封装成异步调用的形式，request方法传参说明如下：

 

答案:

 

sucess

 

四十七. 常见的浏览器端跨域通讯方法有哪些

1. JSONP

通常为了优化静态资源的加载，会把静态资源单独放到一台服务器上，通过img，script,link标签等等，引入静态资源。

缺点: 不方便调试，只支持GET请求，前后端都要写代码

2. CORS

只需要在服务端设置响应头

Access-Control-Allow-Origin 表示限制来源域名，可以用*代表所有域名，也可以明确指定一个或多个域名。

Access-Control-Allow-Headers 常见值：x-request-with,Origin,Content-Type,Authorization

Access-Control-Allow-Methods 常见值: get，post,delete,put,options

基本所有现代浏览器都支持，除了ie8/9以下浏览器,因为ie8/9是基于XDomainRequest对象。

目前CORS是应用最广泛的解决方案

3. postMessage

window.postMessage(message,targetOrigin)方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

四十八. 常见前端优化方案

一、减少http请求，如css精灵、懒加载

二、压缩图片(gzip),图片懒加载

三、尽量减少DOM的操作，减少重排、重绘，尽可能减少重绘，因为每重排一次，就需要重新加载一遍渲染树，

四、cdn加速，cdn全名内容分发网络，缓存网站的静态内容，并且放到距离客户最近的服务器上，解决网络服务商不兼容的问题。例如阿里云cdn加速，腾讯云cdn加速。

五、利用流行框架进行模块化开发，进行组件复用。

六、合理的使用标签、选择器

七、控制cookie大小，避免污染

八、压缩css，js文件大小(也是减少http请求)

九、使用icon-font来代替一些图标，减少图片的数量

十、尽量使用css3动画（css3会开启GPU加速），使用requestAnimationFrame加快动画速度

十一、将CSS放在<head></head>中

十二、将js放在<body></body>末尾

requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

css精灵，即CSS Sprite，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

gzip

 

四十九. split,splice,join的作用

字符串.split(“分隔符”),根据分隔符把字符串转换为数组

数组.splice(起始索引，长度)，用于删除数组中的指定元素

数组.join(“分隔符”),用于使用指定的分隔符把数组转为字符串

 

五十. 单向数据流和双向绑定的区别

单向数据流

优点: 所有状态的改变 可记录、可跟踪，源头易追溯;

使得程序更直观更容易理解，有利于应用的可维护性;

一旦数据变化，就去更新页面(data-页面,data——>页面)，但是如果用户在页面上做了变动(页面-data,页面——>data)，那么就手动收集起来(双向是自动)，合并到原有的数据中。

缺点: HTML 代码渲染完成，无法改变，有新数据，就须把旧 HTML 代码去掉，整合新数据和模板重新渲染;代码量上升，数据流转过程 变长，出现很多类似的样板代码;在处理局部状态较多的场景时(如编辑表单获取元素，表单比较多的情况下)，会显得啰嗦及繁琐。

双向数据流:

双向绑定

优点:

用户在视图上的修改会自动同步到数据模型中去，数据模型中值的变化也会立刻同步到视图中去；无需进行和单向数据绑定的那些相关操作；在表单交互较多的场景下，会简化大量业务无关的代码。

缺点:

无法追踪局部状态的变化,增加了出错时 debug 的难度；

 

五十一. new RegExp（‘正则表达式’）和/正则表达式/(字面量写法)的区别

1. 写法不一样，一个是写在构造函数里面，一个是写在字符串里面。

2. 正则表达式字面量每次被计算时都会被转换成一个正则对象，即使内容一致，这些对象也并不相同,所以说new的方式性能更好，只不过字面量方式书写代码更少，更方便

 

五十二. TCP连接过程中，三次握手和四次挥手的理解

三次握手通俗理解(握手是连接之前的准备过程):

 

四次挥手通俗理解(挥手是指断开连接的之前的准备过程):

解析

Seq:就是我们常说的序号。对于要发送的数据的第一个序号而言这个序号是通过一个算法计算得到一个初始序号（ISN）加1。至于ISN怎么计算而来这里不讨论。这里我们以wireshark序号为准。假设某时序号为1000，简单的理解就是发送方告诉接收端“我发送的数据是从第1000开始的”。

ACK序号：就是我们常说的确认序号。确认序号是上一次已经成功接收到数据字节序号加1。还可以理解为接收端告诉发送端下一次想接收开始序号。假设某时确认序号为1000，简单的理解就是接收方告诉发送方“我已经收到第999序号了，我下一次想接收的数据是从1000开始的”。

TCP

传输控制协议（TCP，Transmission Control Protocol）是一种面向连接的、可靠的、基于字节流的传输层通信协议，

SYN(建立联机) ACK(确认) PSH(传送) FIN(结束) RST(重置) URG(紧急)

syn是同步，ack是确认，1为是，0为否，就是收到同步和确认信号

SYN(synchronous建立联机) ACK(acknowledgement 确认) PSH(push传送) FIN(finish结束) RST(reset重置) URG(urgent紧急)Sequence number(顺序号码) Acknowledge number(确认号码)

TCP

传输控制协议（Transmission Control Protocol）是一种面向连接的、可靠的、基于字节流传的传输层协议。

 

同学们答题的时候，就不要太通俗了，用正式一点的思路来写。

 

五十三. jquery和vue的区别

1. 概念不一样。

vue是一个渐进式的基于组件开发的js框架

jquery是一个简化原生js操作的js库。

2. 特点不同

vue.js：vue操作元素方式不同，遵循MVVM模式，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

jquery：经典的MVC模式，具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

3. 优势不同

vue.js：通过双向绑定，虚拟DOM，diff算法，大大优化DOM操作的效率。目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

jquery：操作DOM简单，提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。

 

五十四. 简述一下在项目中，在自己开发的组件中，解决了什么问题，如何实现

在小程序中，为了解决tab选项卡在多个页面中重复使用的问题，自定义了一个tab选项卡组件。

实现1. 通过组件父传子，解决每个页面选项卡按钮显示的字不一样的问题。

实现2. 选项卡内容的切换，是通过插槽来传递的，因为这样可以把自定义组件的内容由调用页面去决定。

实现3. 解决通过点击子组件按钮，触发调用页面的一些操作，使用了子传父的方式（告诉父页面当前点的是选项卡的哪一个按钮）。

 

tab

五十五. 行内元素和块级元素的区别，行内块级元素的兼容性如何使用？

块级元素:

独占一行，可以设置宽度和高度

不管设置的宽度有多宽，都是独占一行

有margin和padding

行内元素变块级元素用display:block

行内元素:

不会独占一行，不能设置宽度和高度，所有行内元素会排成一行，一行排不下会自动换行

水平方向，margin都起作用

垂直方向，只有padding-bottom起作用

块级元素变行内元素用display:inline

行内块级元素：

同时具有行内元素特点和块级元素特点，原生的行内块级元素有img标签，想让某个标签具有行内块元素的特点，使用display:inline-block

五十六. 前后端分离的概念

所谓的前后端分离，并不是说前端代码和后端代码在一个文件夹里面分开写，而是前端独立部署在一个服务端口上，后端独立部署在一个服务端口上。

从开发角度来讲，后端是指java,c#，nodejs等开发的后端项目，前端是指使用html,css,js开发的前端项目，浏览器并不是前端也不是后端，它只是一个界面显示的容器。

 

前后端分离把前端和后端作为单独的服务部署，可以使前端和后端开发人人员的工作互相不影响，任何一边出了问题，也不会影响另一边的开发进度。

而且前端和后端的开发可以同时进行，只需要在开发之前，把接口的规范定义好，请求参数和返回结果的数据结构定义好，那么前端开发人员和后端开发人员可以同时进行开发工作，大大缩短开发周期，前端开发人员只需要根据接口规范制作模拟接口和模拟数据即可进行开发工作。

后端独立出来以后，除了给html页面提供数据以外，还可以同时给手机app端，H5端，小程序，公众号等等提供数据。

 

五十七. 前后端数据交互

所谓交互，那就是有来有往，在项目中是指，发送请求和响应请求。

在请求和响应的过程中，都是需要有数据的。数据的格式，如果不采用统一标准的话，会增加开发的成本，也就是说，不同的客户端，比如说，小程序，h5,手机app都采用不同的请求数据格式，那么后端，接收请求之后，就需要针对不同的请求数据格式来处理，会增加很多冗余代码。解决这个问题，就是采用统一的数据格式，目前流行的格式就是json格式。不管是什么客户端都统一采用json发送数据，服务端也统一响应json数据，这样的话，服务的兼容性和开发效率大大提高。

还有就是安全问题，前后端分离的情况下，特别是系统规模比较大，比如说分布式项目，微服务项目，接口的安全性通常是采用token的方式和https来保证。目前比较简单且流行的方式，就是请求的规范按照jwt来开发。jwt简单的讲，就是把请求数据，按照json的格式进行封装和加密。封装加密后会得到一个字符串token，可以放在请求头和响应头中，后端可以检查请求头的token是否符合要求，不符合要求的token或者不带token的请求，都是非法的不会进行处理。

 

五十八. 简述一下vuex和vuex的作用

 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态

作用:多组件、多页面间的数据共享。解决了组件之间统一状态的共享问题，实现组件之间的数据持久化。

在项目中可以用vuex存放数据，不用每次都要请求后端服务器，这就在保证了数据新鲜度的同时，提高了使用性能

属性：

 state：用于存储数据

 getters：用于获得需要计算state后得出的值，比较简单的数据转换。

 mutations：更改自身state的值

 actions：通过调用mutations修改state值,通常在这里发送异步请求

 modules：类似包的概念，封装各个state，避免冲突，便于维护

 

五十九. vue路由中的动态路由

在路由配置中，通过匹配符来匹配不同的请求路径，可以大大减少路由的配置，减少配置文件中的代码，便于维护。

 

六十. 什么是git

Git是一个开源的分布式版本控制系统，用以有效、高速地处理从很小到非常大的项目版本管理。相比CVS、SVN等版本控制工具，Git可以不用依赖远程服务器来管理项目，可以在本地进行管理，更加的灵活安全。

使用Git来管理项目有两种方式：

一种是本地部署Git版本管理系统。

另一种是通过在线代码托管。

本地部署Git版本管理系统，在自己负责的这一部分项目开发过程中，可以不需要联网，在自己电脑上就可以进行版本管理，等到功能全部开发完毕，再连接远程git服务器，与其他人员的负责的项目部分进行合并，最终形成完整项目。

常用的远程git服务:

GitHub就是基于Git的在线代码托管平台。

GitHub为当前最流行的开源项目托管平台，数以万计优秀的开源项目被托管在GitHub上面。随着越来越多的应用程序转移到云上，Github已经成为了管理软件开发以及发现已有代码的首选方法。

对于普通开发人员来讲，其在GitHub上托管的项目已经成为了他的一张个人名片。许多优秀的互联网公司在招聘开发人员时都希望对方能提供个人的GitHub地址。当然，GitHub作为一个开源软件的大宝库，学习和使用它，也会为我们的日常开发带来许多便利。

github在国外服务器，访问不太稳定，国内也有类似的服务，比如码云。

还可以自己购买云服务器，搭建自己的git服务。

 

六十一. axios跨域解决方案

通常有两种，一种前端配置，一种是后端解决方案，比较流行的是后端解决方案。

前端方案:

1. 在main.js中设置axios.defaults.baseURL = '/api'

2. 在config下的index.js中，创建一个虚拟的服务代理，请求的时候，由这个虚拟服务器发送跨域请求，就不会发生跨域问题

后端方案:

通过三种响应头配置来实现允许跨域

access-control-allow-origin: 允许访问的来源主机

access-control-allow-header: 允许哪些头设置,比如: Authorization

access-control-allow-method: 允许哪些请求方法，比如get,post,options