带你解锁前端面试

谁践踏了优雅 2022-12-23 14:27 138阅读 0赞

### 1.  你觉得的HTTP的状态码有哪些?仔细说明 ###

*  1开头:请求已被服务器接受，需要继续处理。
 *  2开头:请求已被服务器处理
 *  3开头:请求被重定向

这类状态码代表需要客户端采取进一步的操作才能完成请求。通常，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。

*  4开头：（请求错误）

这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。

*  5开头：（服务器错误）

这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。

具体：

*  200 OK 服务器成功处理了请求
 *  304 重定向到本地缓存
 *  400 Bad Request：用于告诉客户端它发送了一个错误的请求
 *  404 Not Found(页面丢失)未找到资源
 *  500 Internal Server Error：服务器内部出现了错误.数据库问题
 *  501 Internal Server Error服务器遇到一个错误，使其无法对请求提供服务
 *  502 常见的代理问题

### 2.  ajax 异步请求数据的步骤？ ###

AJAX即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax的使用

(1)创建\`XMLHttpRequest\`对象

(2)创建一个新的\`HTTP\`连接,并指定该\`HTTP\`请求的方法、\`URL\`及验证信息.

(3)设置对异步传输对象状态监听

(4)发送\`HTTP\`请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

### 3.  你项目中如何处理跨域请求?（JSONP 反向代理 proxy  postMessage CROS ） ###

同源策略:请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

*  **jsonp**

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。

*  **postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：**

a.） 页面和其打开的新窗口的数据传递

b.） 多窗口之间消息传递

c.） 页面与嵌套的iframe消息传递

d.） 上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数

data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。

origin： 协议+主机+端口号，也可以设置为"\*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/“。

**nginx反向代理接口跨域**

通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。

*  **Nodejs中间件代理跨域**

node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。

### 4.  Jsonp的原理,解释一下JSONP为什么不是真正的ajax ###

*  jsonp的原理:就是利用浏览器可以动态地插入一段js并执行的特点完成的。
 *  为什么不是真正的 ajax?

ajax的核心是 ： 通过XmlHttpRequest获取非本页内容，

jsonp的核心 ： 动态添加<script>标签来调用服务器提供的js脚本。

*  ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
 *  实质不同

ajax的核心是通过xmlHttpRequest获取非本页内容

jsonp的核心是动态添加script标签调用服务器提供的js脚本

*  ajax通过服务端代理一样跨域，jsonp也不并不排斥同域的数据的获取
 *  jsonp是一种方式或者说非强制性的协议，ajax也不一定非要用json格式来传递数据
 *  jsonp只支持get请求，ajax支持get和post请求，jsonp是通过script的url来请求数据 这种url都是get形式的 因为

### 5.  什么是事件委托? 列举使用事件委托的地方 ###

利用事件冒泡实现，为未来元素添加事件

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

好处:

*  提高性能。
 *  新添加的元素还会有之前的事件。

### 6.  你如何在jquery  插件的基础上封装新的插件 ($.extend    $.fn.extend  ) ($ 和 $.fn 的区别 ) ###

1. jQuery.extend() 方法有一个重载。

jQuery.extend(object) ,一个参数的用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的，有点像 “类名.方法名” 静态方法的调用方式。

2.jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

首先我们来看fn 是什么东西呢。查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = {
    
    　　　init: function( selector, context ) {.....};
    
    };

原来 jQuery.fn = jQuery.prototype，也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法，就相当于为【实例】添加”原型方法“，类的”成员方法“要类的对象才能调用，所以使用jQuery.fn.extend(object)扩展的方法， jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要区分开来。

### 7.  使用版本控制工具git/svn 产生冲突 你如何解决 ###

*  查看历史版本

$ git log
    
    $ git log --stat  #记录我们可以看到每一次commit，都有哪些文件发生了改变
    
    $ git show 8ef96  #查询某次具体的修改

*  回滚

发现提交的内容错了，可以进行回滚操作

$ vi a.txt                         #修改文件内容
    
    $ git add a.txt
    
    $ git commit –m 'a.txt'
    
    $ git log                          #查看日志
    
    commit 8ef960a0bfa137a0fadd7494823d5d1c101c427d
    
    Author: nutony <52399178@qq.com>
    
    Date:   Sat Jun 3 09:13:32 2017 +0800
    
        a.txt
    
    commit 315e77e5cceb486a9bf63911cb8d3549a19b8255
    
    Author: nutony <52399178@qq.com>
    
    Date:   Sat Jun 3 09:07:43 2017 +0800
    
        Delete 31.jpg
    
    $ git revert 8ef960a                #日志的commitId的前几位即可

*  远程仓库覆盖本地

$ vi a.txt                         #创建a.txt，设置内容为haha 1
    
    $ git add .                         #暂存
    
    $ git commit -m '1'                 #提交
    
    $ git pull origin master            #推送，此时查看github，a.txt存在
    
    $ vi a.txt                         #编辑本地文件a.txt，修改内容haha 2
    
    $ git fetch --all                   #只是下载代码到本地，不进行合并操作
    
    $ git reset --hard origin/master    #把HEAD指向最新的下载版本
    
    $ ll
    
    $ cat a.txt                         #可以看到文件还是为1，被远程覆盖

*  解决冲突绝招

则把自己本次把修改的文件(把自己修改过的文件)复制到其它目录，然后强制用远程覆盖本地文件，然后把刚才复制的文件考回来覆盖，再提交上去。

SVN是非常实用也好用的版本管理工具，但不是万能的，有时候还需要你手动解决。

一般在你准备提交一个新版本时，首先update一遍，有时候update完之后发现跟本地版本有冲突，这时候，在有冲突文件的地方存在4个文件：

*  petgeniusupdatelayer.ccb，这是冲突的文件，也就是你update下来的文件跟本地的文件合并之后存在冲突的文件，这个文件需要你去处理；
 *  petgeniusupdatelayer.ccb.mine，这是在update之前本地修改的文件；
 *  petgeniusupdatelayer.ccb.r19732，这是该文件的初始版本；
 *  petgeniusupdatelayer.ccb.r20390，这是SVN服务器上你update下来的文件（服务器最新版本的文件）；

一般冲突出现的原因是你和另外一个比你先commit的家伙修改到了这个文件的同一个地方，这个时候你有3种解决方法：

*  手动合并代码，这就要求你在不改动另外一个家伙代码目的的情况下，把自己的代码加进去，或者你们协商修改，一般问题不大，不要犯迷糊就可以；

然后再svn里，remark as resolved；重新检查一遍即可commit；

*  无视新版本，使用你自己的版本，这时，只需要把后缀名为.mine的文件去掉这个后缀名，替代源文件petgeniusupdatelayer.ccb即可；

这种情况也有，比如某个模块只有你自己负责，别人不会动这个地方的代码等，但是由于不小心改动了一些（经常是别人要测试，自己改代码，改完之后忘记改回来就提交了）。

*  放弃本地版本，petgeniusupdatelayer.ccb.r20390去掉后缀名就是最新版本，或者直接全部删除，重新update一份，这代表完全放弃自己的修改，完全做无用功啊；

为了尽量避免冲突，减少麻烦：

*  提交的时候要注意检查自己本地修改，每个修改的地方做到心中有数，不需要提交的代码，比如打印Log，测试代码注意及时删除；
 *  每次开始修改一份代码时，尽量保证初始代码为最新，这样可以尽可能减少冲突的发生；

### 8.  说一下你最近项目开发的技术亮点 ###

1.  使用了命名视图
2.  使用slot封装了公司自己使用的一个UI库
3.  使用了复杂的加密方式
4.  配置了一个拦截器
5.  自己封装了一个懒加载的指令

### 9.  说一下你的前端成长经历,你是如何一步步成为前端大牛的? ###

简单的说：无非就是以下几点：多做…多想…多看…多做demo，多想改进，多看书籍和别人代码。然后再改进自己代码，再做，再看，再改进。

具体：

别光解决问题，想想究竟发生了什么

学会预见未来的浏览器发展趋势

前后端开发的一个主要区别在于后端代码通常都运行在完全由你掌控的环境下。前端相对来说不那么在你的掌控之中。不同用户的平台或设备是前端永恒的话题，你的代码需要优雅掌控这一切。

阅读规范文档

浏览器有 bug 是很难免的事，但是当同一份代码在两个浏览器渲染出来的效果不一样，人们总会不假思索的推测，那个“广受好评”的浏览器是对的，而“不起眼”的浏览器是错的。但事实并不一定如此，当我的假设出现错误时，我选取的变通办法都会在未来遭遇问题。

阅读别人的代码

自己独立解决问题绝对是个不错的方式，但是这不应该是我唯一的方式，因为它很快就会让我稳定在某个层次。阅读别人的代码会让我开阔思维，并且阅读和理解别人写的代码也是团队协作或开源贡献必须具备的能力。

与比你聪明的人一起工作

“造轮子”

造一个自己喜欢的或者平时使用频率很高的的 JavaScript 库或 CSS 框架，在我遇到困难的时候，所有现成的库的源代码都会为我提供帮助。

把你学到的东西都记录下来

### 10. 如何看待当前前端发展的趋势,和未来技术走向? ###

看未来的发展方向，无非就是看现在的解决方案所存在的痛点。

*  浏览器的性能问题

和原生的 App 相比，性能一直一个致命的痛点，如果要追求性能，肯定得用原生 App。那么在性能上，未来几年可能是一个方向。

①前端代码编译为字节码，虽然还是难以达到原生App的水平，但已经能够满足绝大部分应用的性能需求，WebAssembly 字节码和底层机器码很相似可快速装载运行，因此性能相对于 JS 解释执行大大提升。

②统一的DOM树限制了单线程的渲染

理论上来说，一个页面某个时间变化的部分只是集中在一小块区域，没有必要将整个DOM树锁住。因此，一个可能的方向是分区渲染，即将页面划分为几个不同的区域，每个区域有独立的DOM树，独立渲染，那么性能会高很多，类似于 App 开发中的组件，组件类的运行不影响其它组件，如果需要依赖其它组件，通过组件间消息进行通信。

*  原生 App 不同平台重新开发的痛点

现在的 web 有两大优势，一个是浏览完毕直接走人，另外一个是跨平台，只要有浏览器，一切都好说。

所以现在有很多 hybrid 解决方案，某些页面通过 h5 的方式来展现。

想解决的无非就是少花点成本，写一份代码，可以在 ios 和 Android 上都可以用，进而也出来了想 RN、weex、NativeScript 这类 Learn Once, Write Anywhere(RN提出来的) ，但是他们最终都会翻译成原生代码。

而且现在出现了 Taro 、mpvue 这些 h5 与小程序的统一的方案，所以未来在突破写一份代码在 h5 ，原生 app、小程序，甚至桌面应用都有可能。

Ps:

1. 多注重框架原理，现在对于前端工程化，个人认为差不多到了瓶颈期，很难有新的突破，注重原理才能很好的应对未来的发展。

2. 眼界放宽、拓宽自己知识的广度。

3. TS 一定会再火的，未来项目会越来越复杂，用了 TS 项目的风险会可控很多。

### 11. 你知道哪些设计模式？ ###

**MVC模式：**

MVC即Model-VIew-Controller。他是1970年代被引入到软件设计大众的。MVC模式致力于关注点的切分，这意味着model和controller的逻辑是不与用户界面（View）挂钩的。因此，维护和测试程序变得更加简单容易。

MVC设计模式将应用程序分离为3个主要的方面：Model，View和Controller

*  Model

Model代表了描述业务路逻辑，业务模型、数据操作、数据模型的一系列类的集合。这层也定义了数据修改和操作的业务规则。

*  View

View代表了UI组件，像CSS，JQuery，html等。他只负责展示从controller接收到的数据。也就是把model转化成UI。

*  Controller

Controll负责处理流入的请求。它通过View来接受用户的输入，之后利用Model来处理用户的数据，最后把结果返回给View。Controll就是View和Model之间的一个协调者。

**MVP模式：**

这个模式把Presenter换成Controller就非常和MVC相像了。这个设计模式把应用程序分成了3个主要方面：Model、View和Presenter。

*  Model
 *  View
 *  Presenter

Presenter负责处理View背后所有的UI事件。它通过View接收用户输入，之后利用Model来处理用户的数据，最后把结果返回给View。与View和Controller不同，View和Presenter之间是完全解耦的，他们通过接口来交互。另外，presenter不像controller处理进入的请求。

**MVP模式关键点：**

*  用户和View交互。
 *  View和Presenter是一对一关系。意味着一个Presenter只映射一个View。
 *  View持有Presenter的引用（译者注：应该是通过接口交互，并不直接引用Presenter），但是View不持有Model的引用（译者注：即使接口，也不会）。
 *  在View和Presenter之间可以双向交互。

**MVVM模式：**

MVVM即Model-View-View Model。这个模式提供对View和View Model的双向数据绑定。这使得View Model的状态改变可以自动传递给View。典型的情况是，View Model通过使用obsever模式（观察者模式）来将View Model的变化通知给model。

*  Model
 *  View
 *  View Model

View Model负责暴漏方法，命令，其他属性来操作VIew的状态，组装model作为View动作的结果，并且触发view自己的事件。

**MVVM模式关键点：**

*  用户和View交互。
 *  View和ViewModel是多对一关系。意味着一个ViewModel只映射多个View。
 *  View持有ViewModel的引用，但是ViewModel没有任何View的信息。
 *  View 和ViewModel之间有双向数据绑定关系。