自定义组件

Lessjs 支持自定义组件，你可以将可复用的逻辑实现封装成一个自定义组件来使用。

自定义组件必须使用 spz-script 来定义，它需要一个 type="application/javascript" 属性来作为普通脚本使用，这是因为不配置该属性时，spz-script 脚本将会放入 Web Worker 中执行，当前在 Web Worker 中暂时不可以访问 SPZ 相关的全局变量。

自定义组件是基于 ES6 class 继承 SPZ.BaseElement 来实现。

基础用法

在下面例子中，我们定义了一个 spz-custom-component 组件，它仅支持 container 布局。在自定义组件中，有几个函数需要了解。

函数名	描述
constructor	类的构造函数，通常用来定义一些变量，与原生类用法一致。在这里必须使用 `super(element);` 来调用父类的构造函数来正确定义元素。
isLayoutSupported	组件支持的布局。它返回一个布尔值，如果返回 `true`，当前使用的是正确的布局类型。`layout` 参数值是使用组件时 `layout` 属性配置的值。可以使用 `SPZCore` 对象定义的布局相关函数和值来处理布局逻辑。
buildCallback	构建回调函数。当组件开始构建时触发，通常用来做初始化。
mountCallback	构建/挂载完成的回调函数。当组件挂载完成后触发，通常用来做数据请求。
unmountCallback	卸载前的回调函数。通常用来卸载一些事件监听、变量重置等。

<spz-custom-component layout="container"></spz-custom-component>

<spz-script layout="logic" type="application/javascript">
  class SpzCustomComponent extends SPZ.BaseElement {
    constructor(element) {
      super(element);
    }

    isLayoutSupported(layout) {
      return layout == SPZCore.Layout.CONTAINER;;
    }

    buildCallback() {
      // ...
    }

    mountCallback() {
      // ...
    }

    unmountCallback() {
      // ...
    }
  }

  SPZ.defineElement('spz-custom-component', SpzCustomComponent);
</spz-script>

在自定义组件内部，我们可以直接使用 SPZCore 对象、SPZUtils 对象和 SPZServices 对象。

命名规范

自定义组件需要遵循以下命名规范：

自定义组件名称必需以 spz-custom- 开头。
私有变量和函数以 _ 结尾。
抛出的 API 方法命名不以 _ 结尾。

this 对象

自定义组件的 this 对象和普通的类的 this 对象不完全一样。自定义组件的 this 对象是普通类的 this 对象的增强版。我们可以通过 this 来访问、获取一下内容：

参数	说明
this.element	获取当前组件 DOM 元素
this.win	获取 `window` 对象
this.getViewport()	参考 Viewport 服务