web前端之框架面試筆記

阿新 • • 發佈：2018-11-10

Angular

AngularJS是什麼？

AngularJs（簡稱ng）是一個用於設計動態web應用的結構框架。首先，它是一個框架，不是類庫，是像EXT一樣提供一整套方案用於設計web應用。它不僅僅是一個Javascript框架，因為它的核心其實是對HTML標籤的增強。何為HTML標籤增強？其實就是使你能夠用標籤完成一部分頁面邏輯，具體方式就是通過自定義標籤、自定義屬性等，這些HTML原生沒有的標籤/屬性在ng中有一個名字：指令（directive）。後面會詳細介紹。那麼，什麼又是動態web應用呢？與傳統web系統相區別，web應用能為使用者提供豐富的操作，能夠隨使用者操作不斷更新檢視而不進行url跳轉。ng官方也宣告它更適用於開發CRUD應用，即資料操作比較多的應用，而非是遊戲或影象處理類應用。為了實現這些，ng引入了一些非常棒的特性，包括模板機制、資料繫結、模組、指令、依賴注入、路由。通過資料與模板的繫結，能夠讓我們擺脫繁瑣的DOM操作，而將注意力集中在業務邏輯上。
　另外一個疑問，ng是MVC框架嗎？還是MVVM框架？官網有提到ng的設計採用了MVC的基本思想，而又不完全是MVC，因為在書寫程式碼時我們確實是在用ng-controller這個指令(起碼從名字上看，是MVC吧)，但這個controller處理的業務基本上都是與view進行互動，這麼看來又很接近MVVM。讓我們把目光移到官網那個非醒目的title上：“AngularJS — Superheroic Javascript MVW Framework”。

AngularJS簡單介紹

AngularJS 重新定義了前端應用的開發方式。面對HTML和JavaScript之間的界線，它非但不畏縮不前，反而正面出擊，提出了有效的解決方案。很多前端應用的開發框架，比如Backbone、EmberJS等，都要求開發者繼承此框架特有的一些JavaScript物件。這種方式有其長處，但它不必要地汙染了開發者自己程式碼的物件空間，還要求開發者去了解記憶體裡那些抽象物件。儘管如此我們還是接受了這種方式，因為網路最初的設計無法提供我們今天所需的互動性，於是我們需要框架，來幫我們填補JavaScript和HTML之間的鴻溝。而且有了它，你不用再“直接”操控DOM，只要給你的DOM註上metadata（即AngularJS裡的directive們），然後讓AngularJS來幫你操縱DOM。同時，AngularJS不依賴（也不妨礙）任何其他的框架。你甚至可以基於其它的框架來開發AngularJS應用。

我們什麼時候該用AngularJS呢？

AngularJS是一個 MV* 框架，最適於開發客戶端的單頁面應用。它不是個功能庫，而是用來開發動態網頁的框架。它專注於擴充套件HTML的功能，提供動態資料繫結（data binding），而且它能跟其它框架（如jQuery）合作融洽。
如果你要開發的是單頁應用，AngularJS就是你的上上之選。Gmail、Google Docs、Twitter和Facebook這樣的應用，都很能發揮AngularJS的長處。但是像遊戲開發之類對DOM進行大量操縱、又或者單純需要極高執行速度的應用，就不是AngularJS的用武之地了。

AugularJS特性

AngularJS是一個新出現的強大客戶端技術，提供給大家的一種開發強大應用的方式。在這裡我們淺談一下angular比較簡單的幾個特性，後邊咱們再具體談論angular的其他特性。

首先我們先來了解一下angular的五個小特性，具體瞭解一下：

特性一：雙向的資料繫結

