如何創建一個可以在我的JS文件之外訪問的全局JavaScript對象？

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

我想那裏IOBreadcrumb的只有1個實例，所以當我點擊一個按鈕時，它會一直添加麪包屑到數組中。

我該如何做到這一點？

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

另一種選擇是使用Module pattern，它具有使麪包屑真正保密的好處。不是每個人都是模塊模式的粉絲，但它可以防止猴子修補。當您使用庫時，這是特別有問題的，並且您需要修改行爲，但不想編輯其源文件以最小化升級時的麻煩。 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); 
});