Impact 7.2.0 源码精读：六个值得借鉴的实现

Impact 是 Maestrooo 在 Shopify Theme Store 销售的付费主题。本系列阅读的版本是 7.2.0（config/settings_schema.json 中的 theme_version），所有结论只对这个版本成立，也不代表 Shopify 的平台规定。

与 Dawn、Horizon 不同，Impact 的源码不公开。文中只引用理解机制所必需的片段，引用位置写成“文件 + 行号”，例如 assets/theme.js 第 1372 行。assets/theme.js 是打包产物：每个模块前保留了 // js/common/... 形式的源路径注释，私有字段被编译成了 __privateGet 一类辅助函数。为了便于阅读，文中的代码片段已还原成 #field 写法，并删去了与主题无关的分支。

阅读顺序

前三篇解决的是 Shopify 主题特有的问题，建议先读：

1. 用 CSS 数学判断相邻 section 背景是否相同：用 Liquid 生成背景哈希，再用 CSS 计算决定间距是否折叠，全程不用 JS。
2. 变体切换：服务端重渲染、预取与局部替换：切换变体时不在前端拼数据，而是请求 Shopify 渲染好的 section，并在用户点击之前就预取。
3. 购物车事件总线与捆绑渲染：加购的发起方不需要知道页面上有哪些购物车 UI，各组件通过事件声明自己要刷新哪个 section。

后三篇是通用的 Web Components 写法：

4. 一个对话框基类派生出所有浮层：open 属性作为唯一状态来源，统一处理焦点、滚动锁定和 Theme Editor 事件。
5. 四个小而精的行为组件：超高 sticky、滚动阴影、按视觉行拆分文字、可暂停的计时器。
6. 用 Proxy 包装异步加载的播放器：调用方不需要关心 YouTube、Vimeo SDK 是否已经加载完成。

研究边界

• 只做静态源码阅读，没有在 Shopify 店铺或 Theme Editor 中运行验证。文中“会”“能”的描述都是从代码推断的行为。
• 每篇都附有“局限”一节，列出读代码时发现的缺陷或隐患。借鉴前请先核对自己的场景。
• 想看官方主题的同类实现，可以对照 Horizon 变体、Horizon 购物车和 Dawn 购物车抽屉与通知。