前端技術點滴整理-1

Eric zhou發表於2023-09-22
前端

一、ETag相關

ETag（Entity Tag）是 HTTP 1.1 協議中的一部分，用於確定瀏覽器快取的一個資源在伺服器上是否已經被修改。它是一個可以分配給特定版本和例項的資源的識別符號，通常是一個雜湊值。伺服器可以在傳送資源時，將該資源的 ETag 一起傳送給客戶端。然後客戶端在再次請求該資源時，會將此 ETag 值一起傳送給伺服器，伺服器根據 ETag 判斷資源是否有變動。

ETag 的工作原理是這樣的：

  1. 瀏覽器第一次請求一個資源（比如一個圖片），伺服器在返回這個資源的同時，也把這個資源的 ETag 值（通常是一個雜湊值）在響應頭中一併返回，瀏覽器收到資源後，會將這個資源及其 ETag 值快取起來。
  2. 當瀏覽器再次請求這個資源時，會將之前儲存的 ETag 值放在請求頭中一併傳送給伺服器。伺服器會比對請求頭中的 ETag 值和伺服器上該資源的當前 ETag 值是否一致，以此來判斷資源是否有變動。
  3. 如果 ETag 沒變，說明資源沒有變動，伺服器會返回 304 狀態碼，告訴瀏覽器直接使用本地快取即可。如果 ETag 變了，說明資源已經被改動過，伺服器會返回新的資源內容和新的 ETag 值。

使用 ETag 的方法如下：

  1. 在伺服器端，可以在響應頭中新增 ETag，例如 ETag: "12345"。
  2. 在客戶端，可以在請求頭中新增 If-None-Match，例如 If-None-Match: "12345"。

ETag 可以有效地節省頻寬和伺服器資源，因為當資源沒有變化時，伺服器可以不用返回資源內容，只需要返回一個 304 狀態碼即可。同時，ETag 也有助於防止同時寫入（"mid-air"寫入）。這是當多個使用者同時嘗試更改同一資源時可能會發生的問題。透過將 ETag 值放入 If-Match 請求頭中，可以讓伺服器只在 ETag 值匹配時才執行操作。如果 ETag 值不匹配，說明資源已經被其他使用者更改，伺服器可以返回 412（Precondition Failed）狀態碼，拒絕執行操作。

二、JS引用方式

type=Module和UMD（Universal Module Definition）是JavaScript模組載入方式的兩種不同策略。它們的主要區別在於使用方式和相容性。
當在<script>標籤中使用type="module"時，該指令碼將被當作ES6模組。這意味著在這樣的指令碼中可以使用import和export語法。此外，這些指令碼預設是延遲載入的，即它們會等到所有HTML檔案都被完全載入和解析後再執行。
ES6模組是現代瀏覽器支援的原生模組系統。然而，老版本的瀏覽器並不支援ES6模組，因此如果要支援老版本瀏覽器，可能需要使用一些構建工具，如Babel和webpack等，將ES6模組轉換為其他型別的模組。

UMD（Universal Module Definition）
UMD是一種相容CommonJS和AMD兩種規範的模組定義方式。這種方式的主要目的是使一個模組能夠在各種環境中執行，包括瀏覽器環境和伺服器環境。
UMD模組可以透過<script>標籤直接在瀏覽器中引入，並且不需要特殊的屬性。然而，由於UMD模組需要相容多種環境，所以它的程式碼通常會比其他型別的模組更復雜。
總結起來，type=module更適合於現代瀏覽器環境，而UMD則旨在提供一種在各種環境中都能執行的通用解決方案。

三、VUE3 國際化實現方案

Vue3的國際化實現方案主要使用的是vue-i18n外掛。以下是一個示例：

首先，安裝vue-i18n外掛：

npm install vue-i18n@next

然後，建立一個i18n.js檔案，用於配置國際化選項：

import { createI18n } from 'vue-i18n'

const messages = {
  en: {
    message: {
      hello: 'Hello World'
    }
  },
  zh: {
    message: {
      hello: '你好，世界'
    }
  }
}

const i18n = createI18n({
  locale: 'en', // 設定預設語言
  messages,
})

export default i18n

在你的main.js中，引入這個配置並掛載到Vue例項上：

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

createApp(App).use(i18n).mount('#app')

在你的元件中，你可以使用$t方法來獲取國際化的訊息：

<template>
  <p>{{ $t('message.hello') }}</p>
</template>

你也可以在任何地方動態切換語言：

this.$i18n.locale = 'zh'

四、VUE例項的生命週期管理

   Vue例項的生命週期管理是透過一系的生命週期鉤子函式來實現的，這些鉤子函式在Vue例項的不同階段被呼叫，可以讓開發者在恰當的時機新增自己的程式碼。

以下是Vue例項的生命週期鉤子函式：

  1. beforeCreate：在例項初始化之後，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫。

  2. created：在例項建立完成後被立即呼叫。在這一步，例項已完成以下的配置：資料觀測(data observer)，屬性和方法的運算，watch/event事件回撥。然而，掛載階段還沒開始，$el屬性目前不可見。

  3. beforeMount：在掛載開始之前被呼叫，相關的render函式首次被呼叫。

  4. mounted：在el被新建立的vm.$el替換，並掛載到例項上去之後呼叫該鉤子。如果root例項掛載了一個檔案內的元素，當mounted被呼叫時vm.$el也在檔案內。

  5. beforeUpdate：資料更新時呼叫，發生在虛擬DOM重新渲染和打補丁之前。可以在這個鉤子中進一步改變狀態，這不會觸發附加的重渲染過程。

  6. updated：由於資料更改導致的虛擬DOM重新渲染和打補丁，在這之後會呼叫該鉤子。

  7. beforeDestroy：例項銷燬之前呼叫。在這一步，例項仍然完全可用。

  8. destroyed：Vue例項銷燬後呼叫。呼叫後，所有的事件監聽器會被移除，所有的子例項也會被銷燬。

以上就是Vue例項的生命週期管理，透過這些鉤子函式，我們可以更好地控制和管理Vue例項的狀態。

五、Vite和Webpack最核心的區別和不同

Vite和Webpack是兩種用於現代前端開發的構建工具，它們在許多方面有所不同，但最關鍵的區別主要在於以下幾點：

  1. 構建速度：Vite使用了ESBuild，比Webpack更快。ESBuild採用Go語言編寫，利用多核並行轉譯，大大提高了打包速度。而Webpack的構建速度相對較慢。

  2. 開發模式：Vite在開發模式下，採用原生ESM模組，按需編譯，無需等待整個應用編譯完成，從而實現了極快的熱更新。而Webpack在開發模式下，需要對所有模組進行編譯打包，然後才能進行熱更新。

  3. 外掛系統：Vite的外掛系統更簡單，更易於使用。Vite外掛基於rollup外掛設計，對於開發者來說，使用起來更加方便。而Webpack的外掛系統相對複雜，需要更多的學習和理解。

  4. 配置：Vite的配置相對簡單，更加易於理解和使用。而Webpack的配置更加複雜。

  5. 相容性：Webpack更老，因此對舊的瀏覽器和語法有更好的支援。Vite則需要現代瀏覽器支援原生ESM。

  6. 體積：相比於Webpack，Vite的體積更小，更輕量。

  7. 預設支援：Vite預設支援Vue.js，而Webpack則需要配置。

在選擇哪個工具時，需要考慮專案的具體需求，如構建速度、相容性、易用性等因素。

 

六、關於ESM

ESM是ES Modules的縮寫，它是JavaScript的官方模組系統，是ECMAScript 6（也稱為ES2015）引入的一種新的模組化方式。

在ESM中，你可以使用import和export關鍵字來匯入和匯出函式、物件或值。這種模組化方式可以幫助你更好地組織和共享程式碼。

ESM與之前的CommonJS模組系統（在Node.js中使用）有一些關鍵的區別，包括：

  1. ESM是靜態的，這意味著你不能在執行時改變或建立模組。所有的匯入和匯出都需要在頂級範圍（非函式內）進行，並且必須在編譯時確定。這使得靜態分析和最佳化（如tree shaking）成為可能。

  2. ESM支援非同步載入和動態載入。

  3. ESM支援迴圈依賴和預設匯出。

由於ESM是JavaScript語言的標準組成部分，因此它在現代瀏覽器中得到了廣泛的支援，也被許多現代JavaScript工具（如Babel，Webpack，Rollup，Vite等）所支援。

相關文章