实用的javascript面向对象设计模式的示例

Question

您在应用程序的javascript中使用了哪些面向对象的设计模式,为什么？

即使没有附加正式的设计模式,也可以随意发布代码.

我已经写了很多javascript,但是我没有将很多面向对象的模式应用到我正在做的事情上,而且我确信我错过了很多.

Answer 1

以下是三种流行的JavaScript模式.由于闭包,这些很容易实现:

• 模块模式 - Eric Miraglia的例子(并且受欢迎)
• 记忆 - Oliver Steele的例子
• Currying - Dustin Diaz的例子

您可能还想看看:

• 专业JavaScript的设计模式由罗斯Harmes和达斯汀·迪亚兹

以下是Diaz提供的2008年Google I/O演讲,他在书中讨论了一些主题:

• Google I/O 2008 - 用富有表现力的语言设计模式

Answer 2

遗产

我使用基于ExtJS 3的继承符号,我发现它与在Java中模拟经典继承非常接近.它主要运行如下:

// Create an 'Animal' class by extending
// the 'Object' class with our magic method
var Animal = Object.extend(Object, {
    move : function() {alert('moving...');}
});

// Create a 'Dog' class that extends 'Animal'
var Dog = Object.extend(Animal, {
    bark : function() {alert('woof');}
});

// Instantiate Lassie
var lassie = new Dog();

// She can move and bark!
lassie.move();
lassie.bark();

命名空间

我也同意Eric Miraglia坚持使用命名空间,因此上面的代码应该在窗口对象之外的自己的上下文中运行,如果您打算将代码作为在浏览器窗口中执行的许多并发框架/库之一运行,这是至关重要的.

这意味着窗口对象的唯一方法是通过您自己的命名空间/模块对象:

// Create a namespace / module for your project
window.MyModule = {};

// Commence scope to prevent littering 
// the window object with unwanted variables
(function() {

    var Animal = window.MyModule.Animal = Object.extend(Object, {
         move: function() {alert('moving...');}
    });

    // .. more code

})();

接口

您还可以使用更多高级OOP构造(如接口)来增强应用程序设计.我对这些方法的处理方法是增强它Function.prototype以获得这些方面的符号:

var Dog = Object.extend(Animal, {
     bark: function() {
         alert('woof');
     }
     // more methods ..
}).implement(Mammal, Carnivore);

OO模式

至于Java意义上的"模式",我只发现了用于Singleton模式(非常适合缓存)和Observer模式用于事件驱动的功能,例如在用户点击按钮时分配一些操作.

利用观察者模式的一个例子是:

// Instantiate object
var lassie = new Animal('Lassie');

// Register listener
lassie.on('eat', function(food) {
   this.food += food;
});

// Feed lassie by triggering listener
$('#feeding-button').click(function() {
    var food = prompt('How many food units should we give lassie?');
    lassie.trigger('eat', [food]);
    alert('Lassie has already eaten ' + lassie.food + ' units');
});

这只是我的OO JS包中的一些技巧,希望它们对你有用.

我建议如果你想沿着这条道路走下去,你读道格拉斯Crockfords Javascript:好零件.这是一本很棒的书.

Answer 3

我是模块模式的粉丝.它是一种实现可扩展,非依赖(大多数时间)框架的方法.

例:

框架,Q定义如下:

var Q = {};

要添加功能:

Q.test = function(){};

这两行代码一起用于形成模块.模块背后的想法是,它们都扩展了一些基础框架,在这种情况下Q,但不相互依赖(如果设计正确),并且可以包含在任何顺序中.

在模块中,首先创建框架对象(如果它不存在)(这是Singleton模式的一个示例):

if (!Q)
    var Q = {};

Q.myFunction = function(){};

这样,您可以在单独的文件中包含多个模块(如上所述),并以任何顺序包含它们.其中任何一个都将创建框架对象,然后对其进行扩展.没有手动需要检查框架是否存在.然后,检查自定义代码中是否存在模块/函数:

if (Q.myFunction)
    Q.myFunction();
else
    // Use a different approach/method

Answer 4

单例模式通常对"封装"和组织内容非常有用.您甚至可以更改辅助功能.

var myInstance = {
  method1: function () {
    // ...
  },
  method2: function () {
    // ...
  }
};

在javascript中实现单例的最简洁方法

Answer 5

我真的很喜欢 jquery 的方法链接模式，它允许您在一个对象上调用多个方法。它使得在一行代码中执行多个操作变得非常容易。

例子：

$('#nav').click(function() {
   $(this).css('color','#f00').fadeOut();
});