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

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

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

• 流程：第一次請(qǐng)求時(shí)隘道，將導(dǎo)航頁(yè)傳輸?shù)娇蛻舳烁倭耄溆嗾?qǐng)求通過(guò) REST API 獲取 JSON 數(shù)據(jù)

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

• 優(yōu)點(diǎn)：用戶體驗(yàn)流暢潭辈，服務(wù)器壓力小鸯屿，前后端職責(zé)分離

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

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

• 前端路由通過(guò) URL 和 History 來(lái)實(shí)現(xiàn)頁(yè)面切換
• 應(yīng)用：前端路由主要適用于“前后端分離”的單頁(yè)面應(yīng)用(SPA)項(xiàng)目
• 優(yōu)點(diǎn)：用戶體驗(yàn)好把敢，交互流暢
• 缺點(diǎn)：瀏覽器“前進(jìn)”寄摆、“后退”會(huì)重新請(qǐng)求，無(wú)法合理利用緩存

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

• 封裝對(duì)象作為命名空間 -- 內(nèi)部狀態(tài)可以被外部改寫
• 立即執(zhí)行函數(shù)(IIFE) -- 需要依賴多個(gè)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);

• E6 模塊

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é)單一純粹（沒(méi)有全局 require）

• 模塊定義規(guī)則：

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

  define(['./a', './b'], function(a, b) {
      a.doSomething();
      b.doSomething();
  });

• CMD 依賴模塊在用到時(shí)才就近載入

  define(function(require, exports, module) {
      var a = require('./a');
      a.doSomething();
      var b = require('./b');
      b.doSomething();
  })

requireJS的核心原理是什么割择？

• 每個(gè)模塊所依賴模塊都會(huì)比本模塊預(yù)先加載

對(duì) Node.js 的優(yōu)點(diǎn)眷篇、缺點(diǎn)提出了自己的看法？ Node.js的特點(diǎn)和適用場(chǎng)景荔泳？

• Node.js的特點(diǎn)：?jiǎn)尉€程蕉饼，非阻塞I/O，事件驅(qū)動(dòng)
• Node.js的優(yōu)點(diǎn)：擅長(zhǎng)處理高并發(fā)换可；適合I/O密集型應(yīng)用

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

• Node.js的適用場(chǎng)景：

  • RESTful API
  • 實(shí)時(shí)應(yīng)用：在線聊天、圖文直播
  • 工具類應(yīng)用：前端部署(npm, gulp)
  • 表單收集：?jiǎn)柧硐到y(tǒng)

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

• 判斷 Global 對(duì)象是否為 window译荞，如果不為 window，當(dāng)前腳本沒(méi)有運(yùn)行在瀏覽器中

什么是 npm 休弃？

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

什么是 WebKit 吞歼？

• WebKit 是一個(gè)開源的瀏覽器內(nèi)核，由渲染引擎(WebCore)和JS解釋引擎(JSCore)組成
• 通常所說(shuō)的 WebKit 指的是 WebKit(WebCore)塔猾，主要工作是進(jìn)行 HTML/CSS 渲染
• WebKit 一直是 Safari 和 Chrome(之前) 使用的瀏覽器內(nèi)核篙骡，后來(lái) Chrome 改用Blink 內(nèi)核

如何測(cè)試前端代碼? 知道 Unit Test，BDD, TDD 么? 怎么測(cè)試你的前端工程(mocha, jasmin..)?

• 通過(guò)為前端代碼編寫單元測(cè)試(Unit Test)來(lái)測(cè)試前端代碼
• Unit Test：一段用于測(cè)試一個(gè)模塊或接口是否能達(dá)到預(yù)期結(jié)果的代碼
• BDD：行為驅(qū)動(dòng)開發(fā) -- 業(yè)務(wù)需求描述產(chǎn)出產(chǎn)品代碼的開發(fā)方法
• TDD：測(cè)試驅(qū)動(dòng)開發(fā) -- 單元測(cè)試用例代碼產(chǎn)出產(chǎn)品代碼的開發(fā)方法
• 單元測(cè)試框架：

// mocha 示例
describe('Test add', function() {
  it('1 + 2 = 3', function() {
      expect(add(1, 2)).to.be.equal(3);
  });
});

// jasmin 示例
describe('Test add', function () {
    it('1 + 2 = 3', function () {
        expect(add(1, 2)).toEqual(3);
    });
});

介紹你知道的前端模板引擎？

• artTemplate, underscore, handlebars

什么是 Modernizr糯俗？ Modernizr 工作原理尿褪？

• Modernizr 是一個(gè)開源的 JavaScript 庫(kù)，用于檢測(cè)用戶瀏覽器對(duì) HTML5 與 CSS3 的支持情況

移動(dòng)端最小觸控區(qū)域是多大得湘？

• 44 * 44 px

