前端面试题（3）现代技术

摘要：什么是单页面应用单页面应用是指用户在浏览器加载单一的页面，后续请求都无需再离开此页目标旨在用为用户提供了更接近本地移动或桌面应用程序的体验。流程第一次请求时，将导航页传输到客户端，其余请求通过获取数据实现数据的传输通过或远程过程调用。

什么是单页面应用(SPA)？

单页面应用(SPA)是指用户在浏览器加载单一的HTML页面，后续请求都无需再离开此页

目标：旨在用为用户提供了更接近本地移动APP或桌面应用程序的体验。

流程：第一次请求时，将导航页传输到客户端，其余请求通过 REST API 获取 JSON 数据

实现：数据的传输通过 Web Socket API 或 RPC(远程过程调用)。

优点：用户体验流畅，服务器压力小，前后端职责分离

缺点：关键词布局难度加大，不利于 SEO

什么是“前端路由”? 什么时候适用“前端路由”? 有哪些优点和缺点?

前端路由通过 URL 和 History 来实现页面切换

应用：前端路由主要适用于“前后端分离”的单页面应用(SPA)项目

优点：用户体验好，交互流畅

缺点：浏览器“前进”、“后退”会重新请求，无法合理利用缓存

模块化开发怎么做？

封装对象作为命名空间 -- 内部状态可以被外部改写

立即执行函数(IIFE) -- 需要依赖多个JS文件，并且严格按顺序加载

使用模块加载器 -- require.js, sea.js, EC6 模块

通行的 Javascript 模块的规范有哪些？

CommonJS -- 主要用在服务器端 node.js

var math = require("./math");
math.add(2,3);

AMD(异步模块定义) -- require.js

require(["./math"], function (math) {
    math.add(2, 3);
});

CMD(通用模块定义) -- sea.js

var math = require("./math");
math.add(2,3);

ES6 模块

import {math} from "./math";
math.add(2, 3);

AMD 与 CMD 规范的区别？

规范化产出：

AMD 由 RequireJS 推广产出

CMD 由 SeaJS 推广产出

模块的依赖:

AMD 提前执行，推崇依赖前置

CMD 延迟执行，推崇依赖就近

API 功能:

AMD 的 API 默认多功能（分全局 require 和局部 require）

CMD 的 API 推崇职责单一纯粹（没有全局 require）

模块定义规则：

AMD 默认一开始就载入全部依赖模块

  define(["./a", "./b"], function(a, b) {
      a.doSomething();
      b.doSomething();
  });

CMD 依赖模块在用到时才就近载入

  define(function(require, exports, module) {
      var a = require("./a");
      a.doSomething();
      var b = require("./b");
      b.doSomething();
  })

requireJS的核心原理是什么？

每个模块所依赖模块都会比本模块预先加载

对 Node.js 的优点、缺点提出了自己的看法？ Node.js的特点和适用场景？

Node.js的特点：单线程，非阻塞I/O，事件驱动

Node.js的优点：擅长处理高并发；适合I/O密集型应用

Node.js的缺点：不适合CPU密集运算；不能充分利用多核CPU；可靠性低，某个环节出错会导致整个系统崩溃

Node.js的适用场景：

RESTful API

实时应用：在线聊天、图文直播

工具类应用：前端部署(npm, gulp)

表单收集：问卷系统

如何判断当前脚本运行在浏览器还是node环境中？

判断 Global 对象是否为 window，如果不为 window，当前脚本没有运行在浏览器中

什么是 npm ？

npm 是 Node.js 的模块管理和发布工具

什么是函数式编程？

函数式编程是一种"编程范式"，主要思想是把运算过程尽量写成一系列嵌套的函数调用

例如：var result = subtract(multiply(add(1,2), 3), 4);

函数式编程的特点：

函数核心化：函数可以作为变量的赋值、另一函数的参数、另一函数的返回值

只用“表达式”，不用“语句”：要求每一步都是单纯的运算，都必须有返回值

没有"副作用"：所有功能只为返回一个新的值，不修改外部变量

引用透明：运行不依赖于外部变量，只依赖于输入的参数

函数式编程的优点：

代码简洁，接近自然语言，易于理解

便于维护，利于测试、除错、组合

易于“并发编程“，不用担心一个线程的数据，被另一个线程修改

可“热升级”代码，在运行状态下直接升级代码，不需要重启，也不需要停机

什么是函数柯里化Currying)？

柯里化：

通常也称部分求值，含义是给函数分步传递参数，每次递参部分应用参数，并返回一个更具体的函数，继续接受剩余参数

期间会连续返回具体函数，直至返回最后结果。因此，函数柯里化是逐步传参，逐步缩小函数的适用范围，逐步求解的过程

柯里化的作用：延迟计算；参数复用；动态创建函数

柯里化的缺点：

函数柯里化会产生开销（函数嵌套，比普通函数占更多内存），但性能瓶颈首先来自其它原因（DOM 操作等）

