前端概念 II

初級水平

1. 問題：什麼是 CSS 網格？ 答案： CSS 網格是一個佈局系統，可讓您在網路上建立二維佈局。它將頁面分為行和列，從而更容易定位元素。例如：

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. 問題：什麼是「DOMContentLoaded」事件？ 答案： 當初始 HTML 文件完全載入和解析後，將觸發 DOMContentLoaded 事件，無需等待樣式表、圖像和子框架完成載入。一旦 DOM 準備好，它對於運行腳本很有用：

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. 問題： CSS 中的「z-index」屬性是什麼？ 答案： z-index 屬性控制元素的堆疊順序。 z-index 較高的元素顯示在 z-index 較低的元素前面。例如：

   .box1 {
       position: relative;
       z-index: 1;
   }
   .box2 {
       position: relative;
       z-index: 2; /* box2 será exibido na frente de box1 */
   }

1. 問題： JavaScript 中的「this」是什麼？ 答案： JavaScript 中的 this 指的是目前執行上下文。該值可以根據函數的呼叫方式而變化。例如：

   const obj = {
       name: "John",
       greet: function() {
           console.log("Hello, " + this.name);
       }
   };
   obj.greet(); // "Hello, John"

1. 問題：什麼是 CSS 選擇器？ 答案： CSS 選擇器是用來選擇要設定樣式的元素的模式。選擇器有多種類型，例如類別、ID 和類型選擇器。例如：

   .className { /* Seleciona todos os elementos com a classe "className" */
       color: blue;
   }
   #idName { /* Seleciona o elemento com o ID "idName" */
       font-size: 20px;
   }

1. 問題： JavaScript 中的「localStorage」是什麼？ 答案： localStorage 是一個 API，可讓您在使用者的瀏覽器中持久儲存資料。儲存在 localStorage 中的資料不會過期，即使關閉瀏覽器後仍會保留。例如：

   localStorage.setItem("key", "value");
   const value = localStorage.getItem("key"); // "value"

1. 問題：什麼是「事件冒泡」？
   
   答案： 「事件冒泡」是一種事件傳播機制，其中事件從最內層元素開始並傳播到外層元素。例如，如果

   內的按鈕按一下時，將首先在按鈕上觸發按一下事件，然後在

   上觸發。

2. 問題：什麼是「回呼函數」？
   
   答案： 「回呼函數」是作為參數傳遞給另一個函數的函數，可以在以後呼叫。例如：
   

   .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 10px;
   }

1. 問題：什麼是「響應式設計」？ 答案：「響應式設計」是一種網頁設計方法，旨在建立適應不同螢幕尺寸和裝置的頁面。這通常是使用 CSS 中的媒體查詢來實現的。例如：

   document.addEventListener("DOMContentLoaded", function() {
       console.log("DOM completamente carregado e analisado");
   });

1. 問題：什麼是「fetch API」？
   
   答案： fetch API 是一個用於在 JavaScript 中發出 HTTP 請求的現代介面。它會傳回一個解決請求回應的 Promise。例如：
   

      .box1 {
          position: relative;
          z-index: 1;
      }
      .box2 {
          position: relative;
          z-index: 2; /* box2 será exibido na frente de box1 */
      }
   

滿級

1. 問題：什麼是「CORS」？
   
   答案： CORS（跨來源資源共享）是一種安全機制，允許從與提供該頁面的網域不同的網域請求網頁上的受限資源。這對於保護用戶資料非常重要。

2. 問題：React 中的「虛擬 DOM」是什麼？
   
   答案：「虛擬 DOM」是真實 DOM 的輕量級表示。 React 使用虛擬 DOM 來優化 DOM 更新，透過將虛擬 DOM 與真實 DOM 進行比較並僅套用必要的更改，使其能夠更有效地進行更改。

3. 問題：React 中的「props」是什麼？
   
   答案： 「Props」是 React 中元件之間傳遞資料的一種機制。它們允許您將資料從父元件傳遞到子元件。例如：
   

      const obj = {
          name: "John",
          greet: function() {
              console.log("Hello, " + this.name);
          }
      };
      obj.greet(); // "Hello, John"
   

4. 問題：React 中的「狀態」是什麼？
   
   答案：「狀態」是一個對象，代表應用程式中可以更改的部分。它用於儲存影響組件渲染的資料。例如：
   

      .className { /* Seleciona todos os elementos com a classe "className" */
          color: blue;
      }
      #idName { /* Seleciona o elemento com o ID "idName" */
          font-size: 20px;
      }
   

5. 問題：什麼是「React Router」？
   
   答案： React Router 是一個函式庫，允許在 React 應用程式中的不同元件之間進行導航，從而促進單頁應用程式（SPA）的建立。它允許你定義路由並基於 URL 渲染元件。

6. 問題：React 中的「hooks」是什麼？
   
   答案： Hooks 是允許您在功能元件中使用狀態和其他 React 資源的函數。 useState 和 useEffect 是鉤子的範例。例如：
   

      .grid-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-gap: 10px;
      }
   

7. 問題：什麼是「Webpack」？
   
   答案： Webpack 是 JavaScript 應用程式的模組包裝器。它允許您將 JavaScript、CSS 和其他資源檔案捆綁到單一檔案或多個生產優化檔案中。

8. 問題：什麼是「Babel」？
   
   答案： Babel 是一個轉譯器，可讓您編寫現代 JavaScript 程式碼 (ES6) 並將其轉換為與舊瀏覽器相容的版本。它經常與Webpack結合使用。

9. 問題：什麼是「SASS」？
   
   答案： SASS（Syntropically Awesome Style Sheets）是一個 CSS 預處理器，可讓您使用變數、巢狀和函數，使 CSS 更加動態且更易於維護。例如：
   

      document.addEventListener("DOMContentLoaded", function() {
          console.log("DOM completamente carregado e analisado");
      });
   

10. 問題：什麼是「AJAX」？
    
    答案： AJAX（非同步 JavaScript 和 XML）是一種允許您向伺服器發出非同步請求而無需重新載入頁面的技術。這通常用於動態更新網頁的某些部分。

高階等級

1. 問題：什麼是「微服務架構」？
   
   答案： 微服務架構是一種架構風格，它將應用程式建構成一組相互通訊的小型獨立服務。這使得不同的團隊能夠更有效地處理應用程式的不同部分。

2. 問題：什麼是「SSR」（伺服器端渲染）？
   
   答案： SSR 是一種在伺服器而不是客戶端上完成 Web 應用程式渲染的技術。這可以提高效能和 SEO，因為內容會傳送到已經呈現的客戶端。

3. 問題：什麼是「CSR」（客戶端渲染）？
   
   答案： CSR 是一種在客戶端上完成 Web 應用程式渲染的技術，通常使用 JavaScript。這可以提供更具互動性的用戶體驗，但如果實施不當，可能會對 SEO 產生負面影響。

4. 問題：什麼是「Redux Saga」？
   
   答案： Redux Saga 是一個有助於管理 Redux 應用程式中副作用的函式庫。它使用生成器以更具可讀性和組織性的方式處理 API 呼叫等非同步操作。

5. 問題：React 中的「Context API」是什麼？
   
   答案： Context API 是一種透過元件樹傳遞資料的方法，而無需在每個層級手動傳遞 props。這對於共享主題或用戶資訊等全域資料非常有用。

6. 問題：什麼是「TypeScript」？
   
   答案： TypeScript 是 JavaScript 的超集，它為程式碼新增了靜態類型。它允許您定義變數、函數和物件的類型，有助於避免執行時間錯誤。

7. 問題：什麼是「漸進式 Web 應用程式」(PWA)？
   
   答案： PWA 是提供類似本機應用程式體驗的 Web 應用程序，包括離線支援、推播通知和主螢幕安裝。它們是使用標準網路技術建構的。

8. 問題：什麼是「GraphQL」？
   
   答案： GraphQL 是一種 API 查詢語言，允許客戶端準確地要求他們需要的資料。這與 REST API 形成鮮明對比，在 REST API 中，客戶端可能會收到超出必要數量的資料。

9. 問題：什麼是「網頁輔助功能」？
   
   答案： Web 可訪問性是指使 Web 應用程式可供殘障人士使用的做法。這包括使用語義標籤、ARIA 屬性以及確保內容可透過鍵盤導航。

10. 問題：什麼是「Service Worker」？
    
    答案： Service Worker 是瀏覽器在後台運行的腳本，與網頁分開，支援快取、推播通知和後台同步等功能。它對於建立 PWA 至關重要。

參考書目

所提供的資訊是從多個可靠來源提取和改編的，包括：

1. Glassdoor - 人們分享面試經驗和常見問題的網站。

   • 玻璃門

2. MDN Web 文件 - 有關 HTML、CSS 和 JavaScript 的綜合文件。

   • MDN 網路文件

3. JavaScript.info - JavaScript 的現代指南，涵蓋從基礎知識到高級主題的所有內容。

   • JavaScript.info

4. React Documentation - React 官方文檔，提供有關庫的詳細資訊。

   • React 文件

5. CSS-Tricks - 提供有關 CSS 和前端開發的提示和教學的網站。

   • CSS 技巧

這些資源在 Web 開發社群中得到了廣泛認可，是深化前端知識的重要資源。