Understanding WeChat Mini Program behaviors

WeChat mini program behaviors

1. What are behaviors?

Behaviors are features used for code sharing between components, similar to "mixins" or "traits" in some programming languages.

Each behavior can contain a set of properties, data, lifecycle functions and methods. When a component references it, its properties, data, and methods will be merged into the component, and the lifecycle functions will also be called at the corresponding time. Each component can reference multiple behaviors, and behavior can also reference other behaviors.

2. Create behavior

// my-behavior.js
// 调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象，供所有的组件使用。

// 调用 Behavior() 方法，创建实例对象

// 并使用 module.exports 将 behavior 实例对象共享出去
module.exports = Behavior({
    
    
  // behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。
// 每个 behavior 可以包含一组属性、数据、生命周期函数和方法。
// 组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 
// 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior
  behaviors: [],
    // 属性节点
  properties: {
    
    
    myBehaviorProperty: {
    
    
      type: String
    }
  },
   // 私有数据节点
  //  组件的内部数据，和 properties 一同用于组件的模板渲染
  data: {
    
    
    myBehaviorData: 'my-behavior-data'
  },
  // 组件生命周期函数 - 在组件实例刚刚被创建时执行，注意此时不能调用 setData )
  created: function () {
    
    
    console.log('[my-behavior] created')
  },
  // 组件生命周期函数 - 在组件实例进入页面节点树时执行)
  attached: function () {
    
    
    console.log('[my-behavior] attached')
  },
  // 组件生命周期函数 - 在组件布局完成后执行)
  ready: function () {
    
    
    console.log('[my-behavior] ready')
  },
  // 事件处理函数和自定义方法节点
  methods: {
    
    
    myBehaviorMethod: function () {
    
    
      console.log('[my-behavior] log by myBehaviorMehtod')
    },
  }
})

3. Import and use behavior in the component

// my-component.js
// 1、使用 require() 导入需要的自定义 behavior 模块
var myBehavior = require('my-behavior')

// 2 将导入的 behavior 实例对象，挂载到 behaviors 数组节点中，即可生效
Component({
    
    
  behaviors: [myBehavior],
  properties: {
    
    
    myProperty: {
    
    
      type: String
    }
  },
  data: {
    
    
    myData: 'my-component-data'
  },
  // 在组件实例刚刚被创建时执行 
  created: function () {
    
    
    console.log('[my-component] created')
  },
   // 在组件实例进入页面节点树时执行
  attached: function () {
    
     
    console.log('[my-component] attached')
  },
  // 在组件在视图层布局完成后执行
  ready: function () {
    
    
    console.log('[my-component] ready')
  },
  methods: {
    
    
    myMethod: function () {
    
    
      console.log('[my-component] log by myMethod')
    },
  }
})

// 对于不同的生命周期函数之间，遵循组件生命周期函数的执行顺序；
// 对于同种生命周期函数和同字段 observers ，遵循如下规则：
// behavior 优先于组件执行；
// 被引用的 behavior 优先于 引用者 behavior 执行；
// 靠前的 behavior 优先于 靠后的 behavior 执行；
// 如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数和 observers 不会重复执行。

In the above example, my-behavior is added to the my-component component definition.

And the my-behavior structure is:

• Property: myBehaviorProperty
• Data field: myBehaviorData
• Method: myBehaviorMethod
• Life cycle functions: attached, created, ready

This would make the final structure of my-component:

• Properties: myBehaviorProperty, myProperty
• Data fields: myBehaviorData, myData
• Method: myBehaviorMethod, myMethod
• Life cycle functions: attached, created, ready

When a component triggers the life cycle, the execution sequence of the life cycle functions in the above example is:

1. [my-behavior] created
2. [my-component] created
3. [my-behavior] attached
4. [my-component] attached
5. [my-behavior] ready
6. [my-component] ready

4. Coverage and combination rules for fields with the same name

Components and the behaviors they reference can contain fields with the same name. These fields are processed as follows:

• If there are properties or methods with the same name:
  1. If the component itself has this property or method, the component's properties or methods will override the behavior in Property or method with the same name;
  2. If the component itself does not have this property or method, the property or method of the later behavior defined in the component's behaviors field will override the earlier property or method of the same name. ;
  3. On the basis of 2, if there is a nested reference to behavior, the rule is: the referrer's behavior overrides the same-named attribute or method in the referenced behavior.

• If there is a data field with the same name:

  • If data fields with the same name are all object types, objects will be merged;
  • In other cases, data will be overwritten. The overwriting rules are: referrer behavior > referenced behavior, later behavior > earlier behavior. (The one with higher priority overrides the one with lower priority, and the largest one has the highest priority)

• Lifecycle functions and observers will not cover each other, but will be called one by one at the corresponding triggering time:

  • For different life cycle functions, follow the execution order of the component life cycle functions;
  • For the same kind of life cycle functions and the same field observers, follow the following rules:
    • behavior takes precedence over component execution;
    • The referenced behavior takes precedence over the referrer behavior;
    • The earlier behavior takes precedence over the later behavior;

• If the same behavior is referenced multiple times by a component, the lifecycle functions and observers defined by it will not be executed repeatedly.