摘要：什么是單頁面應用單頁面應用是指用戶在瀏覽器加載單一的頁面，后續請求都無需再離開此頁目標旨在用為用戶提供了更接近本地移動或桌面應用程序的體驗。流程第一次請求時，將導航頁傳輸到客戶端，其余請求通過獲取數據實現數據的傳輸通過或遠程過程調用。

什么是單頁面應用(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學習冊

持續更新中~喜歡留下個贊哦！