JavaScript 設計模式：深入了解有效的設計-＆＃＆按-PHP中文網

今天，我們將戴上電腦科學的帽子，學習一些常見的設計模式。設計模式為開發人員提供了以可重複使用且優雅的方式解決技術問題的方法。有興趣成為更好的 JavaScript 開發人員嗎？然後繼續閱讀。

# 重新發布的教學 每隔幾週，我們就會重新造訪網站歷史上一些讀者最喜歡的貼文。本教學首次發佈於 2012 年 7 月。

簡介

可靠的設計模式是可維護的軟體應用程式的基本構建塊。如果您曾經參加過技術面試，您一定會喜歡被問到這些問題。在本教程中，我們將介紹一些您今天就可以開始使用的模式。

什麼是設計模式？

設計模式是可重複使用的軟體解決方案

簡單地說，設計模式是針對軟體開發過程中經常出現的特定類型問題的可重複使用的軟體解決方案。經過多年的軟體開發實踐，專家們已經找到了解決類似問題的方法。這些解決方案已被封裝到設計模式中。所以：

模式是經過驗證的軟體開發問題解決方案
模式是可擴展的，因為它們通常是結構化的並且具有您應該遵循的規則
模式可以重複使用來解決類似的問題

我們將在本教程中進一步介紹一些設計模式的範例。

設計模式的型別

在軟體開發中，設計模式通常分為幾類。我們將在本教程中介紹三個最重要的內容。下面簡單解釋一下：

建立模式著重於建立物件或類別的方法。這聽起來可能很簡單（在某些情況下確實如此），但大型應用程式需要控制物件建立過程。
結構設計模式著重於管理物件之間關係的方法，以便以可擴展的方式建立應用程式。結構模式的一個關鍵方面是確保應用程式某一部分的變更不會影響所有其他部分。
行為模式著重於物件之間的通訊。

閱讀這些簡短說明後您可能仍有疑問。這是很自然的，一旦我們深入研究下面的一些設計模式，事情就會變得清晰起來。所以請繼續閱讀！

關於 JavaScript 中的類別的註解

在閱讀設計模式時，您經常會看到對類別和物件的參考。這可能會令人困惑，因為 JavaScript 並不真正具有「類別」的構造；更正確的術語是「資料類型」。

JavaScript 中的資料型別

JavaScript 是一種物件導向的語言，其中物件以原型繼承的概念從其他物件繼承。可以透過定義所謂的建構函數來建立資料類型，如下所示：

function Person(config) {
    this.name = config.name;
    this.age = config.age;
}
 
Person.prototype.getAge = function() {
    return this.age;
};
 
var tilo = new Person({name:"Tilo", age:23 });
console.log(tilo.getAge());

登入後複製

請注意在 Person 資料類型上定義方法時使用 prototype。由於多個Person 物件將引用相同的原型，因此這允許getAge() 方法由Person 資料類型的所有實例共享，而不是為每個實例重新定義它。此外，任何繼承自 Person 的資料型別都可以存取 getAge() 方法。

處理隱私

JavaScript 中的另一個常見問題是不存在真正意義上的私有變數。然而，我們可以使用閉包來模擬隱私。考慮以下程式碼片段：

var retinaMacbook = (function() {
 
    //Private variables
    var RAM, addRAM;
 
    RAM = 4;
 
    //Private method
    addRAM = function (additionalRAM) {
        RAM += additionalRAM;
    };
 
    return {
 
        //Public variables and methods
        USB: undefined,
        insertUSB: function (device) {
            this.USB = device;
        },
 
        removeUSB: function () {
            var device = this.USB;
            this.USB = undefined;
            return device;
        }
    };
})();

登入後複製

在上面的範例中，我們建立了一個 retinaMacbook 對象，具有公共和私有變數和方法。這就是我們使用它的方式：

retinaMacbook.insertUSB("myUSB");
console.log(retinaMacbook.USB); //logs out "myUSB"
console.log(retinaMacbook.RAM) //logs out undefined

登入後複製

我們可以使用 JavaScript 中的函數和閉包做更多事情，但我們不會在本教程中詳細介紹所有內容。有了關於 JavaScript 資料類型和隱私的這一小課，我們就可以繼續學習設計模式。

創意設計模式

有許多不同類型的創作設計模式，但我們將在本教程中介紹其中兩種：建構器和原型。我發現這些內容的使用頻率足以引起人們的注意。

建構器模式

建構器模式經常在 Web 開發中使用，您可能之前已經使用過它，但沒有意識到。簡單來說，這個模式可以定義如下：

應用建構器模式允許我們僅透過指定物件的類型和內容來建構物件。我們不必明確地建立該物件。

例如，您可能已經在 jQuery 中執行過無數次了：

