StructureJS

StructureJS Examples:

Event Bubbling Example

SinglePageWebsite with the Router class

Core Classes

• DOMElement

  • All your view classes will extend the DOMElement class and all your views will have the following lifecycle: createChilderen, layout, enable, disable and distroy. The DOMElement has several convenient methods (addChild, addChildAt, removeChild, getChild, etc.) to provide a structured base for your view classes. Within your views you will be able to listen and dispatch class based events. This is because DOMElement extends the EventDispacter class and your views will support event bubbling, stopPropagation and stopImmediatePropagation.

• Stage

  • The Stage class is what your main application class will extend. This class extends the DOMElement class and the only difference you will notice is it has an appendTo method. This allows us to use an id name, class name or tag name to have a reference point where your code will control DOM elements with in the referenced area.

• EventDispatcher

  • The EventDispatcher class is the base class for all classes that need to dispatch events. For example if you wanted to create a Controller class, you would extend EventDispatcher. The DOMElement class extends EventDispatcher which allows events to bubble throughout the display list.

• EventBroker

  • EventBroker is a simple publish and subscribe static class that you can use to fire and receive notifications. Loosely coupled event handling, the subscriber does not have to know the publisher. Both of them only need to know the event type. Basically the EventBroker class is a static version of the EventDispatcher class.

• BaseEvent

  • Whenever you want to create a Event Class you should extend BaseEvent.

• ValueObject

  • Value Object (VO) is a design pattern used to transfer data between software application subsystems.

• Extend

  • The Extend class is a utility class that will allow you easily to extend other classes.

• Router

  • The Router class is a hash routing class.

• eventListener jQuery Plugin

  • There are two methods to the plugin addEventListener and removeEventListener. These two methods allow you to pass in the scope of the class so you do not need to bind your function call(s) and assign them to a property on the class.
  • To learn more about the eventListener jQuery plugin check out https://github.com/codeBelt/jquery-eventListener *

Video:

StructureJS Overview