前端面試題及答案2019

1、面試題1 vuex的五個(gè)狀態(tài)VueX是一個(gè)專門為Vue.js應(yīng)用設(shè)計(jì)的狀態(tài)治理架構(gòu),統(tǒng)一治理和維護(hù)各個(gè)vue組件的可變化狀態(tài)你可以理解成 vue組件里的某些 data .Vue 有五個(gè)核心概念,state, getters, mutations, actions, modules .state = 根本數(shù)據(jù)=datagetters =從根本數(shù)據(jù)派生的數(shù)據(jù)=computedmutations =提交更改數(shù)據(jù)的方法,同步！ =methodsactions =像一個(gè)裝飾器,包裹 mutations,使之可以異步.modules = 模塊化 Vuex2 vue周期鉤子函數(shù)created可獲取數(shù)據(jù) Mo

2、unted可操作DOMVue實(shí)例有一個(gè)完整的生命周期,也就是從開始創(chuàng)立、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染更新渲染、銷毀等一系列過程,我們稱這是Vue的生命周期.通俗說就是Vue實(shí)例從創(chuàng)立到銷毀的過程,就是生命周期.分為三個(gè)階段：初始化、運(yùn)行中、銷毀.beforeCreate :實(shí)例、組件通過new Vue創(chuàng)立出來(lái)之后會(huì)初始化事件和生命周期,然后就會(huì)執(zhí) 行beforeCreate鉤子函數(shù),這個(gè)時(shí)候,數(shù)據(jù)還沒有掛載呢,只是一個(gè)空殼,無(wú)法訪問到數(shù)據(jù)和真實(shí) 的dom , 一般不做操作Created:掛載數(shù)據(jù),綁定事件等等,然后執(zhí)行created函數(shù),這個(gè)時(shí)候已經(jīng)可以使用到數(shù)據(jù),也可以更改數(shù)據(jù),在

3、這里更改數(shù)據(jù)不會(huì)觸發(fā)updated函數(shù),在這里可以在渲染前倒數(shù)第二次更改數(shù)據(jù)的時(shí)機(jī),不會(huì)觸發(fā)其他的鉤子函數(shù),一般可以在這里做初始數(shù)據(jù)的獲取beforeMount :接下來(lái)開始找實(shí)例或者組件對(duì)應(yīng)的模板,編譯模板為虛擬dom放入到render函數(shù)中準(zhǔn)備渲染,然后執(zhí)行beforeMount鉤子函數(shù),在這個(gè)函數(shù)中虛擬dom已經(jīng)創(chuàng)立完成,馬上就要渲染,在這里也可以更改數(shù)據(jù),不會(huì)觸發(fā)updated ,在這里可以在渲染前最后一次更改數(shù)據(jù)的時(shí)機(jī),不會(huì)觸發(fā)其他的鉤子函數(shù),一般可以在這里做初始數(shù)據(jù)的獲取Mounted :接下來(lái)開始render,渲染出真實(shí) dom,然后執(zhí)行 mounted鉤子函數(shù),此時(shí),組件已 經(jīng)

4、出現(xiàn)在頁(yè)面中,數(shù)據(jù)、真實(shí)dom都已經(jīng)處理好了,事件都已經(jīng)掛載好了,可以在這里操作真實(shí) dom等事情.beforeUpdate :當(dāng)組件或?qū)嵗臄?shù)據(jù)更改之后, 會(huì)立即執(zhí)行beforeUpdate ,然后vue的虛擬dom 機(jī)制會(huì)重新構(gòu)建虛擬 dom與上一次的虛擬dom樹利用diff算法進(jìn)行比照之后重新渲染, 一般不做什 么事兒Updated更新完成后, 執(zhí)行 updated,數(shù)據(jù)已經(jīng)更改完成,dom也重新render完成,可以操 作更新后的虛擬dombeforeDestroy :當(dāng)經(jīng)過某種途徑調(diào)用 $destroy方法后,立即執(zhí)行beforeDestroy , 一般在這里做一 些善后工作,例如去

5、除計(jì)時(shí)器、去除非指令綁定的事件等等Destroyed :組件的數(shù)據(jù)綁定、監(jiān)聽.去掉后只剩下dom空殼,這個(gè)時(shí)候,執(zhí)行 destroyed,在這 里做善后工作也可以鉤子函數(shù)的的實(shí)際應(yīng)用beforecreate :舉個(gè)栗子：可以在這加個(gè)loading事件created :在這結(jié)束loading ,還做一些初始化,實(shí)現(xiàn)函數(shù)自執(zhí)行mounted :在這發(fā)起后端請(qǐng)求,拿回?cái)?shù)據(jù),配合路由鉤子做一些事情beforeDestroy :你確認(rèn)刪除XX嗎？ destroyed :當(dāng)前組件已被刪除,清空相關(guān)內(nèi)容3 cookie、localstroge、localSeesion 的區(qū)別共同點(diǎn)：都是保存在瀏覽器端,且同

6、源的.區(qū)別：平安性、大小、有效期、作用域1 cookie數(shù)據(jù)始終在同源的 請(qǐng)求中攜帶即使不需要,即cookie在瀏覽器和效勞器間來(lái)回傳遞.而sessionstorage和localstorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給效勞器,僅在本地保存.cookie數(shù)據(jù)還有路徑path的概念,可以限制cookie只屬于某個(gè)路徑下.2存儲(chǔ)大小限制也不同,cookie數(shù)據(jù)不能超過4k,同時(shí)由于每次 請(qǐng)求都會(huì)攜帶cookie ,所以cookie只適合保存很小的數(shù)據(jù),如會(huì)話標(biāo)識(shí).sessionstorage和localstorage雖然也有存儲(chǔ)大小的限制,但比cookie大得多,可以到達(dá) 5M或更大.3數(shù)據(jù)有效期不同,s

7、essionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效,自然也就不可能持久保 持；localStorage :始終有效,窗口或?yàn)g覽器關(guān)閉也一直保存,因此用作持久數(shù)據(jù)；cookie只在設(shè)置的cookie過期時(shí)間之前一直有效,即使窗口或?yàn)g覽器關(guān)閉.4作用域不同,sessionStorage不在不同的瀏覽器窗口中共享,即使是同一個(gè)頁(yè)面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的.4 get和post區(qū)別get參數(shù)通過 url傳遞,post放在request body中. 傳遞路徑get請(qǐng)求在url中傳遞的參數(shù)是有長(zhǎng)度限制的,而 post沒有. 長(zhǎng)

8、度限制get比post更不平安,由于參數(shù)直接暴露在url中,所以不能用來(lái)傳遞敏感信息.平安get請(qǐng)求只能進(jìn)行url編碼,而post支持多種編碼方式編碼方式get請(qǐng)求會(huì)瀏覽器主動(dòng) cache,而post支持多種編碼方式.get請(qǐng)求參數(shù)會(huì)被完整保存在瀏覽歷史記錄里,而post中的參數(shù)不會(huì)被保存.保存GET和POST本質(zhì)上都是TCP鏈接,并無(wú)差異.但是由于 的規(guī)定和瀏覽器/效勞器的限制,導(dǎo)致他們?cè)趹?yīng)用過程中表達(dá)出一些不同.5你是如何操持登錄1利用Token實(shí)現(xiàn)APP登錄成功后,效勞器以某種方式,如隨機(jī)生成N位的字符串作為Token,同時(shí)設(shè)置一個(gè)有效期,存儲(chǔ)到效勞器中,并返回Token給APP.后續(xù)A

9、PP發(fā)送請(qǐng)求時(shí),都要帶上該Token,每次效勞器端收到請(qǐng)求時(shí),都要驗(yàn)證Token和有效期,Token數(shù)值對(duì)且在有效期內(nèi),效勞器返回所需要的結(jié)果,否那么返回錯(cuò)誤信息,提示用戶重新登錄.這種方式目前使用的最多2利用Cookie實(shí)現(xiàn)APP登錄成功后,效勞器創(chuàng)立一個(gè)包含session_id和Expires兩個(gè)屬性值的 Cookie,存儲(chǔ) 在效勞器中,并發(fā)送給 APP.后續(xù)APP發(fā)送請(qǐng)求時(shí),都要帶上一個(gè)包含此session_id的Cookie,每次效勞器端收到請(qǐng)求時(shí),都要驗(yàn)證session_id和有效期,session_id數(shù)值對(duì)且在有效期內(nèi),效勞器返回所需要的結(jié)果,否那么返 回錯(cuò)誤信息,提示用戶重新登

10、錄.6 vue怎么實(shí)現(xiàn)雙向數(shù)據(jù)綁定vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來(lái)實(shí)現(xiàn)的.其實(shí)主要是用了 Es5中的Object.defineProperty ;來(lái)劫持每個(gè)屬性的getter,和setter.這也正是 Vue不兼容IE8以下的原因.發(fā)布者-訂閱者模式：訂閱是請(qǐng)求在某些事件(event)到達(dá)時(shí)可以通知它并執(zhí)行對(duì)應(yīng)的動(dòng)作(action),而發(fā)布那么相對(duì)的是向訂閱告知事件(event)已經(jīng)到達(dá),你可以執(zhí)行對(duì)應(yīng)的動(dòng)作(action) 了.7 promise的簡(jiǎn)述Promise是異步編程的一種解決方案,通俗的來(lái)講 Promise是一個(gè)許諾、承諾,是對(duì)未來(lái)事情的 承諾,承諾不

11、一定能完成,但是無(wú)論是否能完成都會(huì)有一個(gè)結(jié)果. 應(yīng)用場(chǎng)景1解決回調(diào)地獄比方我們經(jīng)常可能需要異步請(qǐng)求一個(gè)數(shù)據(jù)之后作為下一個(gè)異步操作的入?yún)? promise可以實(shí)現(xiàn)在多個(gè)請(qǐng)求發(fā)送完成后再得到或者處理某個(gè)結(jié)果最簡(jiǎn)單的實(shí)現(xiàn)基于上面的應(yīng)用場(chǎng)景發(fā)現(xiàn)promise可以有三種狀態(tài),分別是 pending、Fulfilled、RejectedPending Promise對(duì)象實(shí)例創(chuàng)立時(shí)候的初始狀態(tài) Fulfilled可以理解為成功的狀態(tài) Rejected可以理解為失敗的狀態(tài) 構(gòu)造一個(gè)Promise實(shí)例需要給Promise構(gòu)造函數(shù)傳入一個(gè)函數(shù).傳入的函數(shù)需要有兩個(gè)形參,兩個(gè)形參都是function類型的參數(shù).分別

12、是 resolve和reject.Promise上還有then方法,then方法就是用來(lái)指定 Promise對(duì)象的狀態(tài)改變時(shí)確定執(zhí)行的 操作,resolve時(shí)執(zhí)行第一個(gè)函數(shù)(onFulfilled ) , reject時(shí)執(zhí)行第二個(gè)函數(shù)(onRejected) 當(dāng)狀態(tài)變?yōu)閞esolve時(shí)便不能再變?yōu)閞eject,反之同理.根本api(1) new Promise(2) PromiseObj.then(resolveFn,rejectFn)resolveFn:就是 Promise對(duì)象成功的回調(diào)處理函數(shù),指向 resolverejectFn :就是Promise對(duì)象失敗的回調(diào)處理函數(shù)(3) Prom

13、ise.all()這個(gè)靜態(tài)方法的參數(shù)是一個(gè)可迭代的對(duì)象,這個(gè)對(duì)象的item應(yīng)該都是promise對(duì)象,假設(shè)不是的話,就會(huì)先調(diào)用上面的Promise.resolve(item)方法轉(zhuǎn)換成新的promise對(duì)象.Promise.all()方法返回的也是一個(gè)promise對(duì)象.(4) PromiseObj.resolve()將一個(gè)值,數(shù)字,字符串.轉(zhuǎn)換為Promise對(duì)象(5) Promise.reject(reason)方法返回一個(gè)用 reason拒絕的Promise.你可以這樣理解,返回的這 個(gè)promise對(duì)象在初始化的時(shí)候,什么都沒有做,直接給 reject( 'your rejec

14、t reson ')8 es6的了解es6是一個(gè)新的標(biāo)準(zhǔn),它包含了許多新的語(yǔ)言特性和庫(kù),是 JS實(shí)質(zhì)性的一次升級(jí).新增模板字符串' ' (為JavaScript提供了簡(jiǎn)單的字符串插值功能)箭頭函數(shù)(操作符左邊為輸入的參數(shù),而右邊那么是進(jìn)行的操作以及返回的值Inputs=>outputs.)for-of (用來(lái)遍歷數(shù)據(jù) 一例如數(shù)組中的值.) for (let index of 'a', 'b'.keys() console.log(index);arguments對(duì)象可被不定參數(shù)和默認(rèn)參數(shù)完美代替.ES6將promise對(duì)象納入標(biāo)準(zhǔn),

15、提供了原生的Promise對(duì)象.增加了 let和const命令,用來(lái)聲明變量.增加了塊級(jí)作用域.let命令實(shí)際上就增加了塊級(jí)作用let命令、const命域.ES6規(guī)定,var命令和function命令聲明的全局變量,屬于全局對(duì)象的屬性;令class命令聲明的全局變量,不屬于全局對(duì)象的屬性.還有就是引入module模塊的概念9路由攔截主要是利用vue-router提供的鉤子函數(shù)beforeEach()寸路由進(jìn)行判斷.* to: Route:即將要進(jìn)入的目標(biāo) 路由對(duì)象$route (常用)* from: Route:當(dāng)前導(dǎo)航正要離開的路由* next: Function: 一定要調(diào)用該方法來(lái)res

16、olve這個(gè)鉤子.執(zhí)行效果依賴next方法的調(diào)用參數(shù).* next():進(jìn)行管道中的下一個(gè)鉤子.如果全部鉤子執(zhí)行完了,那么導(dǎo)航的狀態(tài)就是confirmed (確認(rèn)的).* next(false):中斷當(dāng)前的導(dǎo)航.如果瀏覽器的 URL改變了(可能是用戶手動(dòng)或者瀏覽器后退按鈕),那么URL地址會(huì)重置到 from路由對(duì)應(yīng)的地址.* next('或者)next( path:跳轉(zhuǎn)至廣個(gè)不同的地址.當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個(gè)新的導(dǎo)航.10 vue 路由傳值(主要使用三種方法)$router.push/ name+params/ path+query方案一getDescribe(id) /直接調(diào)

17、用$router.push實(shí)現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)this.$router.push(path: '/describe/$id',)/方案一,需要對(duì)應(yīng)路由配置如下：path: '/describe/:id',name: 'Describe',component: Describe/很顯然,需要在 path中添加/:id來(lái)對(duì)應(yīng) $router.push中path攜帶的參數(shù)./在子組件中可以使用$route.params.id來(lái)獲取傳遞的參數(shù)值.萬(wàn)案一/父組件中：通過路由屬性中的name來(lái)確定匹配的路由,通過 params來(lái)傳遞參數(shù).this.$route

18、r.push(name: 'Describe',params: id: id)/對(duì)應(yīng)路由配置：注意這里不能使用:/id來(lái)傳遞參數(shù)了,由于父組件中,已經(jīng)使用 params來(lái)攜 帶參數(shù)了.path: '/describe',name: 'Describe',component: Describe子組件中：這樣來(lái)獲取參數(shù) $route.params.id方案二/父組件：使用path來(lái)匹配路由,然后通過 query來(lái)傳遞參數(shù) 這種情況下 query傳遞的參數(shù) 會(huì)顯示在url后面？id=？this.$router.push(path: '/desc

19、ribe',query: (id: id)/對(duì)應(yīng)路由配置：path: '/describe',name: 'Describe',component: Describe/對(duì)應(yīng)子組件：這樣來(lái)獲取參數(shù)$route.query.id/這里要特別注意在子組件中 獲取參數(shù)的時(shí)候是$route.params而不是$router11從輸入U(xiǎn)RL到頁(yè)面加載的過程1 DNS解析2 TCP連接3發(fā)送 請(qǐng)求4效勞器處理請(qǐng)求并返回 報(bào)文5瀏覽器解析渲染頁(yè)面6連接結(jié)束12 js冒泡排序(雙重for循環(huán)+if判斷+交換位置)5 -I 【LLWCWhv&r m =var n F

20、crfvir . ;i .Lngtb 1; )Qvar bDol = true;for( -. s" ©j + lengt h 1!) (計(jì)?時(shí) Lj -rrj-lj)(vir E皂1ng - 廣ij；«rrj - injil;革Hconsole.log( );e：oriQl«, log( ;lag( ;13 狀態(tài)碼一些常見的狀態(tài)碼為：200 -效勞器成功返回網(wǎng)頁(yè)404 -請(qǐng)求的網(wǎng)頁(yè)不存在503 -效勞不可用詳細(xì)分解：1xx 臨時(shí)響應(yīng)表示臨時(shí)響應(yīng)并需要請(qǐng)求者繼續(xù)執(zhí)行操作的狀態(tài)代碼.100 繼續(xù) 請(qǐng)求者應(yīng)當(dāng)繼續(xù)提出請(qǐng)求.效勞器返回此代碼表示已收到請(qǐng)求的第一

21、局部,正在等 待其余局部.101 切換協(xié)議請(qǐng)求者已要求效勞器切換協(xié)議,效勞器已確認(rèn)并準(zhǔn)備切換.2xx 成功表示成功處理了請(qǐng)求的狀態(tài)代碼.200 成功 效勞器已成功處理了請(qǐng)求.通常,這表示效勞器提供了請(qǐng)求的網(wǎng)頁(yè).201 已創(chuàng)立請(qǐng)求成功并且效勞器創(chuàng)立了新的資源.202 已接受效勞器已接受請(qǐng)求,但尚未處理.203 非授權(quán)信息效勞器已成功處理了請(qǐng)求,但返回的信息可能來(lái)自另一來(lái)源.204 無(wú)內(nèi)容效勞器成功處理了請(qǐng)求,但沒有返回任何內(nèi)容.205 重置內(nèi)容效勞器成功處理了請(qǐng)求,但沒有返回任何內(nèi)容.206 局部?jī)?nèi)容效勞器成功處理了局部GET請(qǐng)求.3xx 重定向表示要完成請(qǐng)求,需要進(jìn)一步操作.通常,這些狀態(tài)代碼

