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：使用標簽渲染整個工程的.vue組件。

15、src下main.js：vue-cli工程的入口文件。

16、index.html：設置項目的一些meta頭信息和提供

用于掛載 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這里是小白聚集地，歡迎初學和進階中的小伙伴。”