Shopify二次开发：代码执行流程

原创

已于 2023-12-06 17:55:30 修改 · 1.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #shopify

于 2023-12-06 09:51:24 首次发布

本文解释了在Shopify中，服务器端如何执行Liquid代码生成HTML，包括动态数据渲染，然后浏览器解析HTML，执行JavaScript，以及如何通过用户代理检测进行环境适配。例子展示了如何根据用户设备选择渲染不同片段的代码过程。

代码执行流程

服务器端运行 Liquid 代码：在 Shopify 中，Liquid 代码是在服务器端运行的。当一个页面被请求时，服务器会执行 Liquid 代码，生成相应的 HTML 内容，这个 HTML 包含了 Liquid 代码执行后的结果，以及任何服务器端渲染的动态数据。
浏览器解析 HTML：将HTMLL内容发送到客户端，一旦 HTML 到达客户端，浏览器就会开始解析它。解析过程包括构建 DOM（文档对象模型）树、执行 JavaScript 代码、应用样式等。如果 HTML 中包含 <script> 或 <style> 标签，浏览器也会相应地处理这些标签中的脚本和样式。

举例

比如在PC端渲染pc代码片段，在移动端渲染mobile代码片段，此时就需要判断用户所处的环境是PC端还是移动端

<script>
  const renderDiv = document.getElementById('renderDiv')
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
  if (userAgent.match(/(Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile)/)) {
    const renderHtml = "{% render 'mobi