22、用來(lái)重定向.300 多種選擇針對(duì)請(qǐng)求,效勞器可執(zhí)行多種操作.效勞器可根據(jù)請(qǐng)求者user agent選擇一項(xiàng)操作,或提供操作列表供請(qǐng)求者選擇.301 永久移動(dòng)請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置.效勞器返回此響應(yīng)對(duì)GET或HEAD請(qǐng)求的響應(yīng)時(shí),會(huì)自動(dòng)將請(qǐng)求者轉(zhuǎn)到新位置.302 臨時(shí)移動(dòng)效勞器目前從不同位置的網(wǎng)頁(yè)響應(yīng)請(qǐng)求,但請(qǐng)求者應(yīng)繼續(xù)使用原有位置來(lái)進(jìn)行以后的請(qǐng)求.303 查看其他位置請(qǐng)求者應(yīng)當(dāng)對(duì)不同的位置使用單獨(dú)的GET請(qǐng)求來(lái)檢索響應(yīng)時(shí),效勞器返回此代碼.304 未修改自從上次請(qǐng)求后,請(qǐng)求的網(wǎng)頁(yè)未修改正.效勞器返回此響應(yīng)時(shí),不會(huì)返回網(wǎng)頁(yè)內(nèi)容.305 使用代理請(qǐng)求者只能使用代理訪問請(qǐng)求的網(wǎng)頁(yè).如果效勞器返

23、回此響應(yīng),還表示請(qǐng)求者應(yīng)使用代理.307 臨時(shí)重定向效勞器目前從不同位置的網(wǎng)頁(yè)響應(yīng)請(qǐng)求,但請(qǐng)求者應(yīng)繼續(xù)使用原有位置來(lái)進(jìn)行以后的請(qǐng)求.4xx 請(qǐng)求錯(cuò)誤 這些狀態(tài)代碼表示請(qǐng)求可能出錯(cuò),阻礙了效勞器的處理.400 錯(cuò)誤請(qǐng)求效勞器不理解請(qǐng)求的語(yǔ)法.401 未授權(quán)請(qǐng)求要求身份驗(yàn)證.對(duì)于需要登錄的網(wǎng)頁(yè),效勞器可能返回此響應(yīng).403 禁止效勞器拒絕請(qǐng)求.404 未找到 效勞器找不到請(qǐng)求的網(wǎng)頁(yè).405 方法禁用 禁用請(qǐng)求中指定的方法.406 不接受無(wú)法使用請(qǐng)求的內(nèi)容特性響應(yīng)請(qǐng)求的網(wǎng)頁(yè).407 需要代理授權(quán)此狀態(tài)代碼與 401 未授權(quán)類似,但指定請(qǐng)求者應(yīng)當(dāng)授權(quán)使用代理.408 請(qǐng)求超時(shí)效勞器等候請(qǐng)求時(shí)發(fā)生超時(shí).

24、409 沖突效勞器在完成請(qǐng)求時(shí)發(fā)生沖突.效勞器必須在響應(yīng)中包含有關(guān)沖突的信息.410 已刪除如果請(qǐng)求的資源已永久刪除,效勞器就會(huì)返回此響應(yīng).411 需要有效長(zhǎng)度效勞器不接受不含有效內(nèi)容長(zhǎng)度標(biāo)頭字段的請(qǐng)求.412 未滿足前提條件效勞器未滿足請(qǐng)求者在請(qǐng)求中設(shè)置的其中一個(gè)前提條件.413 請(qǐng)求實(shí)體過大效勞器無(wú)法處理請(qǐng)求,由于請(qǐng)求實(shí)體過大,超出效勞器的處理水平.414 請(qǐng)求的URI過長(zhǎng) 請(qǐng)求的URI 通常為網(wǎng)址過長(zhǎng),效勞器無(wú)法處理.415 不支持的媒體類型請(qǐng)求的格式不受請(qǐng)求頁(yè)面的支持.416 請(qǐng)求范圍不符合要求如果頁(yè)面無(wú)法提供請(qǐng)求的范圍,那么效勞器會(huì)返回此狀態(tài)代碼.417 未滿足期望值效勞器未滿足期望

25、請(qǐng)求標(biāo)頭字段的要求.5xx 效勞器錯(cuò)誤這些狀態(tài)代碼表示效勞器在嘗試處理請(qǐng)求時(shí)發(fā)生內(nèi)部錯(cuò)誤.這些錯(cuò)誤可能是效勞器本身的錯(cuò)誤,而不是請(qǐng)求出錯(cuò).500 效勞器內(nèi)部錯(cuò)誤效勞器遇到錯(cuò)誤,無(wú)法完成請(qǐng)求.501 尚未實(shí)施效勞器不具備完成請(qǐng)求的功能.例如,效勞器無(wú)法識(shí)別請(qǐng)求方法時(shí)可能會(huì)返回此代碼.502 錯(cuò)誤網(wǎng)關(guān)效勞器作為網(wǎng)關(guān)或代理,從上游效勞器收到無(wú)效響應(yīng).503 效勞不可用效勞器目前無(wú)法使用由于超載或停機(jī)維護(hù).通常,這只是暫時(shí)狀態(tài).504 網(wǎng)關(guān)超時(shí)效勞器作為網(wǎng)關(guān)或代理,但是沒有及時(shí)從上游效勞器收到請(qǐng)求.505 版本不受支持效勞器不支持請(qǐng)求中所用的 協(xié)議版本. Watch 狀態(tài)碼 Result is200

26、-效勞器成功返回網(wǎng)頁(yè),客戶端請(qǐng)求已成功.302 -對(duì)象臨時(shí)移動(dòng).效勞器目前從不同位置的網(wǎng)頁(yè)響應(yīng)請(qǐng)求,但請(qǐng)求者應(yīng)繼續(xù)使用原有位置來(lái)進(jìn) 行以后的請(qǐng)求.304 -屬于重定向.自上次請(qǐng)求后,請(qǐng)求的網(wǎng)頁(yè)未修改正.效勞器返回此響應(yīng)時(shí),不會(huì)返回網(wǎng)頁(yè)內(nèi)容.401 -未授權(quán).請(qǐng)求要求身份驗(yàn)證.對(duì)于需要登錄的網(wǎng)頁(yè),效勞器可能返回此響應(yīng).404 -未找到.效勞器找不到請(qǐng)求的網(wǎng)頁(yè).2xx -成功.表示效勞器成功地接受了客戶端請(qǐng)求.3xx -重定向.表示要完成請(qǐng)求,需要進(jìn)一步操作.客戶端瀏覽器必須采取更多操作來(lái)實(shí)現(xiàn)請(qǐng)求.例如,瀏覽器可能不得不請(qǐng)求效勞器上的不同的頁(yè)面,或通過代理效勞器重復(fù)該請(qǐng)求.4xx -請(qǐng)求錯(cuò)誤.這些

27、狀態(tài)代碼表示請(qǐng)求可能出錯(cuò),阻礙了效勞器的處理.5xx -效勞器錯(cuò)誤.表示效勞器在嘗試處理請(qǐng)求時(shí)發(fā)生內(nèi)部錯(cuò)誤.這些錯(cuò)誤可能是效勞器本身的錯(cuò)誤,而不是請(qǐng)求出錯(cuò).14 js中的原型鏈每個(gè)對(duì)象都會(huì)在其內(nèi)部初始化一個(gè)屬性,就是 prototype原型,當(dāng)我們?cè)L問一個(gè)對(duì)象的屬性 時(shí),如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)屬性,那么他就會(huì)去prototype里找這個(gè)屬性,這個(gè) prototype又會(huì)有自己的prototype ,于是就這樣一直找下去,也就是我們平時(shí)所說的原型鏈的概念.應(yīng)用：原型鏈?zhǔn)菍?shí)現(xiàn)繼承的主要方法.15閉包是什么,有什么特性,對(duì)頁(yè)面有什么影響通俗的講：就是函數(shù) a的內(nèi)部函數(shù)b,被函數(shù)a外部的一個(gè)變量引

28、用的時(shí)候,就創(chuàng)立了一個(gè)閉包.閉包的特性： .封閉性：外界無(wú)法訪問閉包內(nèi)部的數(shù)據(jù),如果在閉包內(nèi)聲明變量,外界是無(wú)法訪問的,除非閉包主動(dòng)向外界提供訪問接口 ； .持久性：一般的函數(shù),調(diào)用完畢之后,系統(tǒng)自動(dòng)注銷函數(shù),而對(duì)于閉包來(lái)說,在外部函數(shù)被調(diào)用之后,閉包結(jié)構(gòu)依然保存在系統(tǒng)中,閉包中的數(shù)據(jù)依然存在,從而實(shí)現(xiàn)對(duì)數(shù)據(jù)的持久使用.優(yōu)點(diǎn)： 減少全局變量. 減少傳遞函數(shù)的參數(shù)量 封裝；缺點(diǎn)：使用閉包會(huì)占有內(nèi)存資源,過多的使用閉包會(huì)導(dǎo)致內(nèi)存溢出等16怎么實(shí)現(xiàn)跨域請(qǐng)求1、jsonp最常見的一種跨域方式,其背后原理就是利用了script標(biāo)簽不受同源策略的限制,在頁(yè)面中動(dòng)態(tài)插入了 script, script標(biāo)簽的

29、src屬性就是后端 api接口的地址,并且以get的方式將前端 回調(diào)處理函數(shù)名稱告訴后端,后端在響應(yīng)請(qǐng)求時(shí)會(huì)將回調(diào)返還,并且將數(shù)據(jù)以參數(shù)的形式傳遞回 去.jsonp 只能發(fā)送 get請(qǐng)求.2、CORSCross-Origin Resource Sharing 跨域資源共享是一種允許當(dāng)前域 origin的資源比方 html/js/web service 被其他域origin的腳本請(qǐng)求訪問的機(jī)制.當(dāng)使用XML Request發(fā)送請(qǐng)求時(shí),瀏覽器如果發(fā)現(xiàn)違反了同源策略就會(huì)自動(dòng)加上一個(gè)請(qǐng)求頭 origin,后端在接受至,請(qǐng)求后確定響應(yīng)后會(huì)在Response Headers中參加一個(gè)屬性Access-Co

30、ntrol-Allow-Origin,值就是發(fā)起請(qǐng)求的源地址 :/:8888,瀏覽器得到響應(yīng)會(huì)進(jìn)行判斷Access-Control-Allow-Origin的值是否和當(dāng)前的地址相同,只有匹配成功后才進(jìn)行響應(yīng)處 理.現(xiàn)代瀏覽器中和移動(dòng)端都支持CORS除了 opera mini , IE下需要8+3、效勞器跨域在前后端別離的工程中可以借助效勞器實(shí)現(xiàn)跨域,具體做法是：前端向本地效勞器發(fā)送請(qǐng)求,本地效勞器代替前端再向真實(shí)效勞器接口發(fā)送請(qǐng)求進(jìn)行效勞器間通信,本地效勞器其實(shí)充當(dāng)個(gè)中轉(zhuǎn)站的角色,再將響應(yīng)的數(shù)據(jù)返回給前端缺點(diǎn)：效勞器跨域需要另起效勞器4、postmessage 跨域在 HTM

