shopify之theme.js解析

一. theme.js之section解析

在Shopify的主题开发中，theme.Sections.register() 是一个用于注册主题自定义节(section)的JavaScript方法。通过这个方法，可以将自定义的节(section)添加到主题中，以便在商店的后台主题自定义器中进行配置和管理

theme.Sections.register('featured-product', {
  this.onSectionLoad = function (container) {
    // 在节选择时执行的代码，组件在初始化渲染时所执行的函数
  },
  this.onSectionUnload = function (container) {
    //  在节卸载时执行的代码，
  },
});

而在shopify里面的页面是由一个个组件所拼接起来，每一个独立的组件都可以单独配置在所需要的页面，在theme.js里面，对一些使用很频繁和重要的组件使用theme.Sections.register绑定了相应了执行函数，我们以商品详情页的main-product组件为例：

shopify所执行的函数是通过data-section-type来绑定theme.js里面所绑定执行函数，如果未绑定，则不会执行，

其中，shopify的组件加载过程中，有一点需要非常注意，在shopify后台分区所添加的组件，会根据你页面是否滑动到当前你所配置组件才会加载相对应执行逻辑，在你当前配置组件上方还有组件未显示完全时，是不会预先加载，如需要页面初始化就执行，需要将组件配置在最前方，我们以 Page featured product 组件所绑定的函数为例：

在buand-story-2页面底部添加了一个 Page featured product 组件，并选择相对应的商品，这个页面有很多图文，必须滑动到底部才能看见所配置的组件，

来到配置到的页面，滑动到底部，才会加载指定组件所绑定的函数，切记，如果有遇到需要页面初始化就加载的需求，需要将控件配置在前方

疑问：shopify如何实现滚动视图按需加载呢？能否实现页面初始化时就调用，不用让滚动到视图就显示？

我们找到 register 所定义源代码，可以看到它接收3个参数，第一个是用来寻找定位的属性值，第二个是其回调函数，第三个是否延迟加载，

第一个参数是去全局通过data-section-type寻找指定的dom节点，并通过each进行遍历并执行相应的函数，具体执行的函数大家可以去theme.js里面细看，我这就不展开了，

第二个参数是回调函数，具体组件初始化绑定的函数；

第三个参数用户是否初始化调用，这个参数如果不传，则默认用户浏览到当前组件才会渲染，deferredLoad: false 默认传deferredLoad: false以后，则初始化就加载，不用滚到显示位置；

其中designMode 具体代码无法查代码，我个人倾向是选用 IntersectionObserver 来实现，通过data-section-type获取到指定的dom节点，并绑定到IntersectionObserver里，出现在视图里，就执行当前这个组件所绑定的执行函数，