2019前端面試題基礎框架類

1.說說MVC和MVVM分別是什麼？

 

MVC全名是Model View 。是Controller模型(model)－視圖(view)－控制器(controller)的縮寫。MVC是比較直觀的架構模式，用戶操做->View（負責接收用戶的輸入操做）->Controller（業務邏輯處理）->Model（數據持久化）->View（將結果反饋給View）。

 

MVVM是Model-View-ViewModel的簡寫，MVVM是將「數據模型數據雙向綁定」的思想做爲核心，所以在View和Model之間沒有聯繫，經過ViewModel進行交互，並且Model和ViewModel之間的交互是雙向的，所以視圖的數據的變化會同時修改數據源，而數據源數據的變化也會當即反應view。

 

2.請描述你所熟悉的Web服務器框架(如Django)做爲一個成熟的Web框架，須要提供哪些重要的功能模塊？

 

提供了網站開發的經常使用模塊：處理用戶請求、操做數據庫、模板渲染、配置文件管理等

 

image.png

Node

 

3.Node.js的適用場景？

 

高併發、聊天、實時消息推送

實時應用：如在線聊天，實時通知推送等等（如socket.io）

分佈式應用：經過高效的並行I/O使用已有的數據

工具類應用：海量的工具，小到前端壓縮部署（如grunt），大到桌面圖形界面應用程序

遊戲類應用：遊戲領域對實時和併發有很高的要求（如網易的pomelo框架）

利用穩定接口提高Web渲染能力

先後端編程語言環境統一：前端開發人員能夠很是快速地切入到服務器端的開發（如著名的純Javascript全棧式MEAN架構）

−g是什麼？

在Node.js中-g表示全局安裝模塊

4.瞭解npm，spm，nodejs嗎，請簡要描述？

 

NPM便於JavaScript開發者共享和重用代碼，它能夠很容易地更新你的代碼；再分享。是全球最大的開源庫生態系統。

SPM是淘寶社區電商業務（xTao）爲外部合做夥伴（外站）提供的一套跟蹤引導成交效果數據的解決方案。

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。它使咱們可以在本地運行javascript。

 

(若是會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering麼?

服務器Node.js和瀏覽器js的區別是什麼？Node.js把js從客戶端遷移了到服務端、主要作了哪些工做？爲何說Node.js適合作高併發的互聯網應用？

Node採用一系列「非阻塞」庫來支持事件循環的方式。本質上就是爲文件系統、數據庫之類的資源提供接口。Node.js 使用事件驅動，非阻塞I/O 模型而得以輕量和高效，很是適合在分佈式設備上運行數據密集型的實時應用。

 

5.對Node的優勢和缺點提出了本身的見解？

*（優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，

所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。

此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，

所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。

 

*（缺點）Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，

並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

 

image.png

React

 

6.react虛擬DOM運行機制是什麼？

在React中，render執行的結果獲得的並非真正的DOM節點，結果僅僅是輕量級的JavaScript對象，咱們稱之爲virtual DOM（虛擬dom）

 

7.react中prop和state的區別？

須要理解的是，props是一個父組件傳遞給子組件的數據流，這個數據流能夠一直傳遞到子孫組件。而state表明的是一個組件內部自身的狀態（能夠是父組件、子孫組件）。

 

8.redux的原理？

Redux 把一個應用程序中，全部應用模塊之間須要共享訪問的數據，都應該放在 State 對象中。這個應用模塊多是指 React Components，也多是你本身訪問 AJAX API 的代理模塊，具體是什麼並無必定的限制。State 以 「樹形」 的方式保存應用程序的不一樣部分的數據。這些數據可能來自於網絡調用、本地數據庫查詢、甚至包括當前某個 UI 組件的臨時執行狀態（只要是須要被不一樣模塊訪問）

 

9.react和vue有哪些不一樣，說說你對這兩個框架的見解

 

相同點

 

都支持服務器端渲染

都有Virtual DOM,組件化開發,經過props參數進行父子組件數據的傳遞,都實現webComponent規範

數據驅動視圖

都有支持native的方案,React的React native,Vue的weex

不一樣點

 

React嚴格上只針對MVC的view層,Vue則是MVVM模式

 

virtual DOM不同,vue會跟蹤每個組件的依賴關係,不須要從新渲染整個組件樹.而對於React而言,每當應用的狀態被改變時,所有組件都會從新渲染,因此react中會須要shouldComponentUpdate這個生命週期函數方法來進行控制

 

組件寫法不同, React推薦的作法是 JSX + inline style, 也就是把HTML和CSS全都寫進JavaScript了,即’all in js’; Vue推薦的作法是webpack+vue-loader的單文件組件格式,即html,css,js寫在同一個文件;

 

數據綁定: vue實現了數據的雙向綁定,react數據流動是單向的

 

state對象在react應用中不可變的,須要使用setState方法更新狀態;在vue中,state對象不是必須的,數據由data屬性在vue對象中管理

 

image.png

Vue

 

怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數?

 

在router目錄下的index.js文件中，對path屬性加上/:id。 使用router對象的params.id

 

vue-router有哪幾種導航鉤子?

 

三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，做用：跳轉前進行判斷攔截。第二種：組件內的鉤子；第三種：單獨路由獨享組件

 

vuex是什麼？怎麼使用？哪一種功能場景使用它？

 

vue框架中狀態管理。在main.js引入store，注入。新建了一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車

 

Vue的雙向數據綁定原理是什麼？

 

vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

 

請詳細說下你對vue生命週期的理解？

 

總共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。

 

建立前/後： 在beforeCreated階段，vue實例的掛載元素$el和數據對象data都爲undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el尚未。

 

載入前/後：在beforeMount階段，vue實例的$el和data都初始化了，但仍是掛載以前爲虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。

 

更新前/後：當data變化時，會觸發beforeUpdate和updated方法。

 

銷燬前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，可是dom結構依然存在

 

說下vue組件之間的通訊？

 

非父子組件間通訊，Vue 有提供 Vuex，以狀態共享方式來實現同信，對於這一點，應該注意考慮平衡，從總體設計角度去考量，確保引入她的必要。

 

父傳子: this.$refs.xxx 子傳父: this.$parent.xxx

還能夠經過$emit方法出發一個消息，而後$on接收這個消息

 

什麼是RESTful API？怎麼使用?

是一個api的標準，無狀態請求。請求的路由地址是固定的，若是是tp5則先路由配置中把資源路由配置好。標準有：.post .put .delete

 

image.png

Webpack

 

談談你對webpack的見解

WebPack 是一個模塊打包工具，你可使用WebPack管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它可以很好地管理、打包Web開發中所用到的HTML、JavaScript、CSS以及各類靜態文件（圖片、字體等），讓開發過程更加高效。對於不一樣類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後 生成了優化且合併後的靜態資源。

webpack的兩大特點：

 

code splitting（能夠自動完成）

 

loader 能夠處理各類類型的靜態文件，而且支持串聯操做

webpack 是以commonJS的形式來書寫腳本滴，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移。

 

webpack具備requireJs和browserify的功能，但仍有不少本身的新特性：

 

對 CommonJS 、 AMD 、ES6的語法作了兼容

對js、css、圖片等資源文件都支持打包

串聯式模塊加載器以及插件機制，讓其具備更好的靈活性和擴展性，例如提供對CoffeeScript、ES6的支持

有獨立的配置文件webpack.config.js

能夠將代碼切割成不一樣的chunk，實現按需加載，下降了初始化時間

支持 SourceUrls 和 SourceMaps，易於調試

具備強大的Plugin接口，大可能是內部插件，使用起來比較靈活

webpack 使用異步 IO 並具備多級緩存。這使得 webpack 很快且在增量編譯上更加快