Aspect Oriented Programming (AOP) with Javascript and jQuery

One of the simplest AOP libraries for Javascript is jquery-aop.

There are a million reasons to use Aspect Oriented Programming; even in Javascript. One such case I came across recently was a requirement that came across to make the web application I’m working on accessible to screen readers such as JAWS.

For example, when displaying a modal window, it becomes necessary to switch the focus of the screen reader to the top of the modal. So instead of making changes to the modal library (in this case, simplemodal), AOP was used to switch the focus of the screen reader to the top of the modal div that had an anchor with the same value as the ID.

$.aop.around( {target: $, method: 'modal'},
		  function(invocation) {
		if(this === undefined)
			return false;
		var divId = $(this)[0].id;	
		invocation.proceed();
		window.location = "#" + divId;
		}
	);

A similar advice can be created for closing the overlay as well.

This is just a very small example but very useful. I have also found the library useful in debugging Javascript when dealing with browser specific issues on IE6 and IE7 where Firebug is unavailable.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *