微信小程序 behaviors

behaviors

behaviors 是用于組件間代碼共享的特性，類(lèi)似于一些編程語(yǔ)言中的 “mixins” 或 “traits”。

每個(gè) behavior 可以包含一組屬性、數(shù)據(jù)、生命周期函數(shù)和方法。組件引用它時(shí)，它的屬性、數(shù)據(jù)和方法會(huì)被合并到組件中，生命周期函數(shù)也會(huì)在對(duì)應(yīng)時(shí)機(jī)被調(diào)用。 每個(gè)組件可以引用多個(gè) behavior ，behavior 也可以引用其它 behavior 。

詳細(xì)的參數(shù)含義和使用請(qǐng)參考 Behavior 參考文檔。

組件中使用

組件引用時(shí)，在 behaviors 定義段中將它們逐個(gè)列出即可。

代碼示例：

// my-component.js
var myBehavior = require('my-behavior')
Component({
  behaviors: [myBehavior],
  properties: {
    myProperty: {
      type: String
    }
  },
  data: {
    myData: 'my-component-data'
  },
  created: function () {
    console.log('[my-component] created')
  },
  attached: function () { 
    console.log('[my-component] attached')
  },
  ready: function () {
    console.log('[my-component] ready')
  },
  methods: {
    myMethod: function () {
      console.log('[my-component] log by myMethod')
    },
  }
})

在上例中， my-component 組件定義中加入了 my-behavior，

而 my-behavior 結(jié)構(gòu)為：

• 屬性：myBehaviorProperty
• 數(shù)據(jù)字段：myBehaviorData
• 方法：myBehaviorMethod
• 生命周期函數(shù)：attached、created、ready

這將使 my-component 最終結(jié)構(gòu)為：

• 屬性：myBehaviorProperty、myProperty
• 數(shù)據(jù)字段：myBehaviorData、myData
• 方法：myBehaviorMethod、myMethod
• 生命周期函數(shù)：attached、created、ready

當(dāng)組件觸發(fā)生命周期時(shí)，上例生命周期函數(shù)執(zhí)行順序?yàn)椋?/p>

1. [my-behavior] created
2. [my-component] created
3. [my-behavior] attached
4. [my-component] attached
5. [my-behavior] ready
6. [my-component] ready

詳細(xì)規(guī)則參考 同名字段的覆蓋和組合規(guī)則。

同名字段的覆蓋和組合規(guī)則

組件和它引用的 behavior 中可以包含同名的字段，對(duì)這些字段的處理方法如下：

• 如果有同名的屬性 (properties) 或方法 (methods)：若組件本身有這個(gè)屬性或方法，則組件的屬性或方法會(huì)覆蓋 behavior 中的同名屬性或方法；若組件本身無(wú)這個(gè)屬性或方法，則在組件的 behaviors 字段中定義靠后的 behavior 的屬性或方法會(huì)覆蓋靠前的同名屬性或方法；在 2 的基礎(chǔ)上，若存在嵌套引用 behavior 的情況，則規(guī)則為：父 behavior 覆蓋 子 behavior 中的同名屬性或方法。
• 如果有同名的數(shù)據(jù)字段 (data)：若同名的數(shù)據(jù)字段都是對(duì)象類(lèi)型，會(huì)進(jìn)行對(duì)象合并；其余情況會(huì)進(jìn)行數(shù)據(jù)覆蓋，覆蓋規(guī)則為：組件 > 父 behavior > 子 behavior 、 靠后的 behavior > 靠前的 behavior。（優(yōu)先級(jí)高的覆蓋優(yōu)先級(jí)低的，最大的為優(yōu)先級(jí)最高）
• 生命周期函數(shù)不會(huì)相互覆蓋，而是在對(duì)應(yīng)觸發(fā)時(shí)機(jī)被逐個(gè)調(diào)用：對(duì)于不同的生命周期函數(shù)之間，遵循組件生命周期函數(shù)的執(zhí)行順序；對(duì)于同種生命周期函數(shù)，遵循如下規(guī)則：behavior 優(yōu)先于組件執(zhí)行；子 behavior 優(yōu)先于 父 behavior 執(zhí)行；靠前的 behavior 優(yōu)先于 靠后的 behavior 執(zhí)行；如果同一個(gè) behavior 被一個(gè)組件多次引用，它定義的生命周期函數(shù)只會(huì)被執(zhí)行一次。

代碼示例：

在開(kāi)發(fā)者工具中預(yù)覽效果

內(nèi)置 behaviors

自定義組件可以通過(guò)引用內(nèi)置的 behavior 來(lái)獲得內(nèi)置組件的一些行為。

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

在上例中， wx://form-field 代表一個(gè)內(nèi)置 behavior ，它使得這個(gè)自定義組件有類(lèi)似于表單控件的行為。

內(nèi)置 behavior 往往會(huì)為組件添加一些屬性。在沒(méi)有特殊說(shuō)明時(shí)，組件可以覆蓋這些屬性來(lái)改變它的 type 或添加 observer 。

wx://form-field

使自定義組件有類(lèi)似于表單控件的行為。 form 組件可以識(shí)別這些自定義組件，并在 submit 事件中返回組件的字段名及其對(duì)應(yīng)字段值。

詳細(xì)用法以及代碼示例可見(jiàn)：form 組件參考文檔

wx://form-field-group

從基礎(chǔ)庫(kù)版本 2.10.2 開(kāi)始提供支持。

使 form 組件可以識(shí)別到這個(gè)自定義組件內(nèi)部的所有表單控件。

詳細(xì)用法以及代碼示例可見(jiàn)：form 組件參考文檔

wx://form-field-button

從基礎(chǔ)庫(kù)版本 2.10.3 開(kāi)始提供支持。

使 form 組件可以識(shí)別到這個(gè)自定義組件內(nèi)部的 button 。如果自定義組件內(nèi)部有設(shè)置了 form-type 的 button ，它將被組件外的 form 接受。

詳細(xì)用法以及代碼示例可見(jiàn)：form 組件參考文檔

wx://component-export

從基礎(chǔ)庫(kù)版本 2.2.3 開(kāi)始提供支持。

使自定義組件支持 export 定義段。這個(gè)定義段可以用于指定組件被 selectComponent 調(diào)用時(shí)的返回值。

詳細(xì)用法以及代碼示例可見(jiàn)：selectComponent 參考文檔