2022-02-15 面试记

一、REST请求的了解

1、什么是REST

REST -- REpresentational State Transfer ([表现层状态转移]。

REST本身并没有创造新的技术、组件或服务，而隐藏在RESTful背后的理念就是使用Web的现有特征和能力， 更好地使用现有Web标准中的一些准则和约束。

2、理解RESTful

要理解RESTful架构，需要理解Representational State Transfer这个词组到底是什么意思，它的每一个词都有些什么涵义。

下面我们结合REST原则，围绕资源展开讨论，从资源的定义、获取、表述、关联、状态变迁等角度，列举一些关键概念并加以解释。

• 资源与URI
• 统一资源接口
• 资源的表述
• 资源的链接
• 状态的转移

2.1 资源与URI

REST全称是表述性状态转移，那究竟指的是什么的表述? 其实指的就是资源。任何事物，只要有被引用到的必要，它就是一个资源。资源可以是实体(例如手机号码)，也可以只是一个抽象概念(例如价值)。下面是一些资源的例子：

• 某用户的手机号码
• 某用户的个人信息
• 最多用户订购的GPRS套餐
• 两个产品之间的依赖关系
  要让一个资源可以被识别，需要有个唯一标识，在Web中这个唯一标识就是URI(Uniform Resource Identifier) - 统一资源标识符。

URI既可以看成是资源的地址，也可以看成是资源的名称。

URI的设计应该遵循可寻址性原则，具有自描述性，需要在形式上给人以直觉上的关联。这里以github网站为例，给出一些还算不错的URI：

• https://github.com/git
• https://github.com/git/git
• https://github.com/git/git/blob/master/block-sha1/sha1.h

URI设计上的一些技巧:

• 使用_或-来让URI可读性更好
  如http://www.oschina.net/news/38119/oschina-translate-reward-plan。

• 使用/来表示资源的层级关系
  例如上述/git/git/commit/e3af72cdafab5993d18fae056f87e1d675913d08就表示了一个多级的资源

• 使用?用来过滤资源
  很多人只是把?简单的当做是参数的传递，很容易造成URI过于复杂、难以理解。可以把?用于对资源的过滤， 例如/git/git/pulls用来表示git项目的所有推入请求，而/pulls?state=closed用来表示git项目中已经关闭的推入请求， 这种URL通常对应的是一些特定条件的查询结果或算法运算结果。

• ,或;可以用来表示同级资源的关系
  有时候我们需要表示同级资源的关系时，可以使用,或;来进行分割。例如哪天github可以比较某个文件在随意两次提交记录之间的差异，或许可以使用/git/git /block-sha1/sha1.h/compare/e3af72cdafab5993d18fae056f87e1d675913d08;bd63e61bdf38e872d5215c07b264dcc16e4febca作为URI。 不过，现在github是使用…来做这个事情的，例如/git/git/compare/master…next。

URL和URI之间的主要区别

URL是统一资源定位器，用于标识资源；URI（统一资源标识符）提供了更简单和可扩展的标识资源的方法。URL是URI的子集，下面我们就来看看一下URL和URI的主要区别是什么。

1）、作用的区别

URL（统一资源定位符）主要用于链接网页，网页组件或网页上的程序，借助访问方法（http，ftp，mailto等协议）来检索位置资源。

URI（统一资源标识符）用于定义项目的标识，此处单词标识符表示无论使用的方法是什么（URL或URN），都要将一个资源与其他资源区分开来。

2）、可以说URL是URI（URL是URI的子集），但URI永远不能是URL。

3）、协议区别
URL指定要使用的协议类型，而URI不涉及协议规范。

2.2 统一资源接口

RESTful架构应该遵循统一接口原则，统一接口包含了一组受限的预定义的操作，不论什么样的资源，都是通过使用相同的接口进行资源的访问。接口应该使用标准的HTTP方法如GET，PUT和POST，并遵循这些方法的语义。

2.3 资源的表述

上面提到，客户端通过HTTP方法可以获取资源，是吧? 不，确切的说，客户端获取的只是资源的表述而已。 资源在外界的具体呈现，可以有多种表述(或成为表现、表示)形式，在客户端和服务端之间传送的也是资源的表述，而不是资源本身。 例如文本资源可以采用html、xml、json等格式，图片可以使用PNG或JPG展现出来。

资源的表述包括数据和描述数据的元数据，例如，HTTP头"Content-Type" 就是这样一个元数据属性。

那么客户端如何知道服务端提供哪种表述形式呢?

答案是可以通过HTTP内容协商，客户端可以通过Accept头请求一种特定格式的表述，服务端则通过Content-Type告诉客户端资源的表述形式。

2.4 资源的链接

我们知道REST是使用标准的HTTP方法来操作资源的，但仅仅因此就理解成带CURD的Web数据库架构就太过于简单了。

这种反模式忽略了一个核心概念："超媒体即应用状态引擎（hypermedia as the engine of application state）"。 超媒体是什么?

当你浏览Web网页时，从一个连接跳到一个页面，再从另一个连接跳到另外一个页面，就是利用了超媒体的概念：把一个个把资源链接起来.

要达到这个目的，就要求在表述格式里边加入链接来引导客户端。在《RESTful Web Services》一书中，作者把这种具有链接的特性成为连通性。

2.5 状态的转移

有了上面的铺垫，再讨论REST里边的状态转移就会很容易理解了。

不过，我们先来讨论一下REST原则中的无状态通信原则。初看一下，好像自相矛盾了，既然无状态，何来状态转移一说?

其实，这里说的无状态通信原则，并不是说客户端应用不能有状态，而是指服务端不应该保存客户端状态。

二、HTTP请求方法

HTTP/1.1协议中共定义了八种方法（有时也叫“动作”），来表明Request-URL指定的资源不同的操作方式
HTTP1.0定义了三种请求方法： GET， POST 和 HEAD方法。
HTTP1.1新增了五种请求方法：OPTIONS，PUT， DELETE， TRACE 和 CONNECT 方法

1、OPTIONS
返回服务器针对特定资源所支持的HTTP请求方法，也可以利用向web服务器发送‘*’的请求来测试服务器的功能性
2、HEAD
向服务器索与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以再不必传输整个响应内容的情况下，就可以获取包含在响应小消息头中的元信息。
3、GET
向特定的资源发出请求。注意：GET方法不应当被用于产生“副作用”的操作中，例如在Web Application中，其中一个原因是GET可能会被网络蜘蛛等随意访问。
4、POST
向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
5、PUT
向指定资源位置上传其最新内容
6、DELETE
请求服务器删除Request-URL所标识的资源
7、TRACE
回显服务器收到的请求，主要用于测试或诊断
8、CONNECT
HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
注意：
1）方法名称是区分大小写的，当某个请求所针对的资源不支持对应的请求方法的时候，服务器应当返回状态码405（Mothod Not Allowed）；当服务器不认识或者不支持对应的请求方法时，应返回状态码501（Not Implemented）。
2）HTTP服务器至少应该实现GET和HEAD/POST方法，其他方法都是可选的，此外除上述方法，特定的HTTP服务器支持扩展自定义的方法。

三、promise

四、Vue中组件间数据交互

• props和$emit(常用)
• $attrs和$listeners
• 中央事件总线（非父子组件间通信）
• v-model
• provide和inject
• $parent和$children
• vuex

五、3D制作

框架：three.js

六、CSS的左右上下居中

参考文章https://www.jianshu.com/p/a905f71d3cd0

七、JS的跨域

CORS、JSONP

其实这个后端更容易实现

8.MVV模型

MVVM是model－view－viewModel的缩写，它是一种基于前端开发的架构模式，核心是提供对view和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View，即所谓的数据双向绑定。在H5还未流行的时候MVC作为web的最佳实践是OK的，因为Web应用的View相对来说比较简单，前端所需的数据在后端基本上都可以处理好，View层主要是做展示，用Controller来处理复杂的业务逻辑。所以View层相对来说比较轻量，就是所谓的瘦客户端思想。

9.JS原型链

理解不深，这篇文章挺好的
https://blog.csdn.net/qq_36996271/article/details/82527256

10.Map和forEach的区别

相同点：

1. 都是循环遍历数组中的每一项

2. 每次执行匿名函数都支持三个参数，参数分别为item（当前每一项），index（索引值），arr（原数组）

3. 匿名函数中的this都是指向window

4. 只能遍历数组

不同点：

map（）

map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值
也就是map（）进行处理之后返回一个新的数组

注意：map（）方法不会对空数组进行检测

map方法不会改变原始数组
var arr = [0,2,4,6,8];
var str = arr.map(function(item,index,arr){
console.log('原数组arr：',arr); // 会执行五次
console.log(item)
return item/2;
},this);
console.log(str); //[0,1,2,3,4]

forEach:
forEach方法用于调用数组的每个元素，将元素传给回调函数

注意： forEach对于空数组是不会调用回调函数的 ，没有返回一个新数组&没有返回值

应用场景：为一些相同的元素，绑定事件处理器！
不可链式调用
var arr = [0,2,4,6,8]
var sum =0;
var str = arr.forEach((item,index,arr)=>{console.log(item);})
console.log(str) //undefined

11.数据结构-遍历方式

树的遍历：

• 先序遍历：根左右，树非空，先访问根节点，在按照从左到右的顺序遍历根节点的每一颗子树。
• 中序遍历：左根右，在二叉树中，中序遍历首先遍历左子树，然后访问根结点，最后遍历右子树。
• 后序遍历：左右根，树非空，则按照从左到右的顺序遍历根节点的每一颗子树，之后在访问根节点。

图的遍历：

• 广度优先遍历：类似于树的层次遍历，从数组中选择一个没有被访问的顶点v，并标记为已访问，接着依次访问其所有未被访问的邻接顶点，标记为已访问，从这些邻接点出发进行广度优先遍历，直到图中所有和v有路径相通的顶点都被访问过，再重复上述步骤，直到所有点都被访问过。
• 深度优先遍历：类似于树的先序遍历。从数组中选择一个没有被访问的顶点v，并标记为已访问，接着从v的一个未被访问过的邻接点v1出发进行深度优先遍历，再从v1开始深度优先遍历，直到所有和v有路径顶点相通的顶点都被访问过，重复上诉所有步骤，直到所有丁点都被访问过。

总结

该企业对ES6、VUE等技术要求较高

自我总结：知识结构不够系统，很多东西只会写代码，不会描述，原理概念不清晰，理论知识不够扎实。对ES6、VUE、REACT掌握不足。

建议：

1. 多读书，各种专业书籍
2. 经常逛一下技术社区，寻找可合作的项目，做一些开源的项目，积累经验
3. 早睡早起，锻炼身体
   参考地址：

• REST：
  https://www.runoob.com/w3cnote/restful-architecture.html
  https://m.php.cn/article/413616.html