javascript - 如何在 'modules' 中组织我的代码？

Question

我正在努力组织我的代码。我的项目中有几个模块，我想对其进行组织。

关键是所有想到的东西都没有用。我目前正在考虑四个想法:

1. 简单对象 - 由于范围问题而无用。使用 this.a 会起作用，但 this 具有不同的含义，具体取决于调用它的人，因此它不可靠。例如，我曾经将一个函数分配给 WebSocket 类，但是突然在调用该函数时 this 引用了 WebSocket 实例通过 WebSocket 事件。我可以在每次调用该函数时使用 bind(foo)，但我想一定有另一种方式。

   var foo = {
       a: 3,
       s: function() {
           alert(a); // a doesn't exist in this scope
           alert(this.a); // 'this' isn't always foo
           alert(foo.a); // I would have to put 'foo.' before each variable
                         // reference, but I'm sure that's not the way to do it
      }
   };
   

2. Instance - a 未定义。同样，this 不可靠。

   var foo = function() {
       this.a = 3;
       this.s = function() {
           alert(a);
       };
   };
   var foo_instance = new foo();
   foo_instance.a = 4;
   foo_instance.s(); // Error: a is not defined
   

3. 用实例关闭 - 不返回任何东西；它保持 undefined。

   var foo = (function() {
       this.a = 3;
       this.s = function() {
           alert(a);
       };
   })();
   // foo === undefined
   

4. 使用 getter/setter 关闭 - 在 Chrome 上运行良好，但 IE 不支持 getter/setter。

   var foo = (function() {
       var a = 3;
       return {
           get a() { return a; },
           set a(v) { a = v; },
   
           s: function() {
               alert(a); // Doesn't work in IE as getters/setters are
                         // not supported
           }
       };
   })();
   

我将如何有效地组织我的模块，以便我能够以跨浏览器的方式安全地访问属性？

谢谢。

Answer 1

3 是未定义的，因为你没有返回任何东西。不要将属性和方法分配给“this”，试试这个:

var foo = (function() {
    var self = {};

    self.someProperty = someValue;

    self.someFunction = function () {

    }

    return self;
}());

foo 现在将返回一个定义了属性和方法的对象。这样做，您永远不必想知道“this”实际上指的是什么。