小程序开发前的准备工作之【深入封装Component】

在上一篇内容中主要总结了如何扩展小程序中的Page与Component函数，在开发过程中减少包的引入，这一篇则深入总结小程序自定义组件Component函数还有哪些可以进一步扩展的地方【demo地址】。

优化点：

• 优化组件定义默认值时声明的写法
• 自定义watch函数监听全部参数变化

编写小程序自定义组件时 你是否是这样？

Component({
  properties: {
    num: {
        type: Number,value: 2
    },51); font-weight: 700;">name: {
        type: String,51); font-weight: 700;">value: "abcdef..."
    },51); font-weight: 700;">test: Object // 即使没有默认值也要写上数据类型
  },51); font-weight: 700;">methods: {
    //...
  }
})
复制代码

,51); font-weight: 700;">test: {}
  },136);">//...
  }
})
复制代码

开始改造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;
  'string') String;
  'boolean') Boolean;

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

  return null;
}
复制代码

组件声明默认数据格式的修改就弄好了，其实这个东西并没有对开发上起到多么明显的优化，无非就是少写几个字而已，但是以此demo 还可以扩展出更多功能。

监听组件传入参数变化

小程序自定义组件的传入数据上可以声明observer监听器属性，用来监听数据变化:arrow_heading_down:

其中observer接收的参数分别是newVal[改变的参数]、oldVal[改变之前的参数]、changedPath[具体改变的参数的key]

默认要监听某个参数的时候，都是需要写在具体参数的对象内的，并且每个要监听的数据都要声明observer函数，通过改造后 可以统一监听数据变动:arrow_heading_down:
Component({
  props: {
    num: 'abcdefg....',methods: {
    // 自定义添加的监听方法
    $watch(newVal,changedPath) {
        if (changedPath == 'num' && newVal == 5) {
            this.data.name = 'five';
            return this.triggerEvent("isFive")
        }
        //...
    }
  }
})
复制代码
相比每个参数都要监听 这种写法可以减少代码。
实现$watch：
实现步骤：获取自定义props对象 -> 还原成properties格式 -> 每一个数据内都添加observer函数 -> 函数在触发时 调用自身$watch函数
这样就可以实现$watch方法啦！【demo地址】

                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!