使用 JavaScript 实现设计模式的一些示例有哪些？

StackOverflow https://stackoverflow.com/questions/24642

题

我是一名使用 JavaScript 的中等技能程序员，但我不是大师。我知道你可以用它做一些非常强大的事情，只是除了相当基本的 DOM 操作之外我还没有看到太多。我想知道人们是否可以使用 JavaScript 提供一些传统设计模式概念的示例，例如工厂方法、单例等。在什么情况下这些模式会在网络上使用？

有帮助吗？

解决方案

我只是想添加我最喜欢的 JavaScript 模式，这是我从 Jonathan Rauch 已经推荐的 Pro JavaScript 设计模式中学到的。

它是命名空间单例模式。基本上，您通过单例创建名称空间，这允许您隐藏外部使用的方法和变量。隐藏/公开方法实际上是隐藏的，因为它们是在闭包中定义的。

var com = window.com || {};
com.mynamespace = com.mynamespace || {};
com.mynamespace.newpackage = (function() {
    var myPrivateVariable = "hidden";
    var myPublicVariable = "exposed";

    function myPrivateMethod() {
        return "also hidden";
    }

    function myPublicMethod() {
        return "also exposed";
    }

    return {
        myPublicMethod: myPublicMethod,
        myPublicVariable: myPublicVariable
    };
})();

其他提示

尼古拉谈到了这一点，但设计模式在具有巨大差异的语言之间并不一致。我之前读过（并且同意），设计模式通常是语言中缺少功能的标志。

作为一个完美的例子，“工厂”模式在某些语言中是完全不必要的，Ruby就是我正在考虑的例子（因为对象构造只是类实例上的一个方法）：

# create a factory for MyObject
my_factory = MyObject
instance_1 = my_factory.new

# change the factory to another class
my_factory = MyOtherObject
instance_2 = my_factory.new

每当您将设计模式应用到与最初开发的语言不同的语言时，请务必考虑它是否真的有必要，以及您可以通过哪些方式使用可用的新语言功能来改进它。设计模式只是一个指南，您应该始终考虑您打算使用的用途是否真的需要该模式，或者是否可以在您的情况下以更好的方式采用它。

有一个好的 自由的 Addy Osmani 的在线书籍，介绍了 Javascript 设计模式： 初学者必备的 JavaScript 设计模式，第 1 卷

@jamting：

JavaScript 中的单例设计模式

我的天啊。我无语了。

致OP：是的，当然在某种意义上你可以，但是有些模式，正如你所习惯的那样，并不像在 Java 中那样可见。例如，单例只是一个对象：

var singleton = {
    sayHello: function() {
       alert("Hello!")
    }
};

维基百科有一个例子 工厂 在JS中。

我最近用过 伯尼的更好动画课 这充分利用了 战略 设计模式。Bernie 在描述为什么应该使用策略模式方面做得很好，但遗憾的是没有准确解释代码是如何工作的。再说一次，当使用设计模式参考时，请查看 animator.js 中的代码和注释，以获取有关如何使用策略模式的好示例。

例子：

// This object controls the progress of the animation 
ex1 = new Animator();
// The Animator's subjects define its behaviour 
ex1.addSubject(updateButton);
function updateButton(value) {
    $('ex1Button').innerHTML = "Progress: " + Math.round(value * 100) + "%";
}

// now click below: each click to the button calls ex1.toggle()

这种做法在 JavaScript 中被称为什么？

这就是自调用设计模式。在我开始使用 Javascript 之前我从未见过它。

我怀疑他们可以 - 这是一个 Singleton 的例子：

JavaScript 中的单例设计模式

当然可以。这是一本关于这个主题的书：
专业 JavaScript 设计模式
这是工厂模式的示例：
JavaScript 中的工厂模式

我想在这里添加我作为一个小组研究的内容，并讨论了 C# 和 JavaScript 中的设计模式。在会议期间，让我最感兴趣的是 C# 人员用 JavaScript 编写代码，而 JavaScript 人员也是如此。离开会议后，我尝试在家了解更多信息并在这里写博客http://tech.wowkhmer.com/category/Design-Patterns.aspx 对于 C# 和 JavaScript。

听 Justin Diaz 谈论 Javascript 的设计模式。这次演讲也是基于他上面提到的《Pro Javascript Techniques》一书。Google I/O 演讲时长约 45 分钟

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top