移動(dòng)端的點(diǎn)擊事件的延遲時(shí)間是多長(zhǎng)杖玲，為什么會(huì)有延遲？ 如何解決這個(gè)延時(shí)淘正？

• 移動(dòng)端 click 有 300ms 延遲摆马，瀏覽器為了區(qū)分“雙擊”（放大頁(yè)面）還是“單擊”而設(shè)計(jì)
• 解決方案：
  • 禁用縮放(對(duì)safari無(wú)效)
  • 使用指針事件(IE私有特性，且僅IE10+)
  • 使用 Zepto 的 tap 事件(有點(diǎn)透BUG)
  • 使用 FastClick 插件(體積大[壓縮后8k])

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

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

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

• 函數(shù)式編程的特點(diǎn)：

  • 函數(shù)核心化：函數(shù)可以作為變量的賦值、另一函數(shù)的參數(shù)伞剑、另一函數(shù)的返回值
  • 只用“表達(dá)式”斑唬，不用“語(yǔ)句”：要求每一步都是單純的運(yùn)算，都必須有返回值
  • 沒(méi)有"副作用"：所有功能只為返回一個(gè)新的值黎泣，不修改外部變量
  • 引用透明：運(yùn)行不依賴于外部變量恕刘，只依賴于輸入的參數(shù)

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

  • 代碼簡(jiǎn)潔，接近自然語(yǔ)言抒倚，易于理解
  • 便于維護(hù)褐着，利于測(cè)試、除錯(cuò)托呕、組合
  • 易于“并發(fā)編程“含蓉，不用擔(dān)心一個(gè)線程的數(shù)據(jù)，被另一個(gè)線程修改
  • 可“熱升級(jí)”代碼项郊，在運(yùn)行狀態(tài)下直接升級(jí)代碼馅扣，不需要重啟，也不需要停機(jī)

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

• 柯里化：

  • 通常也稱部分求值差油，含義是給函數(shù)分步傳遞參數(shù)，每次遞參部分應(yīng)用參數(shù)任洞，并返回一個(gè)更具體的函數(shù)蓄喇，繼續(xù)接受剩余參數(shù)
  • 期間會(huì)連續(xù)返回具體函數(shù)，直至返回最后結(jié)果交掏。因此妆偏，函數(shù)柯里化是逐步傳參，逐步縮小函數(shù)的適用范圍盅弛，逐步求解的過(guò)程
  • 柯里化的作用：延遲計(jì)算钱骂；參數(shù)復(fù)用叔锐；動(dòng)態(tài)創(chuàng)建函數(shù)

• 柯里化的缺點(diǎn)：

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

什么是依賴注入掌腰？

• 當(dāng)一個(gè)類的實(shí)例依賴另一個(gè)類的實(shí)例時(shí)，自己不創(chuàng)建該實(shí)例张吉，由IOC容器創(chuàng)建并注入給自己齿梁，因此稱為依賴注入。
• 依賴注入解決的就是如何有效組織代碼依賴模塊的問(wèn)題

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

• Singleton(單例) 一個(gè)類只有唯一實(shí)例勺择，這個(gè)實(shí)例在整個(gè)程序中有一個(gè)全局的訪問(wèn)點(diǎn)
• Factory (工廠) 解決實(shí)列化對(duì)象產(chǎn)生重復(fù)的問(wèn)題
• Strategy(策略) 將每一個(gè)算法封裝起來(lái)，使它們還可以相互替換伦忠，讓算法獨(dú)立于使用
• Observer(觀察者) 多個(gè)觀察者同時(shí)監(jiān)聽一個(gè)主體省核，當(dāng)主體對(duì)象發(fā)生改變時(shí)，所有觀察者都將得到通知
• Prototype(原型) 一個(gè)完全初始化的實(shí)例昆码，用于拷貝或者克隆
• Adapter(適配器) 將不同類的接口進(jìn)行匹配調(diào)整气忠，盡管內(nèi)部接口不兼容，不同的類還是可以協(xié)同工作
• Proxy(代理模式) 一個(gè)充當(dāng)過(guò)濾轉(zhuǎn)發(fā)的對(duì)象用來(lái)代表一個(gè)真實(shí)的對(duì)象
• Iterator(迭代器) 在不需要直到集合內(nèi)部工作原理的情況下赋咽，順序訪問(wèn)一個(gè)集合里面的元素
• Chain of Responsibility(職責(zé)連) 處理請(qǐng)求組成的對(duì)象一條鏈旧噪，請(qǐng)求鏈中傳遞，直到有對(duì)象可以處理

什么是前端工程化脓匿？

• 前端工程化就是把一整套前端工作流程使用工具自動(dòng)化完成

