<p>

<p>Today, we will put on our computer science hats and learn some common design patterns. Design patterns provide developers with ways to solve technical problems in a reusable and elegant way. Interested in becoming a better JavaScript developer? Then keep reading.

<p>

Republished tutorial <p>Every few weeks, we revisit some of our readers' favorite posts from the site's history. This tutorial was first published in July 2012.

---

Introduction

<p>Solid design patterns are the basic building blocks of maintainable software applications. If you've ever been in a technical interview, you'll love being asked these questions. In this tutorial, we'll cover some patterns you can start using today.

---

What is a design pattern?

<p>Design patterns are reusable software solutions

<p>Simply put, design patterns are reusable software solutions to specific types of problems that often occur during software development. After years of software development practice, experts have found ways to solve similar problems. These solutions have been encapsulated into design patterns. so:

• Patterns are proven solutions to software development problems
• Patterns are extensible because they are usually structured and have rules that you should follow
• Patterns can be reused to solve similar problems

<p> We will cover some examples of design patterns further in this tutorial.

---

Types of design patterns

<p>In software development, design patterns are usually divided into several categories. We'll cover the three most important ones in this tutorial. Here’s a brief explanation:

1. Creation Pattern focuses on methods of creating objects or classes. This may sound simple (and in some cases it is), but large applications require control over the object creation process. <p>

2. Structure Design patterns focus on ways to manage relationships between objects in order to build applications in a scalable way. A key aspect of structural patterns is ensuring that changes to one part of the application do not affect all other parts. <p>

3. Behavior Pattern focuses on communication between objects.

<p>After reading these brief instructions you may still have questions. This is natural and things will become clear once we delve into some of the design patterns below. So please keep reading!

---

Notes on classes in JavaScript

<p>When reading about design patterns, you will often see references to classes and objects. This can be confusing because JavaScript doesn't really have a construct called "class"; the more correct term is "data type".

Data types in JavaScript

<p>JavaScript is an object-oriented language in which objects inherit from other objects with the concept of prototypal inheritance. Data types can be created by defining so-called constructors as follows:

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());

<p>Please note the use of prototype when defining methods on the Person data type. Since multiple Person objects will reference the same prototype, this allows the getAge() method to be shared by all instances of the Person data type, rather than for each instance redefines it. Additionally, any data type that inherits from Person can access the getAge() method.

Handling Privacy

<p>Another common problem in JavaScript is that there are no truly private variables. However, we can use closures to simulate privacy. Consider the following code snippet:

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;
        }
    };
})();

<p>In the above example, we created a retinaMacbook object with public and private variables and methods. This is how we use it:

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

<p> There's a lot more we can do with functions and closures in JavaScript, but we won't cover everything in detail in this tutorial. With this little lesson on JavaScript data types and privacy, we can move on to learning about design patterns.

---

Creative Design Mode

<p> There are many different types of creative design patterns, but we'll cover two of them in this tutorial: builders and prototypes. I find that these are used often enough to cause concern.

Builder Pattern

<p>The builder pattern is often used in web development, and you may have used it before without realizing it. Simply put, this pattern can be defined as follows:

<p>The application builder pattern allows us to construct objects by just specifying their type and contents. We don't have to create the object explicitly.

<p>For example, you may have done this countless times in 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 />');

<p>看一下上面的三個(gè)例子。在第一個(gè)中，我們傳入了包含一些內(nèi)容的 <div/> 元素。在第二個(gè)中，我們傳入了一個(gè)空的 <p> 標(biāo)簽。在最后一個(gè)中，我們傳入了 <input /> 元素。這三個(gè)的結(jié)果都是相同的：我們返回了一個(gè)引用 DOM 節(jié)點(diǎn)的 jQuery 對(duì)象。

<p>$變量采用了jQuery中的Builder模式。在每個(gè)示例中，我們都返回了一個(gè) jQuery DOM 對(duì)象，并且可以訪問(wèn) jQuery 庫(kù)提供的所有方法，但我們從未顯式調(diào)用 document.createElement。 JS 庫(kù)在幕后處理了所有這些事情。

<p>想象一下，如果我們必須顯式創(chuàng)建 DOM 元素并向其中插入內(nèi)容，那將需要耗費(fèi)多少工作！通過(guò)利用構(gòu)建器模式，我們能夠?qū)Ｗ⒂趯?duì)象的類型和內(nèi)容，而不是顯式創(chuàng)建它。

原型模式

<p>前面，我們介紹了如何通過(guò)函數(shù)在 JavaScript 中定義數(shù)據(jù)類型，以及如何向?qū)ο蟮?prototype 添加方法。原型模式允許對(duì)象通過(guò)原型從其他對(duì)象繼承。

<p>原型模式是通過(guò)克隆基于現(xiàn)有對(duì)象的模板來(lái)創(chuàng)建對(duì)象的模式。

<p>這是在 JavaScript 中實(shí)現(xiàn)繼承的一種簡(jiǎn)單而自然的方式。例如：

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

<p>Person 對(duì)象中的屬性（和方法）應(yīng)用于 tilo 對(duì)象的原型。如果我們希望它們不同，我們可以重新定義 tilo 對(duì)象的屬性。

