-
Notifications
You must be signed in to change notification settings - Fork 386
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* mixin and components * Add mixin doc * Apply feedback
- Loading branch information
Janny
authored
Oct 30, 2017
1 parent
0f8ab82
commit 38760d5
Showing
5 changed files
with
207 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
--- | ||
lang: en | ||
title: 'Language-related Concepts' | ||
keywords: LoopBack 4.0, LoopBack 4 | ||
tags: | ||
sidebar: lb4_sidebar | ||
permalink: /doc/en/lb4/Language-related-concepts.html | ||
summary: | ||
--- | ||
|
||
A module that exports JavaScript/TypeScript concept related functions. | ||
|
||
- [**Mixin**](Mixin.html): Add properties and methods to a class. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,124 @@ | ||
--- | ||
lang: en | ||
title: 'Mixin' | ||
keywords: LoopBack 4.0, LoopBack 4 | ||
tags: | ||
sidebar: lb4_sidebar | ||
permalink: /doc/en/lb4/Mixin.html | ||
summary: | ||
--- | ||
|
||
It is a commonly used JavaScript/TypeScript strategy to extend a class with new properties and methods. | ||
|
||
A good approach to apply mixins is defining them as sub-class factories. | ||
Then declare the new mixed class as: | ||
|
||
```js | ||
class MixedClass extends MixinFoo(MixinBar(BaseClass)) {}; | ||
``` | ||
|
||
Check article [real mixins with javascript classes](http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/) | ||
to learn more about it. | ||
|
||
## Define Mixin | ||
|
||
By defining a mixin, you create a mixin function that takes in a base class, | ||
and returns a new class extending the base class with new properties and methods mixed to it. | ||
|
||
For example you have a simple controller which only has a greeter function prints out 'hi!': | ||
|
||
{% include code-caption.html content="Controllers/myController.ts" %} | ||
|
||
```ts | ||
class SimpleController { | ||
constructor() { | ||
|
||
} | ||
greet() { | ||
console.log('hi!'); | ||
} | ||
} | ||
``` | ||
|
||
Now let's add mixins to it: | ||
|
||
- A time stamp mixin that adds a property `createdAt` to a record when a | ||
controller instance is created. | ||
|
||
- A logger mixin to provide logging tools. | ||
|
||
Define mixin `timeStampMixin`: | ||
|
||
{% include code-caption.html content="Mixins/timeStampMixin.ts" %} | ||
|
||
```ts | ||
import {Class} from "@loopback/repository"; | ||
|
||
export function timeStampMixin<T extends Class<any>> (baseClass: T) { | ||
return class extends baseClass { | ||
// add a new property `createdAt` | ||
public createdAt: Date; | ||
constructor(...args: any[]) { | ||
super(args); | ||
this.createTS = new Date(); | ||
} | ||
printTimeStamp() { | ||
console.log('Instance created at: ' + this.createdAt); | ||
} | ||
} | ||
} | ||
``` | ||
|
||
And define mixin `loggerMixin`: | ||
|
||
{% include code-caption.html content="Mixins/loggerMixin.ts" %} | ||
|
||
```ts | ||
import {Class} from "@loopback/repository"; | ||
|
||
function loggerMixin<T extends Class<any>> (baseClass: T) { | ||
return class extends baseClass { | ||
// add a new method `log()` | ||
log(str: string) { | ||
console.log('Prints out a string: ' + str); | ||
}; | ||
} | ||
} | ||
``` | ||
|
||
Now you can extend `SimpleController` with the two mixins: | ||
|
||
{% include code-caption.html content="Controllers/myController.ts" %} | ||
|
||
```ts | ||
import {timeStampMixin} from 'Mixins/timeStampMixin.ts'; | ||
import {loggerMixin} from 'Mixins/loggerMixin.ts'; | ||
|
||
class SimpleController { | ||
constructor() { | ||
|
||
} | ||
greet() { | ||
console.log('hi!'); | ||
} | ||
} | ||
|
||
class AdvancedController extends loggerMixin(timeStampMixin(SimpleController)) {}; | ||
|
||
// verify new method and property are added to `AdvancedController`: | ||
let aControllerInst = new AdvancedController(); | ||
aControllerInst.printTimeStamp(); | ||
// print out: Instance created at: Tue Oct 17 2017 22:28:49 GMT-0400 (EDT) | ||
aControllerInst.logger('hello world!'); | ||
// print out: Prints out a string: hello world! | ||
``` | ||
|
||
## References | ||
|
||
Here are some articles explaining ES2015 and TypeScript mixins in more details: | ||
|
||
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Mix-ins | ||
|
||
- http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/ | ||
|
||
- https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters