------------恢復內容開始------------

前端14個大廠1周面試題，跳槽穩穩地

前端開發掌握的知識點內容摘要：

HTML&CSS：瀏覽器核心、渲染原理、依賴管理、相容性、CSS語法、層次關係，常用屬性、佈局、選擇器、權重、CSS盒模型、Hack、CSS前處理器、CSS3動畫

JavaScript： 資料型別、運算、物件、Function、繼承、閉包、作用域、事件、Prototype、RegExp、JSON、Ajax、DOM、BOM、記憶體洩漏、跨域、非同步請求、模板引擎、模組化、Flux、同構、演算法、ES6、ES7、ES8特性、Nodejs、HTTP

框架和類庫： ajax、jQuery、Bootstrap、axios、Vue、Vuex、React、element-ui、layui、webpack

一、小米

1、css 實現圖片自適應寬高

　　一般做法如下

1 <style>
2     div{width: 200px; height: 200px}
3     div img{width: 100%; height: 100%}
4 </style>
5 <div>
6     <img src="xxxx.png" />
7 </div>

　　但是，如果外層元素的寬高和圖片不一致時，會導致圖片被拉伸或收縮，巨醜。所以可以讓圖片的部分填充整個外層元素

 1 <style>
 2     div{
 3         width: 200px;
 
 4         height: 200px;
 5         background: url('xxxx.png') no-repeat;
 6         background-size: cover;
 7         background-position: center center;
 8     }
 9 </style>
10 <div></div>

2、講 flex，手寫出 flex 常用的屬性，並且講出作用

　　flex-direction: row/row-reverse/column/column-reverse 決定主軸的方向（即專案的排列方向）

　　flex-wrap: wrap/nowrap/wrap-reverse 決定專案排列方式

　　flex-basis: number|auto|initial|inherit;規定彈性專案的初始長度。

　　flex-grow: number|initial|inherit;規定在相同的容器中，專案相對於其餘彈性專案的增長量。

　　flex-shrink: number|initial|inherit;規定在相同的容器中，專案相對於其餘彈性專案的收縮量。

　　flex-flow <flex-direction>|<flex-wrap> 前兩者簡寫形式，預設flex-flow:row nowrap；

　　justify-content： flex-start/flex-end/center/space-between/space-around決定專案在主軸的對齊方式

　　　　* space-between：兩端對齊，專案之間的間隔都相等。
　　　　* space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。

　　align-items： flex-start/flex-end/center/baseline/stretch 定義專案在交叉軸上如何對齊
　　　　* baseline: 專案的第一行文字的基線對齊。
　　　　* stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

　　align-content： flex-start/flex-end/center/space-between/space-around/stretch 定義多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

3、BFC 是什麼

　　①何為BFC：BFC（Block Formatting Context）格式化上下文，是Web頁面中盒模型佈局的CSS渲染模式，指一個獨立的渲染區域或者說是一個隔離的獨立容器。

　　②形成BFC的條件：

　　　　1、浮動元素，float 除 none 以外的值；

　　 2、定位元素，position（absolute，fixed）；
　　 3、display 為以下其中之一的值 inline-block，table-cell，table-caption；
　　4、overflow 除了 visible 以外的值（hidden，auto，scroll）；

　　③BFC的特性

　　　　1.內部的Box會在垂直方向上一個接一個的放置。
　　2.垂直方向上的距離由margin決定
　　3.bfc的區域不會與float的元素區域重疊。
　　4.計算bfc的高度時，浮動元素也參與計算
　　 5.bfc就是頁面上的一個獨立容器，容器裡面的子元素不會影響外面元素。

　　　　詳見https://www.cnblogs.com/chen-cong/p/7862832.html

4、專案裡面的前端鑑權是怎麼實現的？

　　使用vuex儲存全域性狀態，並做資料持久化

　　vuex裡面面定義token變數來表示使用者是否登入，初始值為 " "

 1 import createPersistedState from 'vuex-persistedstate'
 2 
 3 export default new Vuex.Store({
 4       state: {
 5         token: '',
 6       },
 7       mutations: {
 8         setIsLogin(state, isLogin) {  //登入成功呼叫
 9           state.token = isLogin;
10         },
11         FedLogOut(state) {        //退出登陸執行
12           state.token=''
13         }
14       }
15     actions,
16     getters,
17     plugins:[createPersistedState({  //vuex資料固化到本地快取，資料持久化
18         storage: window.localStorage
19     })] 
20 });

配置request請求攔截器 request請求攔截器：傳送請求前統一處理，如：設定請求頭headers、應用的版本號、終端型別等。

 1 service.interceptors.request.use(
 2   config => {
 3     if (store.state.token) {
 4      // 為請求頭物件，新增token驗證的Authorization欄位
 5      config.headers.Authorization = store.state.token;     
 6     }
 7         return config
 8   },
 9   error => {
10     // do something with request error
11     console.log(error) // for debug
12     return Promise.reject(error)
13   }
14 )

response響應攔截器 response響應攔截器：有時候我們要根據響應的狀態碼來進行下一步操作，例如：由於當前的token過期，介面返回401未授權，那我們就要進行重新登入的操作。

 1 service.interceptors.response.use(
 2   response => {
 3     Toast.clear()
 4     const res = response.data
 5     if (res.status && res.status !== 200) {
 6       // 登入超時,token過期返回401，重新登入
 7       if (res.status === 401) { 
 8         store.dispatch('FedLogOut').then(() => {
 9                 router.replace({
10                 path: '/login'
11                 //登入成功後跳入瀏覽的當前頁面
12                 // query: {redirect: router.currentRoute.fullPath}
13             })
14         })
15       }
16       return Promise.reject(res || 'error')
17     } else {
18       return Promise.resolve(res)
19     }
20   },
21   error => {
22     Toast.clear()
23     console.log('err' + error) // for debug
24     return Promise.reject(error)
25   }
26 )

5、vue 裡面的虛擬 dom 是怎麼回事？

　　當你用原生js 或jquery等庫去操作DOM時，瀏覽器會從構建DOM樹開始講整個流程執行一遍，所以頻繁操作DOM會引起不需要的計算，導致頁面卡頓，影響使用者體驗

　　虛擬 DOM 的實現原理主要包括以下 3 部分：

• • 用 JavaScript 物件模擬真實 DOM 樹，對真實 DOM 進行抽象；

  • diff 演算法 — 比較兩棵虛擬 DOM 樹的差異；

  • pach 演算法 — 將兩個虛擬 DOM 物件的差異應用到真正的 DOM 樹。

6、vue 雙向繫結講一講

　　vue的資料雙向繫結主要通過Object.defineProperty()方法來進行資料劫持以及釋出者-訂閱模式來實現的，vue例項化的時候會去遍歷所有的屬性，給這些屬性新增get和set方法進行資料劫持；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>forvue</title>
 6 </head>
 7 <body>
 8   <input type="text" id="textInput">
 9   輸入：<span id="textSpan"></span>
10   <script>
11     var obj = {},
12         textInput = document.querySelector('#textInput'),
13         textSpan = document.querySelector('#textSpan');
14 
15     Object.defineProperty(obj, 'foo', {
16       set: function (newValue) {
17         textInput.value = newValue;
18         textSpan.innerHTML = newValue;
19       }
20     });
21 
22     textInput.addEventListener('keyup', function (e) {
23         obj.foo = e.target.value;
24     });
25 
26   </script>
27 </body>
28 </html>

　　使用Object.defineProperty()來定義屬性的set函式，屬性被賦值的時候，修改Input的value值以及span中的innerHTML；然後監聽input的keyup事件，修改物件的屬性值，即可實現這樣的一個簡單的資料雙向繫結。

7、手寫函式防抖和函式節流

函式節流：不斷觸發一個函式後，執行第一次，只有大於設定的執行週期後才會執行第二次

　1 /* 
 2             節流函式：fn:要被節流的函式，delay：規定的時間
 3         */
 4        function throttle(fn,delay){
 5             // 記錄上一次函數出發的時間
 6             var lastTime = 0
 7             return function(){
 8             // 記錄當前函式觸發的時間
 9             var nowTime = new Date().getTime()
10             // 噹噹前時間減去上一次執行時間大於這個指定間隔時間才讓他觸發這個函式
11             if(nowTime - lastTime > delay){
12                 // 繫結this指向
13                 fn.call(this)
14                 //同步時間
15                 lastTime = nowTime
16             }
17             }
18        }  

函式防抖：不斷觸發一個函式，在規定時間內只讓最後一次生效，前面都不生效

　1 function debounce(fn,delay){
 2            var timer = null
 3         //  清除上一次延時器
 4           return function(){
 5                clearTimeout(timer)
 6               //  重新設定一個新的延時器
 7               timer = setTimeout(() => {
 8                   fn.call(this)
 9               }, delay);
10           }
11        }

8、ES6語法比如 promise、class 等等

　　promise詳見https://www.cnblogs.com/Blod/p/15801202.html

　　class詳見https://www.cnblogs.com/Blod/p/15801399.html

本文來自部落格園，作者：冰中焱，轉載請註明原文連結：https://www.cnblogs.com/Blod/p/15801405.html