<p>在上面的例子中，我們使用了 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();

<p>此方法唯一的缺點(diǎn)是不能指定只讀屬性，而可以在使用 Object.create() 時(shí)指定。盡管如此，原型模式展示了對(duì)象如何從其他對(duì)象繼承。

---

結(jié)構(gòu)設(shè)計(jì)模式

<p>在弄清楚系統(tǒng)應(yīng)該如何工作時(shí)，結(jié)構(gòu)設(shè)計(jì)模式非常有用。它們使我們的應(yīng)用程序能夠輕松擴(kuò)展并保持可維護(hù)性。我們將研究本組中的以下模式：復(fù)合模式和外觀模式。

復(fù)合模式

<p>復(fù)合模式是您之前可能使用過(guò)但沒(méi)有意識(shí)到的另一種模式。

<p>復(fù)合模式表示可以像對(duì)待組中的單個(gè)對(duì)象一樣對(duì)待一組對(duì)象。

<p>那么這是什么意思呢？好吧，考慮一下 jQuery 中的這個(gè)示例（大多數(shù) JS 庫(kù)都有與此等效的示例）：

$('.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.");
});

<p>無(wú)論我們處理的是單個(gè) DOM 元素還是 DOM 元素?cái)?shù)組，大多數(shù) JavaScript 庫(kù)都提供一致的 API。在第一個(gè)示例中，我們可以將 selected 類添加到 .myList 選擇器選取的所有項(xiàng)目中，但在處理單個(gè) DOM 元素 #myItem 時(shí)，我們可以使用相同的方法。同樣，我們可以使用 on() 方法在多個(gè)節(jié)點(diǎn)上附加事件處理程序，或者通過(guò)相同的 API 在單個(gè)節(jié)點(diǎn)上附加事件處理程序。

<p>通過(guò)利用復(fù)合模式，jQuery（和許多其他庫(kù)）為我們提供了一個(gè)簡(jiǎn)化的 API。

<p>復(fù)合模式有時(shí)也會(huì)引起問(wèn)題。在 JavaScript 等松散類型語(yǔ)言中，了解我們正在處理單個(gè)元素還是多個(gè)元素通常會(huì)很有幫助。由于復(fù)合模式對(duì)兩者使用相同的 API，因此我們經(jīng)常會(huì)誤認(rèn)為其中一個(gè)，并最終出現(xiàn)意想不到的錯(cuò)誤。某些庫(kù)（例如 YUI3）提供兩種單獨(dú)的獲取元素的方法（Y.one() 與 Y.all()）。

外觀模式

<p>這是我們認(rèn)為理所當(dāng)然的另一個(gè)常見(jiàn)模式。事實(shí)上，這是我最喜歡的之一，因?yàn)樗芎?jiǎn)單，而且我已經(jīng)看到它被到處使用來(lái)幫助解決瀏覽器不一致的問(wèn)題。以下是外觀模式的含義：

<p>外觀模式為用戶提供了一個(gè)簡(jiǎn)單的界面，同時(shí)隱藏了其底層的復(fù)雜性。

<p>外觀模式幾乎總能提高軟件的可用性。再次以 jQuery 為例，該庫(kù)中比較流行的方法之一是 ready() 方法：

$(document).ready(function() {

    //all your code goes here...

});

<p>ready() 方法實(shí)際上實(shí)現(xiàn)了一個(gè)門(mén)面。如果您查看源代碼，您會(huì)發(fā)現(xiàn)以下內(nèi)容：

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);

        ...     
    }

})

<p>在底層， ready() 方法并不那么簡(jiǎn)單。 jQuery 規(guī)范了瀏覽器的不一致，以確保在適當(dāng)?shù)臅r(shí)間觸發(fā) ready()。但是，作為開(kāi)發(fā)人員，您會(huì)看到一個(gè)簡(jiǎn)單的界面。

<p>大多數(shù)外觀模式示例都遵循這一原則。在實(shí)現(xiàn)時(shí)，我們通常依賴于底層的條件語(yǔ)句，但將其作為一個(gè)簡(jiǎn)單的界面呈現(xiàn)給用戶。實(shí)現(xiàn)此模式的其他方法包括 animate() 和 css()。你能想到為什么這些會(huì)使用外觀模式嗎？

---

行為設(shè)計(jì)模式

<p>任何面向?qū)ο蟮能浖到y(tǒng)都會(huì)在對(duì)象之間進(jìn)行通信。不組織這種溝通可能會(huì)導(dǎo)致難以發(fā)現(xiàn)和修復(fù)的錯(cuò)誤。行為設(shè)計(jì)模式規(guī)定了組織對(duì)象之間通信的不同方法。在本節(jié)中，我們將研究觀察者模式和中介者模式。

觀察者模式

<p>觀察者模式是我們將要經(jīng)歷的兩種行為模式中的第一種。它是這樣說(shuō)的：

