前端面試常見考題的解題技巧（1-2 年）

1. 生命週期

1. 輸入網址或點擊超連結
2. 瀏覽器向伺服器送出 request
3. 伺服器回傳回應頁面（HTML, CSS, 和 JavaScript 檔案）
4. 瀏覽器解析回應頁面，建置頁面
   • 解析 HTML 並建立 DOM
   • 執行 JavaScript 程式，遇到 <script>這個特殊元素時，瀏覽器會停止解析 DOM 並執行裡面的 JavaScript 程式。
5. 瀏覽器監看 event queue，處理互動事件
6. 使用者關閉網頁，結束生命週期

沒用前端框架前我們都是直接操作 DOM，這種開發模式下，是沒有生命週期這個概念的

Vue、React 是前端框架，他們提供了一種新的開發理念：在框架下，每個頁面，頁面上的一個部分都是一個組件或者實例，這個實例都是由 JavaScript 創造出來的。這些個實例具有創建，掛載，更新，銷毀的生命週期。

Vue、React 的 SPA（單頁面應用）其實非常類似於遊戲開發，頁面就是遊戲中的場景，裡面的每一個組件就是遊戲中的節點。

遊戲中，節點還可以由預製資源生成。前端框架中，組件也可以繼承一個原始的組件。一個預製資源，我們可以生成好多個節點，他們彼此獨立。一個組件，我們可以多次引用，他們彼此獨立。我們可以方便的複用。

舉個例子：我們畫面中有無數個彩色的小球，我們可以定義一個小球類，每次生產小球，給他傳入不同的顏色，大小就可以了，然後生產出這無數個小球，而不用每次重新定義小球共同的屬性，動作。其中的每個小球，都有自己的生命週期，他們創建，掛載，銷毀。並且在他們每個生命週期裡，我們可以做一些自定義的事情，在各自生命週期到達的時候，可以自動去做。其實就是觸發回調。

2. HTTP Method

最常見的有 CRUD

1. 創建 (Create): POST Method
2. 讀取 (Read): GET Method
3. 更新 (Update): PUT Method
4. 刪除 (Delete): DELETE Method

至於全部有

• GET：向指定的資源發出「顯示」請求
• POST：向指定資源提交資料，並且 Body 中可帶傳輸的資料
• PUT：上傳或取代指定的資源
• DELETE：刪除指定的資源
• HEAD：與 GET 相似，但只會取得標頭與 HTTP 狀態
• CONNECT：通常用在 Proxy
• OPTIONS：回傳這個伺服器支援的所有 HTTP Method
• TRACE：回傳收到的請求內容

3. 跨瀏覽器相關問題

• 手動添加瀏覽器前綴 postcss
• 在 gulp / wepback 安裝 PostCSS 的 Autoprefixer 外掛

※ precss: 從 SASS 被轉成 CSS 的過程

4. Box Model

所有 HTML 元素都可以視為方框。在 CSS 中，在談論設計和佈局時，會使用術語盒模型或框模型。 CSS 盒模型 box model 實質上是一個包圍每個 HTML 元素的框。

預設是 Box-sizing: context-box

在這種盒模型下，我們所說的元素的 width ，實際上只包含 content。

盒子總寬度 = margin + border + padding + width

5. animation 的參數設定

animation:name duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;

• name
  • 動畫名稱
• duration
  • 動畫持續時間，預設 0，單位 s 或 ms
• delay
  • 動畫延遲播放時間，預設 0，單位 s 或 ms
• iteration-count
  • 動畫播放次數，預設 1
    其他還有 infinite
• timing-function
  • 動畫加速度函式，預設 ease
    其他還有： linear、ease-in、ease-out、ease-in-out
    step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)
• direction
  • 動畫播放方向，預設 normal其他還有 reverse、alternate、alternate-reverse
• fill-mode
  • 動畫播放前後模式，預設 none其他還有 forwards、backwards、both
• play-state
  • 動畫播放或暫停狀態，預設 running
    其他還有 paused

Codepen 連結

div {
  width:50px;
  height:50px; 
  position:absolute;
  animation: boison 5s;
}


@keyframes boison{
    0%{
        left:0;
        background:#f00;
    }
    50%{
        left:100px;
        background:#00f;
    }

    100%{
        left:200px;
        background:#000;
    }
}

6. 監聽捕獲 capture 階段設定

• type
  • 事件種類，e.g. click, mouseenter, keydown, etc.可參考：Event reference
• listener
  • 當指定類型的事件發生時，接收通知的對象
• options
  • 監聽對象的事件監聽器特徵
    1. capture
       • 如果設為true，事件會在捕捉階段觸發listener，預設false
    2. once
       • 如果設為true，在觸發監聽事件後，事件監聽器會被移除
    3. passive
       • 如果為true，則表示監聽器指定的函數(listener)將永遠不會調用preventDefault()

document.queryselector("div").addEventListener('click', function() {
  capture: true,
  once: false
}));

7. 簡單理解 Webpack

Webpack 是一個模組整合工具 module bundler

Webpack 是一個非常全能的工具，它提供了許多功能，像是打包你的檔案讓其能在網頁運作的同時也優化你的程式碼，讓你有更高效率 & 超快的網頁。

Webpack 運作的方式是透過指定一個單一檔案作為你的進入點。

這個檔案會是 tree 的 root，然後你每次 require 一個檔案從其他檔案並把它加入到 tree，當你執行 Webpack，所有的檔案和 module 都會被 bundle 成一個檔案。

Webpack 的功能

1. 將你的 js 檔案 Bundle 變成單一的檔案
   • 讓你可以撰寫模組化的 JavaScript，但是你不需要 include 每個 JavaScript