重构展望 - 使用 Lit, Vite, TypeScript 进行大重构

[!TIP]

已创建讨论 #847，请移步此讨论以探讨重构相关事项

以下是原内容：

---

[!NOTE] 这个issue里的内容相对而言比较「宏大」，可以一直开着作为一个重构方向的指导

现在的问题

如果接触过Win12源码的都知道，现在项目里代码十分混乱，到处是内联jQuery，大量不符合标准的用法，百花齐放的命名，狂放的全局变量等等，3200多行的desktop.html和2600多行的desktop.js更是史山之巅峰。如果放任不管，迟早会导致重新写一个比重构要简单的局面。

如何改变这一点，how to make win12 great again?

且听我道来 ——

怎么办

[!TIP] 下面的文字有点长，但请耐心读完...

Lit

先来看看HTML堆史山这个事。

归根结底，这就是因为所有东西都堆在一个文件里导致的。为什么会堆在一起？因为没办法把它们分开（我不是废话啊）

这就是 Lit 的用武之地了。依托于 Web Components 的强大优势，Lit让你能够使用一种非常简单且优雅的方式编写组件，而且无需额外工具链。我们可以使用Lit的模板语法像直接编写HTML一样编写组件，还可以以一种安全的方式插入JS变量和事件监听器 —— 而这也为 ESM 化奠定了基础。不仅如此，我们还可以编写仅组件内生效的CSS，并且借助TypeScript的装饰器功能优雅地传递参数。

Vite & ESM

ESM，想必不用过多解释，它是现代JavaScript的模块系统。代码分文件存放，使用import导入模块，export来导出变量和函数，不仅使得开发和维护更加方便，也无形之中减少了因为变量名错误而导致的问题。

而 Vite，是一个现代的JavaScript打包器，专门用于打包网页项目。借助Vite，我们可以把散落的文件打包成一个bundle，压缩代码来减少文件大小，打包依赖项，转换TypeScript，使用Babel改善浏览器兼容性，等等。

TypeScript

TypeScript，同样家喻户晓。TypeScript是JavaScript的超集，为JavaScript添加了完善的类型系统，并在构建时编译为JavaScript。由于TypeScript的强类型特点，它会对任何不符合类型的赋值和函数调用进行报错，这可以使代码更加清晰、规范，更能使开发体验更加简单快速，并且增强了可维护性。

我们该做什么

如果我们要完成所有这些重构，将会是非常大的工程。说实话我也不确定应该采取什么样的方法来重构，不过这个issue算是给了一个思路吧，我们或许可以朝着这个方向去努力。

(∠・ω< )⌒★