<p>在觀察者模式中，主題可以擁有對(duì)其生命周期感興趣的觀察者列表。每當(dāng)主題做了一些有趣的事情時(shí)，它都會(huì)向其觀察者發(fā)送通知。如果觀察者不再有興趣聽(tīng)主題，則主題可以將其從列表中刪除。

<p>聽(tīng)起來(lái)很簡(jiǎn)單，對(duì)吧？我們需要三種方法來(lái)描述這種模式：

• publish(data)：當(dāng)主題有通知要發(fā)出時(shí)調(diào)用。某些數(shù)據(jù)可以通過(guò)此方法傳遞。
• subscribe(observer)：由主題調(diào)用以將觀察者添加到其觀察者列表中。
• unsubscribe(observer)：由主題調(diào)用，從其觀察者列表中刪除觀察者。

<p>事實(shí)證明，大多數(shù)現(xiàn)代 JavaScript 庫(kù)都支持這三種方法作為其自定義事件基礎(chǔ)結(jié)構(gòu)的一部分。通常，有一個(gè) on() 或 attach() 方法，一個(gè) trigger() 或 fire() 方法，以及一個(gè) off() 或 detach()方法?？紤]以下代碼片段：

//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() {
    ...
});

<p>觀察者模式是實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單的模式之一，但它非常強(qiáng)大。 JavaScript 非常適合采用這種模式，因?yàn)樗举|(zhì)上是基于事件的。下次開(kāi)發(fā) Web 應(yīng)用程序時(shí)，請(qǐng)考慮開(kāi)發(fā)彼此松散耦合的模塊，并采用觀察者模式作為通信方式。如果涉及太多主體和觀察者，觀察者模式可能會(huì)出現(xiàn)問(wèn)題。這可能會(huì)發(fā)生在大型系統(tǒng)中，我們研究的下一個(gè)模式將嘗試解決這個(gè)問(wèn)題。

調(diào)解者模式

<p>我們要討論的最后一個(gè)模式是中介者模式。它與觀察者模式類似，但有一些顯著的差異。

<p>中介者模式提倡使用單個(gè)共享主題來(lái)處理與多個(gè)對(duì)象的通信。所有對(duì)象都通過(guò)中介者相互通信。

<p>現(xiàn)實(shí)世界中一個(gè)很好的類比是空中交通塔，它負(fù)責(zé)處理機(jī)場(chǎng)和航班之間的通信。在軟件開(kāi)發(fā)領(lǐng)域，當(dāng)系統(tǒng)變得過(guò)于復(fù)雜時(shí)，通常會(huì)使用中介者模式。通過(guò)放置中介，可以通過(guò)單個(gè)對(duì)象來(lái)處理通信，而不是讓多個(gè)對(duì)象相互通信。從這個(gè)意義上說(shuō)，中介者模式可以用來(lái)替代實(shí)現(xiàn)觀察者模式的系統(tǒng)。

<p>在這個(gè)要點(diǎn)中，Addy Osmani 提供了中介者模式的簡(jiǎn)化實(shí)現(xiàn)。讓我們談?wù)勅绾问褂盟?。想象一下，您有一個(gè) Web 應(yīng)用程序，允許用戶單擊專輯并播放其中的音樂(lè)。您可以像這樣設(shè)置中介者：

$('#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);

<p>此模式相對(duì)于觀察者模式的好處是單個(gè)對(duì)象負(fù)責(zé)通信，而在觀察者模式中，多個(gè)對(duì)象可以相互監(jiān)聽(tīng)和訂閱。

<p>在觀察者模式中，沒(méi)有封裝約束的單個(gè)對(duì)象。相反，觀察者和主體必須合作來(lái)維持約束。通信模式由觀察者和主體互連的方式?jīng)Q定：一個(gè)主體通常有許多觀察者，有時(shí)一個(gè)主體的觀察者是另一個(gè)觀察者的主體。

---

結(jié)論

<p>過(guò)去已經(jīng)有人成功應(yīng)用過(guò)它。

<p>設(shè)計(jì)模式的偉大之處在于，過(guò)去已經(jīng)有人成功地應(yīng)用過(guò)它。有許多開(kāi)源代碼可以在 JavaScript 中實(shí)現(xiàn)各種模式。作為開(kāi)發(fā)人員，我們需要了解現(xiàn)有的模式以及何時(shí)應(yīng)用它們。我希望本教程可以幫助您在回答這些問(wèn)題上更進(jìn)一步。

---

補(bǔ)充閱讀

<p>本文的大部分內(nèi)容可以在 Addy Osmani 所著的優(yōu)秀的《學(xué)習(xí) JavaScript 設(shè)計(jì)模式》一書(shū)中找到。這是一本根據(jù)知識(shí)共享許可免費(fèi)發(fā)布的在線圖書(shū)。本書(shū)廣泛涵蓋了許多不同模式的理論和實(shí)現(xiàn)，包括普通 JavaScript 和各種 JS 庫(kù)。我鼓勵(lì)您在開(kāi)始下一個(gè)項(xiàng)目時(shí)將其作為參考。

The above is the detailed content of JavaScript Design Patterns: A closer look at effective design. For more information, please follow other related articles on the PHP Chinese website!