<p>設計模式是可重複使用的軟體解決方案<p>簡單地說,設計模式是針對軟體開發過程中經常出現的特定類型問題的可重複使用的軟體解決方案。經過多年的軟體開發實踐,專家們已經找到了解決類似問題的方法。這些解決方案已被封裝到設計模式中。所以:
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()
方法。
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
<p>應用建構器模式允許我們僅透過指定物件的類型和內容來建構物件。我們不必明確地建立該物件。<p>例如,您可能已經在 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/>
元素。在第二个中,我们传入了一个空的 <p>
标签。在最后一个中,我们传入了 <input />
元素。这三个的结果都是相同的:我们返回了一个引用 DOM 节点的 jQuery 对象。
<p>$
变量采用了jQuery中的Builder模式。在每个示例中,我们都返回了一个 jQuery DOM 对象,并且可以访问 jQuery 库提供的所有方法,但我们从未显式调用 document.createElement
。 JS 库在幕后处理了所有这些事情。
<p>想象一下,如果我们必须显式创建 DOM 元素并向其中插入内容,那将需要耗费多少工作!通过利用构建器模式,我们能够专注于对象的类型和内容,而不是显式创建它。
prototype
添加方法。原型模式允许对象通过原型从其他对象继承。
<p>原型模式是通过克隆基于现有对象的模板来创建对象的模式。<p>这是在 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
对象的属性。
<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();
Object.create()
时指定。尽管如此,原型模式展示了对象如何从其他对象继承。
<p>复合模式表示可以像对待组中的单个对象一样对待一组对象。<p>那么这是什么意思呢?好吧,考虑一下 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."); });
selected
类添加到 .myList
选择器选取的所有项目中,但在处理单个 DOM 元素 #myItem
时,我们可以使用相同的方法。同样,我们可以使用 on()
方法在多个节点上附加事件处理程序,或者通过相同的 API 在单个节点上附加事件处理程序。
<p>通过利用复合模式,jQuery(和许多其他库)为我们提供了一个简化的 API。
<p>复合模式有时也会引起问题。在 JavaScript 等松散类型语言中,了解我们正在处理单个元素还是多个元素通常会很有帮助。由于复合模式对两者使用相同的 API,因此我们经常会误认为其中一个,并最终出现意想不到的错误。某些库(例如 YUI3)提供两种单独的获取元素的方法(Y.one()
与 Y.all()
)。
<p>外观模式为用户提供了一个简单的界面,同时隐藏了其底层的复杂性。<p>外观模式几乎总能提高软件的可用性。再次以 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()
。但是,作为开发人员,您会看到一个简单的界面。
<p>大多数外观模式示例都遵循这一原则。在实现时,我们通常依赖于底层的条件语句,但将其作为一个简单的界面呈现给用户。实现此模式的其他方法包括 animate()
和 css()
。你能想到为什么这些会使用外观模式吗?
<p>在观察者模式中,主题可以拥有对其生命周期感兴趣的观察者列表。每当主题做了一些有趣的事情时,它都会向其观察者发送通知。如果观察者不再有兴趣听主题,则主题可以将其从列表中删除。<p>听起来很简单,对吧?我们需要三种方法来描述这种模式:
publish(data)
:当主题有通知要发出时调用。某些数据可以通过此方法传递。 subscribe(observer)
:由主题调用以将观察者添加到其观察者列表中。 unsubscribe(observer)
:由主题调用,从其观察者列表中删除观察者。 on()
或 attach()
方法,一个 trigger()
或 fire()
方法,以及一个 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>中介者模式提倡使用单个共享主题来处理与多个对象的通信。所有对象都通过中介者相互通信。<p>现实世界中一个很好的类比是空中交通塔,它负责处理机场和航班之间的通信。在软件开发领域,当系统变得过于复杂时,通常会使用中介者模式。通过放置中介,可以通过单个对象来处理通信,而不是让多个对象相互通信。从这个意义上说,中介者模式可以用来替代实现观察者模式的系统。 <p>在这个要点中,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);
<p>过去已经有人成功应用过它。<p>设计模式的伟大之处在于,过去已经有人成功地应用过它。有许多开源代码可以在 JavaScript 中实现各种模式。作为开发人员,我们需要了解现有的模式以及何时应用它们。我希望本教程可以帮助您在回答这些问题上更进一步。
以上是JavaScript 設計模式:深入了解有效的設計的詳細內容。更多資訊請關注PHP中文網其他相關文章!