31、L5中新增了 postMessage方法,postMessage可以實(shí)現(xiàn)跨文檔消息傳輸 Cross Document Messaging , IE8, Firefox 3, Opera 9, Chrome 3 和 Safari 4 都支持 postMessage. 該方法可以通過綁定 window的message事件來(lái)監(jiān)聽發(fā)送跨文檔消息傳輸內(nèi)容.使用postMessage實(shí)現(xiàn)跨域的話原理就類似于 jsonp,動(dòng)態(tài)插入iframe標(biāo)簽,再?gòu)膇frame里面 拿回?cái)?shù)據(jù),私認(rèn)為用作跨頁(yè)面通信更加適合總結(jié)當(dāng)然還有其他實(shí)現(xiàn)跨域的方式比方在ie8、9下XDR跨域方案,flash方案,以上是一些常用的跨域方

32、案,都各有利弊,比方：jsonp只能發(fā)送get請(qǐng)求、效勞器跨域需要另起效勞器等等,大家 可以根據(jù)自己工程需求選擇適合的解決方案,17介紹一下js的同源策略-平安同源策略是由 Netscape提出的著名平安策略,是瀏覽器最核心、根本的平安功能,它限制了一 個(gè)源(origin )中加載文本或者腳本與來(lái)自其他源( origin)中資源的交互方式 ,所謂的同源就是指 協(xié)議、域名、端口相同.當(dāng)瀏覽器執(zhí)行一個(gè)腳本時(shí)會(huì)檢查是否同源,只有同源的腳本才會(huì)執(zhí)行,如果不同源即為跨域18引入樣式表的方式內(nèi)樣式、內(nèi)部樣式表、外部樣式表.一行內(nèi)樣式使用style屬性引入CSS羊式.二內(nèi)部樣式表在style標(biāo)簽中書寫 CS

33、S弋碼.style標(biāo)簽寫在head標(biāo)簽中.三外部樣式表CSS弋碼保存在擴(kuò)展名為.css的樣式表中HTML文件引用擴(kuò)展名為.css的樣式表,有兩種方式：鏈接式、導(dǎo)入式.19面向?qū)ο蟆⒚嫦蜻^程的區(qū)別面向過程就是分析出解決問題所需要的步驟,然后用函數(shù)把這些步驟一步一步實(shí)現(xiàn),使用的時(shí) 候一個(gè)一個(gè)依次調(diào)用就可以了.面向?qū)ο笫前褬?gòu)成問題事務(wù)分解成各個(gè)對(duì)象,建立對(duì)象的目的不是為了完成一個(gè)步驟,而是為 了描敘某個(gè)事物在整個(gè)解決問題的步驟中的行為.面向過程優(yōu)點(diǎn)：性能比面向?qū)ο蟾?由于類調(diào)用時(shí)需要實(shí)例化,開銷比較大,比較消耗資源此如單片機(jī)、嵌入式開發(fā)、Linux/Unix等一般采用面向過程開發(fā),性能是最重要的因素

34、.缺點(diǎn)：沒有面向?qū)ο笠拙S護(hù)、易復(fù)用、易擴(kuò)展.面向?qū)ο髢?yōu)點(diǎn)：易維護(hù)、易復(fù)用、易擴(kuò)展,由于面向?qū)ο笥蟹庋b、繼承、多態(tài)性的特性,可以設(shè)計(jì)出低耦合的系統(tǒng),使系統(tǒng) 更加靈活、更加易于維護(hù)缺點(diǎn)：性能比面向過程低20面向?qū)ο蟮奶攸c(diǎn)1. 封裝所謂封裝,就是將客觀事物封裝成抽象的類,并且類可以把數(shù)據(jù)和方法讓可信的類或者對(duì) 象進(jìn)行操作,對(duì)不可信的類或者對(duì)象進(jìn)行隱藏.類就是封裝數(shù)據(jù)和操作這些數(shù)據(jù)代碼的邏輯實(shí)體. 在一個(gè)類的內(nèi)部,某些屬性和方法是私有的,不能被外界所訪問.通過這種方式,對(duì)象對(duì)內(nèi)部數(shù) 據(jù)進(jìn)行了不同級(jí)別的訪問限制,就預(yù)防了程序中的無(wú)關(guān)局部的意外改變或錯(cuò)誤改變了對(duì)象的私有局部.2. 繼承繼承有這樣一種水平,

35、就是能使用現(xiàn)有的類的所有功能,并無(wú)須重新編寫原來(lái)的這些類的根底上對(duì)這些功能進(jìn)行擴(kuò)展.通過繼承創(chuàng)立的新類稱為子類或派生類,被繼承的稱為基類.繼承 有兩種,一種是實(shí)現(xiàn)繼承,另外一種是接口繼承.實(shí)現(xiàn)繼承可以直接使用基類的屬性和方法而無(wú) 需額外編碼,接口繼承是指使用屬性和方法的名稱,但是子必須提供實(shí)現(xiàn)的水平.3. 多態(tài)所謂多態(tài)就是對(duì)一個(gè)實(shí)例的相同方法在不同的情形下有不同的表現(xiàn)形式.多態(tài)機(jī)制使得不 同內(nèi)部結(jié)構(gòu)的對(duì)象可以共享相同的外部接口,這就意味著,雖然不同的類的內(nèi)部操作不同,但可 以通過一個(gè)公共的類,它們可以通過相同的方式予以調(diào)用.21 jquery 動(dòng)畫jQuery animate()方法用于創(chuàng)立自

36、定義動(dòng)畫.語(yǔ)法:$(selector).animate(params,speed,callback);必需的params參數(shù)定義形成動(dòng)畫的CSS屬性.可選的speed參數(shù)規(guī)定效果的時(shí)長(zhǎng).它可以取以下值："slow、"fast或毫秒.可選的callback參數(shù)是動(dòng)畫完成后所執(zhí)行的函數(shù)名稱.22數(shù)組去重1. 遍歷數(shù)組法它是最簡(jiǎn)單的數(shù)組去重方法(indexOf方法)實(shí)現(xiàn)思路：新建一個(gè)數(shù)組,遍歷去要重的數(shù)組,當(dāng)值不在新數(shù)組的時(shí)候( indexOf為-1)就參加該 新數(shù)組中；var arr=2,8,5,0,5,2,6,7,2;function unique1(arr)var hash

