JS & HTML自定义标签

HTML自定义标签

在section文件里面，可以看到很多的自定义标签， 譬如：sections/product-tabs.liquid,可以看到：

<f-product-tabs
    id="{{ section.id }}"
    data-id="{{ section.id }}"
    data-section-type="product-tabs"
    data-enable-slider="{{ enable_slider }}"
    data-mobile-disable-slider="{{ section.settings.mobile_disable_slider }}"
    {% if enable_slider %}
      data-show-pagination="{{ section.settings.show_pagination }}"
      data-show-navigation="{{ section.settings.show_navigation }}"data-items="{{ items_per_row }}"
    {% endif -%}
  >

    ...
</f-product-tabs>

在顶部，可以看到加载了js

{{ 'product-tabs.js' | asset_url | script_tag: defer: 'defer' }}

我们打开这个js文件

if (!customElements.get("f-product-tabs")) {
  class MProductTabs extends HTMLElement {
    constructor() {
    }
  }


  customElements.define("f-product-tabs", MProductTabs);
}

这个就是一个HTML自定义标签的语法

自定义标签的语法

1.创建自定义元素的规则

• 自定义元素的名称必须包含短划线 (-)。因此， 、 和都是有效名称，而 和 则不是。此要求是为了让 HTML 解析器能够区分自定义元素和常规元素。此外，它还能确保在 HTML 中添加新标签时具有向前兼容性。
• 您不能多次注册同一个标签。尝试这样做会抛出DOMException。一旦您告知浏览器新的标签，就无法再使用了。不可撤回。
• 自定义元素无法自闭合，因为 HTML 仅允许少数元素 自闭合。请务必使用闭合标签 ( </app-drawer>)。

2.Custom element reactions

自定义元素可以定义特殊的生命周期钩子，用于在其存在期间的某些特定时刻运行代码。这些钩子被称为自定义元素反应。

• constructor
• connectedCallback
• disconnectedCallback
• attributeChangedCallback(attrName, oldVal, newVal)
• adoptedCallback

更多关于自定义标签，请参看相应的文档

自定义标签-js

product-tabs.js对应文件路径：public/dist/front/static/new_default_theme/product-tabs.js

• new_default_theme是模版identity，如果是其他的模版，则替换成相应模版的identity
• 打开这个文件，可以看到product-tabs这个装修卡片对应的js代码

1.数据传递

<f-product-tabs
    id="{{ section.id }}"
    data-id="{{ section.id }}"
    data-section-type="product-tabs"
    data-enable-slider="{{ enable_slider }}"
    data-mobile-disable-slider="{{ section.settings.mobile_disable_slider }}"
    {% if enable_slider %}
      data-show-pagination="{{ section.settings.show_pagination }}"
      data-show-navigation="{{ section.settings.show_navigation }}"data-items="{{ items_per_row }}"
    {% endif -%}
  >

    ...
</f-product-tabs>

在js文件里面可以看到

• js中 this.dataset.id 对应<f-product-tabs>标签里面的data-id="{{ section.id }}"
• js中 this.enableSlider 对应<f-product-tabs>标签里面的data-enable-slider="{{ enable_slider }}"

this.sectionId = this.dataset.id;  // 对应 data-id的值
this.sliderEnabled = this.dataset.enableSlider  // 对应 data-enable-slider="{{ enable_slider }}"

这样就可以通过属性，将数据传递到js文件中进行使用

2.构造函数constructor()

• 在 自定义元素（Custom Elements） 里，constructor() 就是类实例化时（也就是浏览器把 标签变成 MProductTabs 组件对象时）最先执行的函数。

3.您在读js代码之前，需要您是前端开发，懂js开发，需要了解HTML自定义标签的知识。