`StructureJS`

A class based utility library for building modular and scalable web platform applications. Features opt-in classes and utilities which provide a solid foundation and toolset to build your next project.

Documentation

Install

$ bower install --save structurejs

IDE Snippets

Boilerplate

StructureJS Boilerplate (RequireJS)

StructureJS Boilerplate (Browserify)

StructureJS Boilerplate (TypeScript)

StructureJS Boilerplate (Babel ES6)

Examples

Event Bubbling Demo Code
Movie Collection Demo Code
Single Page Application Demo Code
TodoMVC Demo Code
Simon Game Demo Code

Core Classes

`Stage`

A base application class for your project. Stage allows you to set DOM references for your application to control.

var App = (function () {

	var _super = Extend (App, DOMElement);

	function App () {
		_super.call(this);

        this._fooBarView = null;
	}

	App.prototype.create = function () {
		_super.prototype.create.call(this);

		// single instance of a component
        var $fooBar = this.$element.find('#js-fooBar');
		this._fooBarView = new FooBarView($fooBar);
		this.addChild(this._fooBarView);

		// multiple instances of a component
		this.createComponents([
			{ selector: '.js-foo', component: FooView },
			{ selector: '.js-bar', component: BarView }
		]);
	};

	return App;
}

Example Stage Class

`DOMElement`

A base view class for objects that control the DOM. Your View classes will extend this DOMElement class.

var ExampleView = (function () {

	var _super = Extend (ExampleView, DOMElement);

	function ExampleView () {
		_super.call(this);
	}

    ExampleView.prototype.create = function () {
		_super.prototype.create.call(this);
	};

	return ExampleView;
}

DOMElement provides helper methods and adds the following lifecycle to your class, these methods get called in this order:

create()
enable()
layout()

var ExampleView = (function () {

	var _super = Extend (ExampleView, DOMElement);

	function ExampleView () {
		_super.call(this);
        // setup properties here
	}

	MenuView.prototype.create = function () {
		_super.prototype.create.call(this);
        // Create or setup objects in this parent class.
	};

	MenuView.prototype.enable = function () {
		if (this.isEnabled === true) { return this; }
        // Enable the child objects and/or add any event listeners.
		return _super.prototype.enable.call(this);
	};

    MenuView.prototype.disable = function () {
        if (this.isEnabled === false) { return this; }
        // Disable the child objects and/or remove any event listeners.
        return _super.prototype.disable.call(this);
	};

	MenuView.prototype.layout = function () {
        // Layout or update the objects in this parent class.
		return this;
	};

    MenuView.prototype.destroy = function () {
        // Call destroy on any child objects.
        // This super method will also null out your properties for garbage collection.
        _super.prototype.destroy.call(this);
	};

	return ExampleView;
}

Example DOMElement View

`EventDispatcher`

A base event bus class for managing prioritized queues of event listeners and dispatched events.

this.dispatchEvent('change');

// Send data object with the event:
this.dispatchEvent('change', { some: 'data' });

// Example with an event object
// (event type, bubbling set to true, cancelable set to true and passing data)
var event = new BaseEvent(BaseEvent.CHANGE, true, true, { some: 'data' });
this.dispatchEvent(event);

// Dispatching an inline event object
this.dispatchEvent(new BaseEvent(BaseEvent.CHANGE));

`EventBroker`

A pub/sub static class for dispatching and listening for events.

EventBroker.addEventListener('change', this._handlerMethod, this);

// Using a constant event type
EventBroker.addEventListener(BaseEvent.CHANGE, this._handlerMethod, this);

// Event passed to the method will always be a BaseEvent object.
ClassName.prototype._handlerMethod = function (event) {
     console.log(event);
}

`Router`

A static class for managing route patterns for single page applications.

{required}
:optional:
* (all)

// A route listener with an event handler
Router.add('/games/{gameName}/:level:/', this._onRouteHandler, this);
Router.start();

// The above route would match the string below:
// '/games/asteroids/2/'

// The Call back receives a RouterEvent object.
ExampleClass.prototype._onRouteHandler = function (routerEvent) {
    console.log(routerEvent.params);
}

Example Router

`jQueryEventListener`

Similar to the .on() & .off() jQuery methods, this plugin allows you to bind your function calls and assign them to a property on the class avoiding something like setupHandlers or bindAll methods.

eventType
delegation (optional)
eventHandler
scope

Class.prototype.enable = function () {
    this._$element.addEventListener('click', this._onClickHandler, this);
    // event delegation
    this._$element.addEventListener('click', 'button', this._onClickHandler, this);
};

Class.prototype.disable = function () {
    this._$element.removeEventListener('click', this._onClickHandler, this);
    this._$element.removeEventListener('click', 'button', this._onClickHandler, this);
};

Class.prototype._onClickHandler = function (event) {
    console.log('click', event);
};

Release History

2015-06-23 v0.7.6 DOMElement createComponents rename componentClass to component.
2015-06-18 v0.7.5 Add groupBy method on Collection. Change ValidationUtil.isPostalCode to be case insensitive.
2015-06-10 v0.7.4 Add pluck method to Collection. Move removeChild destroy functionality from DisplayObjectContainer to DOMElement.
2015-05-26 v0.7.3 Corrects string replacement on getBreakpoint
2015-05-21 v0.7.2 Add showHours flag to NumberUtil.convertToHHMMSS to display as 00:05:23 or 05:23
2015-05-12 v0.7.1 DOMElement have createComponents return the list of children it created. Fix small bugs. Update comments. Add some unit tests.
2015-04-26 v0.7.0 Breaking changes: Rename createChildren to create. Rename layoutChildren to layout. Create DisplayObject class and have DisplayObjectContainer extend it. Add Canvas specific classes. Rename namespace StructureTS to StructureJS in TypeScript files. Change namespace from structurejs to StructureJS in JavaScript classes. Rename folder src to js.
2015-04-15 v0.6.17 Previous version before I started doing this release history.

JaSpr/StructureJS

StructureJS