小程序--behavior组件继承

在做小程序项目时，一个页面可能会拆分成很多组件去完成，一是方便代码复用，二是利于后期维护更新，使代码结构变得更为简洁。

提取公共行为，实现行为的继承

• 使用场景：在做项目时，往往会遇到多个组件中，有一部分行为是多个组件同时存在的，有可能是properties、data、methods以及一些生命周期函数内的行为。
• 解决办法：去除冗余代码，提取公共行为，实现组件继承；

举个?：
现有A、B、C三个组件，分别都存在页面传入的properties相同属性，如下：
三个组件的js代码：

Component({
  /**
   * 组件的属性列表
   */
  properties: { // 页面传入数据
  	img: String,
    content: String
  },

  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
  }
})

此时，我们可以对properties行为做公共提取，使结构更简洁，后期维护过程中，如果传入参数有变化，也只需要修改一处即可。

新建一个公共的behavior文件：public-beh.js

// 定义行为
let publicBeh = Behavior({
  /**
   * 组件的属性列表
   */
  properties: {
    img: String,
    content: String
  }
})

export { publicBeh } // 导出定义的行为

在A、B、C组件的js文件里引入公共行为文件：

import { publicBeh } from '../public-beh.js'
Component({
  // 继承公共行为
  behaviors: [publicBeh], // 可同时继承多个行为，比如[beh1, beh2, beh3 ...]
  /**
   * 组件的属性列表
   */
  properties: { // 删去原来在自身组件中定义的属性，使用继承的公共属性
  },

  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
  }
})

结语：这里只是拿properties给大家举个例子，behaviors继承同样也能继承data、methods、生命周期函数等行为，使用方法都是类似的。

注：

• 1.当组件继承多个相同行为时，或者当组件继承了某一行为，但自身组件里又定义了相同的行为，此时自身组件里的行为会覆盖继承的行为，与es6中类的继承同理。
• 2.特殊情况：对于生命周期函数–子继承父行为时，不会产生覆盖现象，会依次执行，其他情况定义的数据则会产生覆盖。