如何构建一个仅有2KB大小、无依赖的状态管理器（以及它如何帮我获得两个不同的工作机会）
大家好，我是前端宝哥
这篇译文讲述了如何通过利用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
译文：前端宝哥
关注我
如果喜欢我的分享，点击下方关注，文末点一个赞 👍 ➕分享 是对我最大的支持
我的微信公众号：前端开发博客，在后台回复以下关键字可以获取资源。
-
回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
-
回复「Vue脑图」获取 Vue 相关脑图
-
回复「思维图」获取 JavaScript 相关思维图
-
回复「简历」获取简历制作建议
-
回复「简历模板」获取精选的简历模板
-
回复「加群」进入500人前端精英群
-
回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
-
回复「知识点」下载高清JavaScript知识点图谱