37、=;for (var i = 0; i < arr.length; i+) if( hash.indexOf(arri)=-1)hash.push(arri);return hash;2. 數(shù)組下標(biāo)判斷法調(diào)用indexOf方法,性能和方法 1差不多實(shí)現(xiàn)思路：如果當(dāng)前數(shù)組的第i項(xiàng)在當(dāng)前數(shù)組中第一次出現(xiàn)的位置不是i,那么表示第i項(xiàng)是重復(fù)的,忽略掉.否那么存入結(jié)果數(shù)組.function unique2(arr)var hash=;for (var i = 0; i < arr.length; i+) (if(arr.indexOf(arri)=i)(hash.push(arri);ret

38、urn hash;3. 排序后相鄰去除法實(shí)現(xiàn)思路：給傳入的數(shù)組排序,排序后相同的值會(huì)相鄰,然后遍歷排序后數(shù)組時(shí),新數(shù)組只參加 不與前一值重復(fù)的值.function unique3(arr)(arr.sort();var hash=arr0;for (var i = 1; i < arr.length; i+) (if(arri!=hashhash.length-1)hash.push(arri);return hash;4. 優(yōu)化遍歷數(shù)組法(推薦)實(shí)現(xiàn)思路：雙層循環(huán),外循環(huán)表示從 0到arr.length ,內(nèi)循環(huán)表示從i+1到arr.length將沒重復(fù)的右邊值放入新數(shù)組.(檢測(cè)到有重

39、復(fù)值時(shí)終止當(dāng)前循環(huán)同時(shí)進(jìn)入外層循環(huán)的下一輪判斷)function unique4(arr)var hash=;for (var i = 0; i < arr.length; i+) for (var j = i+1; j < arr.length; j+) if(arri=arrj)+i;hash.push(arri);return hash;5.ES6實(shí)現(xiàn)ES6中新增了 Set數(shù)據(jù)結(jié)構(gòu),類似于數(shù)組,但是它的成員都是唯一的,其構(gòu)造函數(shù)可以接受一個(gè)數(shù)組作為參數(shù),如：let array = 1, 1, 1, 1,2, 3, 4, 4, 5, 3;let set = new Set(ar

40、ray);console.log(set);/ => Set 1,2, 3, 4, 5ES6中Array新增了一個(gè)靜態(tài)方法Array.from,可以把類似數(shù)組的對(duì)象轉(zhuǎn)換為數(shù)組,如通過querySelectAll方法得到 HTML DOM Node List,以及ES6中新增的 Set和Map等可遍歷對(duì)象,如：let set = new Set();set.add(1).add(2).add(3);let array = Array.from(set);console.log(array);/ => 1,2, 323盒子居中1) 使用CSS方法：父盒子設(shè)置:display： tabl

41、e-cell; text-align : center ； vertical-align : middle ;Div 設(shè)置： display： inline-block ； vertical-align : middle ;2) 使用 CSS3 transform)：父盒子設(shè)置：display： relativeDiv 設(shè)置：transform : translate(-50% , -50%); position : absolute ; top:50%; left:50%;24 jsonp的使用最常見的一種跨域方式,其背后原理就是利用了script標(biāo)簽不受同源策略的限制,在頁(yè)面中動(dòng)態(tài)插入了

42、script, script標(biāo)簽的src屬性就是后端 api接口的地址,并且以 get的方式將前端回調(diào) 處理函數(shù)名稱告訴后端,后端在響應(yīng)請(qǐng)求時(shí)會(huì)將回調(diào)返還,并且將數(shù)據(jù)以參數(shù)的形式傳遞回去.25 vue組件之間的傳值問題組件關(guān)系可分為父子組件通信、兄弟組件通信.1、父組件向子組件：父組件可以使用 props把數(shù)據(jù)傳給子組件.2、子組件向父組件：子組件可以使用 $emit觸發(fā)父組件的自定義事件.子組件用$emit ()來(lái)觸發(fā)事件,父組件用 $on ()來(lái)監(jiān)昕子組件的事件.父組件可以直接在子組件的自定義標(biāo)簽上使用v-on來(lái)監(jiān)昕子組件觸發(fā)的自定義事件.3、兄弟之間的通信：通過實(shí)例一個(gè)vue實(shí)例Bus作

43、為媒介const bus = new Vue(),要相互通信的兄弟組件之中都引入 Bus,之后通過分別調(diào)用Bus事件觸發(fā)和監(jiān)聽來(lái)實(shí)現(xiàn)組件之間的通信和參數(shù)傳遞.26性能優(yōu)化(1) 減少 請(qǐng)求次數(shù)：CSS Sprites, JS CSSB碼壓縮、圖片大小限制適宜；網(wǎng)頁(yè) Gzip, CDN 托管,data緩存,圖片效勞器.(2) 前端模板JS嗷據(jù),減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi),前端用變量保存 AJAX請(qǐng)求結(jié)果, 每次操作本地變量,不用請(qǐng)求,減少請(qǐng)求次數(shù)(3) 用innerHTML代替DOM操作,減少 DOM操作次數(shù),優(yōu)化 javascript性能.(4) 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置classN

44、ame而不是直接操作style.(5) 少用全局變量、緩存 DOM節(jié)點(diǎn)查找的結(jié)果.減少IO讀取操作.(6) 預(yù)防使用 CSS Expression css表達(dá)式)又稱 Dynamic properties(動(dòng)態(tài)屬性).(7) 圖片預(yù)加載,將樣式表放在頂部,將腳本放在底部.或者懶加載.(8) 預(yù)防在頁(yè)面的主體布局中使用table , table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來(lái), 顯示比div+css布局慢.27深拷貝var .Lup w function(vgr temp 衛(wèi)();for ( v廣 k in this ) if ( typ»©-F thi| k =- *

45、!obj«ct1 ) ( tttinp |c this k .depCopy(); b*1 te (t«mp k this| k return temp;var rar = ( dan ,田宣利;viar p m襯me '殊三' * age 19. gender ,男*. cr car ;! . d« »pCo py峭 叩 F p；.：;.dpCopy :iepl-e ;var 三：Pde«pCopy();p.nane =,李四匕 :-age = 20;p r E*nc5»r - 女；+ car+narre.勺電地蠟,

46、；28 vue中ref的作用是什么？ref被用來(lái)給DOM元素或子組件注冊(cè)引用信息.引用信息會(huì)根據(jù)父組件的$refs對(duì)象進(jìn)行注冊(cè).如果在普通的DOM元素上使用,引用信息就是元素；如果用在子組件上,引用信息就是組件實(shí)例注意：只要想要在Vue中直接操作DOM元素,就必須用ref屬性進(jìn)行注冊(cè)怎么預(yù)防元素重復(fù) 綁定事件29 ProxyVue框架開發(fā)的時(shí)候,會(huì)遇到跨域的問題, 可在config/index.js里配置proxyTable內(nèi)容,使用proxy/ config/index.js 文件 proxyTable: '/api': target: ' :/192.168.149

47、.90:8080/', / 設(shè)置你調(diào)用的接口域名和端口號(hào) changeOrigin: true, /跨域 pathRewrite: Wapi': '/'api代替比方這里理解成用/ap代替target里面的地址,后面組件中我們掉接口時(shí)直接用 我要調(diào)用' :/0:8080/xxx/duty？time=2021-07-07 14:57:22',直接寫 '/api/xxx/duty？time=2021-07-07 14:57:22'即可在dev.env.js里配置開發(fā)環(huán)境請(qǐng)求地址/ config/dev.env

48、.js 文件module.exports = merge(prodEnv, NODE_ENV: '"development"', ADMIN_SERVER: '"/api/"', );假設(shè)請(qǐng)求插件用的axios,配置如下const adminServer = axios.create( baseURL: process.env.ADMIN_SERVER,);30寫一個(gè)函數(shù),來(lái)驗(yàn)證是否為有效的 號(hào)/判斷是否為 號(hào)isPoneAvailable: function (pone) var myreg = /A13,4,5,7,8

49、0-99$/; if (!myreg.test(pone) return false; else return true;,/判斷是否為 號(hào)isTelAvailable: function (tel) var myreg = /A(0+d2,3-)？(0d2,3)-)(d7,8)(-(d3,)？$/;if (!myreg.test(tel) return false; else return true; ,31 用 html, css實(shí)現(xiàn)一個(gè)品字布局的頁(yè)面display:inline-block margin-left:-200pxmargin: 0；border：既,dlf .g, ,d3h

50、eieht: leepx；width; 100px;background-color: #FF0009; border: solid Ipx #090600; .dlmargin; 0 auto;.d3display: inline-block;rtiargin'left:.d2display: inline-block； margin-left: be%;</style><body><div classs"dl">Ji</di¥><l-xdiv class=,1d2"></div

51、><!- -xdiv class="d3H>左 c/tagy,32寫一個(gè)函數(shù)解析url中參數(shù)的局部,并返回解析后的js對(duì)象const parseQueryString = url=>(var json = ;var arr = url.substr(url.indexOf('？') + 1).split('&');arr.forEach(item=>var tmp = item.split('=');jsontmp0 = tmp1;);return json;33寫一個(gè)函數(shù)對(duì)數(shù)組由大到小的排序創(chuàng)立數(shù)

52、組元素arrvar arr=7,13,34,3,200,100,4;創(chuàng)立每次循環(huán)存儲(chǔ)最大值得變量var max;遍歷數(shù)組,默認(rèn)arr中的某一個(gè)元素為最大值,進(jìn)行逐一比較for(var i=0; i<arr.length; i+)外層循環(huán)一次,就拿 arri和內(nèi)層循環(huán)arr.legend次的arrj做比照 for(var j=i; j<arr.length; j+)if(arri<arrj)/如果arrj大就把此時(shí)的值賦值給最大值變量maxmax=arrj;arrj=arri;arri=max;document.write(arr.toString()+"<br

53、>");/200,100,34,13,7,4,334 css position有哪些值 他們的作用和定位原點(diǎn)是什么1 fixed固定定位,相對(duì)于瀏覽器窗口進(jìn)行定位2 absolute絕對(duì)定位,相對(duì)于值不為 static的第一個(gè)父元素進(jìn)行定位.3 relative相對(duì)定位,相對(duì)于其正常位置進(jìn)行定位.4 static默認(rèn)值.沒有定位,元素出現(xiàn)在正常的流中.5 inherit規(guī)定從父元素繼承position屬性的值.35簡(jiǎn)述css3實(shí)現(xiàn)動(dòng)畫的方式1、設(shè)置transition設(shè)置過渡,添加transform設(shè)置形狀,形成動(dòng)畫效果,如下:.divadd transition: All 0

54、.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;transform:rotate(360deg);-ms-transform:rotate(360deg); /* IE 9 */-webkit-transform:rotate(360deg); /* Safari and Chrome */此種方式比較小眾,不易限制2、添加animation屬性,設(shè)置動(dòng)畫效果,如下：.a1 posi

55、tion: absolute;animation: a1 3s;opacity: 0keyframes a1 0% left: 10px;opacity: 030% left: 60px;background-color: pink;font-size:23px;opacity: 190% left: 100px;background-color: red;opacity: 1100% left: 10px;opacity: 036什么是css預(yù)處理器、后處理器ossa處理器定義了一種新的語(yǔ)言,其根本思想是,用一種專門的編程語(yǔ)言,為CSS曾加了一些編程的特性,將 CSS乍為目標(biāo)生成文件,然后開發(fā)者就只要使用這種語(yǔ)言進(jìn)行編碼工作.通俗的說, CSS預(yù)處理器用一種專門的編程語(yǔ)言,進(jìn)行Web頁(yè)面樣式設(shè)計(jì),然后再編譯成正常的CSS5C件二、分類重點(diǎn)Sass SCSS、LESS Stylus、Turbine、Swithch CSS CSS Cacheer DT CSSCSS后處理器 是