Modèles de conception JavaScript : examen plus approfondi d'une conception efficace

Aujourd'hui, nous allons enfiler nos chapeaux d'informatique et apprendre quelques modèles de conception courants. Les modèles de conception offrent aux développeurs des moyens de résoudre les problèmes techniques de manière réutilisable et élégante. Vous souhaitez devenir un meilleur développeur JavaScript ? Alors continuez à lire.

Toutes les quelques semaines, nous revisitons certains des articles préférés de nos lecteurs dans l’histoire du site. Ce tutoriel a été publié pour la première fois en juillet 2012.

Présentation

Les modèles de conception solides sont les éléments fondamentaux des applications logicielles maintenables. Si vous avez déjà participé à un entretien technique, vous adorerez qu'on vous pose ces questions. Dans ce didacticiel, nous aborderons certains modèles que vous pouvez commencer à utiliser dès aujourd'hui.

Que sont les modèles de conception ?

Les modèles de conception sont des solutions logicielles réutilisables

En termes simples, les modèles de conception sont des solutions logicielles réutilisables à des types spécifiques de problèmes qui surviennent souvent lors du développement de logiciels. Après des années de pratique en matière de développement de logiciels, les experts ont trouvé des moyens de résoudre des problèmes similaires. Ces solutions ont été incorporées dans des modèles de conception. Alors :

• Les modèles sont des solutions éprouvées aux problèmes de développement logiciel
• Les modèles sont extensibles car ils sont généralement structurés et ont des règles que vous devez suivre
• Les modèles peuvent être réutilisés pour résoudre des problèmes similaires

Nous aborderons quelques exemples de modèles de conception plus loin dans ce didacticiel.

Types de modèles de conception

Dans le développement de logiciels, les modèles de conception sont généralement divisés en plusieurs catégories. Nous aborderons les trois plus importants dans ce didacticiel. Voici une brève explication :

1. Le modèleCreatese concentre sur les méthodes de création d'objets ou de classes. Cela peut paraître simple (et cela l’est dans certains cas), mais les applications volumineuses nécessitent un contrôle sur le processus de création d’objets.

2. StructureLes modèles de conception se concentrent sur les façons de gérer les relations entre les objets afin de créer des applications de manière évolutive. Un aspect clé des modèles structurels est de garantir que les modifications apportées à une partie de l’application n’affectent pas toutes les autres parties.

3. Le modèleComportementalse concentre sur la communication entre les objets.

Vous aurez peut-être encore des questions après avoir lu ces brèves instructions. C'est naturel et les choses deviendront claires une fois que nous examinerons certains des modèles de conception ci-dessous. Alors continuez à lire !

Notes sur les cours en JavaScript

Lorsque vous lisez sur les modèles de conception, vous verrez souvent des références à des classes et des objets. Cela peut prêter à confusion car JavaScript n'a pas vraiment de construction appelée « classe » ; le terme le plus correct est « type de données ».

Types de données en JavaScript

JavaScript est un langage orienté objet où les objets héritent d'autres objets avec le concept d'héritage prototypique. Les types de données peuvent être créés en définissant ce qu'on appelle des constructeurs comme suit :

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

Veuillez noter la méthode Person数据类型上定义方法时使用 prototype。由于多个 Person对象将引用相同的原型，因此这允许 getAge()方法由 Person数据类型的所有实例共享，而不是为每个实例重新定义它。此外，任何继承自 Person的数据类型都可以访问 getAge().

Gestion de la confidentialité

Un autre problème courant en JavaScript est qu'il n'y a pas de variables véritablement privées. Cependant, nous pouvons utiliser des fermetures pour simuler la confidentialité. Considérez l'extrait de code suivant :

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

Dans l'exemple ci-dessus, nous avons créé un objet retinaMacbookavec des variables et méthodes publiques et privées. Voici comment nous l'utilisons :

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

Nous pouvons faire beaucoup plus avec les fonctions et les fermetures en JavaScript, mais nous ne couvrirons pas tout en détail dans ce tutoriel. Avec cette petite leçon sur les types de données JavaScript et la confidentialité, nous pouvons passer à l'apprentissage des modèles de conception.

Mode de conception créative

Il existe de nombreux types de modèles de conception créative, mais nous en aborderons deux dans ce didacticiel : les constructeurs et les prototypes. Je trouve que ceux-ci sont utilisés assez souvent pour susciter des inquiétudes.

Modèle de constructeur

Le modèle de builder est souvent utilisé dans le développement Web, et vous l'avez peut-être déjà utilisé sans vous en rendre compte. En termes simples, ce modèle peut être défini comme suit :

Le modèle de générateur d'applications nous permet de construire des objets en spécifiant simplement leur type et leur contenu. Nous n'avons pas besoin de créer l'objet explicitement.

Par exemple, vous avez peut-être fait cela d'innombrables fois dans jQuery :

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

看一下上面的三个例子。在第一个中，我们传入了包含一些内容的

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

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

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

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

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

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

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