<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.
<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:
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());
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.
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 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>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 />');
<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 中实现各种模式。作为开发人员，我们需要了解现有的模式以及何时应用它们。我希望本教程可以帮助您在回答这些问题上更进一步。
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
