用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

:小程序開發前的準備工作之【深入封裝Component】

巴黎彩票计划 www.hknsi.icu Rolan 2019-5-14 00:50

在上一篇內容中主要總結了如何擴展小程序中的Page與Component函數,在開發過程中減少包的引入,這一篇則深入總結小程序自定義組件Component函數還有哪些可以進一步擴展的地方【demo地址】。優化點:優化組件定義默認 ...

在上一篇內容中主要總結了如何擴展巴黎彩票计划中的Page與Component函數,在開發過程中減少包的引入,這一篇則深入總結小程序自定義組件Component函數還有哪些可以進一步擴展的地方【demo地址】。

優化點:

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

編寫小程序自定義組件時 你是否是這樣?

Component({
  properties: {
    num: {
        type: Number,
        value: 2
    },
    name: {
        type: String,
        value: "abcdef..."
    },
    test: Object // 即使沒有默認值也要寫上數據類型
  },
  methods: {
    //...
  }
})
復制代碼
我還是比較喜歡像【data】對象初始化時的寫法:arrow_heading_down:
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監聽器屬性,用來監聽數據變化:arrow_heading_down:

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

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

默認要監聽某個參數的時候,都是需要寫在具體參數的對象內的,并且每個要監聽的數據都要聲明observer函數,通過改造后 可以統一監聽數據變動:arrow_heading_down:

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地址】

分享至 : QQ空間
收藏
原作者: 張牧歌 來自: 掘金
福彩选四开奖公告 2o17六开彩开奖结果 极速赛车怎么买比较稳 足球彩票14场对阵 足球比赛半全场开奖结果 时时彩为什么20分才开 幸运飞艇开奖记录手机版 今日体彩大乐透开奖号码排3开奖 黑龙江省福彩p62开奖结果查询 双色球期走势图带连线图带坐标准 混合动力是什么 腾讯彩票开奖查询 快三走势图吉林快三 河南游泳夺金开奖号码50331期 11选5在线计划网站 3d试机号今晚上金吗