Skip to content

Instantly share code, notes, and snippets.

@mhull
Last active March 21, 2017 20:31
Show Gist options
  • Save mhull/aac445cafd65e6337775336988cf8700 to your computer and use it in GitHub Desktop.
Save mhull/aac445cafd65e6337775336988cf8700 to your computer and use it in GitHub Desktop.
Exploring Angular 2
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }
/**
* Here is a simple function that logs a message of the form:
*
* Dear Michael:
* Set the gearshift for the high gear of your soul!
*
* where the addressee and the message itself are given by function parameters
*/
function say( to, message ) {
console.log( 'Dear ' + to + ':\n' + message );
}
/**
* And here is a decorator which accepts a function as an argument and
* returns a similar function with a little bit more functionality
*
* In this case, our decorator is adding the functionality of logging a message
* to the console if we do not pass the correct number of arguments when the
* decorated function is called, based on the decorated function's signature (i.e.
* the parameters within the function definition for `fn`)
*
* For example, if we call `warnMissingArguments` on the above function `say`, then
* the resulting function `warnMissingArguments( say )` would expect the same two
* arguments as `say` and would have the added logging functionality.
*/
function warnMissingArguments( fn ) {
return function() {
/**
* Note that `arguments` is an array-like object available inside of any
* function, and it will contain the arguments supplied whenever our decorated function
* is called
*
* Also note that `fn.length` is a parameter available on any function `fn`,
* and it returns the number of arguments in the declared signature for `fn`
*
* Thus, in this conditional we are checking if the number of supplied arguments to our
* decorated function (at the point of it getting invoked) is equal to the expected number of arguments
* within the original function's signature
*
* In other words, we are making a comparison between the anonymous function
* we are returning and the decorator's parameter `fn`
*/
if( arguments.length !== fn.length ) {
console.log( 'Missing arguments!' );
}
/**
* Finally, we are returning the result of executing the original function
* with the given arguments
*/
return fn.apply( this, arguments );
}
}
/**
* Next, we can decorate our original `say` function to get a new function which
* we'll call `sayAndMaybeWarn`, which has the extra warning functionality given by
* the decorator above
*/
var sayAndMaybeWarn = warnMissingArguments( say );
/**
* This function call will behave no differently than calling `say()` directly
*/
sayAndMaybeWarn( 'Michael', 'Set the gearshift for the high gear of your soul!' );
/**
* However this function call will yield a warning in the console that we are
* missing arguments for the function. The result should read like so:
*
* Missing arguments!
* Dear Michael:
* undefined
*/
sayAndMaybeWarn( 'Michael' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment