Javascript chaining

JavaScript
1

Hello everybody.

I am just starting with javascript and I am wondering how it should be done.
I mean… array of functions.

You dont have to be a genius to know that array could be defined like this:

var myfunction = function() {
     return {
         func1: function() {
         
         },
         func2: function() {

         }
     }
}

This syntax allow us to use chaining like jQuery does.

myfunction.func1()

But I tried to insert a function which hiding paragraph in this way and I can’t get a clue.

function show(node) {
  if(node && node.style) {
    node.style.display = "block";
  }
}

function hide(node) {
  if(node && node.style) {
    node.style.display = "none";
  }
}

They just won’t work in this way I presented up. Please guys I am asking for an advice.

Thanks in advance.

2

You don’t need 2 separate functions to show or hide an element.

You can do it using just a single function.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title></title>
        <style type="text/css"></style>
        <script type="text/javascript">
            function showHide(elemId){
                var obj = document.getElementById(elemId);
                obj.style.display = (obj.style.display == 'none')? 'block' : 'none';
            }
        </script>
    </head>
    <body>
        <p id="myP">This is my paragraph</p>
        <div>
            <button onclick="showHide('myP');">Show/Hide paragraph</button>
        </div>
    </body>
</html>
3

Yes I know.

That’s example functions. I just want to know how to implement these functions in this scheme, because I can’t get it to work.

4

ok, it isn’t clear in your op if the primary purpose is chaining itself or using chaining to show/hide an element.

5

Got any solution?

6

yeah, but I’m now helping someone else on another website. I’ll pop back later.

7 
var funcs = function() {
	return {	
		$: function (id) {
			if(id.substr(0,1) == ".") { 
				return document.getElementsByClassName( id.substring(1) ).item(0);
			} else if(id.substr(0,1) == "#") {
				return document.getElementById( id.substring(1) ); 	
			}
			return {
				hide: function () {
					if($(id) && $(id).style) {
						$(id).style.display = "none";
					}
					return $(id);
				}
			};
		},
		
	};
}



function func() {
	funcs().$('.a').hide;
}

I want use it in this way

funcs().$('.a').hide;

but it’s not working , whats wrong?

8

anyone?

9

To be able to chain methods together in JavaScript each method needs to return a pointer to the object that the method belongs to. Then since the returned value is the same object as was originally referenced it can then have another method of that object chained to the end of it.

x = function() {
this.a = function() {alert('a'); return this;}
this.b = function() {alert('b'); return this;}
return this;
}
y = new x();
y.a().b();
10

Thanks Mate.