CODEWITHSUNDEEP
javascriptoop
Sheehan Alam
Sheehan Alam

Reputation: 60869

How can I create a global javascript object that can be accessed outside of my JS file?

I have the following object in a JS file:

var IOBreadcrumb = function IOBreadcrumb() {
    this.breadcrumbs = [];
    this.add = function(title, url) {
      var crumb = {
        title: title, 
        url:url
      };
      this.breadcrumbs.push(crumb);
    };
  };

In another JS file I want to utilize this object:

//this occurs in some on click event
var breadcrumb = new IOBreadcrumb();
breadcrumb.add('some title',url);
console.log(breadcrumb.breadcrumbs);

I would like there to only be 1 instance of IOBreadcrumb, so that when I click on a button, it will always add a breadcrumb to the array.

How can I accomplish this?

Upvotes: 7

Views: 9304

Answers (3)

Ruan Mendes
Ruan Mendes

Reputation: 92274

Another option is to use the Module pattern, which has the benefits of keeping breadcrumbs truly private. Not everyone is a fan of the module pattern though since it prevents monkey patching. This is especially problematic when you're using a library and you need to modify behavior but you don't want to edit their source files to minimize troubles when upgrading. http://snook.ca/archives/javascript/no-love-for-module-pattern

var IOBreadcrumb = (function() {
    var breadcrumbs = [];
    return {
       add: function(title, url) {
          breadcrumbs.push({
             title: title,
             url: url
          });
       },

       each: function (callback) {
          for (var i=0; i < breadcrumbs.length; i++) {
               callback(breadcrumbs[i].title, breadcrumbs[i].url);
          }
      }
    }
})();

IOBreadcrumb.add('title A', 'http://url.com/A');
IOBreadcrumb.add('title B', 'http://url.com/B');
IOBreadcrumb.add('title C', 'http://url.com/C');

IOBreadcrumb.each(function(title, url){
         console.log('Title', title, 'Url', url);
});

Upvotes: 2

Matt MacLean
Matt MacLean

Reputation: 19648

var IOBreadcrumb = {
    breadcrumbs: [],
    add: function(title, url) {
      var crumb = {
        title: title, 
        url:url
      };
      IOBreadcrumb.breadcrumbs.push(crumb);
    }
  };

Then:

IOBreadcrumb.add('some title',url);
console.log(IOBreadcrumb.breadcrumbs);

Upvotes: 10

hvgotcodes
hvgotcodes

Reputation: 120188

Make something like the following the first javascript that get's executed by your page.

(function(){
    var setup = function IOBreadcrumb() {
        this.breadcrumbs = [];
        this.add = function(title, url) {
            console.log('adding');
            var crumb = {
                title: title, 
                url:url
              };
            this.breadcrumbs.push(crumb);
        }
    };


  window.IOBreadcrumb = new setup();
})(window);

That does the initial setup. Now from anywhere you can do

IOBreadcrumb.add()

I've tested this at http://jsfiddle.net/xmHh5/

What this does is assign window.IOBreadcrumb to the result of a function that is executed immediately. Since there is no handle to this function, there is no way to re-execute it. Since you are putting IOBreadcrumb on the window object, its effectively global. I'm assuming this is running in a browser; it won't run on node.js or anything because it depends on window.

Upvotes: 5

Related Questions