使用Singleton的JavaScript名称空间？我很沮丧！

2019-12-09 21:37:08 阅读：276 来源： 互联网

标签：singleton namespaces javascript class

这是我在StackOverflow上的第一篇文章.多年来,这个社区为我提供了许多不同编码问题的深刻见解.因此,由于我在JS中从事这项特定任务已经好几天了,所以我决定依靠这个强大的社区,看看我能在我的问题上得到什么样的帮助.

我在这里看到了一个非常不错的帖子,实际上接近我想要的帖子(post here),但是不幸的是,我需要在名称空间中创建一个Object的多个实例,该示例无济于事.

这是我正在尝试做的事情：

if (!myNamespace) {
  var myNamespace = {};
}

// Object for my namesapce
myNamespace.Item = function() { 
    return  {

        Initialize: function(title,details) {   
            // setting members of this Object
            this.title = title;   
            this.details = details;

        },

        Display: function() {
            this.Position();
            this.Show();    
        },

        Position: function() {
            // position my item in the DOM          
        },

        Show: function() {
            // show my item in the DOM          
        }
    };
}();    

// another Object for my namesapce
myNamespace.Basket = function()  {  
    return  {       
        Initialize: function(title,details,code) {  
            // setting members of this Object
            this.items = [];   
        },
        Add: function(item) {   
            this.items[items.length] = item;                
        }
    };
}();

var Item = new myNamespace.Item;  // the code fails to create a new instance of this Object
Item.Initialize("New Item Title","New Item Desc.");
Item.Display();

var Item2 = new myNamespace.Item;  // the code fails to create a new instance of this Object
Item2.Initialize("New Item Title2","New Item Desc. 2");
Item2.Display();

我敢肯定,我想错了Singleton vs. Class.一个带有正确嵌套/结构的好代码示例将大有帮助！提前致谢！

解决方法:

问题在于myNamespace.Item不是函数,而是对象,因为您具有立即执行的函数.

例如,您可以将方法添加到当前对象：

myNamespace.Item = function() { 
  this.initialize = function(title,details,code) {  
    // setting members of this Object
    this.title = title;   
    this.details = details;
    this.code = code;
  };

  this.display = function() {
    this.Position();
    this.Show();    
  };

  this.position = function() {
    // position my item in the DOM          
  };

  this.show = function() {
    // show my item in the DOM          
  }
};

或使用构造函数的prototype属性,使使用new运算符创建的对象实例继承这些方法：

// Object for my namesapce
myNamespace.Item = function() {
  // constructor logic
};    

myNamespace.Item.prototype.initialize = function(title,details,code) {  
  // setting members of this Object
  this.title = title;   
  this.details = details;
  this.code = code;
};

myNamespace.Item.prototype.display = function() {
  this.Position();
  this.Show();    
};

myNamespace.Item.prototype.position = function() {
  // position my item in the DOM          
};

myNamespace.Item.prototype.show = function() {
  // show my item in the DOM          
};

或更短的语法：

myNamespace.Item = function() { };

myNamespace.Item.prototype = {
  initialize: function(title,details,code) {  
    // setting members of this Object
    this.title = title;   
    this.details = details;
    this.code = code;
  },
  display: function() {
    this.Position();
    this.Show();    
  },
  position: function() {
    // position my item in the DOM          
  },
  show: function() {
    // show my item in the DOM          
  },
  constructor: myNamespace.Item // fix the constructor property
};

使用prototype属性的好处在于,这些方法仅存在于myNamespace.Item.prototype对象中,而在第一个示例中,每个对象都有其自己的函数实例,这些实例的内存效率较低.

标签：singleton,namespaces,javascript,class
来源： https://codeday.me/bug/20191209/2097074.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用Singleton的JavaScript名称空间？我很沮丧！