1. 閉包是什么？有什么優(yōu)點(diǎn)和缺點(diǎn)？

2. css中怎么使盒子上下居中（面試官說(shuō)水平居中太簡(jiǎn)單了orz...）？

3. js中本地存儲(chǔ)有哪些？有什么不同？

4. cookie中的session了解嗎？

5. 跨域了解嗎？

6. this的指向問(wèn)題？

7. vue使用的UI框架？

8. npm中的工具了解過(guò)嗎？（yarn）

9. Node.js了解嗎？??

10. 詳細(xì)講一下項(xiàng)目？后端調(diào)用？

詳解：

1. 閉包是什么？有什么優(yōu)點(diǎn)和缺點(diǎn)？

? ? 解答：閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)。

? ?優(yōu)點(diǎn)：① 能夠讀取函數(shù)內(nèi)部的變量；②讓這些變量一直存在于內(nèi)存中，不會(huì)在調(diào)用結(jié)束后被垃圾回收機(jī)制回收；

? ?缺點(diǎn)：由于閉包會(huì)使用函數(shù)中的變量存在在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包；解決的辦法是退出函數(shù)之前，將不使用的局部變量刪除；

2. ?css中怎么使盒子上下居中（面試官說(shuō)水平居中太簡(jiǎn)單了）？

解答：方法一：

? ? 設(shè)置垂直居中的時(shí)候要注意，先給祖先元素`html`和`body`的高度設(shè)置為100%（默認(rèn)是0）；并且清除默認(rèn)樣式（`margin`和`padding`都設(shè)置為0，否則瀏覽器就會(huì)出現(xiàn)滾動(dòng)條），然后給子盒子相對(duì)定位和位移`position：relative;top:50%;`，然后減去本身寬度的一半即可（`margin-top：負(fù)自身高度的一半` // `transform：translateY(-50%)` 向上偏移自身高度的一半；

? ? 注意：top、bottom、left、right的百分比值都是相對(duì)于包含塊的高度、寬度的；

方法二：

? ??彈性盒子。給父元素設(shè)置`display:flex; align-items:center;`設(shè)置body里的元素垂直居中；（`justify-content:center;`定義body里的元素水平居中）

3. ?js中本地存儲(chǔ)有哪些？有什么不同？

`cookie`、`localStorage`、`sessionStorage`；

? ?相同點(diǎn)：都保存在瀏覽器端；

? ?不同點(diǎn)：

? ?①傳遞方式不同

? ? `cookie`數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），即`cookie`在瀏覽器和服務(wù)器間來(lái)回傳遞。

? ? `sessionStorage`和`localStorage`不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。

? ?②數(shù)據(jù)大小不同

? ? （`cookie`數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下。）

? ? 存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過(guò)4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶`cookie`，所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識(shí)。

? ? `sessionStorage`和`localStorage` 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。

? ?③數(shù)據(jù)有效期不同

? ? `sessionStorage`：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持；

? ? `localStorage`：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；

? ? `cookie`只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。

? ?④作用域不同

? ? `sessionStorage`不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面；

? ? `localStorage `在所有同源窗口中都是共享的；

? ? `cookie`也是在所有同源窗口中都是共享的。

4. ?cookie中的session了解嗎？

?`cookie`和`sessiom`是兩種保持會(huì)話狀態(tài)的方法。

? ? cookie就是指客戶端在向服務(wù)端發(fā)起請(qǐng)求的時(shí)候，服務(wù)端會(huì)在進(jìn)行response的時(shí)候給當(dāng)前客戶端的一小段文本信息，并保存在當(dāng)前的客戶端的瀏覽器中，這一小段cookie文本信息也就是這個(gè)客戶端去訪問(wèn)服務(wù)端的通行證，有了這個(gè)通行證，以后當(dāng)這個(gè)客戶端再去訪問(wèn)服務(wù)端的時(shí)候，服務(wù)端便知道是誰(shuí)拿著通行證去進(jìn)行訪問(wèn)了。

? ? session和cookie的功能類似，也是一種保持會(huì)話狀態(tài)的方式，在用戶使用瀏覽器發(fā)起會(huì)話時(shí)，服務(wù)器會(huì)為每一個(gè)用戶瀏覽器提供一個(gè)單獨(dú)的session對(duì)象來(lái)保存用戶的數(shù)據(jù)，并將它保存在服務(wù)端，而當(dāng)用戶訪問(wèn)其他web資源的時(shí)候，則可以從保存用戶數(shù)據(jù)的session對(duì)象中把用戶數(shù)據(jù)抽取出來(lái)并進(jìn)行訪問(wèn)。

? ?區(qū)別：

? ?1. cookie的用戶數(shù)據(jù)是保存在用戶瀏覽器的cookie中的；

? ?session的用戶數(shù)據(jù)是保存在服務(wù)器為用戶瀏覽器單獨(dú)創(chuàng)建的session對(duì)象中的。

? ?2. 數(shù)據(jù)的讀取和調(diào)用，cookie可以采用request.getCookies這種方法；

? ? ? session則可以用request.Session的方法。

? ?3. 安全性，cookie是存儲(chǔ)在用戶瀏覽器中的；

? ? ? 而session是存儲(chǔ)在服務(wù)器上的，所以session比cookoe要相對(duì)安全；

5. ?跨域了解嗎？

跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。瀏覽器執(zhí)行`javascript`腳本時(shí)，會(huì)檢查這個(gè)腳本屬于哪個(gè)頁(yè)面，如果不是同源頁(yè)面，就不會(huì)被執(zhí)行。

? ? ? 解決辦法：

? ? ? ①JSONP：注意JSONP只支持GET請(qǐng)求，不支持POST請(qǐng)求。

? ? ? 原理：ajax請(qǐng)求受同源策略影響，不允許進(jìn)行跨域請(qǐng)求，而script標(biāo)簽src屬性中的鏈接卻可以訪問(wèn)跨域的js腳本，利用這個(gè)特性，服務(wù)端不再返回JSON格式的數(shù)據(jù)，而是返回一段調(diào)用某個(gè)函數(shù)的js代碼，在src中進(jìn)行了調(diào)用，這樣實(shí)現(xiàn)了跨域。

? ? ? ②代理：寫后端接口，在后端調(diào)用頁(yè)面拿到返回值返回給html文件。相當(dāng)于繞過(guò)了瀏覽器，就不會(huì)存在跨域問(wèn)題。

? ? ? ③PHP端修改header

? ? ? header('Access-Control-Allow-Origin:*');//允許所有來(lái)源訪問(wèn)

? ? ? header('Access-Control-Allow-Method:POST,GET');//允許訪問(wèn)的方式

6. ?this的指向問(wèn)題？

this的最終指向的是那個(gè)調(diào)用它的對(duì)象。

? ?改變this指向的方法：

? ?1. 使用箭頭函數(shù)；

? ?2. 在函數(shù)內(nèi)部使用`_this=this;`

? ?3. 使用apply、call、bind；

? ?4. new實(shí)例化一個(gè)對(duì)象；

7. ?vue使用的UI框架？

?animate.css是一款前端動(dòng)畫庫(kù)，相似的有velocity-animate；

使用步驟：

? ?1. 首先`npm install animate.css --save`；

? ?2. 然后在vue文件的script中引入`import animate from 'animate.css'`；

? ?3. 最后綁定元素使用，如下：

? ?<template>

? ? ? ?<div class="song">

? ? ? ? ? ?<p id="f" @click='fade'>hello</p>

? ? ? ?</div>

? ?</template>

? ?methods:{

? ? ? ?fade:function(){

? ? ? ? ? ?$('#f').addClass('animated bounceOutLeft')? ? ???}???}

部分api常見(jiàn)：

fade: { title: '淡入淡出',? ? ? ? ? fadeIn: '淡入',? ? ? ? ? ? ? ? ? ? ? ?? fadeOut: '淡出'},

bounce: {title: '彈跳類',? ? ? ? ? bounceIn: '彈跳進(jìn)入',? ? ? ? ? ???bounceOut: '彈跳退出',},

zoom: { title: '縮放類',? ? ? ? ? ? zoomIn: '放大進(jìn)入',? ? ? ? ? ? ? ?? zoomOut: '縮小退出',},

rotate: {title: '旋轉(zhuǎn)類',? ? ? ? ? ? ?rotateIn: '順時(shí)針旋轉(zhuǎn)進(jìn)入',? ? ?rotateOut: '順時(shí)針旋轉(zhuǎn)退出',},

?flip: {title: '翻轉(zhuǎn)類',? ? ? ? ? ? ? ? ?flipInX: '水平翻轉(zhuǎn)進(jìn)入',? ? ? ? ??flipInY: '垂直翻轉(zhuǎn)進(jìn)入',

? ? ? ? flipOutX: '水平翻轉(zhuǎn)退出',? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? flipOutY: '垂直翻轉(zhuǎn)退出'},

strong: {title: '強(qiáng)調(diào)類',? ? ? ? ? ? bounce: '彈跳',? ? ? ? ? ? ? ? ? ? ? ? flash: '閃爍',

? ? ? ? ? ? pulse: '脈沖',??? ? ??? ? ? rubberBand: '橡皮筋',? ?? ? ? ? ? ?shake: '左右弱晃動(dòng)',

? ? ? ? ? ?swing: '上下擺動(dòng)',? ? ? ? tada: '縮放擺動(dòng)',? ? ? ? ??? ? ? ??? ?wobble: '左右強(qiáng)晃動(dòng)',

? ? ? ? ? ?jello: '拉伸抖動(dòng)'}

8. ?npm中的工具了解過(guò)嗎？（warn）

npm就是JavaScript的包管理工具。npm主要用來(lái)下載，安裝，管理第三方模塊。

? ?創(chuàng)建一個(gè)包描述文件：`npm init [-y]`

? ?查看包的信息 `npm info <package-name>`

? ?查看包的版本信息 `npm info <package-name> versions`

? ?安裝指定的包：`npm install <package-name>`

