So for now, I just wanted to save the description of the basic usage pattern to come back to it at a later time…

$.Callbacks, $.Deferred and Pub/Sub

The general idea behind pub/sub (the Observer pattern) is the promotion of loose coupling in applications. Rather than single objects calling on the methods of other objects, an object instead subscribes to a specific task or activity of another object and is notified when it occurs. Observers are also called Subscribers and we refer to the object being observed as the Publisher (or the subject). Publishers notify subscribers when events occur

As a demonstration of the component-creation capabilities of $.Callbacks(), it’s possible to implement a Pub/Sub system using only callback lists. Using $.Callbacks as a topics queue, a system for publishing and subscribing to topics can be implemented as follows:

var topics = {};

jQuery.Topic = function( id ) {
var callbacks,
method,
topic = id && topics[ id ];
if ( !topic ) {
callbacks = jQuery.Callbacks();
topic = {
publish: callbacks.fire,
subscribe: callbacks.add,
unsubscribe: callbacks.remove
};
if ( id ) {
topics[ id ] = topic;
}
}
return topic;
};

This can then be used by parts of your application to publish and subscribe to events of interest quite easily:

// Subscribers
$.Topic( “mailArrived” ).subscribe( fn1 );
$.Topic( “mailArrived” ).subscribe( fn2 );
$.Topic( “mailSent” ).subscribe( fn1 );

// Publisher
$.Topic( “mailArrived” ).publish( “hello world!” );
$.Topic( “mailSent” ).publish( “woo! mail!” );

// Here, “hello world!” gets pushed to fn1 and fn2
// when the “mailArrived” notification is published
// with “woo! mail!” also being pushed to fn1 when
// the “mailSent” notification is published.

/*
output:
hello world!
fn2 says: hello world!
woo! mail!
*/

Whilst this is useful, the implementation can be taken further. Using $.Deferreds, it’s possible to ensure publishers only publish notifications for subscribers once particular tasks have been completed (resolved). See the below code sample for some further comments on how this could be used in practice:

// subscribe to the mailArrived notification
$.Topic( “mailArrived” ).subscribe( fn1 );

// create a new instance of Deferreds
var dfd = $.Deferred();

// define a new topic (without directly publishing)
var topic = $.Topic( “mailArrived” );

// when the deferred has been resolved, publish a
// notification to subscribers
dfd.done( topic.publish );

// Here the Deferred is being resolved with a message
// that will be passed back to subscribers. It’s possible to
// easily integrate this into a more complex routine
// (eg. waiting on an ajax call to complete) so that
// messages are only published once the task has actually
// finished.
dfd.resolve( “its been published!” );

project page: http://idibidiart.github.com/idi.bidi.dom/

sources: https://github.com/idibidiart/idi.bidi.dom

From the description:

/*! idi.bidi.dom

 DOM Anti-Templating

 Copyright (c) Marc Fawzi 2012

 http://javacrypt.wordpress.com

 BSD License

 derived from NattyJS v0.08: an open source precursor by the same author

*/

/******************************************************************************
*
* README:
*
* This version works in Gecko and Webkit, not tested on IE
*
* idi.bidi.dom - Javascript Anti-Templating
*
* "All the separation and none of the baggage"
*
* What is it?
*
* Data-Driven DOM "Templating" Without The Templates
*
* How Does It Work?
*
* idi.bidi.dom works by caching the virgin innerHTML (the Node Prototype) of all DOM
* elements (the Nodes) that have a 'idom-node-id' attribute at window.onload
* or $(document).ready. Each Node must contain exactly one direct child at time
* of caching, i.e. the Node Prototype, which must contain special variables (in
* its inner/outer HTML) to be replaced, in a global, dynamic fashion, with JSON
* data (with the scope being the inner/outer HTML of a newly created instance of
* the Node Prototype)
*
* The Node Prototype may hold an arbitrarily complex DOM structure, and one in
* which Node(s) defined elsewhere in the DOM may be dynamically linked by
* reference (called Linked Nodes)
*
* idi.bidi.dom works by creating an instance of the Node Prototype and populating
* the special variables in it with dynamic JSON data (where the JSON keys must
* correspond to the special variables in the Node Prototype) and then inserting
* the newly populated instance into the Node itself, using replace (default on
* first insertion), append or prepend methods, as applied to the Node's entire
* content (the virgin innerHTML or all populated instances of the Node Prototype
* that were previously inserted into the Node) or specific, previously inserted
* instance(s) of the Node Prototype. This basically creates a list of Node
* Prototype instances within the Node (So for convenience, and in the test cases,
* Nodes and Linked Nodes may be referred Node Lists and Linked Node Lists,
* respectively)
*
* idi.bidi.dom allows the DOM to be decomposed into Node Lists each having a
* Node Prototype from which instances (copies, usually with different data) can
* be created, populated with JSON data and then inserted into the Node (in append,
* prepend, and replace modes, with the ability to target specific, previously
* inserted instances of the Node Prototype or the Node List's entire content, i.e.
* the set of instances of the Node Prototype) and where the Node itself can be
* dynamically linked into other Node Lists, which can be linked into other Node
* Lists, and so on...
*
* From an OOP perspective, idom takes the DOM and adds data-bound variables,
* encapsulation, multiple-inheritance and type polymorphism (with the Node
* Prototype as the base for user defined types)
*
* Unlike other template-less DOM rendering frameworks, idom does not take over
* the job of Javascript itself nor does it add any boilerplate, it just gives
* Javascript more power by front-ending the DOM.
*
* Examples:
*
* Take a look at test.html
*
* See Notes under String.prototype._idomMapValues for the expected JSON format
*
* Main Invocation Pattern
*
* .idom$
*
* document.querySelector('#someNode').idom$(data [, options])
*
* behavior: creates new instance of Prototype Node using data to populate the
* special variables in Prototype Node, then append/prepend to (or replace)
* existing instance(s) in the Node
*
* >> data: {key: value, key: value, key: value, etc}
* where the keys must match the idi.bidi.dom node variables in the Node Prototype minus
* the idom$ prefix
*
* >> options: {mode: 'replace'|'append'|'prepend', targetSelector: value,
* ownSelector: value, nodeSelector: value, targetState: value, ownState: value,
* nodeState: value}
*
* if there no populated instances of Prototype Node exist (or if the Node's
* innerHTML was deleted after or before populated instances of Prototype Node
* were inserted) then append/prepend/replace will all replace the Node's
* entire content (if targetSelector is supplied in this case it will throw
* an error, so unless you are sure, you may want to call .$isPopulated() before
* invoking this method with targetSelector or stateSelector options)
*
* targetSelector: optional idom-selector value for instance(s) of Prototpe Node
* to insert the new instance at in append and prepend modes. If null, then
* append/prepend new instance at last/1st instance
*
* targetSelector: optional idom-selector value for instance(s) of Prototpe
* Node to insert into in replace mode. If null, replace entire content of Node
*
* ownSelector: new value of idom-selector value for instance of Prototpe Node
* being inserted
*
* ownState: new value of idom-state attribute for instance of Prototpe Node
* being inserted
*
* targetState: optional idom-selector value for instance of Prototpe Node to in
* sert at in append and prepend modes targetState: optional idom-selector value
* for instance of Prototpe Node to insert at in replace mode
*
* nodeSelector: new value of idom-selector for the Node itself
*
* nodeState: new value of idom-state for the Node itself
*
*
*********************************************************************************
*
* Other available are methods are
*
* .idom$delete([options]) which can delete certain instances of the Node Prototype
* or all instances children (this method is untested as of this release but it
* should work fine, report bugs)
*
* .idom$isPopulated() may be queried before specifying targetSelector or targetState
* to verify existence of populated instance(s) of Node Prototype (the targets)
*
*
*********************************************************************************/

project page: http://idibidiart.github.com/idi.bidi.dom/

sources: https://github.com/idibidiart/idi.bidi.dom

jQuery’s $.proxy (as of 1.7) now implements Function.prototype.bind … nice

Related:

Feature Creation and Separation with Object Oriented Javascript

Goal:

Enable binding/unbinding of event handlers for system and custom events that works in optimal fashion within prototype methods (setup_event and detach_event) as well as within closures.

The Technique:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"></script><script type="text/javascript">// <![CDATA[
// the constructor

function someObject() {

this.init.apply(this, arguments)

}

// the object prototype

someObject.prototype = {

// this runs every time a new instance is created

init: function(value) {

this.value = value;

},

some_callback: function(arg1, arg2, el) {

return function (event) {

alert (event.type + " on element id = " + el.id  + ", with arguments = " + arg1 + ", " + arg2 + " and an initial value of " + this.value)
}
},

setup_event: function(elem, eventType, handler) {

// important: the inner bind is a re-scoping bind based on Function.prototype.bind not a JQuery bind()

// ns1 is the name space for this object, so events can be removed by eventType AND namespace, giving more flexibility

$(elem).bind(eventType + '.ns1', handler.bind(this))

},

detach_event: function(elem, eventType) {

$(elem).unbind(eventType + '.ns1')

}

}

function demo() {

var obj = new someObject(1);

var el = document.getElementById("btn");

// the callback is executed here returning an anonymous function(event) { ... }, allowing the args to the callback (passed at the moment of event setup) and the event itself to be accessed from the returned function

obj.setup_event(el, "click", obj.some_callback("Hi", "There", el))

setTimeout(function() {

obj.detach_event(el, "click")

delete obj;

}, 12e3)
}
// ]]></script>

<input id="btn" type="button" value="test" />

<script type="text/javascript">// <![CDATA[
// run the demo ... the event handler on the "test" button will work until it's removed after 12 seconds

demo();
// ]]></script>

About This Technique:

1. Much less overhead than using JQuery .delegate/undelegate since it uses the bare-bone bind()/unbind() that delegate/undelegate are built on
2. JQuery .delegate gets lost inside of JQuery when calling $(element).delegate(element.id, eventType + ‘.namespaceXYZ’, handler.bind(this)) from within the “_setup_event” prototype method, with the result being the error: “handler” not defined. If .bind(this) is not present, JQuery presumably attaches the handler but since the handler code references “this” for the object instance (and “this” without .bind(this) refers to the element) it doesn’t know what to do and no error is reported in Firebug (that’s one place where JQuery should throw an exception, and I think I might complain to them about it.)
3. It allows the “this” keyword (of the object instance), the event itself and any variables from the outer function (that is enclosing the setup_event method) to be transferred to the handler at the time _setup_event is called, so it works normally in loops referencing outer function variables.

In other words, the technique is ideal for use within closures and prototype methods.

I’m embracing the Backbone.js client-side MVC model, including Backbone.Controller pattern. in conjunction with the self-authored anti-templating framework idom for server-driven Javascript apps (Backbone in its current state needs major modifications to work for exclusively client-side apps)

The feature-oriented encapsulation pattern below is for exclusively client side apps and can be extended with jQuery $.Callbacks()/$.Deferred() based pub-sub bus to connect the feature objects together. Any DOM rendering objects used here can be replaced with or upgraded to use idom.

Version: 0.5

Updated: Nov 4, 2011

Required familiarity:

Aspect Oriented Programming, Separation of Concerns, Object Oriented Javascript, Prototypal Inheritance, Anonymous Functions

The question:

How do you create and separate features in JS using Object Oriented Programming (OOP) techniques?

The requirement is that each Feature is encapsulated within an anonymous function scope and all that’s exposed is an object literal with public methods, including methods for getting/setting properties.

Also, objects must operate exclusively in the window they’re defined in, so you don’t end up with features being defined across many windows.

This model also assumes:

1) window._globals object literal defined in the main app window that contains global variables that can be accessed by all features in the same window (using window._globals.someVar) as well as features within iframes (using partent.window._globals.someVar). Applications with completely separate windows would simply implement this model separately per each window, including iframes in each window.

2) presentation logic as well as business/computational logic is decomposed into distinct Features  and implemented using multi-instance objects (which may use dynamic event binding/unbinding in case of DOM/SVG elements) that provide an OO interface to the DOM/SVG elements and the Canvas within the given Feature and only expose methods to the outside on the returned object literal, including the methods for get/set properties.

3) coordination logic that is not part of any distinct Feature is not part of the model

Overall Goal:

To show that it is possible to construct features in a way that allows developers to maintain them as separate modules without having to resort to much more fancy frameworks/client-side-middleware that don’t work as well for feature separation and performance.

Here is the basic homegrown AOP method for OO Javascript:

window.someFeature = (function(){

/*

The properties variable below is an object literal used for storing properties and their values that are available to actual objects within this anonymous function. See the bottom of this anonymous function for the returned object literal, which exposes public methods (accessed as window.someFeature.publicMethodName), including setProperties and getProperties.

*/

var properties = {}

properties.property1 = 0;
properties.property2 = "some initial value";

...

properties.propertyN = window._globals.someVar;  // or parent.window._globas.someVar if this window happens to be an ifarme

/*

a basic private object that implements some computation or business logic. It can be referenced anywhere within the self executing anonymous function, including in the private objects and publicly exposed methods.

*/

var somePrivateObject = function () {

this.initialize.apply(this, arguments);

}

somePrivateObject.prototype = {

initialize: function(args){

// initialized upon instantiation
// initialize code goes here

},

someMethod: function(args) {

// do something
// return something

},

...

anotherMethod: function(args) {

// do something
// return something

}

}

/*

a private object that operates on a DOM element (as container). It can be referenced anywhere within the self executing anonymous function, including in the private objects and publicly exposed methods.

*/

var somePrivateDOMObject = function () {

this.initialize.apply(this, arguments);

}

somePrivateDOMObject.prototype = {

initialize: function(someDiv){

// this is the constructor method (implemented on the prototype) that populates someDiv container with some child elements and attaches event handlers to them
// setup_event would be a prototype method on this object and is covered in the article linked at the bottom of this page

},

destroy: function(someDiv){

// not sure if all browsers garbage-collect event handlers immediately when elements are removed so, just in case,
// call detach_event to detach event handlers assigned by this object
// detach_event would be a prototype method on this object and is covered in the article linked at the bottom of this page
// then find out if element supports innerHTML and if so nullify content. Else, adjust strategy as necessary
},

someMethod: function(args) {

// do something
// return something

}

}

/*

some private clone-able object that operates on DOM and/or implements some computation or business logic and can be referenced anywhere within the self executing anonymous function, including in the private objects and publicly exposed methods.

Actual implementation would be for DOM or no DOM (no need to combine both modes into one object)

*/

var somePrivateCloneableObject = function () {

this.initialize.apply(this, arguments);

}

somePrivateCloneableObject.prototype = {

initialize: function(){

// this is the constructor method (implemented on the prototype) for a clone-able object where
// arguments[0] ... arguments[n] contain state data or arguments[0] contains the parent
// DOM element from which state data can be copied, e.g. innerHTML, style, etc
// Actual implementation would be for DOM or no DOM (no need to combine both modes into one object)

},

// here is some method

someMethod: function(args){

// do something

// update state data (if not using DOM element as argument for cloning)

// return something

},

...

// here is a method for cloning the given instance

clone: function(){

// copy the state data of the existing instance of somePrivateCloneableObject (i.e. this.var1 ... this.var4)
// or get the actual DOM element somePrivateCloneableObject operates on
// and pass it to the constructor for this clone-able object
// Actual implementation would be for DOM or no DOM (no need to combine both modes into one object)

var objInstance = new somePrivateCloneableObject(args);

// return the cloned instance

return objInstance;

},

destroy: function(domCleanup){

// called with (true) if object operates on DOM element and not implementing just computation/business logic
// Actual implementation would be for DOM or no DOM (no need to combine both modes into one object)

if (domCleanup) {

// not sure if all browsers automatically remove event handlers immediately when elements are removed so, just in case,
// call detach_event to detach event handlers assigned by this object
// detach_event would be a prototype method on this object and is covered in the article linked at the bottom of this page
// then nullify the element's innerHTML to clean the DOM.

}

},

// initialize object state data

 var1:0,
 var2:"something",
 var3:100,
 var4:{}

...

}

// methods exposed publicly thru the returned object literal

var someExposedMethod1 = function(args) {

// this method may create new instances of the previously defined private objects (which can access the properties object) and call methods on each of them

};

var someExposedMethod2 = function(args) {

// this method may create new instances of the previously defined private objects (which can access the properties object) and call methods on each of them

};

// properties set/get methods accessible thru returned object

var set = function(propObject){

if (!propObject) return null;

// sets properties per the object literal propObject, accessed as window.someFeature.setProperties({propert1: value1, ... , propertyN: valueN} Assigns existing values for properties missing from propObject

properties.property1 = propObject.property1 || properties.property1;

properties.property2 = propObject.property2 || properties.property2;

properties.propertyN = propObject.propertyN || properties.propertyN;

}

var get = function(){

if (!arguments) return null;

// gets properties, accessed as window.someFeature.getProperties("property1", ..., "propertyN") which return the object literal containing properties and their values

var propObj = {};

for (n = 0; n < arguments.length; n++) {

// returns undefined if property doesn't exist or null if any of property names is not a string

 if (typeof arguments[n] != 'string') return null;

 propObj[arguments[n]] = properties[arguments[n]];

}

return propObj;

}

return propObj;

}

// the returned object exposes public methods including set/get properties

return {

"somePublicMethod1": someExposedMethod1,

"somePublicMethod2": someExposedMethod2,

"setProperties":set,

"getProperties":get
};

}());

Also Relevant:

Dynamic Event Handling In Object-Oriented Javascript: A Little Help From JQuery

I was browsing people’s feeds and adding folks and somehow I ended up with a tweet on my timeline that was made entirely of unicode characters, the kind that was used in terminals to display user interface elements before bitmapped graphics came along.

It inspired me to make an Editor for this kind of art (which is called “Twitter Art” by the way)

Make sure to watch these demonstration videos videos on youtube in HD (720p)

http://www.youtube.com/watch?v=Wd-d1p-c56U (Original)

http://www.youtube.com/watch?v=UX5jOvdLG8c (Canvas2Vector Effects 1)

http://www.youtube.com/watch?v=jCAp22_HYLk (Canvas2Vector Effects 2)

http://www.youtube.com/watch?v=R1fin3jBFTw (Canvas2Vector Effects 3)

http://www.youtube.com/watch?v=VLyLb3Otw5s (SVG Saving And Manipulation)

Some features and aspects are patent pending, and I’m working on free open source license for non-commercial use and also a royalty-free commercial license with commented sources, to help this new medium take hold, etc.

The app is built entirely with Javacsript, HTML5 (canvas), and SVG. There are no server components, other than a 20-line Python HTTP server based on Google Appengine API. Static HTML5, JS and .png files are served to the client and everything runs inside the browser.

http://idibidiart.com

It  runs only on Firefox, the People’s Browser, not your faster-than-potato Chrome or whatever, and actually it is because of the non-groovy way Chrome and IE handle unicode line breaking that made me delay the cross-browser implementation. A lot of it is black magic (or more exactly: an ancient line-breaking algorithm that no one has looked at in ages)

Enjoy and be challenged.

@idibidiart