behaviors

定义和使用 behaviors

behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的“mixins”或“traits”。

每个 behavior 可以包含一组属性、数据、生命周期函数和方法，组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior 。 behavior 也可以引用其他 behavior 。

behavior 需要使用 Behavior() 构造器定义。

代码示例：

// my-behavior.jsmodule.exports = Behavior({  behaviors: [],  properties: {    myBehaviorProperty: {      type: String    }  },  data: {    myBehaviorData: {}  },  attached: function(){},  methods: {    myBehaviorMethod: function(){}  }})

组件引用时，在 behaviors 定义段中将它们逐个列出即可。

代码示例：

// my-component.jsvar myBehavior = require('my-behavior')Component({  behaviors: [myBehavior],  properties: {    myProperty: {      type: String    }  },  data: {    myData: {}  },  attached: function(){},  methods: {    myMethod: function(){}  }})

在上例中， my-component 组件定义中加入了 my-behavior ，而 my-behavior 中包含有 myBehaviorProperty 属性、 myBehaviorData 数据字段、 myBehaviorMethod 方法和一个 attached 生命周期函数。这将使得 my-component 中最终包含 myBehaviorProperty 、 myProperty 两个属性， myBehaviorData 、 myData 两个数据字段，和 myBehaviorMethod 、 myMethod 两个方法。当组件触发 attached 生命周期时，会依次触发 my-behavior 中的 attached 生命周期函数和 my-component 中的 attached 生命周期函数。

字段的覆盖和组合规则

组件和它引用的 behavior 中可以包含同名的字段，对这些字段的处理方法如下：

• 如果有同名的属性或方法，组件本身的属性或方法会覆盖 behavior 中的属性或方法，如果引用了多个 behavior ，在定义段中靠后 behavior 中的属性或方法会覆盖靠前的属性或方法；
• 如果有同名的数据字段，如果数据是对象类型，会进行对象合并，如果是非对象类型则会进行相互覆盖；
• 生命周期函数不会相互覆盖，而是在对应触发时机被逐个调用。如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数只会被执行一次。

内置 behaviors

自定义组件可以通过引用内置的 behavior 来获得内置组件的一些行为。

代码示例：

Component({  behaviors: ['wx://form-field']})

在上例中， wx://form-field 代表一个内置 behavior ，它使得这个自定义组件有类似于表单控件的行为。

内置 behavior 往往会为组件添加一些属性。在没有特殊说明时，组件可以覆盖这些属性来改变它的 type 或添加 observer 。

wx://form-field

使自定义组件有类似于表单控件的行为。 form 组件可以识别这些自定义组件，并在 submit 事件中返回组件的字段名及其对应字段值。这将为它添加以下两个属性。

组件间关系

定义和使用组件间关系

有时需要实现这样的组件：

<custom-ul>  <custom-li> item 1 </custom-li>  <custom-li> item 2 </custom-li></custom-ul>

这个例子中， custom-ul 和 custom-li 都是自定义组件，它们有相互间的关系，相互间的通信往往比较复杂。此时在组件定义时加入 relations 定义段，可以解决这样的问题。示例：

// path/to/custom-ul.jsComponent({  relations: {    './custom-li': {      type: 'child', // 关联的目标节点应为子节点      linked: function(target) {        // 每次有custom-li被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后      },      linkChanged: function(target) {        // 每次有custom-li被移动后执行，target是该节点实例对象，触发在该节点moved生命周期之后      },      unlinked: function(target) {        // 每次有custom-li被移除时执行，target是该节点实例对象，触发在该节点detached生命周期之后      }    }  },  methods: {    _getAllLi: function(){      // 使用getRelationNodes可以获得nodes数组，包含所有已关联的custom-li，且是有序的      var nodes = this.getRelationNodes('path/to/custom-li')    }  },  ready: function(){    this._getAllLi()  }})

// path/to/custom-li.jsComponent({  relations: {    './custom-ul': {      type: 'parent', // 关联的目标节点应为父节点      linked: function(target) {        // 每次被插入到custom-ul时执行，target是custom-ul节点实例对象，触发在attached生命周期之后      },      linkChanged: function(target) {        // 每次被移动后执行，target是custom-ul节点实例对象，触发在moved生命周期之后      },      unlinked: function(target) {        // 每次被移除时执行，target是custom-ul节点实例对象，触发在detached生命周期之后      }    }  }})

注意：必须在两个组件定义中都加入relations定义，否则不会生效。

关联一类组件

有时，需要关联的是一类组件，如：

<custom-form>  <view>    input    <custom-input></custom-input>  </view>  <custom-submit> submit </custom-submit></custom-form>

custom-form 组件想要关联 custom-input 和 custom-submit 两个组件。此时，如果这两个组件都有同一个behavior：

// path/to/custom-form-controls.jsmodule.exports = Behavior({  // ...})

// path/to/custom-input.jsvar customFormControls = require('./custom-form-controls')Component({  behaviors: [customFormControls],  relations: {    './custom-form': {      type: 'ancestor', // 关联的目标节点应为祖先节点    }  }})

// path/to/custom-submit.jsvar customFormControls = require('./custom-form-controls')Component({  behaviors: [customFormControls],  relations: {    './custom-form': {      type: 'ancestor', // 关联的目标节点应为祖先节点    }  }})

则在 relations 关系定义中，可使用这个behavior来代替组件路径作为关联的目标节点：

// path/to/custom-form.jsvar customFormControls = require('./custom-form-controls')Component({  relations: {    'customFormControls': {      type: 'descendant', // 关联的目标节点应为子孙节点      target: customFormControls    }  }})

relations 定义段

relations 定义段包含目标组件路径及其对应选项，可包含的选项见下表。

抽象节点

这个特性自小程序基础库版本 1.9.6 开始支持。

在组件中使用抽象节点

有时，自定义组件模版中的一些节点，其对应的自定义组件不是由自定义组件本身确定的，而是自定义组件的调用者确定的。这时可以把这个节点声明为“抽象节点”。

例如，我们现在来实现一个“选框组”（selectable-group）组件，它其中可以放置单选框（custom-radio）或者复选框（custom-checkbox）。这个组件的 wxml 可以这样编写：

<!-- selectable-group.wxml --><view wx:for="{{labels}}">  <label>    <selectable disabled="{{false}}"></selectable>    {{item}}  </label></view>