19

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

4

10 回答 10

8

我只是想添加我从 Jonathan Rauch 已经推荐的 Pro JavaScript Design Patterns 中学到的最喜欢的 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
    };
})();
于 2008-08-23T23:20:41.430 回答
7

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

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

# 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

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

于 2008-08-23T23:03:34.780 回答
3

@jamting：

JavaScript 中的单例设计模式

我的天啊。我无语了。

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

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

维基百科有一个JS中的Factory示例。

于 2008-08-23T22:26:19.017 回答
3

Addy Osmani有一本很好的免费在线书籍，介绍了 Javascript 设计模式：Essential JavaScript Design Patterns For Beginners, Volume 1

于 2012-01-04T22:20:14.523 回答
2

我最近使用了Bernie 的 Better Animation Class，它广泛使用了策略设计模式。伯尼很好地描述了为什么应该使用策略模式，但遗憾的是没有准确解释代码是如何工作的。再说一次，在使用设计模式参考时，请查看 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()
于 2008-08-24T00:59:59.273 回答
1

这种做法在 JavaScript 中叫什么？

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

于 2010-12-22T03:03:01.673 回答
0

我怀疑他们可以——这里有一个 Singleton 的例子：

JavaScript 中的单例设计模式

于 2008-08-23T22:02:32.633 回答
0

他们当然可以。这是一本关于该主题的书：
Pro JavaScript Design Patterns
这是工厂模式的一个示例：
Javascript中的工厂模式

于 2008-08-23T22:30:07.713 回答
0

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

于 2008-11-27T02:58:40.223 回答
0

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

于 2010-04-27T04:02:17.707 回答