【2019/09/18】前端面試

時間 2019-11-29

標籤 2019/09/18 前端面試欄目快樂工作简体版

原文原文鏈接

STX前端面試：

一、react 與 vue的區別

1）設計理念上的區別：Vue使用的是可變數據，而React更強調數據的不可變。因此應該說沒有好壞之分，Vue更加簡單，而React構建大型應用的時候更加棒
2）數據流的不一樣：

Vue2.x 已經不鼓勵組件對本身的 props 進行任何修改了。因此如今咱們只有組件 <--> DOM 之間的雙向綁定這一種。 React 從誕生之初就不支持雙向綁定，React一直提倡的是單向數據流，他稱之爲 onChange/setState()模式。
3）組件通訊的區別：

在Vue 中有三種方式能夠實現組件通訊：javascript

父組件經過 props 向子組件傳遞數據或者回調，雖然能夠傳遞迴調，可是咱們通常只傳數據，而經過事件的機制來處理子組件向父組件的通訊
子組件經過事件向父組件發送消息
經過 V2.2.0 中新增的 provide/inject 來實現父組件向子組件注入數據，能夠跨越多個層級。

在 React 中，也有對應的三種方式：html

父組件經過 props 能夠向子組件傳遞數據或者回調前端
能夠經過 context 進行跨層級的通訊，這其實和provide/inject 起到的做用差很少。能夠看到，React自己並不支持自定義事件，Vue中子組件向父組件傳遞消息有兩種方式：事件和回調函數，並且Vue更傾向於使用事件。可是在 React 中咱們都是使用回調函數的，這多是他們兩者最大的區別。vue
4）模板渲染方式的不一樣：java
- React 是經過JSX渲染模板
- Vue是經過一種拓展的HTML語法進行渲染
- 但其實這只是表面現象，畢竟React並沒必要須依賴JSX。在深層上，模板的原理不一樣，這纔是他們的本質區別：
- React是在組件JS代碼中，經過原生JS實現模板中的常見語法，好比插值，條件，循環等，都是經過JS語法實現的
- Vue是在和組件JS代碼分離的單獨的模板中，經過指令來實現的，好比條件語句就須要 v-if 來實現

二、講講axios

Axios的特色node

從瀏覽器中建立 XMLHttpRequests
從 node.js 建立 http 請求
支持 Promise API
攔截請求和響應（就是有interceptor）
轉換請求數據和響應數據
取消請求
自動轉換 JSON 數據
客戶端支持防護 XSRF

基本用法react

//執行get請求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  }).catch(function (error) {
    console.log(error);
  });

axios.get('/user', {
    params: {
      ID: 12345
    }
  }).then(function (response) {
    console.log(response);
  }).catch(function (error) {
    console.log(error);
  });
複製代碼

三、如今有一個ul，裏面有四個li，給裏面的li元素for循環，每一個綁定一個onclick事件，push一個li，這個push的li有沒有綁定事件

沒有ios

四、響應式佈局如何作及rem原理

rem是根元素字體的單位，好比 html{font-size:16px;} ，1rem至關於16px面試

經過修改根節點的font-size大小，實現等比例縮放vuex

一、給根元素設置字體大小，並在body元素校訂 - html{font-size:100px;} - body{font-size:14px;}

使用rem代替px，直接除100便可

.menu li{
	display: table-cell;
	padding: .1rem .3rem;/*至關於10px 30px*/
}
複製代碼

二、綁定監聽事件，dom加載後和尺寸變化時改變font-size

詳細解析： juejin.im/post/5caaa2…

五、有一個大盒子，裏面有一個小盒子，小盒子的寬高爲100px，如何讓小盒子在大盒子中間水平垂直居中

1）定位居中1

<style>
     *{
         margin: 0;
     }
     .one{ 
         position: relative; 
         width: 100%; 
         height: 500px; 
         background: #c5c5c5;
     }
     .two{ 
         position: absolute; 
         left: 50%; 
         top:50%; 
         margin-left: -100px; 
         margin-top: -100px; 
         background-color: #a00; 
         width: 200px; 
         height: 200px;  
     }
 </style>
 <div class="one">
     <div class="two"></div>
 </div>
複製代碼

2）定位居中2

<style>
    *{
        margin: 0;
    }
    .one{ 
        position: relative; 
        width: 100%; 
        height: 500px; 
        background: #c5c5c5;
    }
    .two{ 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%,-50%);
        background-color: #a00; 
        width: 200px; 
        height: 200px;  
    }
</style>
<div class="one">
    <div class="two"></div>
</div>
複製代碼

3）flex佈局

<style>
   *{
        margin: 0;
    }
    .one{ 
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%; 
        height: 500px; 
        background: #c5c5c5;
    }
    .two{  
        background-color: #a00; 
        width: 200px; 
        height: 200px;  
    }
</style>
<div class="one">
    <div class="two"></div>
</div>
複製代碼

九、如何實現上拉加載

scrollTop：滾動視窗的高度距離window頂部的距離，它會隨着往上滾動而不斷增長，初始值是0，它是一個變化的值；
clientHeight:它是一個定值，表示屏幕但是區域的高度；
scrollHeight：頁面不能滾動時是不存在的，body長度超過window時纔會出現，所表示body全部元素的長度，

由上面的三個值所產生一個原理公式：

scrollTop + clientHeight >= scrollHeight

let clientHeight  = document.documentElement.clientHeight; //瀏覽器高度
let scrollHeight = document.body.scrollHeight;
let scrollTop = document.documentElement.scrollTop;

let distance = 50;  //距離視窗還用50的時候，開始觸發；

if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
    console.log("到底了，開始加載數據");
}
複製代碼