小程序開發前的準備工做之【深刻封裝Component】

在上一篇內容中主要總結了如何擴展小程序中的Page與Component函數，在開發過程當中減小包的引入，這一篇則深刻總結小程序自定義組件Component函數還有哪些能夠進一步擴展的地方【demo地址】。

優化點：

• 優化組件定義默認值時聲明的寫法
• 自定義watch函數監聽所有參數變化

---

編寫小程序自定義組件時 你是不是這樣？

Component({
  properties: {
    num: {
        type: Number,
        value: 2
    },
    name: {
        type: String,
        value: "abcdef..."
    },
    test: Object // 即便沒有默認值也要寫上數據類型
  },
  methods: {
    //...
  }
})
複製代碼

我仍是比較喜歡像【data】對象初始化時的寫法⤵️

Component({
  props: {
    num: 2,
    name: 'abcdef...',
    test: {}
  },
  methods: {
    //...
  }
})
複製代碼

開始改造properties：

既然咱們已經能夠重寫Component函數了，那就有辦法把這個數據【轉換】成咱們要的那種結構格式，打開Init.js Component函數部分

實現的步驟大概是：取到參數內名爲props的對象 -> 獲取每個數據類型 -> 還原成小程序原來的數據格式 -> 從新賦值給properties

// 優化 properties 傳入方式
let originComponent = Component;
Component = (opt) => {
  let { props = {} } = opt;
  let properties = {};
  // 獲取自定義關鍵字【props】中的每一項
  Object.keys(props).forEach(item => {
    // 從新還原成原有數據格式
    properties[item] = {
      type: getValueType(props[item]), // 獲取數據格式
      value: props[item]
    }
  });
  opt.properties = properties; // 還給properties...
  //...
  return originComponent(opt)
}


/**
 * 獲取數據類型
 * @param value
 * @returns {*}
 */
function getValueType(value) {
  if (typeof value === 'number') return Number;
  if (typeof value === 'string') return String;
  if (typeof value === 'boolean') return Boolean;

  if (value instanceof Object && !value instanceof Array) return Object;
  if (value instanceof Array) return Array;

  return null;
}
複製代碼

組件聲明默認數據格式的修改就弄好了，其實這個東西並無對開發上起到多麼明顯的優化，無非就是少寫幾個字而已，可是以此demo 還能夠擴展出更多功能。

---

監聽組件傳入參數變化

小程序自定義組件的傳入數據上能夠聲明observer監聽器屬性，用來監聽數據變化⤵️

Component({
  properties: {
    num: {
        type: Number,
        value: 2,
        observer (newVal, oldVal, changedPath) {
            //...
        }
    },
  },
  methods: {
    //...
  }
})
複製代碼

其中observer接收的參數分別是newVal[改變的參數]、oldVal[改變以前的參數]、changedPath[具體改變的參數的key]

默認要監聽某個參數的時候，都是須要寫在具體參數的對象內的，而且每一個要監聽的數據都要聲明observer函數，經過改造後 能夠統一監聽數據變更⤵️

Component({
  props: {
    num: 2,
    name: 'abcdefg....',
  },
  methods: {
    // 自定義添加的監聽方法
    $watch(newVal, oldVal, changedPath) {
        if (changedPath == 'num' && newVal == 5) {
            this.data.name = 'five';
            return this.triggerEvent("isFive")
        }
        //...
    }
  }
})
複製代碼

相比每一個參數都要監聽 這種寫法能夠減小代碼。

實現$watch：

實現步驟：獲取自定義props對象 -> 還原成properties格式 -> 每個數據內都添加observer函數 -> 函數在觸發時 調用自身$watch函數

// 優化 properties 傳入方式
let originComponent = Component;
Component = (opt) => {
  let { props = {} } = opt;
  let properties = {};
  // 獲取自定義關鍵字【props】中的每一項
  Object.keys(props).forEach(item => {
    // 從新還原成原有數據格式
    properties[item] = {
      type: _util.getValueType(props[item]),
      value: props[item],
      // 每個數據都添加observer方法監聽
      observer: function (newVal, oldVal, changedPath) {
        const changeEvent = {
          event: item,
          newVal, oldVal, changedPath
        };
        // 傳入屬性可經過組件內定義的$watch方法統一監聽變化
        this.$watch && this.$watch(changeEvent);
      }
    }
  });
  opt.properties = properties; // 還給properties...
  //...
  return originComponent(opt)
}


/**
 * 獲取數據類型
 * @param value
 * @returns {*}
 */
function getValueType(value) {
  if (typeof value === 'number') return Number;
  if (typeof value === 'string') return String;
  if (typeof value === 'boolean') return Boolean;

  if (value instanceof Object && !value instanceof Array) return Object;
  if (value instanceof Array) return Array;

  return null;
}
複製代碼

這樣就能夠實現$watch方法啦！【demo地址】