? ? 默認(rèn)會(huì)安裝在當(dāng)前目錄下的 node_modules 目錄下，如果 node_modules 不存在，則會(huì)自動(dòng)創(chuàng)建。

? ?本地安裝包，如果包里有可執(zhí)行文件，則npm會(huì)把可執(zhí)行文件安裝到 node_modules/.bin 目錄下。

? ?安裝指定版本的包：`npm install <package-name>@<version>`

? ?安裝包并記錄依賴，會(huì)在 package.json 中 dependencies 屬性記錄依賴`npm install <package-name> --save`

? ?卸載包：`npm uninstall <package-name>`

? ?更新包：`npm update <package-name>`

? ?全局安裝包，把包安裝在全局目錄，供所有項(xiàng)目使用:`npm install <package-name> -g`

? ?全局安裝包，如果包里有可執(zhí)行文件，則npm會(huì)把可執(zhí)行文件安裝到 node_modules 上一級(jí)目錄中。

? ?查看全局目錄：`npm root -g`

? ?修改全局目錄的路徑：`npm config set prefix ``"新路徑"`

默認(rèn)情況下全局安裝的包不能直接在項(xiàng)目中加載，如果要直接加載，需要在系統(tǒng)環(huán)境變量中添加一個(gè)名為 NODE_PATH 的變量，值為全局安裝目錄下 node_modules 位置。

? ?查看npm配置 `npm config list`

9. ?Node.js了解嗎？

根據(jù)官方文檔可以知道，node就是一個(gè)給予谷歌v8引擎的一個(gè)javascript的運(yùn)行時(shí)，可以理解為運(yùn)行js的一個(gè)虛擬機(jī)。他使用的是一個(gè)事件驅(qū)動(dòng)，非阻塞I/O模型 ，他是將js的運(yùn)行環(huán)境搬到了服務(wù)器端，和客戶端沒(méi)有一點(diǎn)關(guān)系。是一個(gè)純服務(wù)端的東西，node只是為js提供了一個(gè)平臺(tái)。

? ?　　node里面其實(shí)還分了兩塊，一是封裝了v8引擎，目的是為了執(zhí)行es（如定義變量，定義函數(shù)等），另外一個(gè)提供了大量的工具庫(kù)，是幫助node實(shí)現(xiàn)各種功能的，提供了一些以前js的環(huán)境辦不到的事情，比如文件操作，網(wǎng)絡(luò)操作，操作系統(tǒng)的操作。

? ? 既然node是一個(gè)平臺(tái)（所謂的平臺(tái)就是用來(lái)運(yùn)行特定語(yǔ)言的），也就意味著node是用來(lái)運(yùn)行語(yǔ)言的，那么java也是語(yǔ)言，node能運(yùn)行java嗎？據(jù)nodejs創(chuàng)始人Ryan Dahl回憶，他最初是選擇了Ruby這門語(yǔ)言，但是Ruby這門語(yǔ)言的虛擬機(jī)效率不怎么樣最終放棄了，按照這種思路，貌似node將java的虛擬機(jī)集成進(jìn)來(lái)應(yīng)該可以運(yùn)行java，但node作者最終選擇了javascript。

? ?　　這樣js就實(shí)現(xiàn)了在服務(wù)端運(yùn)行的可能，js運(yùn)行在node平臺(tái)上（分為v8部分，用來(lái)執(zhí)行es，和大量的工具庫(kù)組件（API）稱之為libuv，提供了以前js的環(huán)境辦不到的事，如文件操作，網(wǎng)絡(luò)操作等等）。

? ?用途：

? ? （1）node可以接受客戶端用戶的所有請(qǐng)求，并且能夠快速的給出響應(yīng)，因此node可以用來(lái)做網(wǎng)站。

? ?（2）node可以作為一個(gè)中間層來(lái)來(lái)分發(fā)調(diào)用數(shù)據(jù)接口，比如有一個(gè)網(wǎng)站數(shù)據(jù)是有java提供的，我們可以讓node作為一個(gè)中間層，來(lái)接受用戶的請(qǐng)求，然后通過(guò)node來(lái)調(diào)用java數(shù)據(jù)接口，獲取到數(shù)據(jù)后直接在node層面做html的封裝，然后將渲染好的頁(yè)面直接給用戶。為什么要這樣做，直接請(qǐng)求java接口不行嗎，這是因?yàn)閚ode被稱之為高性能的web服務(wù)器，在并發(fā)和抗壓方面都比傳統(tǒng)的平臺(tái)要好很多，因此這樣一包裝可以極大的減輕服務(wù)器的開發(fā)。

? ?　　通過(guò)上面的兩點(diǎn)，可以總結(jié)出，node在web中要么從前端頁(yè)面到后端服務(wù)全包了，一個(gè)是只做其中的一點(diǎn)。

? ?　　一言以蔽之，node就是一個(gè)javascript的運(yùn)行環(huán)境（平臺(tái)），他不是一門語(yǔ)言，也不是javascript的框架?？梢杂脕?lái)開發(fā)服務(wù)端應(yīng)用程序，web系統(tǒng)。其特點(diǎn)是體積小，快速，高性能。