• behaviors
  • 定義和使用 behaviors
  • 字段的覆蓋和組合規(guī)則
  • 內(nèi)置 behaviors
    • swan://form-field
    • swan://component-export

behaviors

定義和使用 behaviors

定義：behaviors 用于組件間代碼共享，類似于一些編程語言中的“mixins”或“traits”。

創(chuàng)新互聯(lián)制作網(wǎng)站網(wǎng)頁找三站合一網(wǎng)站制作公司,專注于網(wǎng)頁設計,網(wǎng)站建設、網(wǎng)站制作,網(wǎng)站設計,企業(yè)網(wǎng)站搭建,網(wǎng)站開發(fā),建網(wǎng)站業(yè)務,680元做網(wǎng)站,已為上千服務,創(chuàng)新互聯(lián)網(wǎng)站建設將一如既往的為我們的客戶提供最優(yōu)質(zhì)的網(wǎng)站建設、網(wǎng)絡營銷推廣服務!

• 每個 behavior 可以包含一組屬性、數(shù)據(jù)、生命周期函數(shù)和方法，組件引用它時，它的屬性、數(shù)據(jù)和方法會被合并到組件中，生命周期函數(shù)也會在對應時機被調(diào)用。
• 每個組件可以引用多個 behavior 。 同時該 behavior 也可以引用其它 behavior 。
• behavior 需要使用 Behavior() 構(gòu)造器定義。

代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

 
 
 

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

組件引用時，需在 behaviors 定義段中將它們逐個列出。
代碼示例

 
 
 

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

通過上面的例子可知：

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

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

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

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

內(nèi)置 behaviors

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

代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

 
 
 

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

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

swan://form-field

解釋：使自定義組件有類似于表單控件的行為。
form 組件可以識別這些自定義組件，并在 submit 事件中返回組件的字段名及其對應字段值。這將為它添加以下兩個屬性:

屬性名	類型	描述	最低版本
name	String	在表單中的字段名	1.13.29
value	任意	在表單中的字段值	1.13.29

swan://component-export

從基礎庫版本 2.0.5 開始提供支持。

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

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

代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

 
 
 

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

 
 
 

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

當前題目：創(chuàng)新互聯(lián)百度小程序教程：behaviors
URL標題：http://www.dlmjj.cn/article/dhgjscd.html