1. 程式人生 > >小程式學習--行為構建器Behavior的編寫(元件的公共js封裝)

小程式學習--行為構建器Behavior的編寫(元件的公共js封裝)

運用這個構建器的環境是:編寫了三個元件,元件的js中的外部資料,也就是properties下的變數都是重複的,

在這種情況,是不是每次編寫元件的js時候,都要複製同樣的變數到對應的js中,所以我們採取行為構建器的方法,、

把相同的部分也提取出來,這樣有便於維護和程式碼的複用性!

首先在建立一個js檔案,classic-beh.js

// 構造器--構造行為
//行為能夠被其他元件一起使用
const classicBeh = Behavior({
  properties: {
    img: String,
    content: String,
    hidden: Boolean
  },
  attached:function(){

  },
  data:{

  },
  methods:{

  },

})

export {classicBeh}

從程式碼中可以看出,三個元件的外部資料都是img,content以及hidden,所以我們在行為構建器中提取出來,

記得export匯出才能呼叫

接下來,我們去三個元件中的其中一個元件的js中,進行程式碼優化改寫:

//匯入行為構建器  classic-beh.js
import { classicBeh} from '../classic-beh.js'
Component({
  /**
   * 元件的屬性列表
   */
  //繼承行為
  behaviors: [classicBeh],
  properties: {
      
    
  },

  /**
   * 元件的初始資料
   */
  data: {
    
  },

  /**
   * 元件的方法列表
   */
  methods: {

  }
})

可以看到我們先是把行為構建器匯入(import),然後繼承這個行為,behaviors:[classicBeh],

可以看到這時候的properties裡面的外部資料是空的,因為全部都被提取到行為構建器中了。


特殊情況下的處理:

如果這時候需要繼承多個行為構建器:

那麼在程式碼的上方匯入之後,然後在陣列中隔開,進行繼承  behaviors: [classicBeh,B,C,D],

這時候properties裡面還要在傳一個名字相同但是資料型別不一樣的變數時候,那麼該如果取捨,

是拿行為構建器的值還是自身的值,根據規則,這時候的自身的值會覆蓋掉行為構建器的值!子類會覆蓋父類

再來,另外一個情況 陣列中三個都有相同的變數,這時候,也還是檔案自身的子類會覆蓋,

最後一種情況:

如果properties裡面都沒有值,只有陣列中三個行為構建器,那麼這時候,這三個行為優先顯示的是最後一個行為構建器。

另外在attached生命週期函式中,不會出現上述的覆蓋現象,他會一次呼叫每個行為構建器中的attached生命週期函式!

喜歡的點個贊哦!歡迎進行交流!