# Chaining API 的 init 函数

由于目前 glass-easel 组件框架仅可用于 Skyline 渲染引擎，因此这些特性也同样受此限制。

# init 链式调用项

在 Chaining API 中支持 .init(...) 链式调用项，可以以另一种方式进行组件创建：

Component()
  .data(() => ({
    myDataField: 'someValue',
  }))
  .init(function ({ lifetime }) {
    // 这里可以用 JavaScript 局部量
    const getUpdatedValue = () => {
      return 'updated'
    }

    // 定义一个生命周期方法
    lifetime('attached', () => {
      this.setData({ myDataField: getUpdatedValue() })
    })
  })
  .register()

init 中定义的函数会在每次组件创建时被调用一次。

这种方式的主要好处是在其内部可以自由使用 JavaScript 局部变量，减少对组件 this 的使用，有时会很方便。

# init 函数中的辅助方法

init 的第一个参数包含多个辅助方法，可以用于组件定义。

method 用来定义单个方法，等价于传统形式的 methods 定义段中的单个项目。不过，它通常只用来定义事件响应函数，而且在末尾需要返回出来。例如：

Component()
  .init(function ({ method }) {
    const tapHandler = method(() => {
      /* ... */
    })
    return { tapHandler }
  })
  .register()

lifetime 和 pageLifetime 分别用来定义单个生命周期方法和组件所在页面的生命周期方法，等价于传统形式的 lifetime 和 pageLifetime 定义段中的单个项目。例如：

Component()
  .init(function ({ lifetime, pageLifetime }) {
    lifetime('attached', () => { /* ... */ })
    pageLifetime('show', () => { /* ... */ })
  })
  .register()

observer 用来定义单个数据监听器，类似于传统形式的 observers 定义段中的单个项目，但在同时监听多个数据字段时，应写成数组形式。例如：

Component()
  .data(() => ({
    a: 1,
    b: 2,
  }))
  .init(function ({ observer }) {
    observer(['a', 'b'], () => { /* ... */ })
  })
  .register()

relation 用来定义单个组件间关系项，等价于传统形式的 relations 定义段中的单个项目。例如：

Component()
  .init(function ({ relation }) {
    relation('another-component', {
      type: 'parent',
    })
  })
  .register()

需要注意的是，上面这些方法都不能异步或延迟执行，否则会报错：

Component()
  .init(function ({ lifetime }) {
    setTimeout(() => {
      // 不能这么做！
      lifetime('attached', () => { /* ... */ })
    }, 0)
  })
  .register()

此外，第一个参数中还包含有 data 和 setData ，可以用来快速访问和设置数据。例如：

Component()
  .data(() => ({
    myDataField: 'someValue',
  }))
  .init(function ({ lifetime, data, setData }) {
    lifetime('attached', () => {
      setData({
        myDataField: data.myDataField + ' updated',
      })
    })
  })
  .register()

但要注意 data 和 setData 只应在各个回调函数中使用，下面这样做会报错：

Component()
  .init(function ({ setData }) {
    setData({ /* ... */ })
  })
  .register()