大家好，我是前端寶哥

這篇譯文講述了如何通過利用JavaScript原生特性獨立開發一個輕量級狀態管理器,以及通過個人項目打開就業之門的真實經歷。不僅掌握了技術知識,也獲得了重要的就業經驗,實在是一個coding和職場雙重收獲的好文章!以下為原文：

什么是狀態管理器？狀態管理器是一個智能模塊，能夠保存應用程序或Web應用的會話數據，并對數據的變化做出反應。你是一名Web開發者嗎？曾經使用過Redux、Mobx或Zustand等庫嗎？恭喜！你已經使用過狀態管理器了。我記得當我開始嘗試為React設置（舊版）Redux的時候，我感到很困惑。一想到所有的不必要的復雜性——派發器、減速器、中間件！我只想聲明一些變量，請停止這一切。

那是一個過度設計、臃腫的庫，每個人都在使用！而且出于某種瘋狂的、不知名的原因，當時它是行業的標準。

一些背景故事

2021年的一個晚上，當我無法入睡時，我漫無目的地打開了GitHub，注意到我以前的大學課程老師（我在GitHub上關注他）上傳了一份給他現在的學生的作業。作業要求學生使用公共的Pokemon API創建一個Pokedex網站。目標是在Javascript中實現它（不使用框架或庫，因為他的學生是Web開發初學者，還在學習Javascript和開發的基礎知識）。作為一個玩笑，主要是因為我睡不著，我開始為我的Pokemon網站工作。最終，我能夠創建出一個可行的東西，而不使用任何外部庫。

但在此過程中，我遇到了一些困難...

你看，我習慣了使用狀態管理器，所以要求我構建一個甚至連使用外部框架或庫都不允許的簡單的兩頁應用程序，讓我思考——為什么狀態管理器要這么復雜？只是一些變量和事件而已。長話短說，凌晨兩點，我不顧一切地拼湊出了一個超級簡單的狀態管理器模塊，只為了管理我的Pokemon Web應用程序的狀態。我將我的網站部署到GitHub頁面上，然后把它完全忘記了。幾個月過去了，但出于某種原因，我時不時地想起我的狀態管理解決方案...你看，它有一些其他庫所沒有的東西——它極其簡單?！昂?！”我對自己說，“我應該將它重寫為一個NPM包”。當晚，我就這么做了——我把它作為一個獨立的NPM包編寫出來。最終，它只有2KB的大小（相比于Redux的150KB），沒有任何依賴，并且使用起來非常簡單，只需3行代碼就可以設置好。

我把它稱為VSSM

VSSM代表非常小的狀態管理器（Very Small State Manager）。

你可以在GitHub(https://github.com/lnahrf/Vssm)上查看源代碼。同時，也可以查看使用React和VSSM構建的文檔站點(https://lnahrf.github.io/Vssm-docs/)。

第二天，我發布了我的NPM包，然后再次把它完全忘記了。

同年晚些時候，我在兩家不同的公司面試全棧開發者職位。我通過了第一家公司的面試，這是一家非常知名的技術公司。作為面試流程的一部分，他們要求我談談自己是否在業余時間編寫代碼，是否有任何開源項目的貢獻等我唯一做過的酷事就是VSSM，所以我告訴了他們。他們對我自己構建了一個"Redux替代方案"的想法印象深刻。

另一方面，我在第二家公司的面試中表現非常糟糕。我一片空白，緊張得連簡單的問題都回答不出來，比如：

"當使用Redux時，React是否在每次狀態更改時重新渲染整個應用程序，還是只更新受影響的組件及其子組件？"

"每次狀態更新時，它會重新渲染整個應用程序", 我說道。

我非常緊張，哈哈，顯然我知道正確答案是"它只渲染注冊的組件及其可能受影響的子組件"。

直到今天，我仍然不知道為什么第二家公司決定給我第二次機會。他們邀請我去參加另一次面試（太好了！）。

在我的第二次面試中，他們要求我談談自己是否在業余時間編寫代碼，是否有開源項目的貢獻，你懂的。當我告訴面試官關于我的小項目時，他看起來非常高興，似乎他喜歡我僅憑自己從頭開始編寫了一個狀態管理器的事實。

我想這可能是因為我在第二次面試中也失敗了（在編碼挑戰中時間不夠），但仍然得到了一個工作機會。第一家公司打算給我發一份聘書，但我已經接受了第二家公司的聘書。

我想要說的是——事實上，我構建了一個只有2KB大小、無依賴且非常簡單易用的狀態管理器，這使我獲得了兩個不同的工作機會。

我是如何做到的？

你知道 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! // v 現在是 world！

VSSM 建立在代理之上，它在變量賦值和其余代碼之間創建了一個層。使用代理，你可以設置設置器、獲取器，并在操作或請求目標值時實現任何邏輯。

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

例如，使用 VSSM，只需幾行代碼就能設置狀態、監聽變化并發出事件。

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

// 創建初始狀態
createVSSM({
  user: createState('user', {
    address： ''
  })
});

// 獲取用戶代理引用
const { user } = getVSSM()；

// 監聽 user.address 上的事件
user.address = () => {
    console.log(` 地址已更新！新地址為 ${user.address}`)；
};

// 發送突變事件
user.address = 'P.Sherman 42 Wallaby Way, Sydney'

正如你所看到的，我確保我的狀態管理器盡可能簡單。我的目標是讓你不必再為分配一些變量而絞盡腦汁地想減速器、中間件和極其復雜的配置。

現在，一切都可以通過分配變量來實現！想要設置一個監聽器？給變量分配一個回調函數。想要編輯值并發出事件？只需賦值即可。

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

我鼓勵你繼續閱讀 MDN Web Docs(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 上關于 Javascript 代理的所有內容。

這一切的結論是什么？

我認為，對工作的熱情是關鍵。

我創建 VSSM 只是為了挑戰自己的極限，發布一個合理的 NPM 軟件包。它給面試官和同行留下了深刻印象，讓我從此走上了不同的崗位。

沒有人會使用VSSM，它不會流行。當我把它發布到 NPM 時，我就意識到了這個事實。但我仍然選擇盡我所能去做，因為我有一種激情，要做一些我認為比行業標準更好的東西。我知道我可以做出必須更好的東西，哪怕這意味著對我來說更好。

盡管 VSSM 已經死在了 NPM 的墳場里，但它給我帶來了很多價值，而且因為這篇文章，它還在繼續給我帶來價值。

獲得開發工作的最佳途徑就是構建令人驚嘆的東西，即使你認為這些東西都是前人做過的，也要把它做得更好。即使你認為沒有人會使用它，那又有什么意義呢？- 現在就做，以后會有價值的。

不要低估自己的能力，如果你認為自己能力不足，要知道你會提高的。走出去，一小步一小步地建設能帶來價值的項目。

祝你在工程學的道路上一帆風順。

作者：Lev Nahar

譯文：前端寶哥

原文：https://dev.to/lnahrf/javascript-proxy-magic-how-i-built-a-2kb-state-manager-with-zero-dependencies-and-how-it-got-me-two-different-job-offers-2539

關注我

如果喜歡我的分享，點擊下方關注，文末點一個贊 ?? ?分享 是對我最大的支持

我的微信公眾號：前端開發博客，在后臺回復以下關鍵字可以獲取資源。

• 回復「小抄」，領取Vue、JavaScript 和 WebComponent 小抄 PDF

• 回復「Vue腦圖」獲取 Vue 相關腦圖

• 回復「思維圖」獲取 JavaScript 相關思維圖

• 回復「簡歷」獲取簡歷制作建議

• 回復「簡歷模板」獲取精選的簡歷模板

• 回復「加群」進入500人前端精英群

• 回復「電子書」下載我整理的大量前端資源，含面試、Vue實戰項目、CSS和JavaScript電子書等。

• 回復「知識點」下載高清JavaScript知識點圖譜