資料繫結可能是AngularJS最酷最實用的特性。它能夠幫助你避免書寫大量的初始程式碼從而節約開發時間。一個典型的web應用可能包含了80%的程式碼用來處理，查詢和監聽DOM。資料繫結是的程式碼更少，你可以專注於你的應用。
我們想象一下Model是你的應用中的簡單事實。你的Model是你用來讀取或者更新的部分。資料繫結指令提供了你的Model投射到view的方法。這些投射可以無縫的，毫不影響的應用到web應用中。
傳統來說，當model變化了。開發人員需要手動處理DOM元素並且將屬性反映到這些變化中。這個一個雙向的過程。一方面，model變化驅動了DOM中元素變化，另一方面，DOM元素的變化也會影響到Model。這個在使用者互動中更加複雜，因為開發人員需要處理和解析
這些互動，然後融合到一個model中，並且更新View。這是一個手動的複雜過程，當一個應用非常龐大的時候，將會是一件非常費勁的事情。
這裡肯定有更好的解決方案！那就是AngularJS的雙向資料繫結，能夠同步DOM和Model等等。

特性二：模板

在AngularJS中，一個模板就是一個HTML檔案。但是HTML的內容擴充套件了，包含了很多幫助你對映model到view的內容。
HTML模板將會被瀏覽器解析到DOM中。DOM然後成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板來生成一些指導，即，directive（指令）。所有的指令都負責針對view來設定資料繫結。
我們要理解AuguarJS並不把模板當做String來操作。輸入AngularJS的是DOM而非string。資料繫結是DOM變化，不是字串的連線或者innerHTML變化。使用DOM作為輸入，而不是字串，是AngularJS區別於其它的框架的最大原因。使用DOM允許你擴充套件指令詞彙並且可以建立你自己的指令，甚至開發可重用的元件。
最大的好處是為設計師和開發者建立了一個緊密的工作流。設計師可以像往常一樣開發標籤，然後開發者拿過來新增上功能，通過資料繫結將會使得這個過程非常簡單。

特性三：MVC

針對客戶端應用開發AngularJS吸收了傳統的MVC基本原則。MVC或者Model-View-Controll設計模式針對不同的人可能意味不同的東西。AngularJS並不執行傳統意義上的MVC，更接近於MVVM（Moodel-View-ViewModel)。
Model
model是應用中的簡單資料。一般是簡單的javascript物件。這裡沒有必要繼承框架的classes，使用proxy物件封裝或者使用特別的setter/getter方法來訪問。事實上我們處理vanilla javascript的方法就是一個非常好的特性，這種方法使得我們更少使用應用的原型。
ViewModel
viewmodel是一個用來提供特別資料和方法從而維護指定view的物件。
viewmodel是$scope的物件，只存在於AnguarJS的應用中。$scope只是一個簡單的js物件，這個物件使用簡單的API來偵測和廣播狀態變化。
Controller
controller負責設定初始狀態和引數化$scope方法用以控制行為。需要指出的controller並不儲存狀態也不和遠端服務互動。
View
view是AngularJS解析後渲染和繫結後生成的HTML 。這個部分幫助你建立web應用的架構。$scope擁有一個針對資料的參考，controller定義行為，view處理佈局和互動。

特性四：服務和依賴注入

AngularJS服務其作用就是對外提供某個特定的功能。
AngularJS擁有內建的依賴注入（DI）子系統，可以幫助開發人員更容易的開發，理解和測試應用。
DI允許你請求你的依賴，而不是自己找尋它們。比如，我們需要一個東西，DI負責找建立並且提供給我們。
為了而得到核心的AngularJS服務，只需要新增一個簡單服務作為引數，AngularJS會偵測並且提供給你：

你也可以定義自己的服務並且讓它們注入：

特性五：指令（Directives）

指令是我個人最喜歡的特性。你是不是也希望瀏覽器可以做點兒有意思的事情？那麼AngularJS可以做到。
指令可以用來建立自定義的標籤。它們可以用來裝飾元素或者操作DOM屬性。可以作為標籤、屬性、註釋和類名使用。
這裡是一個例子，它監聽一個事件並且針對的更新它的$scope ，如下：

然後，你可以使用這個自定義的directive來使用：
<my-component ng-model="message"></my-component>

使用一系列的元件來建立你自己的應用將會讓你更方便的新增，刪除和更新功能。

Angular1 與 Angular2的區別

