javascript - 传递参数时如何避免模块模式中的 getter/setter 函数

标签 javascript oop design-patterns module-pattern

一段时间以来,我一直像这样构建我的 JavaScript 代码:

;(function() {
    function Example(name, purpose) {
        this.name = name;
        this. purpose = purpose;
    }

    Example.prototype.getInfo = function() {
        return 'The purpose of "' + this.name + '" is: ' + this.purpose;
    }

    Example.prototype.showInfo = function() {
        alert(this.getInfo());
    }

    var ex = new Example('someModule', 'Showing some stuff.');

    ex.showInfo();
})(undefined);

Fiddle

现在我意识到这种模式远非理想,因为存在一些问题:

  • 它不使用闭包/范围,因此模拟公共(public)和私有(private) 成员。
  • 它不导出某些内容,这意味着模块本身并未真正封装和命名空间。

(免责声明:我没有在任何更大的项目中使用过它,因此我可能会错过在实际条件下工作时发生的一些重要细节。)

为了解决这些问题,我开始研究 JavaScript 设计模式。立即吸引我的模式之一是模块模式
我尝试使用模块模式重写上面的代码,但我无法完全正确:

var Example = (function() {

    function getInfo() {
        return 'The purpose of "' + name + '" is: ';
    }

    // Public stuff
    return {
        name: '',
        purpose: '',
        setInfo: function(name, purpose) {
            this.name = name;
            this.purpose = purpose;
        },
        showInfo: function() {
            alert(getInfo());
        }
    };
})(undefined);

Example.setInfo('someModule', 'Showing some stuff.');
Example.showInfo();

不工作示例:Fiddle

现在模块本身被封装在 Example 命名空间内,并且有一些类似公共(public)和私有(private)成员的东西,但是使用它对我来说是完全不同且困难的,可能是因为我无法包装我的请注意以下事实:没有使用 new 关键字创建实例。

在非工作示例中,尽管从未设置该字符串,但为什么它会警告result,并且为什么不警告 Purpose?我认为 setInfo 方法本身有效,所以这可能是我不明白的范围问题。

另外,有没有办法绕过使用 getter/setter 函数?对我来说,目前看起来我通常在构造函数中执行的分配实际上不可能使用模块模式:

function Example(name, purpose) {
    this.name = name;
    this. purpose = purpose;
}

使用模块模式,我要么必须使用 getter/setter,要么使用 init 函数形式的“通用 setter 函数”之类的东西。

来自 PHP OOP,我总是尽可能地避免它们,但我真的不知道如何在基于原型(prototype)的语言中处理它。

也许有一些类似于模块模式的东西,但是使用原型(prototype)——比如模块和构造函数模式?这样我可能更容易理解。

最佳答案

以这种方式使用它,它应该可以工作,你是对的,这是范围问题。

这是工作 fiddle

请注意,我已在变量中拍摄了 this 的快照并正在使用它。通常这样做是为了在上下文发生变化时保留对 this 的引用。

不使用新关键字 在您的情况下,返回 {} 是返回具有定义的属性的匿名对象的新实例。因此,您也不需要 new 关键字。您可以看一下this对于匿名对象。

当您使用 this 时,return {} 对象中的 this 范围发生变化,并且它们不再引用示例对象。

使用 getter/setter 函数 你不需要它们。赋值就可以,但请记住,变量将附加到 self,因此您需要执行 self.name = nameself. Purpose = Purpose 才能进行赋值或获取值。

var Example = (function() {
    var self = this;
    function getInfo() {
        return 'The purpose of "' + name + '" is: ' + purpose;
    }

    // Public stuff
    return {
        name: '',
        purpose: '',
        setInfo: function(name, purpose) {
            self.name = name;
            self.purpose = purpose;
        },
        showInfo: function() {
            alert(getInfo());
        }
    };
})(undefined);

Example.setInfo('someModule', 'Showing some stuff.');
Example.showInfo();

更新: fiddle 没有正确保存,我已经更新了。另外,我刚刚更正了您的代码。

我认为this是您想要实现的目标:

var Example = (function (params) {
    var self = this;
    self.name = params.name;
    self.purpose = params.purpose;

    function getInfo() {       
        return 'The purpose of "' + self.name + '" is: ' + self.purpose;
    };
    self.showInfo(alert(getInfo()));

    return{

    };
});

var myExample = new Example({
    name: 'someModule',
    purpose: 'somePurpose'
});
myExample.showInfo();

关于javascript - 传递参数时如何避免模块模式中的 getter/setter 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29048464/

相关文章:

javascript - 如何将属性值调用到javascript

java - 为什么父类可能不 protected ? ( java )

javascript优秀导出blob问题

javascript - 将 Backbone.js JSON 响应填充到嵌套集合/模型内的嵌套集合中

python - 对象成员函数被重写

java - 扩展或重写外部基类以添加随后也存在于外部子类中的功能

language-agnostic - 没有成员的类是特殊的吗?

java - 如何限制客户端调用方法?

javascript - 如何将一些属性发送到回调函数?

c++ - 在对象数组的每个索引上调用不同的构造函数