summary

In a word, behaviors are features used to share code between components, similar to ‘mixins’ or ‘traits’ in some programming languages.

A. Each behaviors contains A set of properties, data, lifecycle functions, and custom methods -> When A component references it, the properties, data, lifecycle functions, and custom methods are incorporated into the component, and lifecycle functions are invoked at the appropriate time. B. Each component can reference multiple behaviors or other behaviors.

The Demo presentation

The following is mainly posted the main code, can be copied to run.

Json {"usingComponents": {"test-comp": ".. /components/testComp/testComp" } }Copy the code
} -- {{myCompProperty}}</view> <view> Data: {{myBehaviorData}} -- {{myCompData}}</view> <view bind:tap="myBehaviorMethod"> Activates the behavior's custom method </view> <view Bind :tap="myCompMethod"> </view> // component-level js import testBehavior from './testBehavior' Component({behaviors: [testBehavior], properties: { myCompProperty: { type: String, value: '' } }, data: { myCompData: 'myCompData' }, created: function (){ console.log('[my-component]- created') }, attached: function (){ console.log('[my-component]- attached') }, ready: function (){ console.log('[my-component]- ready') }, methods: { myCompMethod: function () { console.log('[my-component]- method') } } })Copy the code
// Behavior-level export default Behavior({Behaviors: [], properties: {myBehaviorProperty: {type: String, value: 'myBehaviorProperty' } }, data: { myBehaviorData: 'myBehaviorData' }, 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]- method') } } })Copy the code

Behavior Structure: Property: myBehaviorProperty Data: myBehaviorData Lifecycle: Created () && Attached () && Ready () myBehaviorMethod

Properties: myBehaviorProperty, myCompProperty Data: myBehaviorData, myCompData Lifecycle: Created () && Attached () && Ready () Custom methods: myBehaviorMethod and myCompMethod

Next, take a look at the results of the code: if you have questions about the output, take your time and read on.

The advanced demonstration

The previous Demo shows just the most basic behaviors. Now let’s see what happens when an attribute or data or lifecycle method or custom method of the same name is presented. 1. If the component has A property or method of the same name, the component overrides the behavior. B. If there are nested behaviors, the parent behaviors overwrite the child behaviors;

Demo Demo: Based on the above Demo code, add the following parts

<view bind:tap="sameMethod"> </view> { type: String, value: 'sameProperty-myCompProperty' } }, methods: { sameMethod: Function (){console.log('[my-component] -samemethod ')}} // sameProperty: {sameProperty: {type: String, value: 'sameProperty-myBehaviorProperty' } }, methods: { sameMethod: function (){ console.log('[my-behavior]- sameMethod') } }Copy the code

The code looks like this: The component’s namesake property overrides the behavior’s namesake property; Clicking custom methods triggers the component’s custom methods.

At this point, if you’re wondering what the representation would be if the property was an object, let’s look at it in action.

{{sameProperty &&sameProperty.val1}}</view> <view> <view> {{sameProperty &&sameProperty. val2} </view> // Component-level js properties: {sameProperty: {type: Object, value: {val1: '[my-component]- {sameProperty: {type: Object, value: {val1: '[my-behavior]- [my-behavior]- [my-behavior]- [my-behavior]- [my-behavior]Copy the code

This code is expressed as follows: attributes with the same name, even if they are object types, will only be overridden, as opposed to merging data with the same name.

2. If there is data with the same name A. If the data type is an object, merge the objects. B. Data of other types will be overwritten by component > Parent behavior > child behavior. Back behavior > front behavior;

Demo: For data is object & non object

// component-level js data: {sameObj: {val1: '[my-component]- the sameData type is an object '}, sameData: false}, ready: Function (){console.log('[my-component] -ready ') console.log('[my-behavior] -same name ', this.data.sameobj, SameObj: {val1: '[my-behavior] ', val2: }, sameData: true}, sameData: true},Copy the code

The above code is represented as follows: merge data objects with the same name, and overwrite data non-objects with the same name.

3. If there are life cycle functions with the same name -> will not be overwritten, but will be called one by one within the corresponding trigger time: A. The execution sequence of the component life cycle is followed between different life cycles. B. Same life cycle function: ① Behavior takes precedence over component execution; ② The child behavior takes precedence over the parent behavior; ③ The front behavior takes precedence over the back behavior. C. If the same behavior is referenced multiple times by a component, its defined lifecycle function is executed only once;

Application scenarios

Now that you know what the console output in the Demo is based on, what kind of application scenarios would consider using this property?

As shown in the figure below, there is a middle popover component && bottom popover component, which has the following cohesive function points:

A. When A condition is triggered, the popup window appears.

B. Click the mask layer to close the popover;

Consider whether the behaviors that pop-ups show and hide avoid having to write the same code logic twice.

Do not use the behaviors in Page; use!!!!!! only in Components

So if you come across a page where you really want to use the Behaviors attribute, try pulling out parts of the page into components and then referencing them.

The last

Behaviors are an array because we can introduce multiple behaviors, eg: [behaviorA, behaviorB, behaviorC,…]