• 前端開發(fā)基本流程：
  • 項(xiàng)目初始化：yeoman, FIS
  • 引入依賴包：bower, npm
  • 模塊化管理：npm, browserify, Webpack
  • 代碼編譯：babel, sass, less
  • 代碼優(yōu)化(壓縮/合并)：Gulp, Grunt
  • 代碼檢查：JSHint, ESLint
  • 代碼測(cè)試：Mocha
• 目前最知名的構(gòu)建工具：Gulp, Grunt, npm + Webpack

介紹 Yeoman 是什么淘钟？

• Yeoman --前端開發(fā)腳手架工具，自動(dòng)將最佳實(shí)踐和工具整合起來(lái)構(gòu)建項(xiàng)目骨架
• Yeoman 其實(shí)是三類工具的合體陪毡，三類工具各自獨(dú)立：
  • yo --- 腳手架米母，自動(dòng)生成工具（相當(dāng)于一個(gè)粘合劑，把 Yeoman 工具粘合在一起）
  • Grunt毡琉、gulp --- 自動(dòng)化構(gòu)建工具 （最初只有g(shù)runt铁瞒，之后加入了gulp）
  • Bower、npm --- 包管理工具 （原來(lái)是bower桅滋，之后加入了npm）

介紹 WebPack 是什么慧耍？ 有什么優(yōu)勢(shì)？

• WebPack 是一款[模塊加載器]兼[打包工具]虱歪，用于把各種靜態(tài)資源（js/css/image等）作為模塊來(lái)使用
• WebPack 的優(yōu)勢(shì)：
  • WebPack 同時(shí)支持 commonJS 和 AMD/CMD蜂绎，方便代碼遷移
  • 不僅僅能被模塊化 JS 栅表，還包括 CSS笋鄙、Image 等
  • 能替代部分 grunt/gulp 的工作，如打包怪瓶、壓縮混淆萧落、圖片base64
  • 擴(kuò)展性強(qiáng)践美，插件機(jī)制完善，特別是支持 React 熱插拔的功能

介紹類庫(kù)和框架的區(qū)別找岖？

• 類庫(kù)是一些函數(shù)的集合陨倡，幫助開發(fā)者寫WEB應(yīng)用，起主導(dǎo)作用的是開發(fā)者的代碼
• 框架是已實(shí)現(xiàn)的特殊WEB應(yīng)用许布，開發(fā)者只需對(duì)它填充具體的業(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)系(通過(guò)P傳)袁余；V非常薄擎勘，邏輯都部署在P
  • Riot.js

• MVVM(Model-View-ViewModel)

  • V->VM, VM<->M
  • 采用雙向數(shù)據(jù)綁定：View 和 ViewModel 的變動(dòng)都會(huì)相互映射到對(duì)象上面
  • Angular

• Flux(Dispatcher-Store-View)

  • Action->Dispatcher->Store->View, View->Action
  • Facebook 為了解決在 MVC 應(yīng)用中碰到的工程性問(wèn)題提出一個(gè)架構(gòu)思想
  • 基于一個(gè)簡(jiǎn)單的原則：數(shù)據(jù)在應(yīng)用中單向流動(dòng)（單向數(shù)據(jù)流）
  • React(Flux 中 View，只關(guān)注表現(xiàn)層)

Backbone 是什么颖榜？

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

AngularJS 是什么棚饵？

• AngularJS 是一個(gè)完善的前端 MVVM 框架，包含模板掩完、數(shù)據(jù)雙向綁定噪漾、路由、模塊化藤为、服務(wù)怪与、依賴注入等
• AngularJS 由 Google 維護(hù)，用來(lái)協(xié)助大型單一頁(yè)面應(yīng)用開發(fā)缅疟。

React 是什么分别？

• React 不是 MV* 框架，用于構(gòu)建用戶界面的 JavaScript 庫(kù)存淫，側(cè)重于 View 層
• React 主要的原理：
  • 虛擬 DOM + diff 算法 -> 不直接操作 DOM 對(duì)象
  • Components 組件 -> Virtual DOM 的節(jié)點(diǎn)
  • State 觸發(fā)視圖的渲染 -> 單向數(shù)據(jù)綁定
  • React 解決方案：React + Redux + react-router + Fetch + webpack

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

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

• 路由的職責(zé)是保證 UI 和 URL 的同步
• 在 react-router 中，URL 對(duì)應(yīng) Location 對(duì)象桅咆，UI 由 react components 決定
• 因此括授，路由在 react-router 中就轉(zhuǎn)變成 location 與 components 之間的同步

Meteor 是什么

• Meteor 是一個(gè)全棧開發(fā)框架，基礎(chǔ)構(gòu)架是 Node.JS + MongoDB岩饼，并把延伸到了瀏覽器端荚虚。
• Meteor 統(tǒng)一了服務(wù)器端和客戶端的數(shù)據(jù)訪問(wèn)，使開發(fā)者可以輕松完成全棧式開發(fā)工作籍茧。