Kengo's blog

Technical articles about original projects, JVM, Static Analysis and JavaScript.

How to improve interface for JavaScript

Do you still use argument to give information for other components? It's the most simple way, but sometimes it's too long to read. We can use other approach like named parameter, chain and deferred.

Named parameter

function foo(param) {
  alert(param && param.bar || '');
}

foo({
  bar: 'hello, world'
});

Chain

function foo(f) {
  return {
    bar: function(b){
      alert(f + b);
    }
  };
}

foo('hello, ').bar('world');

$.Deferred

function openTargetChooser(){
  var deferred = $.Deferred();
  $('#btn-accept').click(function(){
    deferred.resolve($('#target').val());
  });
  $('#btn-close').click(function(){
    deferred.reject();
  });
  $('#dialog').show();
  return deferred.promise();
}

openTargetChooser().done(function(param){
  alert('complete!' + param);
}).fail(function(){
  alert('wow!');
});

CoffeeScript

To improve interface, we have to pay much attention for inner implementation. But CoffeeScript helps you to minimize your cost because:

So we can shorten our code like:

foo = (param) ->
  alert param?.bar || ''

foo bar:'hello, world'
foo = (head) ->
  return bar: (tail) ->
    alert(head + tail)

foo('hello, ').bar('world')