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

SuppperSA2023-12-06 12:48

代码执行流程

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

举例

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

javascript 复制代码

<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 'mobile-snippet' %}"
    renderDiv.innerHTML = renderHtml
  } else {
    const renderHtml = "{% render 'pc-snippet' %}"
    renderDiv.innerHTML = renderHtml
  }
</script>

服务端执行Liquid代码，渲染模板，将生成的HTML发送给浏览器

浏览器解析HTML代码，js引擎执行script代码

当然，这只是一个代码示例，用于理解，只是阐述liquid的代码执行流程，真实的适配场景要用媒体查询。