Home > javascript > Javascript function chaining how to – a simple demo

Javascript function chaining how to – a simple demo

<html>
<head>
<title>Rico's Appbox Demos | A simple javascript function chaining demo</title>


<script type="text/javascript">
(function() {
	if(!window['Foo']) window['Foo']={};
	var self=window['Foo'];
	var name=null;
	var description=null;
	var income=-999;

	function init(options) {
		name=options.name||'no name';	
		description=options.description||'default description';
		return self;
	}

	function bark() {
		alert( 'Hi my name is '+name+' and I do ' +description+'.' );
		return self;
	}

	function showincome() {
		alert( "Shhhh don't tell anybody that my income is "+income+'.' );
		return self;
	}

	window['Foo']['init']=init;
	window['Foo']['bark']=bark;
	window['Foo']['showincome']=showincome;
})();
function say_it() {
	var 	thename=document.getElementById('id-name').value,
		thedesc=document.getElementById('id-desc').value;
	return Foo.init({ name:thename, description:thedesc }).bark();
}
function say_it_more() {
	say_it().showincome();
}
function start_over() {
	Foo.init({}).bark().showincome();
}
</script>

</head>
<body>

<p><input id="id-name" value="the one and only"></input></p>
<p><input id="id-desc" value="a lot of things"></input></p>
<p><a href="#" onclick="say_it();">Say It</a></p>
<p><a href="#" onclick="say_it_more();">Say It More</a></p>
<p><a href="#" onclick="start_over();">Start Over</a></p>

</body>
</html>

For a live demo, please visit ricosappbox.appspot.com/demos/jschain.

Advertisements
Categories: javascript
  1. December 17, 2011 at 11:10 am

    Hey man I only wanted to take a moment to say i love reading your blog!

  2. December 30, 2011 at 10:53 pm

    Hey is this serious?

    • ricoch3n
      January 1, 2012 at 5:04 am

      You refer to this post or the live demo?

  3. gaurav arya
    June 26, 2012 at 9:09 am

    Really liked the way you have presented

    • ricoch3n
      June 27, 2012 at 2:54 am

      In case you came across coffeescript (http://coffeescript.org/), here’s another example written in coffeescript:

      Foo=
          init:(options)->
              @name=options.name||'no name'
              @description=options.description||'who needs description nowadays?'
              @income=options.income ? 999
              @
      
          bark:()->
              console.log "Hi my name is #{@name} and I complain that #{@description}.";
              @
      
          showincome:()->
              console.log "Shhh don't tell nobody that my income is #{@income}."
              @
      
      
      Foo.init({}).bark().showincome()
      Foo.init({name:'The king', description:'no one is poorer than me', income:0}).bark().showincome()
      

      Example output:
      Hi my name is no name and I complain that who needs description nowadays?.
      Shhh don’t tell nobody that my income is 999.
      Hi my name is The king and I complain that no one is poorer than me.
      Shhh don’t tell nobody that my income is 0.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: