滴滴出行-前端-面试经验

以下内容来自于应聘者回忆整理

很多同学都想得到滴滴出行的实习或者校招机会。那从过来人的角度谈谈，要通过滴滴出行的实习、校招面试，都有哪些经验和注意事项呢？今天就跟大家分享一下。

1、http 无状态的实现

HTTP协议是无状态的，Session不能根据HTTP连接来判断是否为同一客户，因此服务器向客户端发送一个名为JSESSIONID的Cookie，它的值为该Session的id（即放在HTTP响应报文头部信息里的Set-Cookie）。

2、 csrf/xss(是什么，怎么解决)

跨站请求伪造（CSRF）（Cross-site request forgery） CSRF 的全称是“跨站请求伪造”，而 XSS 的全称是“跨站脚本”。

3、git 管理代码版本

4、前后端分离及前后端协同开发方案

前后端分离前我们的开发协作模式一般是这样的：前端写好静态的HTML页面交付给后端开发。静态页面可以本地开发，也无需考虑业务逻辑只需要实现View即可。后端使用模板引擎去套模板，当年使用最广泛的就是jsp，freemarker等等，同时内嵌一些后端提供的模板变量和一些逻辑操作。然后前后端集成对接，遇到问题，前台返工，后台返工。然后在集成，直至集成成功。这种模式的问题：在前端调试的时候要安装完整的一套后端开发工具，要把后端程序完全启动起来。遇到问题需要后端开发来帮忙调试。我们发现前后端严重耦合，还要要求后端人员会一些HTML，JS等前端语言。前端页面里还嵌入了很多后端的代码。一旦后端换了一种语言开发，简直就要重做。

5、数据推送及优化

6、如何看待 controller as?

使用 controllerAs 时，可以将 Controller 定义成 Javascript 的原型类，在 HTML 视图中直接绑定原型类的属性和方法。这样做的优点是：可以使用 Javascript 的原型类，我们可以使用更加高级的 ES6 或者 TypeScript 来编写 Controller ；避开了所谓的 child scope 原型继承带来的一些问题

7、跨域及解决方案

8、构建工具的使用经验

Apache Maven ——主要用于构建Java项目的自动化工具。 Hudson ——用Java编写的持续集成（CI）工具。 Jenkins ——用Java编写的一个开源持续集成工具。

9、 react flux/redux,状态维护

10、自己对前端的理解

前端对于网站来说，通常是指网站的前台部分。前端开发er: 开发前端页面的人。通过各种技术手段，完成页面的重构，将信息美观的在各种浏览器/软件上

11、react or angular?

Angular 是由 Google 提供支持的一种前端框架，它能够与大多数常用的代码编辑器相兼容，它属于 MEAN stack 的一部分。而 MEAN stack 是一组免费开源的、以 JavaScript 为中心工具集，可被用于构建动态网站和 Web 应用。

其组件包括：MongoDB（NoSQL 数据库）、Express.js（Web 应用框架）、Angular 或 AngularJS（前端框架）、以及 Node.js（服务器平台）。

Angular 框架允许开发人员创建动态的单页面 Web 应用（Single-Page Web Applications，SPA）。最初版本的 Angular，解决的是将基于 HTML 文档转换为动态内容的问题。

在此，我们将重点关注其较新的版本 Angular 2+，以及它与 AngularJS 的区别。

在业界案例上，Angular 主要被 Forbes、WhatsApp、Instagram、healthcare.gov、HBO、Nike 等组织所使用。

React.js 是由 Facebook 于 2011 年创建的一种用于构建动态用户界面的开源 JavaScript 库。

React 基于 JavaScript 和 JSX，而 JSX 是由 Facebook 所开发的 PHP 扩展，它能够为前端开发创建可重用的 HTML 元素。React 拥有一个可以被用于移动开发的独立跨平台框架 React Native。

在业界案例上，React 主要被 Netflix、PayPal、Uber、Twitter、Udemy、Reddit、Airbnb、Walmart 等组织所使用。

12、架构能力[代码管理，自动构建，ci 系统，监控]

13、 factory， service，provider 的关系

factory , service , provider都是angular 提供的服务 factory就是原生js里的方法，一个简单的函数 service类似原生里构造函数的过程，拥有一个构造器constructor，也就是说有 new的过程，追加属性和方法都是在this上追加的 provider是服务商当service需要配置的时候，需要使用provider提供服务，例如当使用angular进行跨域访问，需要配置jsonp信息的时候，就可以使用provider进行config的配置，简单理解是service的高级版本，provider提供一个$get的属性来返回 $provider的实例他们都是单例模式，只实例化一次。理解： provider > service > factory

14、 ng-repeat 迭代数组，如果数组中有相同值，会有什么问题，如何解决?

15、工具/框架使用情况框架/库的使用经验主要包括 jquery、angular、react、bootstrap、require、node ~ bootstrap 常用样式

16、平级界面块如何交互

17、node stream 及 event

18、angular 的依赖注入

AngularJS 提供很好的依赖注入机制。. 以下5个核心组件用来作为依赖注入：. value. factory. service. provider. constant.

19、 require 上线打包问题

20、angular 路由库有那些比较常用，区别是什么，ng router, ui-router

21、一个 angular 应用应该如何良好的分层

angular的分层结构：controller service dao 这种结构只适用于小项目，如果项目很大，代码很多，管理起来就会出问题。我们来看看后台的分层：从上图可看出，后台基本上是选按照功能划分一层目录，每个功能里面再按照上分层划分。所以建议angular也可这样划分。还有就是我们的像格式化日期等很多地方都用得着的代码可单独划分一个Util目录存放，因为像这种常用的代码可当作工具使用。

22、 angular 的缺点

复杂性和代码膨胀、文档编制

23、 npm、bower

npm是进行后端开发中，使用的模块安装工具，而bower，是前端的模块安装工具。
比如，在安装express，socket.io时，当然使用的是npm，那么比如bootstrap，jquery等前端框架，需要使用bower

24、angular 数据绑定采用什么机制?远离是什么?

angularjs的双向数据绑定采用脏检查（dirty-checking）机制。 ng只有在指定事件触发后，才进入 $digest cycle ：

25、自定义过滤，自定义指令的应用

26、jenkins,log tracking,error detecting

27、ng-click 中写的表达式，能使用 js 原生对象上的方法吗?

28、 ng-if 与 ng-show/hide 的区别

ng-show/ng-hide和ng-if都是控制元素显示隐藏的内置命令。 1.第一个区别ng-show/ng-hide控制的元素一直是存在文档中的，而ng-if是根据它的值来进行删除插入元素。

29、angular 从页面加载到结束的过程