44

什么是单页面应用(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 之间的同步