Angular2不是從Angular1升級過來的，Angular2是重寫的，所以他們之間的差別比較大，不是你用過1就能直接上手2的，計劃可以認為是一個新的框架；
Angular2使用了javascript的超集‘Typescript’，所以angular1和angular2從設定之初就是不一樣的；
Angular1.x在設計之初主要是針對pc端的，對移動端支援較少（當然也有其他一些衍生框架如ionic），而Angular2是設計包含移動端的；
Angular 1的核心概念是$scope，但是angular2中沒有$scope，angular2使用zone.js來記錄監測變化；
Angular 1 中的控制器在angular2中不再使用，也可以說控制器在angular2中被‘Component’元件所替代：

Angular 2中, 指令的結構、用法作了一些調整，比如1中的ng-repeat被*ngFor替代

Angular 2中, 自帶原始指令在使用的時候要加上雜湊(#)字首

<div *ngFor="#technicalDiary of technicalDiries">

雙向資料繫結: [(ngModel)]的寫法替換了ng-model

Angular 2主要的效能優化改進是使用了分層依賴注入系統。 Angular 2實現了基於單向樹的變化檢測，這再次提高了效能；這些優化改進是的angular2的速度比angular1的速度提高很多；

Angular 2的大小是20kb左右，相對於angular1體積減少很多，在移動端的應用中，流量方便更佔優勢；

支援影子 DOM；

支援 Android 和 iOS 的原生移動渲染；

支援服務端渲染

總結：

很多人覺得從angular1轉向angular2的時候學習曲線陡峭，所以在進軍angular2的時候還是先做點預習功課比較好，也是因為改動較大，對angular2的設計思想、原生元件寫法和工作原理有一定的瞭解，學習使用的過程中也更好跨階。

儘管angular2還在應用測試階段，但是新版本相對於angular1有了長足的優化改進，相信它會越來越多的被應用到各個應用開發中，並且angular2只會load應用所需的元件(components)，這也是個很好的改進，一些統計網站上的資料顯示angular的速度比angular1快五倍，不得不說這次angular2的改版升級是非常給力的；

Vue

說一說對 vue 的理解

是一個輕量的 MVVM 框架。寫程式的時候更少的去關注 DOM 的改動，而是將重點放在資料之上。雙向繫結完成之後，資料的改變會驅動頁面顯示的變化。當一個站點或者網站擁有極大資料量，且點選一個區塊會發生很多頁面資料改變的時候。這個網站就可以使用 vue 框架。並且 vue 的元件化的寫法極為友好，也是分為 template 、script 、style 將 HTML、JS、CSS 放置到一個 vue檔案之中。並且有 vuex 和 vue-router 等機制。

請談談Vue中的MVVM模式

MVVM全稱是Model-View-ViewModel

Vue是以資料為驅動的，Vue自身將DOM和資料進行繫結，一旦建立繫結，DOM和資料將保持同步，每當資料發生變化，DOM會跟著變化。 ViewModel是Vue的核心，它是Vue的一個例項。Vue例項時作用域某個HTML元素上的這個HTML元素可以是body，也可以是某個id所指代的元素。

DOMListeners和DataBindings是實現雙向繫結的關鍵。DOMListeners監聽頁面所有View層DOM元素的變化，當發生變化，Model層的資料隨之變化；DataBindings監聽Model層的資料，當資料發生變化，View層的DOM元素隨之變化。

v-show和v-if指令的共同點和不同點?

v-show指令是通過修改元素的displayCSS屬性讓其顯示或者隱藏
v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果

如何讓CSS只在當前元件中起作用?

將當前元件的<style>修改為<style scoped>

vue 中父子元件之間傳值是怎樣進行的

父元件通過屬性的形式向子元件進行傳值。
子元件通過事件觸發的形式向父元件傳值
父子元件傳值時，有單向資料流的規定。父元件可以向子元件傳遞任何的資料，但子元件不能修改父元件傳遞過來的資料。如果一定要進行修改，只能通過修改複製副本的方式進行。

vue生命週期簡記

生命週期

beforeCreate：建立前，new操作，已繫結事件，還沒有資料，不能處理資料
created：建立，可以處理資料
beforeMounted：掛載前，準備把建立的掛載到el上，有el才去執行掛載
掛載前的el仍是<div id="app"></div>
有template轉化後執行render funcion再去渲染
cli中的.vue檔案中的template是通過vue-loader直接轉化直接執行render funcion的減少耗時
mounted：掛載，掛載後$el就是渲染後的<div>123</div>，掛載前後中間執行render funcion
beforeUpdated：更新前，資料變化
updated：更新
beforeDestroy：銷燬前，元件被銷燬，或手動銷燬
destroy：銷燬

注：
掛載前的鉤子裡獲取不到el的，想對如data中的資料進行操作最早要在created裡；
一般在created和mounted鉤子裡寫一些頁面渲染前的操作，比如資料請求；
有些傳統的第三方庫在使用後需要在元件銷燬時手動刪除其建立的物件在destroy中

`<keep-alive></keep-alive>`的作用是什麼?

<keep-alive></keep-alive> 包裹動態元件時，會快取不活動的元件例項,主要用於保留元件狀態或避免重新渲染。

大白話: 比如有一個列表和一個詳情，那麼使用者就會經常執行開啟詳情=>返回列表=>開啟詳情…這樣的話列表和詳情都是一個頻率很高的頁面，那麼就可以對列表元件使用<keep-alive></keep-alive>進行快取，這樣使用者每次返回列表的時候，都能從快取中快速渲染，而不是重新渲染

vue-cli 工程技術集合介紹

問題一：構建的 vue-cli 工程都到了哪些技術，它們的作用分別是什麼？

1、vue.js：vue-cli工程的核心，主要特點是雙向資料繫結和元件系統。
2、vue-router：vue官方推薦使用的路由框架。
3、vuex：專為 Vue.js 應用專案開發的狀態管理器，主要用於維護vue元件間共用的一些變數和方法。
4、axios（或者 fetch 、ajax ）：用於發起 GET 、或 POST 等 http請求，基於 Promise 設計。
5、vux等：一個專為vue設計的移動端UI元件庫。
6、建立一個emit.js檔案，用於vue事件機制的管理。
7、webpack：模組載入和vue-cli工程打包器。

問題二：vue-cli 工程常用的 npm 命令有哪些？

下載 node_modules 資源包的命令：npm install

啟動 vue-cli 開發環境的 npm命令：npm run dev

vue-cli 生成生產環境部署資源的 npm命令：npm run build

用於檢視 vue-cli 生產環境部署資原始檔大小的 npm命令：npm run build --report
命令效果：
在瀏覽器上自動彈出一個展示 vue-cli 工程打包後 app.js、manifest.js、vendor.js 檔案裡面所包含程式碼的頁面。可以具此優化 vue-cli 生產環境部署的靜態資源，提升頁面的載入速度。

問題三：vue-cli 工程目錄結構介紹
1、build 資料夾：用於存放 webpack 相關配置和指令碼。開發中僅偶爾使用到此資料夾下 webpack.base.conf.js 用於配置 less、sass等css預編譯庫，或者配置一下 UI 庫。
2、config 資料夾：主要存放配置檔案，用於區分開發環境、線上環境的不同。常用到此資料夾下 config.js 配置開發環境的埠號、是否開啟熱載入或者設定生產環境的靜態資源相對路徑、是否開啟gzip壓縮、npm run build 命令打包生成靜態資源的名稱和路徑等。
3、dist 資料夾：預設 npm run build 命令打包生成的靜態資原始檔，用於生產部署。
4、node_modules：存放npm命令下載的開發環境和生產環境的依賴包。
5、src: 存放專案原始碼及需要引用的資原始檔。
6、src下assets：存放專案中需要用到的資原始檔，css、js、images等。
7、src下componets：存放vue開發中一些公共元件：header.vue、footer.vue等。
8、src下emit：自己配置的vue集中式事件管理機制。
9、src下router：vue-router vue路由的配置檔案。
10、src下service：自己配置的vue請求後臺介面方法。
11、src下page：存在vue頁面元件的資料夾。
12、src下util：存放vue開發過程中一些公共的.js方法。
13、src下vuex：存放 vuex 為vue專門開發的狀態管理器。
14、src下app.vue：使用標籤<route-view></router-view>渲染整個工程的.vue元件。
15、src下main.js：vue-cli工程的入口檔案。
16、index.html：設定專案的一些meta頭資訊和提供<div id="app"></div>用於掛載 vue 節點。
17、package.json：用於 node_modules資源部和啟動、打包專案的 npm 命令管理。

問題四：config資料夾下 index.js 的對於工程開發環境和生產環境的配置

build 物件下對於生產環境的配置：

index：配置打包後入口.html檔案的名稱以及資料夾名稱
assetsRoot：配置打包後生成的檔名稱和路徑
assetsPublicPath：配置打包後 .html 引用靜態資源的路徑，一般要設定成 "./"
productionGzip：是否開發 gzip 壓縮，以提升載入速度

dev 物件下對於開發環境的配置：

port：設定埠號
autoOpenBrowser：啟動工程時，自動開啟瀏覽器
proxyTable：vue設定的代理，用以解決跨域問題

問題五：請你詳細介紹一些 package.json 裡面的配置
常用物件解析：

scripts：npm run xxx 命令呼叫node執行的 .js 檔案
dependencies：生產環境依賴包的名稱和版本號，即這些依賴包都會打包進生產環境的JS檔案裡面
devDependencies：開發環境依賴包的名稱和版本號，即這些依賴包只用於程式碼開發的時候，不會打包進生產環境js檔案裡面。

說一說對 vuex 的理解

vuex 就是一個倉庫，倉庫裡面放了很多物件。其中 state 就是資料來源存放地，對應於與一般 Vue 物件裡面的 data。使用 vuex 可以簡單、快速的完成兄弟元件之間的傳值。不用經過一箇中間元件再傳遞一次值或者事件。降低了耦合，也有很好的可維護性、可讀性。

vue 使用vue-i18n做全域性中英文切換

1、vue-i18n安裝 npm install vue-i18n --save-dev
　　
2、在main.js檔案中引入

3、新建中英文語言檔案

4、建立一個切換語言方法（寫在App.vue可以全域性控制）；

5、在template中的使用：

React

Redux

react將dom解耦，不用直接操作dom，使用了狀態機制，當狀態改變時檢視就會相應更新。我們知道在react中，父元件可以將一些狀態傳遞給子元件，讓子元件的檢視相應更新，這時我們會發現，只有有關聯的元件才可以依次傳遞，那些沒有父元件與子元件關係的元件，這些元件之間的某些狀態是共享的，這時就需要redux了。

redux的主要設計思想：1）web應用是一個狀態機，檢視與狀態是一一對應的 2）所有的狀態都儲存在一個物件裡

redux包含兩個步驟，發起Action和產生新state的reducer

Action的函式可以是自己寫的一個請求後臺資料的函式，也可以使用react-actions中的createAction，與後臺無互動，只是傳入更新的state

Reducer的函式接收Action傳入的state，通過對state操作返回新的state，在需要該state的元件使用該reducer更新state

redux的設計思想之一就是所有的資料都在一個物件裡，那麼當reducer過於繁多時，就會導致程式碼難於維護，所以我們可以拆分成幾個小的reducer，最後將這些reducer合併成大的reducer，redux提供了combineReducers函式可以將子reducer合併成一個state物件

小程式

小程式有哪幾種跳轉頁面的方式

wx.switchTab：跳轉 app.json 的頁面（路由方式）
wx.navigateTo：跳轉到指定頁面，儲存當前頁面。
wx.redirectTo：跳轉到指定頁面，關閉當前頁面。
wx.navigateBack：返回之前頁面,跳轉之前的頁面

Node.js

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。
Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。
Node.js 的包管理器 npm，是全球最大的開源庫生態系統。

最後：

“相信有很多想學前端的小夥伴，今年年初我花了一個月整理了一份最適合2018年學習的web前端乾貨，從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理，送給每一位前端小夥伴，53763，1707這裡是小白聚集地，歡迎初學和進階中的小夥伴。”