小程序自定义组件的组件功能全面总结

优化点：

• 优化定义组件默认值时的声明书写方式
• 调整watch功能，监控所有参数变化

---

当你编写小程序的自定义组件时，你会这样做吗？

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

我还是更喜欢初始化[数据]对象时的write方法⤵️

Component({
  props: {
    num: 2,
    name: 'abcdef...',
    test: {}
  },
  methods: {
    //...
  }
})
复制代码

开始转换属性：

现在我们可以重写Component函数了，有一种方法可以将此数据[转换]为我们想要的想要那种结构格式，打开功能部分 Init.js Component

，实现步骤大概是：获取参数中名为 props 的对象 -> 获取各个数据类型 -> 恢复成小程序原来的数据格式 - > 将值重新分配给组件属性

// 优化 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;
}
复制代码

并声明对默认数据格式的更改。其实这个东西并没有显着优化开发。只是少写了几句话，但演示也可以用它来扩展。推出更多功能。

---

监听组件传递过来的参数变化

可以在小程序自定义组件传入的数据上声明observer属性来监听数据变化⤵️

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

观察者接收到的参数是newVal[变化的参数] , oldVal[更改前的参数],changePath[具体更改参数的key]

当要监控某个参数时，必须默认写入到具体参数的对象中，并且对于每个监控数据。必须声明观察员角色。修改后可以统一监控数据变化⤵️

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对象->恢复为属性格式->为每个数据添加观察者函数->函数触发时调用自己的$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方法可以执行！ 【演示地址】

作者：张木格
链接：https://juejin.im/post/5cd84d4f51882569677f79aa
来源：掘金
版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明出处。