jquery - Calling a method from a namespace to use in another javascript file - Stack Overflow

admin管理员组

文章数量:1310385

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: .html

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

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.yr./using-accordian.html

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

• javascript
• jquery
• namespaces
• javascript-namespaces

Share Improve this question Follow edited May 30, 2013 at 0:22 Tepken Vannkorn asked May 29, 2013 at 7:22 Tepken VannkornTepken Vannkorn 9,7231414 gold badges6262 silver badges8686 bronze badges 2

• When I try and access the site I get the following, followed by some parking ads: This website was set to be removed for inactivity by www.000webhost.. If you own this website, click here to protect it. About your question, are you simply referencing both scripts in your HTML file or is there another method that you're using? – Qantas 94 Heavy Commented Jun 3, 2013 at 13:27
• Ah, this link is just removed. I added 3 days ago. I'll uploaded it again. Here it works again. jsnamespace.yr./using-accordian.html – Tepken Vannkorn Commented Jun 3, 2013 at 15:58

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4 +50

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().

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();
})

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/R927K/

Example:

    var Accordian = (function() {

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

         return Accordian;
}());

Accordian.slide();

本文标签： jqueryCalling a method from a namespace to use in another javascript fileStack Overflow