A sample controller for a Visualizer component.

FooComponentController.js

//Break component code into separate modules and load them as dependencies.
define(["./animateIn, ./validateSomething"], function(animateIn, validateSomething) {

	// Static constant. Shared across instances of this component. Can't be changed.
	const SOME_CONSTANT = 3.14159;

	// Static variable. Shared across instances of this component. Can be changed by any instance.
	var count = 0;

	// Static function. Shared by all instances of this component. Can't be changed.
	const doFoo = () => { //Use function instead of => for older browsers.
		return "Hello world";
	}

	// Functions specific to each instance of this component.
	return {

		// Variables individual to each instance of this component.
		bar: "bar",

		// Functions individual to each instance of this component.
		hideStuff: function(b){
			// Position stuff out of sight or give it opacity 0.
		},

		//Note: NEVER declare init for a component. It will cause an error. Use the constructor for init work.

		preShow: function(){
			// Do things like placing widgets out of sight. —e.g.
			// this.hideStuff();
		},

		postShow: function(){
			// Do things like animating stuff back in, call services, pupulate data
			// or bind widget events. —e.g.:
			// this.view.doFooButton.onClick = doFoo;
			// this.view.barLabel = this.bar;
			// animateIn(this.view.someAnimatedWidget);
		},

		onHide: function(){
			// Do things like freeing up and reseting variables.
		},

		//Use the constructor to bind preShow, postShow and onHide.
		constructor: function(/*baseConfig, layoutConfig, pspConfig*/) {
			this.view.preShow = this.preShow;
			this.view.postShow = this.postShow;
			this.view.onHide = this.onHide;
			count++
		},
		//Logic for getters/setters of custom properties
		initGettersSetters: function() {
			//Field foo
			defineGetter(this, "foo", () => {return this._foo;});
			defineSetter(this, "foo", (foo) => {this._foo = foo;});
		}
	};
});