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

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

即使没有正式的设计模式，也可以随意发布代码

---

我已经写了很多javascript，但是我没有在我所做的事情中应用太多面向对象的模式，我确信我遗漏了很多。

我是模块模式的粉丝。这是一种实现可扩展、非依赖（大多数情况下）框架的方法

示例：

框架

Q

，定义如下：

var Q = {};

要添加函数，请执行以下操作：

Q.test = function(){};

这两行代码一起用于构成模块。模块背后的思想是，它们都扩展了一些基本框架，在本例中是

Q

，但彼此不依赖（如果设计正确），可以按任何顺序包含

在模块中，如果框架对象不存在，则首先创建框架对象（这是单例模式的一个示例）：

这样，您就可以在单独的文件中包含多个模块（如上面的模块），并且可以按任意顺序包含它们。其中任何一个都将创建框架对象，然后对其进行扩展。无需手动检查框架是否存在。然后，要检查自定义代码中是否存在模块/函数：

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

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

例如：

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

---

以下是三种流行的JavaScript模式。这些措施很容易实施，因为：

• -Eric Miraglia的例子（并广受欢迎）
• -奥利弗·斯蒂尔的例子
• -达斯汀·迪亚兹的例子

您可能还想签出：

• 顺便

以下是Diaz在2008年发表的Google I/O演讲，他在演讲中讨论了书中的一些主题：

---

单例模式通常对“封装”和组织内容非常有用。您甚至可以更改可访问性

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

我非常喜欢jQuery插件。与其修改插件以满足您的需要，不如编写一个自定义插件，它只转发请求并添加额外的参数和功能

例如，如果您需要始终传递一组默认参数，并且需要与业务逻辑关联的稍微不同的行为，编写一个插件，它可以执行满足您需要的

pre

和

post

工作，并在未指定这些特定参数的情况下传递默认参数

---

这样做的主要好处是，您可以更新库，而不用担心移植库更改。您的代码可能会中断，但至少有可能不会中断。

继承

我使用的是基于的，我发现它的工作原理非常接近于在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结构（如接口）来增强应用程序设计。是为了增强

功能。prototype

，以获得以下符号：

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

面向对象模式

至于Java意义上的“模式”，我发现它只适用于（非常适合缓存）和事件驱动功能，例如当用户单击按钮时分配一些操作

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

// 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包中的几个技巧，希望它们对你有用

---

如果你打算沿着这条路走下去，我建议你读道格拉斯·克罗克福德的书。这是一本关于这方面的精彩著作。

javascript世界中有用的模式之一是链式模式，它最初由LINQ流行，也用于jQuery

此模式使我们能够以链接方式调用类的不同方法

这种模式的主要结构如下

var Calaculator = function (init) {
    var result = 0;
    this.add = function (x) { result += (init + x); return this; };
    this.sub = function (x) { result += (init - x); return this; };
    this.mul = function (x) { result += (init * x); return this; };
    this.div = function (x) { result += (init / x); return this; };

    this.equals = function (callback) {
        callback(result);
    }

    return this;
};


new Calaculator(0)
    .add(10)
    .mul(2)
    .sub(5)
    .div(3)
    .equals(function (result) {
        console.log(result);
    });

---

该模式的关键思想是

这个
关键字，这使得访问计算器功能的其他公共成员成为可能。
您可能还没有看到您可能认为的经典OOP。然而，您可能已经利用了原型OOP的功能，但从未真正意识到。我确实（有时）意识到，当我使用OOP时，我想更自觉地开始使用OOP，正是因为我想更仔细地思考这个问题，所以我投票将这个问题作为离题题来结束，因为它只是要求列出其他人在代码中所做的事情。太棒了——这是我一直在使用的一个！但这正是我的javascript OO的范围对-同意！你以前有没有开发过自己的自定义方法，可以这样工作？很好！咖喱看起来是一种更聪明的方式来做一些我试图做的概括。已经在使用简单的模块和备忘录形式，但需要研究这些例子来推动我目前的做法。你用的最多的是哪一种？@ming:可能是模块模式吧。非常容易实现和理解，并且它附带了一些很酷的特性，包括名称空间和私有变量/方法。这看起来非常有用。您如何在代码中使用它？谢谢分享！我在最近做的一个项目中使用了它，在该项目中，我为通用函数、UI和其他两个专用机制提供了单独的JavaScript文件。所有文件都添加了函数
var Calaculator = function (init) {
    var result = 0;
    this.add = function (x) { result += (init + x); return this; };
    this.sub = function (x) { result += (init - x); return this; };
    this.mul = function (x) { result += (init * x); return this; };
    this.div = function (x) { result += (init / x); return this; };

    this.equals = function (callback) {
        callback(result);
    }

    return this;
};


new Calaculator(0)
    .add(10)
    .mul(2)
    .sub(5)
    .div(3)
    .equals(function (result) {
        console.log(result);
    });