理解JavaScript中的設(shè)計(jì)模式
簡(jiǎn)介：可靠的設(shè)計(jì)模式是可維護(hù)軟件的基石，如果你曾參與技術(shù)面試，很有可能被問(wèn)到關(guān)于設(shè)計(jì)模式的這類東西。下面這個(gè)指南中，我們將學(xué)習(xí)一些今天就可以用得著的設(shè)計(jì)模式。
什么是設(shè)計(jì)模式？
簡(jiǎn)單來(lái)說(shuō)，設(shè)計(jì)模式就是對(duì)特定類型問(wèn)題重用的軟件解決方案，這些問(wèn)題在軟件開(kāi)發(fā)的時(shí)候經(jīng)常會(huì)碰到，通過(guò)很多年的實(shí)踐，專家對(duì)一些相似地問(wèn)題總結(jié)出一些方法，這些方法就封裝成為一種設(shè)計(jì)模式，所以：
模式是一種經(jīng)驗(yàn)證的用于解決軟件開(kāi)發(fā)問(wèn)題的方案。
模式是可擴(kuò)展的，因?yàn)樗麄兘?jīng)常被結(jié)構(gòu)化而且你需要遵循某些規(guī)則。
對(duì)于相似的問(wèn)題，模式可被重用
在接下來(lái)的教程中,我們將直接給出一些設(shè)計(jì)模式的例子。
設(shè)計(jì)模式的種類
軟件開(kāi)發(fā)中，設(shè)計(jì)模式通常分為幾種類別，在這篇教程中我們重點(diǎn)介紹以下三種：
1、創(chuàng)建型模式專注于構(gòu)建對(duì)象或者類，對(duì)象的創(chuàng)建聽(tīng)起來(lái)很簡(jiǎn)單(在某些情況下），但是大型應(yīng)用需要控制對(duì)象的創(chuàng)建過(guò)程。
2、結(jié)構(gòu)型設(shè)計(jì)模式專注于管理對(duì)象之間的關(guān)系使得應(yīng)用是用一種可擴(kuò)展的架，，結(jié)構(gòu)型模式關(guān)鍵點(diǎn)是確保在應(yīng)用程序中部分改變不會(huì)影響其他部分。
3、行為模式專注于對(duì)象間的通信
你可能在讀完這些簡(jiǎn)介的描述后仍然覺(jué)得有問(wèn)題，這很正常，一旦我們看完了這些模式的深入介紹后，問(wèn)題也會(huì)變得明朗起來(lái)，所以接著往下看吧。
類在JavaScript中的注意點(diǎn)：
當(dāng)我們讀設(shè)計(jì)模式時(shí)，你經(jīng)常會(huì)提及到類和對(duì)象。這很疑惑，因?yàn)镴avaScript沒(méi)有真正“類”的構(gòu)造，一個(gè)更合適的術(shù)語(yǔ)叫“數(shù)據(jù)類型”。
JavaScript中的數(shù)據(jù)類型：
JavaScript是一門面向?qū)ο蟮恼Z(yǔ)言，一個(gè)對(duì)象繼承自其他對(duì)象，這個(gè)概念以原型繼承著稱。一個(gè)數(shù)據(jù)類型可以通過(guò)構(gòu)造函數(shù)創(chuàng)建，就像：
- 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());
當(dāng)方法定義在Person數(shù)據(jù)類型中時(shí)注意prototype的使用，由于多個(gè)Person對(duì)象將引用同一個(gè)prototype，這樣就允許 getAge()方法可以被所有的Person數(shù)據(jù)類型的實(shí)例共享。而不是每個(gè)實(shí)例都重新定義一次，除此之外，任何繼承自Person的數(shù)據(jù)類型都可以訪問(wèn)getAge()方法。
#p#
處理私有數(shù)據(jù)
在JavaScript中另一個(gè)常見(jiàn)的問(wèn)題是沒(méi)有真正意義上的私有變量，然而我們可以使用閉包
去模擬私有變量，考慮下面這代碼片段：
- 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;
- }
- };
- })();
在上面這個(gè)例子中，我們創(chuàng)建了一個(gè)retinaMacbook對(duì)象，含有公有和私有變量及方法，可以這樣來(lái)使用它：
- retinaMacbook.insertUSB("myUSB");
- console.log(retinaMacbook.USB); //logs out "myUSB"
- console.log(retinaMacbook.RAM) //logs out undefined
在JavaScript中函數(shù)和閉包可以做更多的事，但是我們?cè)谶@個(gè)教程中沒(méi)法涉及到方方面面，我們簡(jiǎn)短的學(xué)習(xí)了JavaScript的數(shù)據(jù)類型和私有變量?，F(xiàn)在我們可以學(xué)習(xí)設(shè)計(jì)模式了。
創(chuàng)建型設(shè)計(jì)模式：
有很多種不同的創(chuàng)建設(shè)計(jì)模式，但是在這里我們主要討論兩種，建造模式(Builder)和原型模式(Prototype)。
建造模式：
建造模式通常用于web開(kāi)發(fā)，有時(shí)你在使用它你卻還沒(méi)意識(shí)到。簡(jiǎn)而言之，這個(gè)模式可以定義如下：
“使用建造模式允許我們僅僅通過(guò)指定類型和內(nèi)容來(lái)構(gòu)造一個(gè)對(duì)象，我們不需要明確的創(chuàng)建對(duì)象。”
例如，你可能無(wú)數(shù)次的使用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 />');
看看上面這三個(gè)例子，第一個(gè)，傳遞了一個(gè)<div/>元素附帶一些內(nèi)容，第二個(gè)，傳遞一個(gè)空的<p>標(biāo)簽，第三個(gè)，傳遞一個(gè)<input/>元素。這三個(gè)例子的結(jié)果都是一樣的：返回一個(gè)jQuery對(duì)象的引用指向一個(gè)DOM節(jié)點(diǎn)。
在jQuery中$變量采用的就是建造模式，例如：返回的jQuery Dom對(duì)象可以訪問(wèn)由jQuery庫(kù)提供的所有方法，但是并沒(méi)有顯示的調(diào)用document.createElement，JS 庫(kù)通常都是通過(guò)這種高級(jí)方法處理的。
想象有多少工作要做，如果我們顯示創(chuàng)建DOM元素然后插入內(nèi)容到里面。通過(guò)利用建造模式，我們可以專注于對(duì)象的類型和內(nèi)容，而不是顯示的去創(chuàng)建。
#p#
原型模式
之前，我們討論了在JavaScript中通過(guò)函數(shù)和添加方法到對(duì)象的原型中定義一個(gè)數(shù)據(jù)類型。原型模式通過(guò)原型允許對(duì)象繼承自其它對(duì)象。
“原型模式是一個(gè)基于已經(jīng)存在的模板對(duì)象克隆出新對(duì)象的模式”
在JavaScript中這是一種簡(jiǎn)單自然的方式來(lái)實(shí)現(xià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
屬性(方法)在Person對(duì)象中應(yīng)用到了tilo對(duì)象的原型，我們可以重新定義在tilo對(duì)象中的屬性，如果我們想要它不一樣的話。上面例子中，我們使用Object.create()，然而，IE8中不支持這個(gè)比較新的方法，在這種情況下，我們可以模擬他的行為：
- 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();
唯一不好的地方就是這個(gè)方法你沒(méi)法指定為可讀的屬性，而使用Object.create()時(shí)可以指定。不管怎樣，原型模式展示了對(duì)象如何繼承自其它對(duì)象。
結(jié)構(gòu)化模式：
結(jié)構(gòu)化設(shè)計(jì)模式在當(dāng)你想理解一個(gè)系統(tǒng)如果工作的時(shí)候顯得非常有幫助。它能使應(yīng)用擴(kuò)展方便，維護(hù)方便。我們將討論以下兩種模式：組合模式和門面模式
組合模式：
組合模式可以理解為一個(gè)對(duì)象的組合可以像單個(gè)對(duì)象一樣以一致的方式處理。這是什么意思呢？好吧，考慮下面這個(gè)例子：
- $('.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.");
- });
很多JavaScript庫(kù)提供了一致的API，不論是處理單個(gè)DOM元素還是一個(gè)DOM元素的數(shù)組。我們可以添加selected 類給所有含.myList的選擇器的元素。同樣我們可以使用相同的方法處理相似的DOM元素#myItem，類似的，我們可以使用on()方法附上事件處理器在多個(gè)節(jié)點(diǎn)或單個(gè)節(jié)點(diǎn)上。
#p#
門面模式：
隱藏內(nèi)部復(fù)雜結(jié)構(gòu)，提供給用戶簡(jiǎn)單接口使用。
門面模式幾乎總是可以改善大部分軟件的可用性。使用jQuery作為例子，一個(gè)最受歡迎的方法ready()：
- $(document).ready(function() {
- //all your code goes here...
- });
ready()方法就實(shí)現(xiàn)的門面模式，如果你去查看源代碼，你將發(fā)現(xiàn)：
- 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()方法并不簡(jiǎn)單，jQuery規(guī)范游覽器的一致性確保ready()在合適的時(shí)間被觸發(fā)。然而，作為一名開(kāi)發(fā)者，你應(yīng)該用簡(jiǎn)單的接口展示出來(lái)。
總結(jié)：設(shè)計(jì)模式最讓人鼓舞的是有人在過(guò)去已經(jīng)成功實(shí)踐了。很多開(kāi)源代碼實(shí)現(xiàn)了各種JavaScript中的是設(shè)計(jì)模式。作為程序員，我們需要意識(shí)到每種設(shè)計(jì)模式的應(yīng)用場(chǎng)景。我希望這篇教程能幫助一步步回答這些問(wèn)題。
英文原文：Tilo Mitra
