Alors, citoyens de Khabrovsk, déjà ce jeudi dans OTUS le cours
"Fullstack JavaScript Developer" va commencer. Et aujourd'hui, nous partageons avec vous une autre publication d'un auteur en prévision du début du cours.
Auteur de l'article: Pavel Yakupov
Dans cet article, nous allons parler des modèles de conception les plus simples et les plus courants dans le langage Javascript - et essayer d'expliquer lesquels appliquer quand.
Quels sont les modèles de conception en général? Les modèles de conception sont un terme utilisé pour les solutions courantes et fréquemment utilisées aux problèmes courants de création de programmes.
En termes simples, les modèles de conception sont des solutions efficaces qui sont utilisées assez souvent. Les modèles de conception en tant que concept ont été formés à une époque où le langage de programmation JavaScript n'était pas mentionné, dans le domaine de l'ingénierie logicielle, les modèles de conception ont été décrits en détail en 1994 par les Big Four. Cependant, dans notre article, nous nous tournerons vers l'implémentation de quelques modèles simples dans le langage de programmation JavaScript.
Passons rapidement en revue les principaux types de modèles de conception:
Modèles de conception de création
Comme son nom l'indique, ces motifs sont principalement utilisés pour créer de nouveaux objets. Il s'agit notamment de modèles tels que Constructor, Factory, Prototype et Singleton.
Modèles de conception structurelle
Ces motifs sont associés aux classes et à la composition des objets. Ils aident à structurer ou restructurer des objets ou leurs pièces sans perturber le fonctionnement de l'ensemble du système.
Modèles de conception de comportement
Ce type de modèle de conception vise à améliorer la communication entre différents objets. Les modèles de conception comportementale incluent le commandant, l'itérateur, le médiateur, l'observateur, le modèle d'état, la stratégie et le modèle.
Dans cet article, nous analysons uniquement les modèles de conception liés à la création d'objets - car ils sont un peu plus simples et mieux adaptés aux débutants pour commencer à créer leurs applications de tâches, des RPG texte dans la console, des jeux simples sur Canvas, etc.
Modèle "Module"
Ce modèle de conception est apparu dans le langage JavaScript, pour ainsi dire, involontairement. Initialement, le langage ne pensait pas à contrer des phénomènes tels que la pollution de la portée mondiale (et dans d'autres langages, tels que C # ou C ++, il existe des espaces de noms qui résolvent ce problème hors de la boîte). De plus, les modules sont partiellement nécessaires à la réutilisation du code, car après avoir été créés et utilisés pour la première fois, ils peuvent être connectés à des projets d'autres équipes en utilisant les heures de travail de manière beaucoup plus compétente.
Le module module tout au long de son existence (déjà dans ES5 il était largement utilisé) utilisait IIFE (immédiatement appelé expressions fonctionnelles).
Voici un exemple simple du modèle «Module»:
const first_Module = (function() { let Surname = "Ivanov"; let Nickname = "isakura313"; function declare_Surname() { console.log(Surname); } return { declare_Nickname: function() { alert(Nickname); } } })(); first_Module.declare_Nickname(); console.log(Surname);
Le modèle «Module» encapsule entièrement les données qu'il contient. Nous ne pouvons y accéder qu'en utilisant des méthodes publiques, et jusqu'à ce que les implémentations JavaScript des méthodes publiques et privées «prêtes à l'emploi» doivent être implémentées de cette manière.
Modèle de constructeur
Il s'agit d'un modèle de conception conçu pour créer un objet. Un constructeur est une fonction qui crée de nouveaux objets. Cependant, en JavaScript, les objets peuvent être créés à la volée, même sans fonction constructeur ni définition de classe.
Le constructeur est l'un des modèles de conception les plus couramment utilisés. Il est utilisé pour créer des objets d'un certain type.
Modèle d'usine
Le modèle Factory est un autre modèle axé sur la création d'un objet à partir d'une classe. Dans ce document, nous fournissons des interfaces communes qui délèguent la création d'un objet de sous-classes.
Ce modèle de conception est le plus souvent utilisé pour manipuler une collection d'objets ayant à la fois des caractéristiques différentes et les mêmes.
Dans l'exemple ci-dessous, nous allons créer une classe ennemie (EnemyFactory) pour notre quête de texte. Oui, l'exemple est assez simple, mais c'est le problème des modèles de conception: ils sont nécessaires pour les "grandes" applications. Si vous n'avez que trois photos qui volent en cliquant sur la page, alors aucun motif de conception ne vous sera particulièrement utile.
D'accord, montrez juste un morceau de code pour notre RPG texte dans la console:
class EnemyFactory{ constructor() { this.createEnemy = function(type) { let enemy; if (type === 'goblin' || type === 'ork') enemy = new Infantry(); else if (type === 'elf') enemy = new Archer(); enemy.attack = function() { return `The ${this._type} is attack`; }; return enemy; }; } } class Infantry { constructor() { this._type = 'goblin'; this.scream = function() { return 'AAAAAAAAA! Za ordu!!!'; }; } } class Archer { constructor() { this._type = 'elf'; this.magic_attack = function() { return 'Magic fog around you! You cant see!!'; }; } } const enemy_army = new EnemyFactory(); let newGoblin = enemy_army.createEnemy('goblin'); let newElf = enemy_army.createEnemy('elf'); console.log(newGoblin.attack()); console.log(newElf.attack()); console.log(newGoblin.scream()); console.log(newElf.magic_attack());
Modèle de prototype
Ici, nous utilisons un type de «squelette» d'un objet réel pour créer un nouvel objet. Et le prototypage est le type le plus natif de création de POO en JavaScript.
Le modèle Prototype est utile si votre application peut en quelque sorte étendre ou réduire les fonctionnalités.
Le motif solitaire
Ou, comme il est mieux connu, "Singleton". Un "solitaire" est un modèle spécial dans lequel une seule instance d'une classe peut exister. Le modèle fonctionne comme suit - l'initialisation de l'objet fonctionnera s'il n'y a pas une seule instance créée ou retournée. S'il est présent, l'objet déclenché sera retourné.
Supposons que nous créons une classe du personnage principal, et nous voulons qu'elle soit 1, pas 4, comme dans Jumanji.
class Hero { constructor(name) { if (Hero.exists) { return Hero.instance; } this._name = name; Hero.instance = this; Hero.exists = true; return this; } getName() { return this._name; } setName(name) { this._name = name; } }
Merci à tous pour votre attention! J'espère que cet article servira de bon début pour OOP en JavaScript (bien que, pour être honnête, mon collègue avec de nombreuses années d'expérience à la fois en Java et en JavaScript, OOP n'y soit pas très développé, pour le moins). Cependant, dans les nouvelles normes, le langage s'est considérablement amélioré, et je suis sûr que cette méthodologie ne sera utilisée que plus souvent (ou Dart viendra tout remplacer).
Liens utiles:developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/createlearn.javascript.ru/classdeveloper.mozilla.org/en/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript