阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

小編精選 - 技術文章翻譯 · 11月18日

Javascript Proxy Magic：我如何建立一個零依賴的 2kB 狀態管理器（以及它如何為我提供了兩個不同的工作機會）

狀態管理器到底是什麼？狀態管理器是一個智慧模組，能夠保留（應用程式或 Web 應用程式的）會話資料並對資料的變更做出反應。

您是網頁開發人員嗎？使用過 Redux、Mobx 或 Zustand 等函式庫嗎？恭喜！您已經使用了狀態管理器。

我記得我第一天嘗試為 React 設定（舊的）Redux。只要想到所有不必要的複雜性——調度程序、減速器、中間件，我就會患上創傷後壓力症候群（PTSD）！我只是想聲明一些變數，請讓它停止。

這是一個過度設計、臃腫的庫，每個人都在使用！由於某種瘋狂的、未知的原因，它成為了當時的行業標準。

一些背景故事

2021 年的一個晚上，當我無法入睡時，我漫無目的地打開 GitHub，注意到我以前的大學課程老師（我在 GH 上關注過他）為他現在的學生上傳了一份作業。該作業要求學生使用公共 Pokemon API 建立一個 Pokedex 網站。目標是用 Javascript 實現它（沒有框架或函式庫，因為他目前的學生是 Web 開發初學者，仍在學習 Javascript 和開發的基礎知識）。

作為一個笑話，主要是因為我睡不著，我開始在我的神奇寶貝網站上工作。最終，我能夠建立一些可行的東西，而無需使用任何外部庫。

但一路走來，我很掙扎......

你看，我已經習慣了擁有一個狀態管理器，以至於在不使用外部框架或庫的情況下建置一個簡單的兩頁應用程式的要求讓我開始思考 - 為什麼狀態管理器必須如此復雜？這只是變數和事件.

長話短說，我發現自己在凌晨 2 點組裝了一個超級簡單的狀態管理器模組，只是為了管理我的 Pokemon Web 應用程式的狀態。我將我的網站部署到了 GitHub 頁面，然後就忘記了這一切。

幾個月過去了，但出於某種原因，我時不時地思考我的狀態管理解決方案...你看，它有其他庫沒有的東西 - 它太簡單了。

“嘿！”我心想，「我應該將它重寫為 NPM 套件」。

當天晚上，我就這麼做了——我把它寫成了一個獨立的 NPM 包。最後，它的重量為 2kB（相比之下 Redux 的 150kB），具有零依賴性，並且使用起來非常簡單，您只需 3 行程式碼即可完成設定。

我稱之為 VSSM

代表非常小的狀態管理器。

您可以在GitHub上查看原始程式碼。另外，請查看使用 React 和 VSSM 建立的文件網站。

第二天，我發布了我的 NPM 包，然後又忘記了這件事。

同年晚些時候，我面試了兩家不同公司的全端開發人員職位。我在第一家公司的面試中取得了優異的成績，這是一家非常成熟的科技公司。作為面試過程的一部分，他們要求我告訴他們我是否在空閒時間編碼，或者是否有我貢獻過的任何開源專案等等。

當時我做的唯一很酷的事情就是 VSSM，所以我告訴了他們。他們對我自己建立一個「Redux 替代方案」的想法印象深刻。

另一方面，我在第二家公司的面試中慘敗。我的大腦一片空白，我很緊張，無法回答簡單的問題，例如

“React 會在狀態變更時重新渲染整個應用程式，還是在使用 Redux 時僅更新受影響的元件及其子元件？”

“每次狀態更新時，它都會重新渲染整個應用程式”，我說。

我很緊張，哈哈，顯然我知道正確的答案是「它只渲染註冊的元件以及可能受影響的子元件」。

直到今天我也不明白為什麼二號公司決定給我第二次機會。他們邀請我再次接受採訪（是的！）。

在我的第二次面試中，他們要求我告訴他們我是否在空閒時間編碼、開源貢獻，你知道該怎麼做。當我告訴面試官我的小副專案時，他看起來很高興，似乎他喜歡我只是因為我從頭開始編寫了一個狀態管理器。

我想情況確實如此，因為我第二次面試也失敗了（在程式設計挑戰期間耗盡了時間），但仍然得到了一份工作機會。 1 號公司打算向我發送報價，但我已經與 2 號公司簽署了報價。

我的底線是——我建立 VSSM 幫助我獲得了這兩個機會。

我是怎麼做到的？

您是否知道 Javascript 內建了監視變數變更所需的所有功能？

它被稱為代理（它很神奇）。

Javascript 代理程式是程式碼和變數分配之間的附加邏輯層。

如果您要將物件包裝在代理程式中，您可以決定在每次更新時將其值記錄到控制台，除了為該物件指派新值之外，無需執行任何操作。

const target = {
  v: "hello"
}

const proxyTarget = new Proxy(target, {
  set: (target, property, value) => {

      console.log(`${property} is now ${value}`); 

    target[property] = value;
    return target[property];
  }
});

proxyTarget.v = "world!" // v is now world!

VSSM 是基於代理建置，它在變數賦值和其餘程式碼之間建立了一個層。使用代理，您可以設定 setter、getter，並在操作或請求目標值時實現任何類型的邏輯。

VSSM 不僅僅是一個代理，它是各種智慧代理，它們知道分配給變數的值是它的新值還是回調方法。

例如，使用 VSSM，您只需幾行程式碼即可設定狀態、監聽變更並發出事件。

import { createVSSM, createState } from 'vssm';
import { getVSSM } from 'vssm';

// Create the initial state
createVSSM({
  user: createState('user', {
    address: ''
  })
});

// Get the user proxy reference
const { user } = getVSSM();

// Listen to events on user.address
user.address = () => {
    console.log(`Address updated! the new address is ${user.address}`);
};

// Emit the mutation event
user.address = 'P.Sherman 42 Wallaby Way, Sydney'

正如您所看到的，我確保我的狀態管理器盡可能簡單。我的目標是擺脫僅僅為了分配一些變數而陷入減速器、中間件和極其複雜的配置的困境。

現在，一切都透過分配變數來進行！想要設定監聽器嗎？將回調函數指派給變數。想要編輯值並發出事件嗎？只需指派一個新值即可。

直到今天我仍然不明白為什麼流行的狀態管理器必須如此複雜，也許我永遠不會。

我鼓勵您繼續閱讀 MDN Web Docs 上有關 Javascript 代理的所有內容。