var myDiv = $('<div id="myDiv">This is a div.</div>');
 
//myDiv now represents a jQuery object referencing a DOM node.
 
var someText = $('<p/>');
//someText is a jQuery object referencing an HTMLParagraphElement
 
var input = $('<input />');

登入後複製

看一下上面的三个例子。在第一个中，我们传入了包含一些内容的 <div/> 元素。在第二个中，我们传入了一个空的  标签。在最后一个中，我们传入了 <input /> 元素。这三个的结果都是相同的：我们返回了一个引用 DOM 节点的 jQuery 对象。

$变量采用了jQuery中的Builder模式。在每个示例中，我们都返回了一个 jQuery DOM 对象，并且可以访问 jQuery 库提供的所有方法，但我们从未显式调用 document.createElement。 JS 库在幕后处理了所有这些事情。

想象一下，如果我们必须显式创建 DOM 元素并向其中插入内容，那将需要耗费多少工作！通过利用构建器模式，我们能够专注于对象的类型和内容，而不是显式创建它。

原型模式

前面，我们介绍了如何通过函数在 JavaScript 中定义数据类型，以及如何向对象的 prototype 添加方法。原型模式允许对象通过原型从其他对象继承。

原型模式是通过克隆基于现有对象的模板来创建对象的模式。

这是在 JavaScript 中实现继承的一种简单而自然的方式。例如：

var Person = {
    numFeet: 2,
    numHeads: 1,
    numHands:2
};
 
//Object.create takes its first argument and applies it to the prototype of your new object.
var tilo = Object.create(Person);
 
console.log(tilo.numHeads); //outputs 1
tilo.numHeads = 2;
console.log(tilo.numHeads) //outputs 2

登入後複製

Person 对象中的属性（和方法）应用于 tilo 对象的原型。如果我们希望它们不同，我们可以重新定义 tilo 对象的属性。

在上面的例子中，我们使用了 Object.create()。但是，Internet Explorer 8 不支持较新的方法。在这些情况下，我们可以模拟它的行为：

var vehiclePrototype = {
 
  init: function (carModel) {
    this.model = carModel;
  },
 
  getModel: function () {
    console.log( "The model of this vehicle is " + this.model);
  }
};
 
 
function vehicle (model) {
 
  function F() {};
  F.prototype = vehiclePrototype;
 
  var f = new F();
 
  f.init(model);
  return f;
 
}
 
var car = vehicle("Ford Escort");
car.getModel();

登入後複製

此方法唯一的缺点是不能指定只读属性，而可以在使用 Object.create() 时指定。尽管如此，原型模式展示了对象如何从其他对象继承。

结构设计模式

在弄清楚系统应该如何工作时，结构设计模式非常有用。它们使我们的应用程序能够轻松扩展并保持可维护性。我们将研究本组中的以下模式：复合模式和外观模式。

复合模式

复合模式是您之前可能使用过但没有意识到的另一种模式。

复合模式表示可以像对待组中的单个对象一样对待一组对象。

那么这是什么意思呢？好吧，考虑一下 jQuery 中的这个示例（大多数 JS 库都有与此等效的示例）：

$('.myList').addClass('selected');
$('#myItem').addClass('selected');
 
//dont do this on large tables, it's just an example.
$("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
});
 
$('#myButton').on("click", function(event) {
    alert("Clicked.");
});

登入後複製

无论我们处理的是单个 DOM 元素还是 DOM 元素数组，大多数 JavaScript 库都提供一致的 API。在第一个示例中，我们可以将 selected 类添加到 .myList 选择器选取的所有项目中，但在处理单个 DOM 元素 #myItem 时，我们可以使用相同的方法。同样，我们可以使用 on() 方法在多个节点上附加事件处理程序，或者通过相同的 API 在单个节点上附加事件处理程序。

通过利用复合模式，jQuery（和许多其他库）为我们提供了一个简化的 API。

复合模式有时也会引起问题。在 JavaScript 等松散类型语言中，了解我们正在处理单个元素还是多个元素通常会很有帮助。由于复合模式对两者使用相同的 API，因此我们经常会误认为其中一个，并最终出现意想不到的错误。某些库（例如 YUI3）提供两种单独的获取元素的方法（Y.one() 与 Y.all()）。

外观模式

这是我们认为理所当然的另一个常见模式。事实上，这是我最喜欢的之一，因为它很简单，而且我已经看到它被到处使用来帮助解决浏览器不一致的问题。以下是外观模式的含义：

外观模式为用户提供了一个简单的界面，同时隐藏了其底层的复杂性。

外观模式几乎总能提高软件的可用性。再次以 jQuery 为例，该库中比较流行的方法之一是 ready() 方法：

$(document).ready(function() {
 
    //all your code goes here...
 
});

登入後複製

ready() 方法实际上实现了一个门面。如果您查看源代码，您会发现以下内容：

ready: (function() {
 
    ...
 
    //Mozilla, Opera, and Webkit
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", idempotent_fn, false);
        ...
    }
    //IE event model
    else if (document.attachEvent) {
 
        // ensure firing before onload; maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", idempotent_fn);
 
        // A fallback to window.onload, that will always work
        window.attachEvent("onload", idempotent_fn);
 
        ...     
    }
 
})

登入後複製

在底层， ready() 方法并不那么简单。 jQuery 规范了浏览器的不一致，以确保在适当的时间触发 ready()。但是，作为开发人员，您会看到一个简单的界面。

大多数外观模式示例都遵循这一原则。在实现时，我们通常依赖于底层的条件语句，但将其作为一个简单的界面呈现给用户。实现此模式的其他方法包括 animate() 和 css()。你能想到为什么这些会使用外观模式吗？

行为设计模式

任何面向对象的软件系统都会在对象之间进行通信。不组织这种沟通可能会导致难以发现和修复的错误。行为设计模式规定了组织对象之间通信的不同方法。在本节中，我们将研究观察者模式和中介者模式。

观察者模式

观察者模式是我们将要经历的两种行为模式中的第一种。它是这样说的：

在观察者模式中，主题可以拥有对其生命周期感兴趣的观察者列表。每当主题做了一些有趣的事情时，它都会向其观察者发送通知。如果观察者不再有兴趣听主题，则主题可以将其从列表中删除。

听起来很简单，对吧？我们需要三种方法来描述这种模式：

publish(data)：当主题有通知要发出时调用。某些数据可以通过此方法传递。
subscribe(observer)：由主题调用以将观察者添加到其观察者列表中。
unsubscribe(observer)：由主题调用，从其观察者列表中删除观察者。

事实证明，大多数现代 JavaScript 库都支持这三种方法作为其自定义事件基础结构的一部分。通常，有一个 on() 或 attach() 方法，一个 trigger() 或 fire() 方法，以及一个 off() 或 detach()方法。考虑以下代码片段：

1	`//We just create an association between the jQuery events methods`

登入後複製

//and those prescribed by the Observer Pattern but you don't have to.
var o = $( {} );
$.subscribe = o.on.bind(o);
$.unsubscribe = o.off.bind(o);
$.publish = o.trigger.bind(o);
 
// Usage
document.on( 'tweetsReceived', function(tweets) {
    //perform some actions, then fire an event
 
    $.publish('tweetsShow', tweets);
});
 
//We can subscribe to this event and then fire our own event.
$.subscribe( 'tweetsShow', function() {
    //display the tweets somehow
    ..
 
    //publish an action after they are shown.
    $.publish('tweetsDisplayed);
});
 
$.subscribe('tweetsDisplayed, function() {
    ...
});

登入後複製

观察者模式是实现起来比较简单的模式之一，但它非常强大。 JavaScript 非常适合采用这种模式，因为它本质上是基于事件的。下次开发 Web 应用程序时，请考虑开发彼此松散耦合的模块，并采用观察者模式作为通信方式。如果涉及太多主体和观察者，观察者模式可能会出现问题。这可能会发生在大型系统中，我们研究的下一个模式将尝试解决这个问题。

调解者模式

我们要讨论的最后一个模式是中介者模式。它与观察者模式类似，但有一些显着的差异。

中介者模式提倡使用单个共享主题来处理与多个对象的通信。所有对象都通过中介者相互通信。

现实世界中一个很好的类比是空中交通塔，它负责处理机场和航班之间的通信。在软件开发领域，当系统变得过于复杂时，通常会使用中介者模式。通过放置中介，可以通过单个对象来处理通信，而不是让多个对象相互通信。从这个意义上说，中介者模式可以用来替代实现观察者模式的系统。

在这个要点中，Addy Osmani 提供了中介者模式的简化实现。让我们谈谈如何使用它。想象一下，您有一个 Web 应用程序，允许用户单击专辑并播放其中的音乐。您可以像这样设置中介者：

$('#album').on('click', function(e) {
    e.preventDefault();
    var albumId = $(this).id();
    mediator.publish("playAlbum", albumId);
});
 
 
var playAlbum = function(id) {
    …
    mediator.publish("albumStartedPlaying", {songList: [..], currentSong: "Without You"});
 
};
 
var logAlbumPlayed = function(id) {
    //Log the album in the backend
};
 
var updateUserInterface = function(album) {
    //Update UI to reflect what's being played
};
 
//Mediator subscriptions
mediator.subscribe("playAlbum", playAlbum);
mediator.subscribe("playAlbum", logAlbumPlayed);
mediator.subscribe("albumStartedPlaying", updateUserInterface);