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

另一种选择是使用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);
});

如何创建可以在我的JS文件之外访问的全局javascript对象？

3 个答案: