如何在“模块”中组织我的代码？

发布于 2024-10-21 17:47:06 字数 1474 浏览 1 评论 0原文

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

关键是我脑子里想到的一切都行不通。我目前正在考虑四个想法：

简单对象 - 由于范围问题没有用。使用 this.a 可以，但是 this 根据调用者的不同而具有不同的含义，因此它不可靠。例如，我曾经将一个函数分配给 WebSocket 类，但在调用该函数时突然 this 引用了 WebSocket 实例通过 WebSocket 事件。我可以在每次调用该函数时使用 bind(foo)，但我猜一定还有另一种方法。
```
var foo = {
    答：3，
    s: 函数() {
        警报（一）； // a 在此范围内不存在
        警报（这个。a）； // 'this' 并不总是 foo
        警报（foo.a）； // 我必须输入“foo”。每个变量之前
                      // 参考，但我确信这不是这样做的方法
   }
};
```

实例 - 未定义a。再次强调，这个并不可靠。

var foo = function() {
    这个.a = 3;
    this.s = 函数() {
        警报（一）；
    };
};
var foo_instance = new foo();
foo_instance.a = 4;
foo_instance.s(); // 错误：a 未定义

实例关闭 - 不返回任何内容；它保持未定义。

var foo = (function() {
    这个.a = 3;
    this.s = 函数() {
        警报（一）；
    };
})();
// foo === 未定义

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

var foo = (function() {
    var a = 3;
    返回 {
        获取 a() { 返回 a; },
        设置 a(v) { a = v; },

        s: 函数() {
            警报（一）； // 在 IE 中不像 getter/setter 那样工作
                      // 不支持
        }
    };
})();

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

谢谢。

原文

I'm trying to wrap my head around organising my code. I have several modules within my project, which I'd like to organise.

The point is that all what has come to my mind doesn't work out. I'm currently thinking of four ideas:

Simple object - Is not useful due to scoping issues. Using this.a would work, but this has a different meaning depending on who called it so it's not reliable. For example, I once assigned a function to a WebSocket class, but all of a sudden this referred to the WebSocket instance when the function was called by a WebSocket event. I could use bind(foo) each time I call the function, but there must be another way I guess.
```
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
   }
};
```

Instance - a is not defined. Again, this isn't reliable.

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

Closure with instance - Doesn't return anything; it stays undefined.

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

Closure with getter/setter - Works beautifully on Chrome, however IE doesn't support getters/setters.

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

How would I effectively organise my modules, so that I can access the properties safely and in a cross-browser way?

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

Smile简单爱 2024-10-28 17:47:06

3 未定义，因为您没有返回任何内容。不要将属性和方法分配给“this”，而是尝试这样做：

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

    self.someProperty = someValue;

    self.someFunction = function () {

    }

    return self;
}());

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

3 is undefined because you are not returning anything. instead of assigning properties and methods to 'this', try this:

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

    self.someProperty = someValue;

    self.someFunction = function () {

    }

    return self;
}());

foo will now return an object with the properties and methods defined. doing it this way you never have to wonder what 'this' is actually referring to.

回复收藏 0 原文