Azer Koçulu May 11, 2010

Lispy Fluent Interfaces In Javascript

By inspiring from Lisp and the functional programming utilities came with Javascript 1.6, I’ve coded a new function to iterate arrays -especially for those containing DOM nodes- by providing an alternative fluent interface and chaining. Usage examples;

// log elements of an array
each( ['Hello','World'] )
  (console.log)

// disable all form elements passing additional arguments
each( document.querySelectorAll('input, select, textarea') )
  (setattr, 'disabled', true)

// apply header elements several dom manipulations
each(document.querySelectorAll('header'))
  (style, 'fontSize', '16px Arial,sans-serif')
  (style, 'background', '#ffff00')
  (style, 'padding', '3px')
  (add_class, 'Foobar')
  (add_event, 'click', function(){ alert('Hello World') })

Implementation of each:

// log elements of an array
each( ['Hello','World'] )
  (console.log)

// disable all form elements passing additional arguments
each( document.querySelectorAll('input, select, textarea') )
  (setattr, 'disabled', true)

// apply header elements several dom manipulations
each(document.querySelectorAll('header'))
  (style, 'fontSize', '16px Arial,sans-serif')
  (style, 'background', '#ffff00')
  (style, 'padding', '3px')
  (add_class, 'Foobar')
  (add_event, 'click', function(){ alert('Hello World') })

The function defined in the code above simply returns a function returning itself and taking a function with optional arguments to call it by passing the element being iterated and the optional arguments specified. Thus, the high-order-function I’ve pointed make the iteration chainable, as well.

Back