Как я могу создать глобальный объект JavaScript, к которому можно получить доступ за пределами моего файла JS?

Question

У меня есть следующий объект в файле JS:

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

В другом файле JS я хочу использовать этот объект:

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

Я бы хотел, чтобы был только 1 экземпляр IOBreadcrumb, чтобы при нажатии на кнопку он всегда добавлял крошку в массив.

Как мне это сделать?

Answer 1

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

Тогда:

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

Answer 2

Сделайте что-то вроде следующего первого javascript, который выполняется вашей страницей.

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

Это делает начальную настройку. Теперь из любого места вы можете сделать

IOBreadcrumb.add()

Я проверял это в http://jsfiddle.net/xmHh5/

Для этого присваивается window.IOBreadcrumb результату функции, которая выполняется немедленно. Поскольку у этой функции нет дескриптора, ее невозможно выполнить повторно. Поскольку вы помещаете IOBreadcrumb в оконный объект, он фактически глобален. Я предполагаю, что это работает в браузере; он не будет работать на node.js или чем-либо еще, потому что это зависит от window.

Answer 3

Другой вариант - использовать шаблон модуля , который имеет преимущества, позволяя сохранять хлебные крошки по-настоящему приватными. Не все поклонники шаблона модуля, хотя, так как он предотвращает исправление обезьян. Это особенно проблематично, когда вы используете библиотеку и вам нужно изменить поведение, но вы не хотите редактировать их исходные файлы, чтобы минимизировать проблемы при обновлении. 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);
});