摘要：什么是單頁面應(yīng)用單頁面應(yīng)用是指用戶在瀏覽器加載單一的頁面，后續(xù)請求都無需再離開此頁目標(biāo)旨在用為用戶提供了更接近本地移動或桌面應(yīng)用程序的體驗。流程第一次請求時，將導(dǎo)航頁傳輸?shù)娇蛻舳耍溆嗾埱笸ㄟ^獲取數(shù)據(jù)實現(xiàn)數(shù)據(jù)的傳輸通過或遠(yuǎn)程過程調(diào)用。

什么是單頁面應(yīng)用(SPA)？

單頁面應(yīng)用(SPA)是指用戶在瀏覽器加載單一的HTML頁面，后續(xù)請求都無需再離開此頁

目標(biāo)：旨在用為用戶提供了更接近本地移動APP或桌面應(yīng)用程序的體驗。

流程：第一次請求時，將導(dǎo)航頁傳輸?shù)娇蛻舳耍溆嗾埱笸ㄟ^ REST API 獲取 JSON 數(shù)據(jù)

實現(xiàn)：數(shù)據(jù)的傳輸通過 Web Socket API 或 RPC(遠(yuǎn)程過程調(diào)用)。

優(yōu)點：用戶體驗流暢，服務(wù)器壓力小，前后端職責(zé)分離

缺點：關(guān)鍵詞布局難度加大，不利于 SEO

什么是“前端路由”? 什么時候適用“前端路由”? 有哪些優(yōu)點和缺點?

前端路由通過 URL 和 History 來實現(xiàn)頁面切換

應(yīng)用：前端路由主要適用于“前后端分離”的單頁面應(yīng)用(SPA)項目

優(yōu)點：用戶體驗好，交互流暢

缺點：瀏覽器“前進(jìn)”、“后退”會重新請求，無法合理利用緩存

模塊化開發(fā)怎么做？

封裝對象作為命名空間 -- 內(nèi)部狀態(tài)可以被外部改寫

立即執(zhí)行函數(shù)(IIFE) -- 需要依賴多個JS文件，并且嚴(yán)格按順序加載

使用模塊加載器 -- require.js, sea.js, EC6 模塊

通行的 Javascript 模塊的規(guī)范有哪些？

CommonJS -- 主要用在服務(wù)器端 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 規(guī)范的區(qū)別？

規(guī)范化產(chǎn)出：

AMD 由 RequireJS 推廣產(chǎn)出

CMD 由 SeaJS 推廣產(chǎn)出

模塊的依賴:

AMD 提前執(zhí)行，推崇依賴前置

CMD 延遲執(zhí)行，推崇依賴就近

API 功能:

AMD 的 API 默認(rèn)多功能（分全局 require 和局部 require）

CMD 的 API 推崇職責(zé)單一純粹（沒有全局 require）

模塊定義規(guī)則：

AMD 默認(rèn)一開始就載入全部依賴模塊

  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的核心原理是什么？

每個模塊所依賴模塊都會比本模塊預(yù)先加載

對 Node.js 的優(yōu)點、缺點提出了自己的看法？ Node.js的特點和適用場景？

Node.js的特點：單線程，非阻塞I/O，事件驅(qū)動

Node.js的優(yōu)點：擅長處理高并發(fā)；適合I/O密集型應(yīng)用

Node.js的缺點：不適合CPU密集運算；不能充分利用多核CPU；可靠性低，某個環(huán)節(jié)出錯會導(dǎo)致整個系統(tǒng)崩潰

Node.js的適用場景：

RESTful API

實時應(yīng)用：在線聊天、圖文直播

工具類應(yīng)用：前端部署(npm, gulp)

表單收集：問卷系統(tǒng)

如何判斷當(dāng)前腳本運行在瀏覽器還是node環(huán)境中？

判斷 Global 對象是否為 window，如果不為 window，當(dāng)前腳本沒有運行在瀏覽器中

什么是 npm ？

npm 是 Node.js 的模塊管理和發(fā)布工具

什么是函數(shù)式編程？

函數(shù)式編程是一種"編程范式"，主要思想是把運算過程盡量寫成一系列嵌套的函數(shù)調(diào)用

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

函數(shù)式編程的特點：

函數(shù)核心化：函數(shù)可以作為變量的賦值、另一函數(shù)的參數(shù)、另一函數(shù)的返回值

只用“表達(dá)式”，不用“語句”：要求每一步都是單純的運算，都必須有返回值

沒有"副作用"：所有功能只為返回一個新的值，不修改外部變量

引用透明：運行不依賴于外部變量，只依賴于輸入的參數(shù)

函數(shù)式編程的優(yōu)點：

代碼簡潔，接近自然語言，易于理解

便于維護(hù)，利于測試、除錯、組合

易于“并發(fā)編程“，不用擔(dān)心一個線程的數(shù)據(jù)，被另一個線程修改

可“熱升級”代碼，在運行狀態(tài)下直接升級代碼，不需要重啟，也不需要停機(jī)

什么是函數(shù)柯里化Currying)？

柯里化：

通常也稱部分求值，含義是給函數(shù)分步傳遞參數(shù)，每次遞參部分應(yīng)用參數(shù)，并返回一個更具體的函數(shù)，繼續(xù)接受剩余參數(shù)

期間會連續(xù)返回具體函數(shù)，直至返回最后結(jié)果。因此，函數(shù)柯里化是逐步傳參，逐步縮小函數(shù)的適用范圍，逐步求解的過程

柯里化的作用：延遲計算；參數(shù)復(fù)用；動態(tài)創(chuàng)建函數(shù)

柯里化的缺點：

函數(shù)柯里化會產(chǎn)生開銷（函數(shù)嵌套，比普通函數(shù)占更多內(nèi)存），但性能瓶頸首先來自其它原因（DOM 操作等）

什么是依賴注入？

當(dāng)一個類的實例依賴另一個類的實例時，自己不創(chuàng)建該實例，由IOC容器創(chuàng)建并注入給自己，因此稱為依賴注入。

依賴注入解決的就是如何有效組織代碼依賴模塊的問題

設(shè)計模式：什么是 singleton, factory, strategy, decorator？

Singleton(單例) 一個類只有唯一實例，這個實例在整個程序中有一個全局的訪問點

Factory (工廠) 解決實列化對象產(chǎn)生重復(fù)的問題

Strategy(策略) 將每一個算法封裝起來，使它們還可以相互替換，讓算法獨立于使用

Observer(觀察者) 多個觀察者同時監(jiān)聽一個主體，當(dāng)主體對象發(fā)生改變時，所有觀察者都將得到通知

Prototype(原型) 一個完全初始化的實例，用于拷貝或者克隆

Adapter(適配器) 將不同類的接口進(jìn)行匹配調(diào)整，盡管內(nèi)部接口不兼容，不同的類還是可以協(xié)同工作

Proxy(代理模式) 一個充當(dāng)過濾轉(zhuǎn)發(fā)的對象用來代表一個真實的對象

Iterator(迭代器) 在不需要直到集合內(nèi)部工作原理的情況下，順序訪問一個集合里面的元素

Chain of Responsibility(職責(zé)連) 處理請求組成的對象一條鏈，請求鏈中傳遞，直到有對象可以處理

什么是前端工程化？

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

前端開發(fā)基本流程：

項目初始化：yeoman, FIS

引入依賴包：bower, npm

模塊化管理：npm, browserify, Webpack

代碼編譯：babel, sass, less

代碼優(yōu)化(壓縮/合并)：Gulp, Grunt

代碼檢查：JSHint, ESLint

代碼測試：Mocha

目前最知名的構(gòu)建工具：Gulp, Grunt, npm + Webpack

介紹 Yeoman 是什么？

Yeoman --前端開發(fā)腳手架工具，自動將最佳實踐和工具整合起來構(gòu)建項目骨架

Yeoman 其實是三類工具的合體，三類工具各自獨立：

yo --- 腳手架，自動生成工具（相當(dāng)于一個粘合劑，把 Yeoman 工具粘合在一起）

Grunt、gulp --- 自動化構(gòu)建工具 （最初只有g(shù)runt，之后加入了gulp）

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

介紹 WebPack 是什么？ 有什么優(yōu)勢？

WebPack 是一款[模塊加載器]兼[打包工具]，用于把各種靜態(tài)資源（js/css/image等）作為模塊來使用

WebPack 的優(yōu)勢：

WebPack 同時支持 commonJS 和 AMD/CMD，方便代碼遷移

不僅僅能被模塊化 JS ，還包括 CSS、Image 等

能替代部分 grunt/gulp 的工作，如打包、壓縮混淆、圖片base64

擴(kuò)展性強(qiáng)，插件機(jī)制完善，特別是支持 React 熱插拔的功能

介紹類庫和框架的區(qū)別？

類庫是一些函數(shù)的集合，幫助開發(fā)者寫WEB應(yīng)用，起主導(dǎo)作用的是開發(fā)者的代碼

框架是已實現(xiàn)的特殊WEB應(yīng)用，開發(fā)者只需對它填充具體的業(yè)務(wù)邏輯，起主導(dǎo)作用是框架

什么是 MVC/MVP/MVVM/Flux？

MVC(Model-View-Controller)

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

通信都是單向的；C只起路由作用，業(yè)務(wù)邏輯都部署在V

Backbone

MVP(Model-View-Presenter)

V<->P, P<->M

通信都是雙向的；V和M不發(fā)生聯(lián)系(通過P傳)；V非常薄，邏輯都部署在P

Riot.js

MVVM(Model-View-ViewModel)

V->VM, VM<->M

采用雙向數(shù)據(jù)綁定：View 和 ViewModel 的變動都會相互映射到對象上面

Angular

Flux(Dispatcher-Store-View)

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

Facebook 為了解決在 MVC 應(yīng)用中碰到的工程性問題提出一個架構(gòu)思想

基于一個簡單的原則：數(shù)據(jù)在應(yīng)用中單向流動（單向數(shù)據(jù)流）

React(Flux 中 View，只關(guān)注表現(xiàn)層)

Backbone 是什么？

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

AngularJS 是什么？

AngularJS 是一個完善的前端 MVVM 框架，包含模板、數(shù)據(jù)雙向綁定、路由、模塊化、服務(wù)、依賴注入等

AngularJS 由 Google 維護(hù)，用來協(xié)助大型單一頁面應(yīng)用開發(fā)。

React 是什么？

React 不是 MV* 框架，用于構(gòu)建用戶界面的 JavaScript 庫，側(cè)重于 View 層

React 主要的原理：

虛擬 DOM + diff 算法 -> 不直接操作 DOM 對象

Components 組件 -> Virtual DOM 的節(jié)點

State 觸發(fā)視圖的渲染 -> 單向數(shù)據(jù)綁定

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

react-router 路由系統(tǒng)的實現(xiàn)原理？

實現(xiàn)原理：location 與 components 之間的同步

路由的職責(zé)是保證 UI 和 URL 的同步

在 react-router 中，URL 對應(yīng) Location 對象，UI 由 react components 決定

因此，路由在 react-router 中就轉(zhuǎn)變成 location 與 components 之間的同步

上期經(jīng)典前端面試之CSS

往期經(jīng)典React學(xué)習(xí)冊

持續(xù)更新中~喜歡留下個贊哦！