自定義組件擴展

為了更好定制自定義組件的功能，可以使用自定義組件擴展機制。

創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來，先為伊州等服務(wù)建站，伊州等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為伊州企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

從小程序基礎(chǔ)庫版本 2.0.5 開始支持。

擴展后的效果

為了更好的理解擴展后的效果，在此舉例說明：

代碼示例

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

在 WEB IDE 中打開

 
 
 
  
  
  // behavior.js
  
  
  module.exports = Behavior({
  
  
   definitionFilter(defFields) {
  
  
   defFields.data.from = 'behavior'
  
  
   }
  
  
  })
  
  
  
  
  
  // component.js
  
  
  Component({
  
  
   data: {
  
  
   from: 'component'
  
  
   },
  
  
   behaviors: [require('./behavior.js')],
  
  
   ready() {
  
  
   // 此處會發(fā)現(xiàn)輸出 behavior 而不是 component
  
  
   console.log(this.data.from) 
  
  
   }
  
  
  });

通過例子可以發(fā)現(xiàn)，自定義組件的擴展其實就是提供了修改自定義組件定義段的能力。

使用擴展

Behavior() 構(gòu)造器提供了新的定義段 definitionFilter，用于支持自定義組件擴展。 definitionFilter 是一個函數(shù)，在被調(diào)用時會注入兩個參數(shù)：

第一個參數(shù)是使用該 behavior 的 component/behavior 的定義對象；
第二個參數(shù)是該 behavior 所使用的 behavior 的 definitionFilter 函數(shù)列表。

代碼示例

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

在 WEB IDE 中打開

 
 
 
  
  
  // behavior3.js
  
  
  module.exports = Behavior({
  
  
   definitionFilter(defFields, definitionFilterArr) {}
  
  
  });
  
  
  
  
  
  // behavior2.js
  
  
  module.exports = Behavior({
  
  
   behaviors: [require('./behavior3.js')],
  
  
   definitionFilter(defFields, definitionFilterArr) {
  
  
   // definitionFilterArr[0](defFields)
  
  
   }
  
  
  });
  
  
  
  
  
  // behavior1.js
  
  
  module.exports = Behavior({
  
  
   behaviors: [require('./behavior2.js')],
  
  
   definitionFilter(defFields, definitionFilterArr) {}
  
  
  });
  
  
  
  
  
  // component.js
  
  
  Component({
  
  
   behaviors: [require('./behavior1.js')]
  
  
  });

說明：

上述代碼中聲明了 1 個自定義組件和 3 個 behavior，每個 behavior 都使用了 definitionFilter 定義段。按照聲明的順序會有如下事情發(fā)生：

當進行 behavior2 的聲明時就會調(diào)用 behavior3 的 definitionFilter 函數(shù)，其中 defFields 參數(shù)是 behavior2 的定義段， definitionFilterArr 參數(shù)即為空數(shù)組，因為 behavior3 沒有使用其他的 behavior 。
當進行 behavior1 的聲明時就會調(diào)用 behavior2 的 definitionFilter 函數(shù)，其中 defFields 參數(shù)是 behavior1 的定義段， definitionFilterArr 參數(shù)是一個長度為 1 的數(shù)組，definitionFilterArr[0] 即為 behavior3 的 definitionFilter 函數(shù)，因為 behavior2 使用了 behavior3。用戶在此處可以自行決定在進行 behavior1 的聲明時要不要調(diào)用 behavior3 的 definitionFilter 函數(shù)，如果需要調(diào)用，在此處補充代碼 definitionFilterArr[0](defFields) 即可，definitionFilterArr 參數(shù)會由基礎(chǔ)庫補充傳入。
同理，在進行 component 的聲明時就會調(diào)用 behavior1 的 definitionFilter 函數(shù)。

簡單概括，definitionFilter 函數(shù)可以理解為當 A 使用了 B 時，A 聲明就會調(diào)用 B 的 definitionFilter 函數(shù)并傳入 A 的定義對象讓 B 去過濾。此時如果 B 還使用了 C 和 D，那么 B 可以自行決定要不要調(diào)用 C 和 D 的 definitionFilter 函數(shù)去過濾 A 的定義對象。

真實案例

下面利用擴展簡單實現(xiàn)自定義組件的計算屬性功能:

代碼示例

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

在 WEB IDE 中打開

 
 
 
  
  
  // behavior1.js
  
  
  module.exports = Behavior({
  
  
   lifetimes: {
  
  
   created() {
  
  
   // 原始 setData
  
  
   this._originalSetData = this.setData 
  
  
   // 封裝后的 setData
  
  
   this.setData = this.methods._setData 
  
  
   }
  
  
   },
  
  
   definitionFilter(defFields) {
  
  
   const computed = defFields.computed || {}
  
  
   const computedKeys = Object.keys(computed)
  
  
   const computedCache = {}
  
  
  
  
  
   // 計算 computed
  
  
   const calcComputed = (scope, insertToData) => {
  
  
   const needUpdate = {}
  
  
   const data = defFields.data = defFields.data || {}
  
  
  
  
  
   for (let key of computedKeys) {
  
  
   // 計算新值
  
  
   const value = computed[key].call(scope) 
  
  
   if (computedCache[key] !== value) needUpdate[key] = computedCache[key] = value
  
  
   // 直接插入到 data 中，初始化時才需要的操作
  
  
   if (insertToData) data[key] = needUpdate[key] 
  
  
   }
  
  
  
  
  
   return needUpdate
  
  
   }
  
  
  
  
  
   // 重寫 setData 方法
  
  
   defFields.methods = defFields.methods || {}
  
  
   defFields.methods._setData = function (data, callback) {
  
  
   // 原始 setData
  
  
   const originalSetData = this._originalSetData 
  
  
   // 做 data 的 setData
  
  
   originalSetData.call(this, data, callback) 
  
  
   // 計算 computed
  
  
   const needUpdate = calcComputed(this) 
  
  
   // 做 computed 的 setData
  
  
   originalSetData.call(this, needUpdate) 
  
  
   }
  
  
  
  
  
   // 初始化 computed
  
  
   // 計算 computed
  
  
   calcComputed(defFields, true) 
  
  
   }
  
  
  })

 
 
 
  
  
  // 在組件js中
  
  
  const beh = require('./behavior1.js')
  
  
  Component({
  
  
   behaviors: [beh],
  
  
   data: {
  
  
   a: 0,
  
  
   },
  
  
   computed: {
  
  
   b() {
  
  
   return this.data.a + 100
  
  
   },
  
  
   },
  
  
   methods: {
  
  
   onTap() {
  
  
   this._originalSetData({
  
  
   a: ++this.data.a,
  
  
   })
  
  
   }
  
  
   }
  
  
  })

 
 
 
  
  
  
  
  
  data: {{a}}
  
  
  computed: {}

文章題目：創(chuàng)新互聯(lián)百度小程序教程：自定義組件擴展
網(wǎng)站URL：http://m.fisionsoft.com.cn/article/dhhised.html

新聞中心

自定義組件擴展

擴展后的效果

使用擴展

真實案例

其他資訊