什麼是單頁面應用(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 之間的同步
持續更新中~喜歡留下個贊哦！