Calling a method from a namespace to use in another javascript file

Question

To organize my code, I happened to write as namespace for my main javascript file. Then I want to call some of the functions of that file to my custom javascript file, let say script.js. The problem is that I couldn't access the methods of the namespace. Here is my example code:

main.js

$( function() {
    "use strict"
     var Accordian = {
     slide : function() {
         $('h3').click( function() {
             $(this).next('div').slideToggle('1000');
             $(this).toggleClass('toggled');
         });
    },

    slideEaseOutBounce: function() {
         $('h3').click( function() {
              $(this).next().animate(
                  {'height' : 'toggle'}, 1000, 'easeOutBounce'
               );
               $(this).toggleClass('toggled');
         });
    },

    slideEaseInOutExpo: function() {
         $('h3').click( function() {
             $(this).next().animate(
                  {'height' : 'toggle'}, 1000, 'easeInOutExpo'
             );
             $(this).toggleClass('toggled');
         });
    }
});

And I have tried as in below script.js

$(document).ready( function() {
    Accordian.slide();
});

UPDATED:

Here's the link: http://jsnamespace.comyr.com/using-accordian.html

And the error message occurs "ReferenceError: Accordian is not defined" Any help would be very much appreciated.

Answer 1

Note: line 63 is missing a semicolon in script.js.

Since modifying your site to use this code works:

<script type="text/javascript">
    $(document).ready( function() {
        Accordian[0].slide();
    });
</script> 

FIDDLE DEMO

it seems that wrapping your "Accoridian" inside the jQuery function requires it to be dereferenced as a sub element.

When you remove the $ at line 1 of script.js turning

var Accordian = $(function () {

into

var Accordian = (function () {

(like @anonyme suggested) it works with your original call to Accordian.slide().

Answer 2

first you have to make a unique root namespace like that :

window.Accordian = window.Accordian || {};

This part must be done on top of all the next ! it Can be done in the head of html page in a script tag.

after you can use your object :

//creating a function :
Accordian.slide = function() {
     $('h3').click( function() {
         $(this).next('div').slideToggle('1000');
         $(this).toggleClass('toggled');
     });
}

//and later using it :
Accordian.slide()

This is the simplest way !

You prefered using multiple file, so let's try :

mains.js

/*$*/( function(globalAccordian) {
    "use strict"
     /* var Accordian = { */
     globalAccordian = {
     // doing like this will override your globalAccordian
     // if it was already generated by another script
     slide : function() {
         $('h3').click( function() {
             $(this).next('div').slideToggle('1000');
             $(this).toggleClass('toggled');
         });
    },

    slideEaseOutBounce: function() {
         $('h3').click( function() {
              $(this).next().animate(
                  {'height' : 'toggle'}, 1000, 'easeOutBounce'
               );
               $(this).toggleClass('toggled');
         });
    },

    slideEaseInOutExpo: function() {
         $('h3').click( function() {
             $(this).next().animate(
                  {'height' : 'toggle'}, 1000, 'easeInOutExpo'
             );
             $(this).toggleClass('toggled');
         });
    }
})( window.Accordian || {} );

script.js

$(document).ready( function() {
    Accordian.slide();
})

Answer 3

You can't access the namespace because it is encapsulated in a function. I'd suggest reading up on the revealing module pattern.

JSFiddle: http://jsfiddle.net/R927K/

Example:

    var Accordian = (function() {

     var Accordian = {
     slide : function() {
         alert('sliding');
         }
     };

         return Accordian;
}());

Accordian.slide();