百度智能小程序 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 。 同時(shí)該 behavior 也可以引用其它 behavior 。
• behavior 需要使用 Behavior() 構(gòu)造器定義。

代碼示例 

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

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

代碼示例

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

通過(guò)上面的例子可知：

• my-behavior 中包含有 myBehaviorProperty 屬性、 myBehaviorData 數(shù)據(jù)字段、 myBehaviorMethod 方法和一個(gè) attached 生命周期函數(shù)。
• 在 my-component 組件定義中引入了 my-behavior.js 。這將使得 my-component 中最終包含 myBehaviorProperty 、 myProperty 兩個(gè)屬性， myBehaviorData 、 myData 兩個(gè)數(shù)據(jù)字段，和 myBehaviorMethod 、 myMethod 兩個(gè)方法。當(dāng)組件觸發(fā) attached 生命周期時(shí)，會(huì)依次觸發(fā) my-behavior.js 中的 attached 生命周期函數(shù)和 my-component.js 中的 attached 生命周期函數(shù)。

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

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

• 如果有同名的屬性或方法，組件本身的屬性或方法會(huì)覆蓋 behavior 中的屬性或方法；
• 如果引用了多個(gè) behavior，在定義段中靠后 behavior 中的屬性或方法會(huì)覆蓋靠前的屬性或方法；
• 如果有同名的數(shù)據(jù)字段，如果數(shù)據(jù)是對(duì)象類(lèi)型，會(huì)進(jìn)行對(duì)象合并，如果是非對(duì)象類(lèi)型則會(huì)進(jìn)行相互覆蓋；
• 生命周期函數(shù)不會(huì)相互覆蓋，而是在對(duì)應(yīng)觸發(fā)時(shí)機(jī)被逐個(gè)調(diào)用。如果同一個(gè) behavior 被一個(gè)組件多次引用，它定義的生命周期函數(shù)只會(huì)被執(zhí)行一次。

內(nèi)置 behaviors

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

代碼示例 

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

• 在上例中， swan://form-field 代表一個(gè)內(nèi)置 behavior，它使得這個(gè)自定義組件有類(lèi)似于表單控件的行為。
• 內(nèi)置 behavior 往往會(huì)為組件添加一些屬性。在沒(méi)有特殊說(shuō)明時(shí)，組件可以覆蓋這些屬性來(lái)改變它的 type 或添加 observer 。

swan://form-field

解釋?zhuān)菏棺远x組件有類(lèi)似于表單控件的行為。form 組件可以識(shí)別這些自定義組件，并在 submit 事件中返回組件的字段名及其對(duì)應(yīng)字段值。這將為它添加以下兩個(gè)屬性:

swan://component-export

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

解釋?zhuān)菏棺远x組件支持 export 定義段。這個(gè)定義段可以用于指定組件被 selectComponent 調(diào)用時(shí)的返回值。

未使用這個(gè)定義段時(shí)， selectComponent 將默認(rèn)返回自定義組件的 this 。使用這個(gè)定義段時(shí)，將以這個(gè)定義段的函數(shù)返回值代替。

代碼示例 

// 自定義組件的js文件
Component({
    behaviors: ['swan://component-export'],
    export() {
        return { componentField: 'componentValue' }
    }
});

<!-- 使用自定義組件時(shí)，對(duì)于自定義組件的引用模板 -->
<my-component id="custom-id" />

this.selectComponent('#custom-id') // 等于 { componentField: 'componentValue' }