跳到主要内容

写一个原生 JS 分享插件时,我会先限制它对全局的影响

· 阅读需 3 分钟
一介布衣
全栈开发者

写前端小插件最容易带来的错觉,就是“东西很小,怎么写都行”。尤其做分享按钮、浮层、复制链接这类轻量功能时,很多实现一开始都很快:挂几个全局变量、塞一段样式、暴露一个初始化函数,页面立刻就能用。

可 2019 年前后我自己做这类插件越来越多之后,反而最先关心的不是功能,而是它会不会把宿主页面搞脏。

我最先约束的是全局命名

一个小插件如果默认就往 window 上挂很多对象,短期很方便,长期就很危险。
宿主页面可能已经有同名变量,也可能同时加载多个脚本。这个时候“我只是随手挂一下”就会变成污染来源。

所以我现在更偏向只暴露一个尽量稳定、语义明确的入口,甚至能不暴露就不暴露,把内部状态都收在闭包或者实例里。

第二个边界是样式

插件写出来之后最容易忽略的不是逻辑,而是样式渗透。
如果按钮类名太普通、弹层样式选择器太宽,宿主页面原本的 CSS 就可能被意外影响,反过来也一样,页面自身样式也会把插件弄得面目全非。

这就是为什么我后来越来越愿意给插件样式做前缀隔离,哪怕多写一点名字,也比后续冲突轻松。

第三个边界是事件

分享插件看似简单,但常常会监听点击、关闭、滚动、复制等行为。
如果事件绑定和解绑不干净,页面切换几次之后,很容易出现重复触发、状态残留、弹层莫名其妙多开的问题。

所以我更愿意把事件生命周期当成插件设计的一部分,而不是补丁。

为什么我现在不再觉得“小插件可以随便写”

因为插件的价值,本来就是“在别人的页面里安全工作”。
一旦它只能在作者自己熟悉的那张页面上稳定运行,就不能算成熟插件,只能算局部脚本。

约束全局影响,本质上是在尊重宿主环境。

小结

原生 JS 插件真正难的,从来不是按钮能不能点,而是它在任何页面里能不能礼貌地存在。
2019 年之后我对前端插件的要求越来越简单:功能可以轻,但对全局的影响必须小。做到这一点,插件才真的可复用。