Question

我正在学习如何在JavaScript中实现OOP模式。我想知道，哪一种是在纯JavaScript中将DOM元素分配给对象文字成员的正确方法，以及这些示例之间的区别。

我这样做是因为我可以在对象文字函数中重用那个DOM元素，如果我更改了任何id，名称或类名，我只需要在一个地方更新。

MyObject = {

    // Version 1
    member: document.getElementByName('elementName'),

    // Version 2
    member2: function() {

        return document.getElementByName('elementName');
    },

    // Version 3
    member3: function() {

        document.getElementByName('elementName');
    }

};

MyObject2 = {

    // Is this member in a different namespace
    member: document.getElementByName('element2Name'),
};

Answer 1

// Is this member in a different namespace
member: document.getElementByName('element2Name'),

MyObject2.member和MyObject1.member不同。 Javascript本身不像其他语言那样支持命名空间，但使用Object文字可以实现相同的功能。
关于成员分配的3个不同版本，决定因素是您需要对变量进行何种访问以及如何使用该变量。

// Version 1
member: document.getElementsByName('elementName'),

这会为成员属性分配方法getElementsByName的结果，结果是NodeList集合。要访问媒体资源member，您需要将其编写为MyObject.member。

// Version 2
member2: function() {

    return document.getElementByName('elementName');
},

member2是function，而member不是函数，因此调用的方式不同。在这种情况下，您可以通过调用MyObject.member2()获得与版本1相同的结果。

// Version 3
member3: function() {

    document.getElementByName('elementName');
}

版本3不会返回任何内容，如果您需要使用结果，则无用。基本上，此版本从不存储函数调用document.getElementByName('elementName');的结果，因此返回值未定义。与member2一样，member3也是一个函数。但是，调用function MyObject.member3()会返回undefined。

选择哪个版本

版本3 无用，因为它不会返回任何内容。

我没有足够的应用信息来建议您最匹配。基于可用的有限信息，我更喜欢版本2，原因如下

由于document.getElementByName('elementName');定义的结果值发生变化并且依赖于DOM。所以，我将继续使用member2或version2。我通常更喜欢功能，只要它不简单并涉及一些计算。此外，函数调用的结果给出调用者信息，函数调用的结果可以改变。当您可以定义简单数据属性时，属性很好。

注意：属性的值可以是函数，在这种情况下，属性称为方法。

将DOM元素分配给对象文字成员

1 个答案: