前端面試題（3）現代技術 - JavaShuo

什麼是單頁面應用(SPA)？javascript

單頁面應用(SPA)是指用戶在瀏覽器加載單一的HTML頁面，後續請求都無需再離開此頁
目標：旨在用爲用戶提供了更接近本地移動APP或桌面應用程序的體驗。
流程：第一次請求時，將導航頁傳輸到客戶端，其他請求經過 REST API 獲取 JSON 數據
實現：數據的傳輸經過 Web Socket API 或 RPC(遠程過程調用)。
優勢：用戶體驗流暢，服務器壓力小，先後端職責分離
缺點：關鍵詞佈局難度加大，不利於 SEO

什麼是「前端路由」? 何時適用「前端路由」? 有哪些優勢和缺點?css

前端路由經過 URL 和 History 來實現頁面切換
應用：前端路由主要適用於「先後端分離」的單頁面應用(SPA)項目
優勢：用戶體驗好，交互流暢
缺點：瀏覽器「前進」、「後退」會從新請求，沒法合理利用緩存

模塊化開發怎麼作？前端

封裝對象做爲命名空間 -- 內部狀態能夠被外部改寫
當即執行函數(IIFE) -- 須要依賴多個JS文件，而且嚴格按順序加載
使用模塊加載器 -- require.js, sea.js, EC6 模塊

通行的 Javascript 模塊的規範有哪些？java

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 規範的區別？node

規範化產出：react
- AMD 由 RequireJS 推廣產出
- CMD 由 SeaJS 推廣產出
模塊的依賴:jquery
- AMD 提早執行，推崇依賴前置
- CMD 延遲執行，推崇依賴就近
API 功能:webpack
- AMD 的 API 默認多功能（分全局 require 和局部 require）
- CMD 的 API 推崇職責單一純粹（沒有全局 require）

模塊定義規則：web
- 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學習冊

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