本帖最后由 SHEEP_REALMS 于 2022-7-9 23:27 编辑
Popup，意为弹出窗口。在UI设计领域，弹出窗口有多种应用场景。除了对话框以外，显示更多信息也是弹出窗口的一项重要职能。
在 MediaWiki 上，有一款名为 Popups 的扩展[1]，提供鼠标悬停于链接弹出预览的功能，帮助百科读者和编辑者快速了解链接所指向的条目的大致含义。作为编辑者，有时还需要获取对应条目的特殊信息，亦或是快速进行某些操作，这款脚本极大地简化了编辑者们的操作。
基于上述理念，我开发了 Bilibili Popups —— 在B站中提供链接内容预览的脚本。[2]
前期测试
在开发这个脚本之前，我的技术不够精炼，光是在UI层面就遇到了大难题。为此，参阅了原版 Popups 的代码逻辑，却发现其代码及其复杂，且专为 MediaWiki 量身定做，不能作为参考蓝本。前期的可行性测试以失败告终。
不过，我并没有就此放弃。在之后的一段时间里，我又学习了一些技术，重新开始测试，最终解决了UI问题，后续的链接悬停触发和识别也相继成功，正式开始开发。
在完成了几个基本功能后，我突然意识到，这是一款具有泛用性的脚本 —— 任何一个拥有 API 接口的网站都可以适配。目前，这仍是一个专为B站定制的 Popups，那么我的目标就很明确了 —— 解耦所有模块，封装整个脚本，做成一个开箱即用的库。
积累经验
在走出B站之前，首先应当多开发一些功能，使脚本具有更多的用途，为可能会遇到的各种状况积累经验。在积累经验的过程中也应当注意，想要实现自由的客制化，即高度的可自定义性以迎合多种需求，「解耦 」[3] 是一项重要任务。
模块之间的耦合度越高，开发人员的学习成本和维护成本也就越高。脚本不同于前端网页开发，开发网页的时候，任何元素都是开发者自己创作的，开发者对自己设计了如指掌，有时甚至可以直接用现成的框架快速开发。然而对于网页脚本，面对的却是别人开发的网页，可能会遇到各种各样意料之外的事情，你不能对别人开发的网页持有半点信任，他们也不会给你任何支持，什么事情都要靠你自己。
我重新撰写了脚本的设计方案，把脚本分为了三个部分：逻辑、DOM 结构和样式。逻辑，即脚本的运行逻辑，这是脚本的大脑。DOM 结构，是指脚本显示给用户的界面，需要展示各种信息，合理搭配层次结构才能给用户较好的体验，这是脚本的骨骼。但这样的界面只有框架，毫无美感，于是就来到了最后一个部分 —— 注入样式。样式，是一个网页的灵魂，绚丽多彩的网页离不开样式，这是脚本的皮肤。
如此划分模块后，我对整个脚本有了更加清晰的认识：逻辑操作 DOM 结构，DOM 结构搭配样式，DOM 结构的交互产生逻辑，改变样式。把这些部分拆开来，就是解耦的具体要求。
未来展望
Bilibili Popups 的开发进程驻足于此，不过我已经有了一个明确的开发规划，让我们讲一讲今后我会做些什么，例如尚未完成的解耦工作。
「面向对象编程 」[4] 在这个时候就发挥了重要作用 —— 把上面提到的模块封装为「 类 」，在需要的时候构造使用。如果有特殊需求，还能直接继承并开发新的内容，这给二次开发提供了很多便利。
「健壮性 」[5] 是目前的一大难题，脚本很容易受到网页上其他样式的干扰，有三种解决方案：一是写入大量的样式对抗继承样式；二是规范元素的ID和类名，引入名字空间；三是将 Popups 悬浮窗挪出 body 标签，成为和 body 同等级别的标签。这些解决方案各有优缺点，我仍需仔细斟酌，选出最佳方案。除了样式上的问题，代码逻辑的健壮性也非常重要。目前看来，我仍然有很多写死的、默认会返回预期值的代码未作修改，这些代码应当灵活一些。
「国际化 」[6] 是提高作品传播范围的重要指标。Popups 中仍有大量写死的文本，这并不优雅，这些文本应当统一收集到一份数据表中。
Bilibili Popups 仍有很多细节值得探讨，碍于篇幅限制，本文不再赘述，之后有时间再展开讲讲。
注释与外部链接
1. Extension:Popups - MediaWiki
2. sheep-realms/Bilibili-Popups: 在 Bilibili 中提供链接内容浮窗预览的油猴脚本
3. 解耦 (电子学) - 维基百科，自由的百科全书
4. 面向对象程序设计 - 维基百科，自由的百科全书
5. 健壮性 (计算机科学) - 维基百科，自由的百科全书
6. 国际化与本地化 - 维基百科，自由的百科全书
Popup，意为弹出窗口。在UI设计领域，弹出窗口有多种应用场景。除了对话框以外，显示更多信息也是弹出窗口的一项重要职能。
在 MediaWiki 上，有一款名为 Popups 的扩展[1]，提供鼠标悬停于链接弹出预览的功能，帮助百科读者和编辑者快速了解链接所指向的条目的大致含义。作为编辑者，有时还需要获取对应条目的特殊信息，亦或是快速进行某些操作，这款脚本极大地简化了编辑者们的操作。
基于上述理念，我开发了 Bilibili Popups —— 在B站中提供链接内容预览的脚本。[2]
前期测试
在开发这个脚本之前，我的技术不够精炼，光是在UI层面就遇到了大难题。为此，参阅了原版 Popups 的代码逻辑，却发现其代码及其复杂，且专为 MediaWiki 量身定做，不能作为参考蓝本。前期的可行性测试以失败告终。
不过，我并没有就此放弃。在之后的一段时间里，我又学习了一些技术，重新开始测试，最终解决了UI问题，后续的链接悬停触发和识别也相继成功，正式开始开发。
在完成了几个基本功能后，我突然意识到，这是一款具有泛用性的脚本 —— 任何一个拥有 API 接口的网站都可以适配。目前，这仍是一个专为B站定制的 Popups，那么我的目标就很明确了 —— 解耦所有模块，封装整个脚本，做成一个开箱即用的库。
积累经验
在走出B站之前，首先应当多开发一些功能，使脚本具有更多的用途，为可能会遇到的各种状况积累经验。在积累经验的过程中也应当注意，想要实现自由的客制化，即高度的可自定义性以迎合多种需求，「
模块之间的耦合度越高，开发人员的学习成本和维护成本也就越高。脚本不同于前端网页开发，开发网页的时候，任何元素都是开发者自己创作的，开发者对自己设计了如指掌，有时甚至可以直接用现成的框架快速开发。然而对于网页脚本，面对的却是别人开发的网页，可能会遇到各种各样意料之外的事情，你不能对别人开发的网页持有半点信任，他们也不会给你任何支持，什么事情都要靠你自己。
我重新撰写了脚本的设计方案，把脚本分为了三个部分：逻辑、DOM 结构和样式。逻辑，即脚本的运行逻辑，这是脚本的大脑。DOM 结构，是指脚本显示给用户的界面，需要展示各种信息，合理搭配层次结构才能给用户较好的体验，这是脚本的骨骼。但这样的界面只有框架，毫无美感，于是就来到了最后一个部分 —— 注入样式。样式，是一个网页的灵魂，绚丽多彩的网页离不开样式，这是脚本的皮肤。
如此划分模块后，我对整个脚本有了更加清晰的认识：逻辑操作 DOM 结构，DOM 结构搭配样式，DOM 结构的交互产生逻辑，改变样式。把这些部分拆开来，就是解耦的具体要求。
未来展望
Bilibili Popups 的开发进程驻足于此，不过我已经有了一个明确的开发规划，让我们讲一讲今后我会做些什么，例如尚未完成的解耦工作。
「
「
「
Bilibili Popups 仍有很多细节值得探讨，碍于篇幅限制，本文不再赘述，之后有时间再展开讲讲。
注释与外部链接
1. Extension:Popups - MediaWiki
2. sheep-realms/Bilibili-Popups: 在 Bilibili 中提供链接内容浮窗预览的油猴脚本
3. 解耦 (电子学) - 维基百科，自由的百科全书
4. 面向对象程序设计 - 维基百科，自由的百科全书
5. 健壮性 (计算机科学) - 维基百科，自由的百科全书
6. 国际化与本地化 - 维基百科，自由的百科全书
也只能弱弱的喊一句大佬加油了
救世啊,本地化硬编码是坏文明