什么是依赖注入？

当一个类的实例依赖另一个类的实例时，自己不创建该实例，由IOC容器创建并注入给自己，因此称为依赖注入。

依赖注入解决的就是如何有效组织代码依赖模块的问题

设计模式：什么是 singleton, factory, strategy, decorator？

Singleton(单例) 一个类只有唯一实例，这个实例在整个程序中有一个全局的访问点

Factory (工厂) 解决实列化对象产生重复的问题

Strategy(策略) 将每一个算法封装起来，使它们还可以相互替换，让算法独立于使用

Observer(观察者) 多个观察者同时监听一个主体，当主体对象发生改变时，所有观察者都将得到通知

Prototype(原型) 一个完全初始化的实例，用于拷贝或者克隆

Adapter(适配器) 将不同类的接口进行匹配调整，尽管内部接口不兼容，不同的类还是可以协同工作

Proxy(代理模式) 一个充当过滤转发的对象用来代表一个真实的对象

Iterator(迭代器) 在不需要直到集合内部工作原理的情况下，顺序访问一个集合里面的元素

Chain of Responsibility(职责连) 处理请求组成的对象一条链，请求链中传递，直到有对象可以处理

什么是前端工程化？

前端工程化就是把一整套前端工作流程使用工具自动化完成

前端开发基本流程：

项目初始化：yeoman, FIS

引入依赖包：bower, npm

模块化管理：npm, browserify, Webpack

代码编译：babel, sass, less

代码优化(压缩/合并)：Gulp, Grunt

代码检查：JSHint, ESLint

代码测试：Mocha

目前最知名的构建工具：Gulp, Grunt, npm + Webpack

介绍 Yeoman 是什么？

Yeoman --前端开发脚手架工具，自动将最佳实践和工具整合起来构建项目骨架

Yeoman 其实是三类工具的合体，三类工具各自独立：

yo --- 脚手架，自动生成工具（相当于一个粘合剂，把 Yeoman 工具粘合在一起）

Grunt、gulp --- 自动化构建工具 （最初只有grunt，之后加入了gulp）

Bower、npm --- 包管理工具 （原来是bower，之后加入了npm）

介绍 WebPack 是什么？ 有什么优势？

WebPack 是一款[模块加载器]兼[打包工具]，用于把各种静态资源（js/css/image等）作为模块来使用

WebPack 的优势：

WebPack 同时支持 commonJS 和 AMD/CMD，方便代码迁移

不仅仅能被模块化 JS ，还包括 CSS、Image 等

能替代部分 grunt/gulp 的工作，如打包、压缩混淆、图片base64

扩展性强，插件机制完善，特别是支持 React 热插拔的功能

介绍类库和框架的区别？

类库是一些函数的集合，帮助开发者写WEB应用，起主导作用的是开发者的代码

框架是已实现的特殊WEB应用，开发者只需对它填充具体的业务逻辑，起主导作用是框架

什么是 MVC/MVP/MVVM/Flux？

MVC(Model-View-Controller)

V->C, C->M, M->V

通信都是单向的；C只起路由作用，业务逻辑都部署在V

Backbone

MVP(Model-View-Presenter)

V<->P, P<->M

通信都是双向的；V和M不发生联系(通过P传)；V非常薄，逻辑都部署在P

Riot.js

MVVM(Model-View-ViewModel)

V->VM, VM<->M

采用双向数据绑定：View 和 ViewModel 的变动都会相互映射到对象上面

Angular

Flux(Dispatcher-Store-View)

Action->Dispatcher->Store->View, View->Action

Facebook 为了解决在 MVC 应用中碰到的工程性问题提出一个架构思想

基于一个简单的原则：数据在应用中单向流动（单向数据流）

React(Flux 中 View，只关注表现层)

Backbone 是什么？

Backbone 是一个基于 jquery 和 underscore 的前端(MVC)框架

AngularJS 是什么？

AngularJS 是一个完善的前端 MVVM 框架，包含模板、数据双向绑定、路由、模块化、服务、依赖注入等

AngularJS 由 Google 维护，用来协助大型单一页面应用开发。

React 是什么？

React 不是 MV* 框架，用于构建用户界面的 JavaScript 库，侧重于 View 层

React 主要的原理：

虚拟 DOM + diff 算法 -> 不直接操作 DOM 对象

Components 组件 -> Virtual DOM 的节点

State 触发视图的渲染 -> 单向数据绑定

React 解决方案：React + Redux + react-router + Fetch + webpack

react-router 路由系统的实现原理？

实现原理：location 与 components 之间的同步

路由的职责是保证 UI 和 URL 的同步

在 react-router 中，URL 对应 Location 对象，UI 由 react components 决定

因此，路由在 react-router 中就转变成 location 与 components 之间的同步

上期经典前端面试之CSS

往期经典React学习册

持续更新中~喜欢留下个赞哦！