2017.08.17 360一二三面

前言

360的面试和网易一样，是一天之内完成三轮面试，不同的是，他们是视频面试，用的牛客网的系统。

一面

1.谈谈项目

我感觉等会肯定会问Angular的问题...

2.你说设计模式，那你的项目里用到了哪些设计模式?

1.依赖注入模式（服务）
2.观察者模式（rxjs）
3.单例模式（模块）
4.模板方法模式（钩子）
5.装饰者模式（组件）
6.发布订阅模式(事件)

3.项目里的架构是什么样的

组件化、模块化、抽象、封装、隔离类职责、OOP的其他原则

4.NG的双向数据绑定是怎么样的

详情见Angular的数据绑定

5.谈谈面向对象和继承，object.create的实现原理

详情见Javascript与面向对象

Object.create = function(o) { 
        function F(){}  
        F.prototype = o;  
        return new F(); 
 };  

6.面向切面编程和函数式编程听说过吗

前面没听过，后面了解过：
函数式编程引入了纯函数的概念来帮助编程，纯函数对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，也不依赖外部环境的状态。它是一种编程范式。RXJS用到了它。

7.谈谈跨域，postmessage的应用场景是什么样的？

详情见JS与跨域

8.对象深拷贝怎么实现

新开辟一块内存空间，把源对象的属性和方法逐个拷贝进来。

function deepClone (obj) {
  let temp = Array.isArray(obj) ? [] : {}
  for (let key in obj) {
    //是否有嵌套对象
    temp[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key]
  }
  return temp
}

9.谈谈你使用过的构建工具，说说对webpack的理解

gulp、webpack。打包工具，把所有文件看做是资源，然后根据它们的依赖关系打包成一个最终文件。

10.你后端为什么使用node

想前后端同构，现查现用

二面

谈谈你对ts的理解，项目中对ts用到什么程度？js和ts有什么本质的区别。

ts是js的超集，es的所有特性它都支持，包括还在草案的await/async和装饰器等，另外就是加入了C#的一些语法，可以使用它进行传统的OOP编程，对工程化和多人项目协助非常友好。我只用到了和es有关的部分。js是JIT的解释语言，ts支持AOT编译语言。

既然用过angular，zone.js了解多少，干嘛用的？

详情见Angular的数据绑定

ng的装饰器模式理解多少？知道ng怎么把字符串转换成模板引擎的吗？

装饰器可以将各个类解耦，可以方便的扩充一个类的功能。
通过注解的方式解析模板，具体是由@angular/compiler 库和html-parser库完成的。但未来会采用AOT的方式直接编译成用来生成和维护DOM结构的JavaScript代码。所以实际上并不会把字符串解析成HTML模板。

面向对象的概念是什么？解释一下封装、多态、继承 的意义

封装多态继承抽象。
封装：封装是通过限制只有特定类的对象可以访问这一特定类的成员，而它们通常利用接口实现消息的传入传出。
多态：多态是指由继承而产生的相关的不同的类，其对象对同一消息会做出不同的响应。
继承：指在某种情况下，一个类会有子类，子类比原本的类（父类）要更加具体化。

多重继承怎么实现，多重继承里可能会出现什么数据结构？从而导致什么问题？

JS本身是不提供多重继承，可以模拟多重继承，但是它会大大增加代码的复杂度和维护难度。
图，查找时出现循环，改成委托行为(数据结构变成链表)。

图灵完备理论知道吗？关于图灵的其他知识知道吗？

如果一系列操作数据的规则（如指令集、编程语言、细胞自动机）可以用来模拟单带图灵机，那么它是图灵完备的。图灵机由以下几个部分组成：
一条无限长的纸带TAPE。
一个读写头HEAD。
一套控制规则TABLE。
一个状态寄存器。

如何在一个dom节点前面插入节点？

insertBefore,
如果是后面的话就先找到该元素的父元素，然后判断该元素是否是最后一个元素，如果是最后一个元素就直接在父元素上appendChild。
如果不是最后一个元素，就找到该元素的下一个元素，然后在它的下一个元素之前用insertBefore插入。

树的遍历方法有哪些？

前序、中序、后序

递归和迭代的区别是什么，各有什么优缺点?尾调用知道吗？

递归是函数调用自己，迭代是循环调用别的函数
尾调用就是在return的地方执行递归

函数式编程和面向对象编程冲突吗？为什么？

不冲突，比如TS和rxjs在NG项目并存，并且js也是一门灵活的语言

讲讲你对DI（依赖注入）的理解？

它是一种设计模式，可以让类从外部源中获得它的依赖，而不必亲自创建它们。最大的好处是让使用者和被使用者解耦，从而反转依赖。

策略模式和单例模式说一下理解？

策略模式指对象有某个行为，但是在不同的场景中，该行为有不同的实现算法。
单例模式中单例对象的类必须保证只有一个实例存在。

Reflow和Repaint的区别？如何避免重绘？

Reflow定义：元素要先计算才渲染。
增删改DOM、移动DOM位置、修改一些CSS样式、Resize窗口、修改默认字体等会触发。
Repaint定义：元素的属性已经确认下来不需要计算，只需要绘制。
样式、DOM有变动都会触发，尽量少触发：比如使用DocumentFragment操作DOM。参考资料

Shadow DOM听说过没有？

Shadow DOM为Web组件中的DOM和CSS提供了封装。将他们隔离开来，以免其中的操作影响到别的DOM和样式。参考资料
NG提供了三种方法应用影子DOM：Native（不进不出）、Emulated（只进不出）、None（可出可进）

讲讲跨域的方法？

详情见JS与跨域

setTimeout和requestAnimationFrame的区别？

setTimeout由于不准确会出现掉帧丢帧的情况，requestAnimationFrame是帧刷新驱动的。
参考回答

谈谈事件模型？

见Javascript与事件

讲讲安全方面的攻击手段？xss和csrf有什么区别？

xss、csrf、sql注入、ddos、文件上传漏洞、内存缓冲区溢出、弱口令、社工等等
xss重点在跨站脚本攻击，混淆数据和代码从而达到目的，所以常常用来散布蠕虫
csrf重点在跨域请求伪造，一般利用的是web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。所以常常用来刷接口

汇编的指令还记得多少？

mov、jmp、mul、add、ret、loop等等...

矩阵转置和矩阵相乘还记得吗？

转置是把矩阵的行变成列，列变成行
相乘是把一个mxn和nxp的矩阵转成mxp的矩阵

矩阵相乘公式.png

谈谈事件循环？

见Javascript与事件

闭包是什么？内存泄露怎么观察？

闭包是JS特有的一种作用域机制，它可以让一个函数作用域有权力访问作用域链上的变量。
通过chrome的开发者工具的memory栏可以观察。

如何使用css实现硬件加速？

因为CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行，所以可以使用transform: translateZ(0)来开启硬件加速。transform: translate3d(0, 0, 0)也可以。

webgl了解过没有？

当时直接说没有。
webgl学习资料

三面

hr那边比较嘈杂，有些地方要费劲才能听清...

你现在在哪？为什么不找份实习？
为什么会报考云南大学?
对前端和安全关系的理解？
为什么做前端?
家人反对你来北京吗?
有没有投其他公司？
如果360不发offer给你，你会选哪家公司？
有的公司的安全团队是为自己公司的安全服务的，有的公司的安全团队是为外面的各大企业安全服务的，对此你怎么看？