Extending a behavior

0.3.0+

Extending a behavior could be useful if you have a family of behaviors that are related or share methods but have some minor differences between them.

Imagine a parent behavior like:

import { createBehavior } from '@area17/a17-behaviors';

const Parent = createBehavior('Parent',
    {
        logFoo() {
            console.log(this.foo);
        },
    },
    {
        init() {
            this.foo = 'foo';
            this.logFoo();
        },
    }
);

export default Parent;

And a child behavior, which extends this parent:

import { extendBehavior } from '@area17/a17-behaviors';
import Parent from './Parent'

const Child = extendBehavior(Parent, 'Child', {
    logFoo() {
        console.log(`foo = ${ this.foo }`);
    },
});

export default Child;

And in your HTML:

<div data-behavior="Parent"></div>
<div data-behavior="Child"></div>

Then in the browser developer console you would see:

foo                                 Parent.js:6
foo = foo                           Child.js:6

As the Child behavior is an extended version of the Parent behavior - where the logFoo method has been replaced with a new one. This Child behavior logFoo has access to all the methods and properties from Parent and so is able to see and log out this.foo. And both behaviors are running because both are called from the HTML.

Imagine these behaviors with that same HTML:

<div data-behavior="Parent"></div>
<div data-behavior="Child"></div>

import { createBehavior } from '@area17/a17-behaviors';

const Parent = createBehavior('Parent',
    {
        logFoo() {
            this.bar = 'parent-bar';
            console.log(this.foo);
        },
    },
    {
        init() {
            this.foo = 'parent-foo';
            this.logFoo();
        },
    }
);

export default Parent;

And a child behavior, which extends this parent:

import { extendBehavior } from '@area17/a17-behaviors';
import Parent from './Parent'

const Child = extendBehavior(Parent, 'Child', {
    logBar() {
        console.log(this.bar);
    },
    {
        init() {
            this.foo = 'child-foo';
            this.bar = 'child-bar';
            this.returnFoo();
            this.returnBar();
        },
    }
});

export default Child;

This time, in the developer console you'll see:

parent-foo                             Parent.js:6
child-foo                              Parent.js:6
parent-bar                             Child.js:6

As this time the Child behavior is Parent extended to have a different init lifecycle method, a new logBar method but it uses the existing Parent logFoo method and logFoo updates this.bar within the Child behavior.