淺析小程式中什麼是behaviors？怎麼建立和使用？

什麼是 behaviors

behaviors 是小程式中用於實現元件程式碼共用的特性，作用類似 Vue.js 中的 mixins。比如在多個元件中，有一部分程式碼是完全一樣的，我們沒有必要每個元件寫一遍，為了方便，我們可以把這部分程式碼封裝出來，放在 behaviors 中進行共用，誰用到這部分程式碼，直接參照就可以生效

behaviors 的工作方式

• 在小程式中，每個 behaviors 都可以包含一組屬性、資料、生命週期和方法。元件參照它時，它的屬性、資料和方法會被合併到元件中。
• 每個元件中可以參照多個 behaviors ，每個 behaviors 之間也可以相互參照

behaviors 的建立

呼叫 behaviors(Object Object) 方法就可以建立一個共用的 behaviors 範例物件，供所有的元件使用

//使用 module.exports 將 behavior 範例物件共用出去
module.exports = Behavior({
    
    //私有資料節點
    data: { },
    
    //屬性節點
    properties: { },
    
    //事件處理
    methods: {  }
})

behaviors 的匯入與使用

在元件中，使用 require() 方法匯入需要的 behaviors，掛載後即可存取 behaviors 中的資料或方法

//1.使用 `require()` 匯入需要的自定義 behaviors 模組
const myBehaviors = require("../../behaviors/behaviors")

Component({

  //2. 將匯入的 behaviors 範例物件，掛載到 behaviors陣列的節點中便可以使用
  behaviors: [myBehaviors],
  
  properties: {
    //...
  }
  
  //其他程式碼...
})

behaviors 中所有可用的節點

比較常用的有 properties、data、methods、behaviors

同名欄位的覆蓋和組合規則

元件和它參照的 behaviors 中可以包含同名的欄位，此時可以參考以下三種同名的處理規則

• 同名的資料欄位 （data）

  • 若同名的資料欄位都是物件型別，會進行物件合併
  • 其餘情況會進行資料覆蓋，覆蓋規則： 元件 > 父 behaviors > 子 behaviors 、靠後的 behaviors > 靠前的 behaviors（優先順序高的覆蓋優先順序低的，最大的優先順序最高）

• 同名的屬性(properties)或方法(methods)

  • 若元件本身有這個屬性或方法，則元件的屬性或方法會覆蓋 behaviors 中的同名屬性或方法
  • 若元件本身無這個屬性或方法，則在元件的 behaviors 欄位中定義靠後的 behaviors 的屬性或方法會覆蓋靠前的同名屬性或方法
  • 在上一條基礎上，若存在巢狀參照 behaviors 的情況，規則是：父 behaviors 覆蓋 子 behaviors中同名的屬性或方法

• 同名的生命週期函數

  • 對於不同生命週期函數之間，遵循元件生命週期函數的順序
  • 對於同種生命週期函數，遵循如下規則
    • behaviors 優先於元件執行
    • 子 behaviors 優先於父 behaviors執行
    • 靠前的 behaviors 優先於靠後的 behaviors 執行
  • 如果同一個 behaviors 被一個元件多次參照，它會定義生命週期函數只會被執行一次

【相關學習推薦：】

以上就是淺析小程式中什麼是behaviors？怎麼建立和使用？的詳細內容，更多請關注TW511.COM其它相關文章！