{"id":66309,"date":"2023-02-14T09:26:37","date_gmt":"2023-02-14T08:26:37","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=66309&#038;preview=true&#038;preview_id=66309"},"modified":"2024-09-19T12:08:43","modified_gmt":"2024-09-19T11:08:43","slug":"guide-modeles-conceptions-javascript","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/","title":{"rendered":"Un guide exhaustif des mod\u00e8les de conception JavaScript"},"content":{"rendered":"<p>Lorsque vous cr\u00e9ez des applications <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-javascript\/\">JavaScript<\/a>, vous pouvez rencontrer des sc\u00e9narios dans lesquels vous devez construire des objets d&rsquo;une certaine mani\u00e8re, pr\u00e9d\u00e9finie, ou r\u00e9utiliser une classe commune en la modifiant ou en l&rsquo;adaptant \u00e0 plusieurs cas d&rsquo;utilisation.<\/p>\n<p>Bien entendu, il n&rsquo;est pas pratique de r\u00e9soudre ces probl\u00e8mes encore et encore.<\/p>\n<p>C&rsquo;est l\u00e0 que les mod\u00e8les de conception JavaScript viennent \u00e0 votre secours.<\/p>\n\n<p>Les mod\u00e8les de conception JavaScript vous offrent une m\u00e9thode structur\u00e9e et reproductible pour r\u00e9soudre les probl\u00e8mes courants du d\u00e9veloppement JavaScript.<\/p>\n<p>Dans ce guide, nous allons examiner ce que sont les mod\u00e8les de conception JavaScript et comment les utiliser dans vos applications JavaScript.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Qu&rsquo;est-ce qu&rsquo;un mod\u00e8le de conception JavaScript ?<\/h2>\n<p>Les mod\u00e8les de conception JavaScript sont des solutions de mod\u00e8les r\u00e9p\u00e9tables pour les probl\u00e8mes fr\u00e9quents dans le d\u00e9veloppement d&rsquo;applications JavaScript.<\/p>\n<p>L&rsquo;id\u00e9e est simple : Les programmeurs du monde entier, depuis l&rsquo;aube du d\u00e9veloppement, ont \u00e9t\u00e9 confront\u00e9s \u00e0 des s\u00e9ries de probl\u00e8mes r\u00e9currents lors du <a href=\"https:\/\/kinsta.com\/fr\/blog\/developpeur-application\/\">d\u00e9veloppement d&rsquo;applications<\/a>. Au fil du temps, certains d\u00e9veloppeurs ont choisi de documenter des m\u00e9thodes \u00e9prouv\u00e9es pour r\u00e9soudre ces probl\u00e8mes afin que d&rsquo;autres puissent se r\u00e9f\u00e9rer facilement \u00e0 ces solutions.<\/p>\n<p>Comme de plus en plus de d\u00e9veloppeurs ont choisi d&rsquo;utiliser ces solutions et ont reconnu leur efficacit\u00e9 \u00e0 r\u00e9soudre leurs probl\u00e8mes, elles ont \u00e9t\u00e9 accept\u00e9es comme une mani\u00e8re standard de r\u00e9soudre les probl\u00e8mes et ont re\u00e7u le nom de \u00ab design patterns \u00bb ou mod\u00e8les de conception.<\/p>\n<p>Au fur et \u00e0 mesure que l&rsquo;importance des mod\u00e8les de conception a \u00e9t\u00e9 mieux comprise, ceux-ci ont \u00e9t\u00e9 d\u00e9velopp\u00e9s et normalis\u00e9s. La plupart des mod\u00e8les de conception modernes ont d\u00e9sormais une structure d\u00e9finie, sont organis\u00e9s en plusieurs cat\u00e9gories et sont enseign\u00e9s dans les dipl\u00f4mes li\u00e9s \u00e0 l&rsquo;informatique en tant que sujets ind\u00e9pendants.<\/p>\n<h2>Types de mod\u00e8les de conception JavaScript<\/h2>\n<p>Voici quelques-unes des classifications les plus populaires des mod\u00e8les de conception JavaScript.<\/p>\n<h3>Cr\u00e9atif<\/h3>\n<p>Les mod\u00e8les de conception cr\u00e9atifs sont ceux qui aident \u00e0 r\u00e9soudre les probl\u00e8mes li\u00e9s \u00e0 la cr\u00e9ation et \u00e0 la gestion de nouvelles instances d&rsquo;objets en JavaScript. Cela peut \u00eatre aussi simple que de limiter une classe \u00e0 un seul objet ou aussi complexe que de d\u00e9finir une m\u00e9thode complexe de s\u00e9lection et d&rsquo;ajout de chaque fonctionnalit\u00e9 dans un objet JavaScript.<\/p>\n<p>Parmi les exemples de mod\u00e8les de conception cr\u00e9atifs, citons Singleton, Factory, Abstract Factory et Builder, entre autres.<\/p>\n<h3>Structurel<\/h3>\n<p>Les patrons de conception structurels sont ceux qui aident \u00e0 r\u00e9soudre les probl\u00e8mes li\u00e9s \u00e0 la gestion de la structure (ou sch\u00e9ma) des objets JavaScript. Ces probl\u00e8mes peuvent inclure la cr\u00e9ation d&rsquo;une relation entre deux objets diff\u00e9rents ou l&rsquo;abstraction de certaines caract\u00e9ristiques d&rsquo;un objet pour des utilisateurs sp\u00e9cifiques.<\/p>\n<p>Parmi les exemples de patrons de conception structurels, citons Adapter, Bridge, Composite et Facade.<\/p>\n<h3>Comportemental<\/h3>\n<p>Les mod\u00e8les de conception comportementaux sont ceux qui aident \u00e0 r\u00e9soudre les probl\u00e8mes li\u00e9s \u00e0 la fa\u00e7on dont le contr\u00f4le (et la responsabilit\u00e9) est transmis entre divers objets. Ces probl\u00e8mes peuvent concerner le contr\u00f4le de l&rsquo;acc\u00e8s \u00e0 une liste chain\u00e9e ou l&rsquo;\u00e9tablissement d&rsquo;une entit\u00e9 unique qui peut contr\u00f4ler l&rsquo;acc\u00e8s \u00e0 plusieurs types d&rsquo;objets.<\/p>\n<p>Parmi les exemples de patrons de conception comportementaux, citons Command, Iterator, Memento et Observer.<\/p>\n<h3>Concussion<\/h3>\n<p>Les mod\u00e8les de conception de concussion sont ceux qui aident \u00e0 r\u00e9soudre les probl\u00e8mes li\u00e9s au multi-threading et au multit\u00e2che. Ces probl\u00e8mes peuvent consister \u00e0 maintenir un objet actif parmi plusieurs objets disponibles ou \u00e0 traiter plusieurs \u00e9v\u00e8nements fournis \u00e0 un syst\u00e8me en d\u00e9multiplexant les entr\u00e9es entrantes et en les traitant pi\u00e8ce par pi\u00e8ce.<\/p>\n<p>Parmi les exemples de mod\u00e8les de concussion, citons l&rsquo;objet actif, la r\u00e9action nucl\u00e9aire et l&rsquo;ordonnanceur.<\/p>\n<h3>Architectural<\/h3>\n<p>Les mod\u00e8les de conception architecturale sont ceux qui aident \u00e0 r\u00e9soudre les probl\u00e8mes li\u00e9s \u00e0 la <a href=\"https:\/\/kinsta.com\/fr\/blog\/architecture-application-web\/\">conception de logiciels<\/a> au sens large. Ils sont g\u00e9n\u00e9ralement li\u00e9s \u00e0 la mani\u00e8re de concevoir votre syst\u00e8me et d&rsquo;assurer une haute disponibilit\u00e9, d&rsquo;att\u00e9nuer les risques et d&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/application-surveillance-performance\/\">\u00e9viter les goulots d&rsquo;\u00e9tranglement en mati\u00e8re de performances<\/a>.<\/p>\n<p>Deux exemples de mod\u00e8les de conception architecturale sont MVC et MVVM.<\/p>\n<h2>\u00c9l\u00e9ments d&rsquo;un mod\u00e8le de conception<\/h2>\n<p>Presque tous les mod\u00e8les de conception peuvent \u00eatre d\u00e9compos\u00e9s en un ensemble de quatre composants importants. Il s&rsquo;agit de :<\/p>\n<ul>\n<li><strong>Nom du mod\u00e8le <\/strong>: il est utilis\u00e9 pour identifier un mod\u00e8le de conception tout en communiquant avec d&rsquo;autres utilisateurs. Les exemples incluent \u00ab singleton \u00bb, \u00ab prototype \u00bb, et plus encore.<\/li>\n<li><strong>Probl\u00e8me <\/strong>: il d\u00e9crit l&rsquo;objectif du mod\u00e8le de conception. Il s&rsquo;agit d&rsquo;une petite description du probl\u00e8me que le mod\u00e8le de conception tente de r\u00e9soudre. Il peut m\u00eame inclure un exemple de sc\u00e9nario pour mieux expliquer le probl\u00e8me. Il peut \u00e9galement contenir une liste de conditions \u00e0 remplir pour qu&rsquo;un mod\u00e8le de conception r\u00e9solve enti\u00e8rement le probl\u00e8me sous-jacent.<\/li>\n<li><strong>Solution <\/strong>: il s&rsquo;agit de la solution au probl\u00e8me pos\u00e9, compos\u00e9e d&rsquo;\u00e9l\u00e9ments tels que des classes, des m\u00e9thodes, des interfaces, etc. C&rsquo;est l\u00e0 que r\u00e9side l&rsquo;essentiel d&rsquo;un mod\u00e8le de conception &#8211; il implique des relations, des responsabilit\u00e9s et des collaborateurs de divers \u00e9l\u00e9ments qui sont clairement d\u00e9finis.<\/li>\n<li><strong>R\u00e9sultats <\/strong>: il s&rsquo;agit d&rsquo;une analyse de la fa\u00e7on dont le mod\u00e8le a permis de r\u00e9soudre le probl\u00e8me. Des choses comme l&rsquo;utilisation de l&rsquo;espace et du temps sont discut\u00e9es, ainsi que les approches alternatives pour r\u00e9soudre le m\u00eame probl\u00e8me.<\/li>\n<\/ul>\n<p>Si vous souhaitez en savoir plus sur les mod\u00e8les de conception et leur cr\u00e9ation, MSU propose un <a href=\"https:\/\/www.cse.msu.edu\/~cse870\/Lectures\/SS2005\/08-design-patterns.ppt\">mat\u00e9riel d&rsquo;\u00e9tude succinct<\/a> auquel vous pouvez vous r\u00e9f\u00e9rer.<\/p>\n<h2>Pourquoi devriez-vous utiliser les mod\u00e8les de conception ?<\/h2>\n<p>Il existe de multiples raisons pour lesquelles vous souhaiteriez utiliser des mod\u00e8les de conception :<\/p>\n<ul>\n<li><strong>Ils sont \u00e9prouv\u00e9s et test\u00e9s <\/strong>: avec un mod\u00e8le de conception, vous disposez d&rsquo;une solution \u00e9prouv\u00e9e \u00e0 votre probl\u00e8me (pour autant que le mod\u00e8le de conception corresponde \u00e0 la description de votre probl\u00e8me). Vous ne devez pas perdre de temps \u00e0 chercher des solutions alternatives, et vous pouvez \u00eatre s\u00fbr que vous avez une solution qui s&rsquo;occupe de l&rsquo;optimisation de base des performances pour vous.<\/li>\n<li><strong>Ils sont faciles \u00e0 comprendre <\/strong>: les mod\u00e8les de conception sont con\u00e7us pour \u00eatre petits, simples et faciles \u00e0 comprendre. Vous n&rsquo;avez pas besoin d&rsquo;\u00eatre un programmeur sp\u00e9cialis\u00e9 travaillant dans un secteur sp\u00e9cifique depuis des d\u00e9cennies pour comprendre quel mod\u00e8le de conception utiliser. Ils sont volontairement g\u00e9n\u00e9riques (ils ne se limitent pas \u00e0 un langage de programmation particulier) et peuvent \u00eatre compris par toute personne poss\u00e9dant des comp\u00e9tences suffisantes en mati\u00e8re de r\u00e9solution de probl\u00e8mes. Cela est \u00e9galement utile lorsque vous changez de personnes dans votre \u00e9quipe technique : Un morceau de code qui s&rsquo;appuie sur un mod\u00e8le de conception est plus facile \u00e0 comprendre pour tout nouveau d\u00e9veloppeur de logiciels.<\/li>\n<\/ul>\n<ul>\n<li><strong>Ils sont simples \u00e0 mettre en \u0153uvre <\/strong>: la plupart des mod\u00e8les de conception sont tr\u00e8s simples, comme vous le verrez plus loin dans notre article. Vous n&rsquo;avez pas besoin de connaitre de multiples <a href=\"https:\/\/kinsta.com\/fr\/blog\/programmation-orientee-objet-python\/\">concepts de programmation<\/a> pour les mettre en \u0153uvre dans votre code.<\/li>\n<\/ul>\n<ul>\n<li><strong>Ils proposent une architecture de code facilement r\u00e9utilisable <\/strong>: La r\u00e9utilisabilit\u00e9 et la <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-html\/\">propret\u00e9 du code sont fortement encourag\u00e9es<\/a> dans l&rsquo;industrie technologique, et les mod\u00e8les de conception peuvent vous aider \u00e0 y parvenir. \u00c9tant donn\u00e9 que ces mod\u00e8les sont une fa\u00e7on standard de r\u00e9soudre les probl\u00e8mes, leurs concepteurs ont pris soin de s&rsquo;assurer que l&rsquo;architecture de l&rsquo;application englobante reste r\u00e9utilisable, flexible et compatible avec la plupart des formes d&rsquo;\u00e9criture de code.<\/li>\n<\/ul>\n<ul>\n<li><strong>Ils permettent de gagner du temps et de r\u00e9duire la taille de l&rsquo;application <\/strong>: L&rsquo;un des plus grands avantages de s&rsquo;appuyer sur un ensemble standard de solutions est qu&rsquo;elles vous permettront de gagner du temps lors de leur mise en \u0153uvre. Il y a de fortes chances que toute votre \u00e9quipe de d\u00e9veloppement connaisse bien les mod\u00e8les de conception, il sera donc plus facile pour elle de <a href=\"https:\/\/kinsta.com\/fr\/blog\/microsoft-teams-vs-slack\/\">planifier, de communiquer et de collaborer<\/a> lors de leur mise en \u0153uvre. Les solutions \u00e9prouv\u00e9es et test\u00e9es signifient qu&rsquo;il y a de bonnes chances que vous ne finissiez pas par perdre des ressources ou faire un d\u00e9tour lors de la cr\u00e9ation d&rsquo;une fonctionnalit\u00e9, ce qui vous fait gagner du temps et de l&rsquo;espace. En outre, la plupart des <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleur-langage-programmation-apprendre\/\">langages de programmation<\/a> vous fournissent des biblioth\u00e8ques de mod\u00e8les standard qui mettent d\u00e9j\u00e0 en \u0153uvre certains mod\u00e8les de conception courants comme Iterator et Observer.<\/li>\n<\/ul>\n<h2>Les 20 principaux mod\u00e8les de conception JavaScript \u00e0 maitriser<\/h2>\n<p>Maintenant que vous comprenez de quoi est fait un mod\u00e8le de conception et pourquoi vous en avez besoin, plongeons plus profond\u00e9ment dans la fa\u00e7on dont certains des mod\u00e8les de conception JavaScript les plus couramment utilis\u00e9s peuvent \u00eatre mis en \u0153uvre dans une <a href=\"https:\/\/kinsta.com\/fr\/blog\/applications-node-js\/\">application JavaScript<\/a>.<\/p>\n<h3>Cr\u00e9ation<\/h3>\n<p>Commen\u00e7ons par quelques mod\u00e8les de conception cr\u00e9atifs fondamentaux et faciles \u00e0 apprendre.<\/p>\n<h4>1. Singleton<\/h4>\n<p>Le mod\u00e8le Singleton est l&rsquo;un des mod\u00e8les de conception les plus utilis\u00e9s dans le secteur du d\u00e9veloppement logiciel. Le probl\u00e8me qu&rsquo;il vise \u00e0 r\u00e9soudre est de ne maintenir qu&rsquo;une seule instance d&rsquo;une classe. Cela peut s&rsquo;av\u00e9rer pratique lors de l&rsquo;instanciation d&rsquo;objets gourmands en ressources, comme les gestionnaires de bases de donn\u00e9es.<\/p>\n<p>Voici comment vous pouvez l&rsquo;impl\u00e9menter en JavaScript :<\/p>\n<pre><code class=\"language-js\">function SingletonFoo() {\n\n   let fooInstance = null;\n\n   \/\/ For our reference, let's create a counter that will track the number of active instances\n   let count = 0;\n\n   function printCount() {\n       console.log(\"Number of instances: \" + count);\n   }\n\n   function init() {\n       \/\/ For our reference, we'll increase the count by one whenever init() is called\n       count++;\n\n       \/\/ Do the initialization of the resource-intensive object here and return it\n       return {}\n   }\n\n   function createInstance() {\n       if (fooInstance == null) {\n           fooInstance = init();\n       }\n       return fooInstance;\n   }\n\n   function closeInstance() {\n       count--;\n       fooInstance = null;\n   }\n\n   return {\n       initialize: createInstance,\n       close: closeInstance,\n       printCount: printCount\n   }\n}\n\nlet foo = SingletonFoo();\n\nfoo.printCount() \/\/ Prints 0\nfoo.initialize()\nfoo.printCount() \/\/ Prints 1\nfoo.initialize()\nfoo.printCount() \/\/ Still prints 1\nfoo.initialize()\nfoo.printCount() \/\/ Still 1\nfoo.close()\nfoo.printCount() \/\/ Prints 0<\/code><\/pre>\n<p>Bien qu&rsquo;il remplisse bien son r\u00f4le, le mod\u00e8le Singleton est connu pour rendre le d\u00e9bogage difficile car il masque les d\u00e9pendances et contr\u00f4le l&rsquo;acc\u00e8s \u00e0 l&rsquo;initialisation ou \u00e0 la destruction des instances d&rsquo;une classe.<\/p>\n<h4>2. Factory<\/h4>\n<p>La m\u00e9thode Factory est \u00e9galement l&rsquo;un des mod\u00e8les de conception les plus populaires. Le probl\u00e8me que la m\u00e9thode Factory vise \u00e0 r\u00e9soudre est la cr\u00e9ation d&rsquo;objets sans utiliser le constructeur conventionnel. Au lieu de cela, elle prend en compte la configuration (ou la description) de l&rsquo;objet que vous souhaitez et renvoie l&rsquo;objet nouvellement cr\u00e9\u00e9.<\/p>\n<p>Voici comment vous pouvez l&rsquo;impl\u00e9menter en JavaScript :<\/p>\n<pre><code class=\"language-js\">function Factory() {\n   this.createDog = function (breed) {\n       let dog;\n\n       if (breed === \"labrador\") {\n           dog = new Labrador();\n       } else if (breed === \"bulldog\") {\n           dog = new Bulldog();\n       } else if (breed === \"golden retriever\") {\n           dog = new GoldenRetriever();\n       } else if (breed === \"german shepherd\") {\n           dog = new GermanShepherd();\n       }\n\n       dog.breed = breed;\n       dog.printInfo = function () {\n           console.log(\"nnBreed: \" + dog.breed + \"nShedding Level (out of 5): \" + dog.sheddingLevel + \"nCoat Length: \" + dog.coatLength + \"nCoat Type: \" + dog.coatType)\n       }\n\n       return dog;\n   }\n}\n\nfunction Labrador() {\n   this.sheddingLevel = 4\n   this.coatLength = \"short\"\n   this.coatType = \"double\"\n}\n\nfunction Bulldog() {\n   this.sheddingLevel = 3\n   this.coatLength = \"short\"\n   this.coatType = \"smooth\"\n}\n\nfunction GoldenRetriever() {\n   this.sheddingLevel = 4\n   this.coatLength = \"medium\"\n   this.coatType = \"double\"\n}\n\nfunction GermanShepherd() {\n   this.sheddingLevel = 4\n   this.coatLength = \"medium\"\n   this.coatType = \"double\"\n}\n\nfunction run() {\n\n   let dogs = [];\n   let factory = new Factory();\n\n   dogs.push(factory.createDog(\"labrador\"));\n   dogs.push(factory.createDog(\"bulldog\"));\n   dogs.push(factory.createDog(\"golden retriever\"));\n   dogs.push(factory.createDog(\"german shepherd\"));\n\n   for (var i = 0, len = dogs.length; i &lt; len; i++) {\n       dogs[i].printInfo();\n   }\n}\n\nrun()\n\n\/**\nOutput:\n\nBreed: labrador\nShedding Level (out of 5): 4\nCoat Length: short\nCoat Type: double\n\n\nBreed: bulldog\nShedding Level (out of 5): 3\nCoat Length: short\nCoat Type: smooth\n\n\nBreed: golden retriever\nShedding Level (out of 5): 4\nCoat Length: medium\nCoat Type: double\n\n\nBreed: german shepherd\nShedding Level (out of 5): 4\nCoat Length: medium\nCoat Type: double\n*\/<\/code><\/pre>\n<p>Le mod\u00e8le de conception Factory contr\u00f4le la mani\u00e8re dont les objets seront cr\u00e9\u00e9s et vous fournit un moyen rapide de cr\u00e9er de nouveaux objets, ainsi qu&rsquo;une interface uniforme qui d\u00e9finit les propri\u00e9t\u00e9s que vos objets auront. Vous pouvez ajouter autant de races de chiens que vous le souhaitez, mais tant que les m\u00e9thodes et les propri\u00e9t\u00e9s expos\u00e9es par les types de races restent les m\u00eames, elles fonctionneront parfaitement.<\/p>\n<p>Toutefois, notez que le mod\u00e8le Factory peut souvent conduire \u00e0 un grand nombre de classes qui peuvent \u00eatre difficiles \u00e0 g\u00e9rer.<\/p>\n<h4>3. Abstract Factory<\/h4>\n<p>La m\u00e9thode Abstract Factory fait passer la m\u00e9thode Factory \u00e0 un niveau sup\u00e9rieur en rendant les fabriques abstraites et donc rempla\u00e7ables sans que l&rsquo;environnement appelant ne connaisse la fabrique exacte utilis\u00e9e ou son fonctionnement interne. L&rsquo;environnement appelant sait seulement que toutes les fabriques ont un ensemble de m\u00e9thodes communes qu&rsquo;il peut appeler pour effectuer l&rsquo;action d&rsquo;instanciation.<\/p>\n<p>C&rsquo;est ainsi que l&rsquo;on peut l&rsquo;impl\u00e9menter en utilisant l&rsquo;exemple pr\u00e9c\u00e9dent :<\/p>\n<pre><code class=\"language-js\">\/\/ A factory to create dogs\nfunction DogFactory() {\n   \/\/ Notice that the create function is now createPet instead of createDog, since we need\n   \/\/ it to be uniform across the other factories that will be used with this\n   this.createPet = function (breed) {\n       let dog;\n\n       if (breed === \"labrador\") {\n           dog = new Labrador();\n       } else if (breed === \"pug\") {\n           dog = new Pug();\n       }\n\n       dog.breed = breed;\n       dog.printInfo = function () {\n           console.log(\"nnType: \" + dog.type + \"nBreed: \" + dog.breed + \"nSize: \" + dog.size)\n       }\n\n       return dog;\n   }\n}\n\n\/\/ A factory to create cats\nfunction CatFactory() {\n   this.createPet = function (breed) {\n       let cat;\n\n       if (breed === \"ragdoll\") {\n           cat = new Ragdoll();\n       } else if (breed === \"singapura\") {\n           cat = new Singapura();\n       }\n\n       cat.breed = breed;\n       cat.printInfo = function () {\n           console.log(\"nnType: \" + cat.type + \"nBreed: \" + cat.breed + \"nSize: \" + cat.size)\n       }\n\n       return cat;\n   }\n}\n\n\/\/ Dog and cat breed definitions\nfunction Labrador() {\n   this.type = \"dog\"\n   this.size = \"large\"\n}\n\nfunction Pug() {\n   this.type = \"dog\"\n   this.size = \"small\"\n}\n\nfunction Ragdoll() {\n   this.type = \"cat\"\n   this.size = \"large\"\n}\n\nfunction Singapura() {\n   this.type = \"cat\"\n   this.size = \"small\"\n}\n\nfunction run() {\n\n   let pets = [];\n\n   \/\/ Initialize the two factories\n   let catFactory = new CatFactory();\n   let dogFactory = new DogFactory();\n\n   \/\/ Create a common petFactory that can produce both cats and dogs\n   \/\/ Set it to produce dogs first\n   let petFactory = dogFactory;\n\n   pets.push(petFactory.createPet(\"labrador\"));\n   pets.push(petFactory.createPet(\"pug\"));\n\n   \/\/ Set the petFactory to produce cats\n   petFactory = catFactory;\n\n   pets.push(petFactory.createPet(\"ragdoll\"));\n   pets.push(petFactory.createPet(\"singapura\"));\n\n   for (var i = 0, len = pets.length; i &lt; len; i++) {\n       pets[i].printInfo();\n   }\n}\n\nrun()\n\n\/**\nOutput:\n\nType: dog\nBreed: labrador\nSize: large\n\n\nType: dog\nBreed: pug\nSize: small\n\n\nType: cat\nBreed: ragdoll\nSize: large\n\n\nType: cat\nBreed: singapura\nSize: small\n\n*\/<\/code><\/pre>\n<p>Le patron Abstract Factory vous permet d&rsquo;\u00e9changer facilement des fabriques concr\u00e8tes, et il contribue \u00e0 promouvoir l&rsquo;uniformit\u00e9 entre les fabriques et les produits cr\u00e9\u00e9s. Cependant, il peut devenir difficile d&rsquo;introduire de nouveaux types de produits, car vous devrez apporter des modifications \u00e0 plusieurs classes pour accueillir de nouvelles m\u00e9thodes\/propri\u00e9t\u00e9s.<\/p>\n<h4>4. Builder<\/h4>\n<p>Le mod\u00e8le Builder est l&rsquo;un des mod\u00e8les de conception JavaScript de cr\u00e9ation les plus complexes mais aussi les plus flexibles. Il vous permet de construire chaque fonctionnalit\u00e9 de votre produit une par une, vous offrant un contr\u00f4le total sur la fa\u00e7on dont votre objet est construit tout en faisant abstraction des d\u00e9tails internes.<\/p>\n<p>Dans l&rsquo;exemple complexe ci-dessous, vous verrez le mod\u00e8le de conception Builder en action ainsi que le directeur qui vous aidera \u00e0 fabriquer des pizzas !<\/p>\n<pre><code class=\"language-js\">\/\/ Here's the PizzaBuilder (you can also call it the chef)\nfunction PizzaBuilder() {\n   let base\n   let sauce\n   let cheese\n   let toppings = []\n\n   \/\/ The definition of pizza is hidden from the customers\n   function Pizza(base, sauce, cheese, toppings) {\n       this.base = base\n       this.sauce = sauce\n       this.cheese = cheese\n       this.toppings = toppings\n\n       this.printInfo = function() {\n           console.log(\"This pizza has \" + this.base + \" base with \" + this.sauce + \" sauce \"\n           + (this.cheese !== undefined ? \"with cheese. \" : \"without cheese. \")\n           + (this.toppings.length !== 0 ? \"It has the following toppings: \" + toppings.toString() : \"\"))\n       }\n   }\n\n   \/\/ You can request the PizzaBuilder (\/chef) to perform any of the following actions on your pizza\n   return {\n       addFlatbreadBase: function() {\n           base = \"flatbread\"\n           return this;\n       },\n       addTomatoSauce: function() {\n           sauce = \"tomato\"\n           return this;\n       },\n       addAlfredoSauce: function() {\n           sauce = \"alfredo\"\n           return this;\n       },\n       addCheese: function() {\n           cheese = \"parmesan\"\n           return this;\n       },\n       addOlives: function() {\n           toppings.push(\"olives\")\n           return this\n       },\n       addJalapeno: function() {\n           toppings.push(\"jalapeno\")\n           return this\n       },\n       cook: function() {\n           if (base === null){\n               console.log(\"Can't make a pizza without a base\")\n               return\n           }\n           return new Pizza(base, sauce, cheese, toppings)\n       }\n   }\n\n}\n\n\/\/ This is the Director for the PizzaBuilder, aka the PizzaShop.\n\/\/ It contains a list of preset steps that can be used to prepare common pizzas (aka recipes!)\nfunction PizzaShop() {\n   return {\n       makePizzaMargherita: function() {\n           pizzaBuilder = new PizzaBuilder()\n           pizzaMargherita = pizzaBuilder.addFlatbreadBase().addTomatoSauce().addCheese().addOlives().cook()\n           return pizzaMargherita\n       },\n       makePizzaAlfredo: function() {\n           pizzaBuilder = new PizzaBuilder()\n           pizzaAlfredo = pizzaBuilder.addFlatbreadBase().addAlfredoSauce().addCheese().addJalapeno().cook()\n           return pizzaAlfredo\n       },\n       makePizzaMarinara: function() {\n           pizzaBuilder = new PizzaBuilder()\n           pizzaMarinara = pizzaBuilder.addFlatbreadBase().addTomatoSauce().addOlives().cook()\n           return pizzaMarinara\n       }\n   }\n}\n\n\/\/ Here's where the customer can request pizzas from\nfunction run() {\n\n   let pizzaShop = new PizzaShop()\n\n   \/\/ You can ask for one of the popular pizza recipes...\n   let pizzaMargherita = pizzaShop.makePizzaMargherita()\n   pizzaMargherita.printInfo()\n   \/\/ Output: This pizza has flatbread base with tomato sauce with cheese. It has the following toppings: olives\n\n   let pizzaAlfredo = pizzaShop.makePizzaAlfredo()\n   pizzaAlfredo.printInfo()\n   \/\/ Output: This pizza has flatbread base with alfredo sauce with cheese. It has the following toppings: jalapeno\n\n   let pizzaMarinara = pizzaShop.makePizzaMarinara()\n   pizzaMarinara.printInfo()\n   \/\/ Output: This pizza has flatbread base with tomato sauce without cheese. It has the following toppings: olives\n\n   \/\/ Or send your custom request directly to the chef!\n   let chef = PizzaBuilder()\n   let customPizza = chef.addFlatbreadBase().addTomatoSauce().addCheese().addOlives().addJalapeno().cook()\n   customPizza.printInfo()\n   \/\/ Output: This pizza has flatbread base with tomato sauce with cheese. It has the following toppings: olives,jalapeno\n\n}\n\nrun()<\/code><\/pre>\n<p>Vous pouvez associer le Builder \u00e0 un Director, comme le montre la classe <code>PizzaShop<\/code> dans l&rsquo;exemple ci-dessus, pour pr\u00e9d\u00e9finir un ensemble d&rsquo;\u00e9tapes \u00e0 suivre \u00e0 chaque fois pour construire une variante standard de votre produit, c&rsquo;est-\u00e0-dire une recette sp\u00e9cifique pour vos pizzas.<\/p>\n<p>Le seul probl\u00e8me de ce mod\u00e8le de conception est qu&rsquo;il est assez complexe \u00e0 mettre en place et \u00e0 maintenir. Cependant, l&rsquo;ajout de nouvelles fonctionnalit\u00e9s de cette fa\u00e7on est plus simple que la m\u00e9thode Factory.<\/p>\n<h4>5. Prototype<\/h4>\n<p>Le mod\u00e8le de conception Prototype est un moyen rapide et simple de cr\u00e9er de nouveaux objets \u00e0 partir d&rsquo;objets existants en les clonant.<\/p>\n<p>Un objet prototype est d&rsquo;abord cr\u00e9\u00e9, qui peut \u00eatre clon\u00e9 plusieurs fois pour cr\u00e9er de nouveaux objets. Il s&rsquo;av\u00e8re pratique lorsque l&rsquo;instanciation directe d&rsquo;un objet est une op\u00e9ration plus gourmande en ressources que la cr\u00e9ation d&rsquo;une copie d&rsquo;un objet existant.<\/p>\n<p>Dans l&rsquo;exemple ci-dessous, vous verrez comment vous pouvez utiliser le mod\u00e8le Prototype pour cr\u00e9er de nouveaux documents bas\u00e9s sur un document mod\u00e8le d\u00e9fini :<\/p>\n<pre><code class=\"language-js\">\/\/ Defining how a document would look like\nfunction Document() {\n   this.header = \"Acme Co\"\n   this.footer = \"For internal use only\"\n   this.pages = 2\n   this.text = \"\"\n  \n   this.addText = function(text) {\n       this.text += text\n   }\n\n   \/\/ Method to help you see the contents of the object\n   this.printInfo = function() {\n       console.log(\"nnHeader: \" + this.header + \"nFooter: \" + this.footer + \"nPages: \" + this.pages + \"nText: \" + this.text)\n   }\n\n  \n}\n\n\/\/ A protype (or template) for creating new blank documents with boilerplate information\nfunction DocumentPrototype(baseDocument) {\n   this.baseDocument = baseDocument\n  \n   \/\/ This is where the magic happens. A new document object is created and is assigned the values of the current object\n   this.clone = function() {\n       let document = new Document();\n\n       document.header = this.baseDocument.header\n       document.footer = this.baseDocument.footer\n       document.pages = this.baseDocument.pages\n       document.text = this.baseDocument.text\n\n       return document\n   }\n}\n\nfunction run() {\n   \/\/ Create a document to use as the base for the prototype\n   let baseDocument = new Document()\n\n   \/\/ Make some changes to the prototype\n   baseDocument.addText(\"This text was added before cloning and will be common in both documents. \")\n\n   let prototype = new DocumentPrototype(baseDocument)\n\n   \/\/ Create two documents from the prototype\n   let doc1 = prototype.clone()\n   let doc2 = prototype.clone()\n\n   \/\/ Make some changes to both objects\n   doc1.pages = 3\n\n   doc1.addText(\"This is document 1\")\n   doc2.addText(\"This is document 2\")\n\n   \/\/ Print their values\n   doc1.printInfo()\n   \/* Output:\n       Header: Acme Co\n       Footer: For internal use only\n       Pages: 3\n       Text: This text was added before cloning and will be common in both documents. This is document 1\n    *\/\n\n   doc2.printInfo()\n   \/** Output:\n       Header: Acme Co\n       Footer: For internal use only\n       Pages: 2\n       Text: This text was added before cloning and will be common in both documents. This is document 2\n    *\/\n}\n\nrun()<\/code><\/pre>\n<p>La m\u00e9thode Prototype fonctionne tr\u00e8s bien dans les cas o\u00f9 une grande partie de vos objets partagent les m\u00eames valeurs, ou lorsque la cr\u00e9ation d&rsquo;un nouvel objet est assez co\u00fbteuse. Cependant, elle semble exag\u00e9r\u00e9e dans les cas o\u00f9 vous n&rsquo;avez pas besoin de plus de quelques instances de la classe.<\/p>\n<h3>Structurel<\/h3>\n<p>Les mod\u00e8les de conception structurels vous aident \u00e0 organiser votre logique m\u00e9tier en vous fournissant des moyens \u00e9prouv\u00e9s de structurer vos classes. Il existe une vari\u00e9t\u00e9 de mod\u00e8les de conception structurels qui r\u00e9pondent chacun \u00e0 des cas d&rsquo;utilisation uniques.<\/p>\n<h4>6. Adapter<\/h4>\n<p>Un probl\u00e8me courant lors de la cr\u00e9ation d&rsquo;applications est de permettre la collaboration entre des classes incompatibles.<\/p>\n<p>Un bon exemple pour comprendre cela est de maintenir la compatibilit\u00e9 ascendante. Si vous \u00e9crivez une nouvelle version d&rsquo;une classe, vous voudriez naturellement qu&rsquo;elle soit facilement utilisable \u00e0 tous les endroits o\u00f9 l&rsquo;ancienne version fonctionnait. Toutefois, si vous effectuez des modifications de rupture, comme la suppression ou la mise \u00e0 jour de m\u00e9thodes qui \u00e9taient cruciales pour le fonctionnement de l&rsquo;ancienne version, vous risquez de vous retrouver avec une classe dont tous les clients doivent \u00eatre mis \u00e0 jour pour pouvoir \u00eatre ex\u00e9cut\u00e9s.<\/p>\n<p>Dans ce cas, le mod\u00e8le de conception Adapter peut vous aider.<\/p>\n<p>Le mod\u00e8le de conception Adapter vous fournit une abstraction qui comble le foss\u00e9 entre les m\u00e9thodes et propri\u00e9t\u00e9s de la nouvelle classe et celles de l&rsquo;ancienne. Elle poss\u00e8de la m\u00eame interface que l&rsquo;ancienne classe, mais elle contient une logique permettant de faire correspondre les anciennes m\u00e9thodes aux nouvelles pour ex\u00e9cuter des op\u00e9rations similaires. C&rsquo;est similaire \u00e0 la fa\u00e7on dont une prise \u00e9lectrique fait office d&rsquo;adaptateur entre une prise de style am\u00e9ricain et une prise de style europ\u00e9en.<\/p>\n<p>Voici un exemple :<\/p>\n<pre><code class=\"language-js\">\/\/ Old bot\nfunction Robot() {\n\n   this.walk = function(numberOfSteps) {\n       \/\/ code to make the robot walk\n       console.log(\"walked \" + numberOfSteps + \" steps\")\n   }\n\n   this.sit = function() {\n       \/\/ code to make the robot sit\n       console.log(\"sit\")\n   }\n\n}\n\n\/\/ New bot that does not have the walk function anymore\n\/\/ but instead has functions to control each step independently\nfunction AdvancedRobot(botName) {\n   \/\/ the new bot has a name as well\n   this.name = botName\n\n   this.sit = function() {\n       \/\/ code to make the robot sit\n       console.log(\"sit\")\n   }\n\n   this.rightStepForward = function() {\n       \/\/ code to take 1 step from right leg forward\n       console.log(\"right step forward\")\n   }\n\n   this.leftStepForward = function () {\n       \/\/ code to take 1 step from left leg forward\n       console.log(\"left step forward\")\n   }\n}\n\nfunction RobotAdapter(botName) {\n   \/\/ No references to the old interfact since that is usually\n   \/\/ phased out of development\n   const robot = new AdvancedRobot(botName)\n\n   \/\/ The adapter defines the walk function by using the\n   \/\/ two step controls. You now have room to choose which leg to begin\/end with,\n   \/\/ and do something at each step.\n   this.walk = function(numberOfSteps) {\n       for (let i=0; i&lt;numberOfSteps; i++) {\n          \n           if (i % 2 === 0) {\n               robot.rightStepForward()\n           } else {\n               robot.leftStepForward()\n           }\n       }\n   }\n\n   this.sit = robot.sit\n\n}\n\nfunction run() {\n\n   let robot = new Robot()\n\n   robot.sit()\n   \/\/ Output: sit\n   robot.walk(5)\n   \/\/ Output: walked 5 steps\n\n   robot = new RobotAdapter(\"my bot\")\n\n   robot.sit()\n   \/\/ Output: sit\n   robot.walk(5)\n   \/\/ Output:\n   \/\/ right step forward\n   \/\/ left step forward\n   \/\/ right step forward\n   \/\/ left step forward\n   \/\/ right step forward\n\n}\n\nrun()<\/code><\/pre>\n<p>Le principal probl\u00e8me de ce mod\u00e8le de conception est qu&rsquo;il ajoute de la complexit\u00e9 \u00e0 votre code source. Vous deviez d\u00e9j\u00e0 maintenir deux classes diff\u00e9rentes, et maintenant vous avez une autre classe &#8211; l&rsquo;adaptateur &#8211; \u00e0 maintenir.<\/p>\n<h4>7. Bridge<\/h4>\n<p>D\u00e9veloppant le mod\u00e8le Adapter, le mod\u00e8le Bridge fournit \u00e0 la fois la classe et le client avec des interfaces s\u00e9par\u00e9es afin qu&rsquo;ils puissent tous deux fonctionner m\u00eame en cas d&rsquo;interfaces natives incompatibles.<\/p>\n<p>Il permet de d\u00e9velopper une interface \u00e0 couplage tr\u00e8s l\u00e2che entre les deux types d&rsquo;objets. Il permet \u00e9galement d&rsquo;am\u00e9liorer l&rsquo;extensibilit\u00e9 des interfaces et de leurs impl\u00e9mentations pour une flexibilit\u00e9 maximale.<\/p>\n<p>Voici comment vous pouvez l&rsquo;utiliser :<\/p>\n<pre><code class=\"language-js\">\/\/ The TV and speaker share the same interface\nfunction TV() {\n   this.increaseVolume = function() {\n       \/\/ logic to increase TV volume\n   }\n\n   this.decreaseVolume = function() {\n       \/\/ logic to decrease TV volume\n   }\n\n   this.mute = function() {\n       \/\/ logic to mute TV audio\n   }\n}\n\nfunction Speaker() {\n   this.increaseVolume = function() {\n       \/\/ logic to increase speaker volume\n   }\n\n   this.decreaseVolume = function() {\n       \/\/ logic to decrease speaker volume\n   }\n\n   this.mute() = function() {\n       \/\/ logic to mute speaker audio\n   }\n}\n\n\/\/ The two remotes make use of the same common interface\n\/\/ that supports volume up and volume down features\nfunction SimpleRemote(device) {\n   this.pressVolumeDownKey = function() {\n       device.decreaseVolume()\n   }\n\n   this.pressVolumeUpKey = function() {\n       device.increaseVolume()\n   }\n}\n\nfunction AdvancedRemote(device) {\n\n   this.pressVolumeDownKey = function() {\n       device.decreaseVolume()\n   }\n\n   this.pressVolumeUpKey = function() {\n       device.increaseVolume()\n   }\n\n   this.pressMuteKey = function() {\n       device.mute()\n   }\n}\n\nfunction run() {\n\n   let tv = new TV()\n   let speaker = new Speaker()\n\n   let tvSimpleRemote = new SimpleRemote(tv)\n   let tvAdvancedRemote = new AdvancedRemote(tv)\n\n   let speakerSimpleRemote = new SimpleRemote(speaker)\n   let speakerAdvancedRemote = new AdvancedRemote(speaker)\n\n   \/\/ The methods listed in pair below will have the same effect\n   \/\/ on their target devices\n   tvSimpleRemote.pressVolumeDownKey()\n   tvAdvancedRemote.pressVolumeDownKey()\n\n   tvSimpleRemote.pressVolumeUpKey()\n   tvAdvancedRemote.pressVolumeUpKey()\n\n   \/\/ The advanced remote has additional functionality\n   tvAdvancedRemote.pressMuteKey()\n\n   speakerSimpleRemote.pressVolumeDownKey()\n   speakerAdvancedRemote.pressVolumeDownKey()\n\n   speakerSimpleRemote.pressVolumeUpKey()\n   speakerAdvancedRemote.pressVolumeUpKey()\n\n   speakerAdvancedRemote.pressMuteKey()\n}<\/code><\/pre>\n<p>Comme vous l&rsquo;avez peut-\u00eatre d\u00e9j\u00e0 devin\u00e9, le mod\u00e8le Bridge augmente consid\u00e9rablement la complexit\u00e9 de la base de code. De plus, la plupart des interfaces n&rsquo;ont g\u00e9n\u00e9ralement qu&rsquo;une seule impl\u00e9mentation dans les cas d&rsquo;utilisation r\u00e9els, de sorte que vous ne b\u00e9n\u00e9ficiez pas vraiment de la r\u00e9utilisabilit\u00e9 du code.<\/p>\n<h4>8. Composite<\/h4>\n<p>Le mod\u00e8le de conception Composite vous aide \u00e0 structurer et \u00e0 g\u00e9rer facilement des objets et des entit\u00e9s similaires. L&rsquo;id\u00e9e de base du mod\u00e8le Composite est que les objets et leurs conteneurs logiques peuvent \u00eatre repr\u00e9sent\u00e9s \u00e0 l&rsquo;aide d&rsquo;une seule classe abstraite (qui peut stocker les donn\u00e9es\/m\u00e9thodes li\u00e9es \u00e0 l&rsquo;objet et les r\u00e9f\u00e9rences \u00e0 elle-m\u00eame pour le conteneur).<\/p>\n<p>Il est plus logique d&rsquo;utiliser le mod\u00e8le Composite lorsque votre mod\u00e8le de donn\u00e9es ressemble \u00e0 une structure arborescente. Cependant, vous ne devriez pas essayer de transformer un mod\u00e8le de donn\u00e9es non arborescent en un mod\u00e8le de donn\u00e9es arborescent juste pour utiliser le motif Composite, car cela peut souvent vous faire perdre beaucoup de flexibilit\u00e9.<\/p>\n<p>Dans l&rsquo;exemple ci-dessous, vous verrez comment utiliser le mod\u00e8le de conception Composite pour construire un syst\u00e8me d&#8217;emballage pour les produits de commerce \u00e9lectronique qui peut \u00e9galement calculer la valeur totale de la commande par emballage :<\/p>\n<pre><code class=\"language-js\">\/\/ A product class, that acts as a Leaf node\nfunction Product(name, price) {\n   this.name = name\n   this.price = price\n\n   this.getTotalPrice = function() {\n       return this.price\n   }\n}\n\n\/\/ A box class, that acts as a parent\/child node\nfunction Box(name) {\n   this.contents = []\n   this.name = name\n\n   \/\/ Helper function to add an item to the box\n   this.add = function(content){\n       this.contents.push(content)\n   }\n\n   \/\/ Helper function to remove an item from the box\n   this.remove = function() {\n       var length = this.contents.length;\n       for (var i = 0; i &lt; length; i++) {\n           if (this.contents[i] === child) {\n               this.contents.splice(i, 1);\n               return;\n           }\n       }\n   }\n\n   \/\/ Helper function to get one item from the box\n   this.getContent = function(position) {\n       return this.contents[position]\n   }\n\n   \/\/ Helper function to get the total count of the items in the box\n   this.getTotalCount = function() {\n       return this.contents.length\n   }\n\n   \/\/ Helper function to calculate the total price of all items in the box\n   this.getTotalPrice = function() {\n       let totalPrice = 0;\n\n       for (let i=0; i &lt; this.getTotalCount(); i++){\n           totalPrice += this.getContent(i).getTotalPrice()\n       }\n\n       return totalPrice\n   }\n}\n\nfunction run() {\n\n   \/\/ Let's create some electronics\n   const mobilePhone = new Product(\"mobile phone,\" 1000)\n   const phoneCase = new Product(\"phone case,\" 30)\n   const screenProtector = new Product(\"screen protector,\" 20)\n\n   \/\/ and some stationery products\n   const pen = new Product(\"pen,\" 2)\n   const pencil = new Product(\"pencil,\" 0.5)\n   const eraser = new Product(\"eraser,\" 0.5)\n   const stickyNotes = new Product(\"sticky notes,\" 10)\n\n   \/\/ and put them in separate boxes\n   const electronicsBox = new Box(\"electronics\")\n   electronicsBox.add(mobilePhone)\n   electronicsBox.add(phoneCase)\n   electronicsBox.add(screenProtector)\n  \n   const stationeryBox = new Box(\"stationery\")\n   stationeryBox.add(pen)\n   stationeryBox.add(pencil)\n   stationeryBox.add(eraser)\n   stationeryBox.add(stickyNotes)\n\n   \/\/ and finally, put them into one big box for convenient shipping\n   const package = new Box('package')\n   package.add(electronicsBox)\n   package.add(stationeryBox)\n\n   \/\/ Here's an easy way to calculate the total order value\n   console.log(\"Total order price: USD \" + package.getTotalPrice())\n   \/\/ Output: USD 1063\n}\n\nrun()<\/code><\/pre>\n<p>Le plus gros inconv\u00e9nient de l&rsquo;utilisation du mod\u00e8le Composite est que les modifications des interfaces des composants peuvent \u00eatre tr\u00e8s difficiles \u00e0 l&rsquo;avenir. La conception des interfaces demande du temps et des efforts, et la nature arborescente du mod\u00e8le de donn\u00e9es peut rendre tr\u00e8s difficile d&rsquo;apporter des modifications comme vous le souhaitez.<\/p>\n<h4>9. Decorator<\/h4>\n<p>Le mod\u00e8le Decorator vous aide \u00e0 ajouter de nouvelles fonctionnalit\u00e9s aux objets existants en les enveloppant simplement dans un nouvel objet. C&rsquo;est un peu comme si vous pouviez emballer une bo\u00eete cadeau d\u00e9j\u00e0 emball\u00e9e avec un nouveau papier d&#8217;emballage autant de fois que vous le souhaitez : Chaque emballage vous permet d&rsquo;ajouter autant de fonctionnalit\u00e9s que vous le souhaitez. C&rsquo;est donc une excellente solution en termes de flexibilit\u00e9.<\/p>\n<p>D&rsquo;un point de vue technique, aucun h\u00e9ritage n&rsquo;est impliqu\u00e9, ce qui offre une plus grande libert\u00e9 lors de la conception de la logique commerciale.<\/p>\n<p>Dans l&rsquo;exemple ci-dessous, vous verrez comment le mod\u00e8le Decorator permet d&rsquo;ajouter plus de fonctionnalit\u00e9s \u00e0 une classe standard <code>Customer<\/code>:<\/p>\n<pre><code class=\"language-js\">function Customer(name, age) {\n   this.name = name\n   this.age = age\n\n   this.printInfo = function() {\n       console.log(\"Customer:nName : \" + this.name + \" | Age: \" + this.age)\n   }\n}\n\nfunction DecoratedCustomer(customer, location) {\n   this.customer = customer\n   this.name = customer.name\n   this.age = customer.age\n   this.location = location\n\n   this.printInfo = function() {\n       console.log(\"Decorated Customer:nName: \" + this.name + \" | Age: \" + this.age + \" | Location: \" + this.location)\n   }\n}\n\nfunction run() {\n   let customer = new Customer(\"John,\" 25)\n   customer.printInfo()\n   \/\/ Output:\n   \/\/ Customer:\n   \/\/ Name : John | Age: 25\n\n   let decoratedCustomer = new DecoratedCustomer(customer, \"FL\")\n   decoratedCustomer.printInfo()\n   \/\/ Output:\n   \/\/ Customer:\n   \/\/ Name : John | Age: 25 | Location: FL\n}\n\nrun()<\/code><\/pre>\n<p>Les inconv\u00e9nients de ce mod\u00e8le incluent une grande complexit\u00e9 de code puisqu&rsquo;il n&rsquo;y a pas de mod\u00e8le standard d\u00e9fini pour ajouter de nouvelles fonctionnalit\u00e9s \u00e0 l&rsquo;aide de d\u00e9corateurs. Vous risquez de vous retrouver avec un grand nombre de d\u00e9corateurs non uniformes et\/ou similaires \u00e0 la fin du cycle de vie de votre d\u00e9veloppement logiciel.<\/p>\n<p>Si vous ne faites pas attention lors de la conception des d\u00e9corateurs, vous pourriez finir par concevoir certains d\u00e9corateurs pour qu&rsquo;ils soient logiquement d\u00e9pendants d&rsquo;autres. Si ce probl\u00e8me n&rsquo;est pas r\u00e9solu, la suppression ou la restructuration des d\u00e9corateurs plus tard dans le cycle de vie peut avoir des cons\u00e9quences d\u00e9sastreuses sur la stabilit\u00e9 de votre application.<\/p>\n<h4>10. Facade<\/h4>\n<p>Lors de la cr\u00e9ation de la plupart des applications du monde r\u00e9el, la logique m\u00e9tier s&rsquo;av\u00e8re g\u00e9n\u00e9ralement assez complexe lorsque vous avez termin\u00e9. Vous pouvez vous retrouver avec plusieurs objets et m\u00e9thodes impliqu\u00e9s dans l&rsquo;ex\u00e9cution des op\u00e9rations de base de votre application. Garder la trace de leurs initialisations, de leurs d\u00e9pendances, de l&rsquo;ordre correct d&rsquo;ex\u00e9cution des m\u00e9thodes, etc., peut \u00eatre assez d\u00e9licat et source d&rsquo;erreurs si ce n&rsquo;est pas fait correctement.<\/p>\n<p>Le mod\u00e8le de conception Facade vous aide \u00e0 cr\u00e9er une abstraction entre l&rsquo;environnement qui invoque les op\u00e9rations susmentionn\u00e9es et les objets et m\u00e9thodes impliqu\u00e9s dans la r\u00e9alisation de ces op\u00e9rations. Cette abstraction abrite la logique d&rsquo;initialisation des objets, le suivi de leurs d\u00e9pendances et d&rsquo;autres activit\u00e9s importantes. L&rsquo;environnement d&rsquo;appel n&rsquo;a aucune information sur la fa\u00e7on dont une op\u00e9ration est ex\u00e9cut\u00e9e. Vous pouvez librement mettre \u00e0 jour la logique sans apporter de changement radical au client appelant.<\/p>\n<p>Voici comment vous pouvez l&rsquo;utiliser dans une application :<\/p>\n<pre><code class=\"language-js\">\/**\n* Let's say you're trying to build an online store. It will have multiple components and\n* complex business logic. In the example below, you will find a tiny segment of an online\n* store composed together using the Facade design pattern. The various manager and helper\n* classes are defined first of all.\n*\/\n\n\nfunction CartManager() {\n   this.getItems = function() {\n       \/\/ logic to return items\n       return []\n   }\n  \n   this.clearCart = function() {\n       \/\/ logic to clear cart\n   }\n}\n\nfunction InvoiceManager() {\n   this.createInvoice = function(items) {\n       \/\/ logic to create invoice\n       return {}\n   }\n\n   this.notifyCustomerOfFailure = function(invoice) {\n       \/\/ logic to notify customer\n   }\n\n   this.updateInvoicePaymentDetails = function(paymentResult) {\n       \/\/ logic to update invoice after payment attempt\n   }\n}\n\nfunction PaymentProcessor() {\n   this.processPayment = function(invoice) {\n       \/\/ logic to initiate and process payment\n       return {}\n   }\n}\n\nfunction WarehouseManager() {\n   this.prepareForShipping = function(items, invoice) {\n       \/\/ logic to prepare the items to be shipped\n   }\n}\n\n\/\/ This is where facade comes in. You create an additional interface on top of your\n\/\/ existing interfaces to define the business logic clearly. This interface exposes\n\/\/ very simple, high-level methods for the calling environment.\nfunction OnlineStore() {\n   this.name = \"Online Store\"\n  \n   this.placeOrder = function() {\n       let cartManager = new CartManager()\n       let items = cartManager.getItems()\n\n       let invoiceManager = new InvoiceManager()\n       let invoice = invoiceManager.createInvoice(items)\n      \n       let paymentResult = new PaymentProcessor().processPayment(invoice)\n       invoiceManager.updateInvoicePaymentDetails(paymentResult)\n\n       if (paymentResult.status === 'success') {\n           new WarehouseManager().prepareForShipping(items, invoice)\n           cartManager.clearCart()\n       } else {\n           invoiceManager.notifyCustomerOfFailure(invoice)\n       }\n      \n   }\n}\n\n\/\/ The calling environment is unaware of what goes on when somebody clicks a button to\n\/\/ place the order. You can easily change the underlying business logic without breaking\n\/\/ your calling environment.\nfunction run() {\n   let onlineStore = new OnlineStore()\n\n   onlineStore.placeOrder()\n}<\/code><\/pre>\n<p>L&rsquo;inconv\u00e9nient de l&rsquo;utilisation du mod\u00e8le Facade est qu&rsquo;il ajoute une couche d&rsquo;abstraction suppl\u00e9mentaire entre votre logique m\u00e9tier et le client, ce qui n\u00e9cessite une maintenance suppl\u00e9mentaire. Le plus souvent, cela augmente la complexit\u00e9 globale de la base de code.<\/p>\n<p>En plus de cela, la classe <code>Facade<\/code> devient une d\u00e9pendance obligatoire pour le fonctionnement de votre application &#8211; ce qui signifie que toute erreur dans la classe <code>Facade<\/code> a un impact direct sur le fonctionnement de votre application.<\/p>\n<h4>11. Flyweight<\/h4>\n<p>Le mod\u00e8le Flyweight vous aide \u00e0 r\u00e9soudre les probl\u00e8mes impliquant des objets avec des composants r\u00e9p\u00e9titifs de mani\u00e8re efficace en termes de m\u00e9moire en vous aidant \u00e0 r\u00e9utiliser les composants communs de votre pool d&rsquo;objets. Cela permet de r\u00e9duire la charge de la m\u00e9moire et d&rsquo;obtenir des temps d&rsquo;ex\u00e9cution plus rapides.<\/p>\n<p>Dans l&rsquo;exemple ci-dessous, une grande phrase est stock\u00e9e en m\u00e9moire \u00e0 l&rsquo;aide du mod\u00e8le de conception Flyweight. Au lieu de stocker chaque caract\u00e8re au fur et \u00e0 mesure qu&rsquo;il appara\u00eet, le programme identifie l&rsquo;ensemble des caract\u00e8res distincts qui ont \u00e9t\u00e9 utilis\u00e9s pour \u00e9crire le paragraphe et leurs types (nombre ou alphabet) et construit des Flyweight r\u00e9utilisables pour chaque caract\u00e8re qui contient les d\u00e9tails du caract\u00e8re et du type stock\u00e9s.<\/p>\n<p>Ensuite, le tableau principal stocke simplement une liste de r\u00e9f\u00e9rences \u00e0 ces poids volants dans l&rsquo;ordre o\u00f9 ils apparaissent dans la phrase au lieu de stocker une instance de l&rsquo;objet caract\u00e8re \u00e0 chaque fois qu&rsquo;il appara\u00eet.<\/p>\n<p>Cela r\u00e9duit de moiti\u00e9 la m\u00e9moire occup\u00e9e par la phrase. Gardez \u00e0 l&rsquo;esprit qu&rsquo;il s&rsquo;agit d&rsquo;une explication tr\u00e8s basique de la mani\u00e8re dont les processeurs de texte stockent le texte.<\/p>\n<pre><code class=\"language-js\">\/\/ A simple Character class that stores the value, type, and position of a character\nfunction Character(value, type, position) {\n   this.value = value\n   this.type = type\n   this.position = position\n}\n\n\/\/ A Flyweight class that stores character value and type combinations\nfunction CharacterFlyweight(value, type) {\n   this.value = value\n   this.type = type\n}\n\n\/\/ A factory to automatically create the flyweights that are not present in the list,\n\/\/ and also generate a count of the total flyweights in the list\nconst CharacterFlyweightFactory = (function () {\n   const flyweights = {}\n\n   return {\n       get: function (value, type) {\n           if (flyweights[value + type] === undefined)\n               flyweights[value + type] = new CharacterFlyweight(value, type)\n\n           return flyweights[value + type]\n       },\n       count: function () {\n           let count = 0;\n           for (var f in flyweights) count++;\n           return count;\n       }\n   }\n})()\n\n\/\/ An enhanced Character class that uses flyweights to store references\n\/\/ to recurring value and type combinations\nfunction CharacterWithFlyweight(value, type, position) {\n   this.flyweight = CharacterFlyweightFactory.get(value, type)\n   this.position = position\n}\n\n\/\/ A helper function to define the type of a character\n\/\/ It identifies numbers as N and everything as A (for alphabets)\nfunction getCharacterType(char) {\n   switch (char) {\n       case \"0\":\n       case \"1\":\n       case \"2\":\n       case \"3\":\n       case \"4\":\n       case \"5\":\n       case \"6\":\n       case \"7\":\n       case \"8\":\n       case \"9\": return \"N\"\n       default:\n           return \"A\"\n\n   }\n}\n\n\/\/ A list class to create an array of Characters from a given string\nfunction CharactersList(str) {\n   chars = []\n   for (let i = 0; i &lt; str.length; i++) {\n       const char = str[i]\n       chars.push(new Character(char, getCharacterType(char), i))\n   }\n\n   return chars\n}\n\n\/\/ A list class to create an array of CharacterWithFlyweights from a given string\nfunction CharactersWithFlyweightsList(str) {\n   chars = []\n   for (let i = 0; i  \" + charactersList.length)\n   \/\/ Output: Character count -&gt; 656\n\n   \/\/ The number of flyweights created is only 31, since only 31 characters are used to write the\n   \/\/ entire paragraph. This means that to store 656 characters, a total of\n   \/\/ (31 * 2 + 656 * 1 = 718) memory blocks are used instead of (656 * 3 = 1968) which would have\n   \/\/ used by the standard array.\n   \/\/ (We have assumed each variable to take up one memory block for simplicity. This\n   \/\/ may vary in real-life scenarios)\n   console.log(\"Flyweights created -&gt; \" + CharacterFlyweightFactory.count())\n   \/\/ Output: Flyweights created -&gt; 31\n\n}\n\nrun()<\/code><\/pre>\n<p>Comme vous l&rsquo;avez peut-\u00eatre d\u00e9j\u00e0 remarqu\u00e9, le mod\u00e8le Flyweight ajoute \u00e0 la complexit\u00e9 de la conception de votre logiciel en n&rsquo;\u00e9tant pas particuli\u00e8rement intuitif. Donc, si l&rsquo;\u00e9conomie de m\u00e9moire n&rsquo;est pas une pr\u00e9occupation urgente pour votre application, la complexit\u00e9 suppl\u00e9mentaire de Flyweight peut faire plus de mal que de bien.<\/p>\n<p>De plus, les Flyweight \u00e9changent la m\u00e9moire contre l&rsquo;efficacit\u00e9 du traitement, donc si vous \u00eates \u00e0 court de cycles CPU, Flyweight n&rsquo;est pas une bonne solution pour vous.<\/p>\n<h4>12. Proxy<\/h4>\n<p>Le mod\u00e8le Proxy vous permet de substituer un objet \u00e0 un autre. En d&rsquo;autres termes, les objets proxy peuvent prendre la place d&rsquo;objets r\u00e9els (dont ils sont un proxy) et contr\u00f4ler l&rsquo;acc\u00e8s \u00e0 l&rsquo;objet. Ces objets proxy peuvent \u00eatre utilis\u00e9s pour effectuer certaines actions avant ou apr\u00e8s qu&rsquo;une demande d&rsquo;invocation soit transmise \u00e0 l&rsquo;objet r\u00e9el.<\/p>\n<p>Dans l&rsquo;exemple ci-dessous, vous verrez comment l&rsquo;acc\u00e8s \u00e0 une instance de base de donn\u00e9es est contr\u00f4l\u00e9 par un proxy qui effectue quelques contr\u00f4les de validation de base sur les requ\u00eates avant de les autoriser :<\/p>\n<pre><code class=\"language-js\">function DatabaseHandler() {\n   const data = {}\n\n   this.set = function (key, val) {\n       data[key] = val;\n   }\n   this.get = function (key, val) {\n       return data[key]\n   }\n   this.remove = function (key) {\n       data[key] = null;\n   }\n\n\n}\n\nfunction DatabaseProxy(databaseInstance) {\n\n   this.set = function (key, val) {\n       if (key === \"\") {\n           console.log(\"Invalid input\")\n           return\n       }\n\n       if (val === undefined) {\n           console.log(\"Setting value to undefined not allowed!\")\n           return\n       }\n\n       databaseInstance.set(key, val)\n   }\n\n   this.get = function (key) {\n       if (databaseInstance.get(key) === null) {\n           console.log(\"Element deleted\")\n       }\n\n       if (databaseInstance.get(key) === undefined) {\n           console.log(\"Element not created\")\n       }\n\n       return databaseInstance.get(key)\n   }\n\n   this.remove = function (key) {\n       if (databaseInstance.get(key) === undefined) {\n           console.log(\"Element not added\")\n           return\n       }\n\n       if (databaseInstance.get(key) === null) {\n           console.log(\"Element removed already\")\n           return\n       }\n\n       return databaseInstance.remove(key)\n   }\n\n}\n\nfunction run() {\n   let databaseInstance = new DatabaseHandler()\n\n   databaseInstance.set(\"foo,\" \"bar\")\n   databaseInstance.set(\"foo,\" undefined)\n   console.log(\"#1: \" + databaseInstance.get(\"foo\"))\n   \/\/ #1: undefined\n\n   console.log(\"#2: \" + databaseInstance.get(\"baz\"))\n   \/\/ #2: undefined\n\n   databaseInstance.set(\",\" \"something\")\n\n   databaseInstance.remove(\"foo\")\n   console.log(\"#3: \" + databaseInstance.get(\"foo\"))\n   \/\/ #3: null\n\n   databaseInstance.remove(\"foo\")\n   databaseInstance.remove(\"baz\")\n\n   \/\/ Create a fresh database instance to try the same operations\n   \/\/ using the proxy\n   databaseInstance = new DatabaseHandler()\n   let proxy = new DatabaseProxy(databaseInstance)\n\n   proxy.set(\"foo,\" \"bar\")\n   proxy.set(\"foo,\" undefined)\n   \/\/ Proxy jumps in:\n   \/\/ Output: Setting value to undefined not allowed!\n\n   console.log(\"#1: \" + proxy.get(\"foo\"))\n   \/\/ Original value is retained:\n   \/\/ Output: #1: bar\n\n   console.log(\"#2: \" + proxy.get(\"baz\"))\n   \/\/ Proxy jumps in again\n   \/\/ Output:\n   \/\/ Element not created\n   \/\/ #2: undefined\n\n\n   proxy.set(\",\" \"something\")\n   \/\/ Proxy jumps in again\n   \/\/ Output: Invalid input\n\n   proxy.remove(\"foo\")\n\n   console.log(\"#3: \" + proxy.get(\"foo\"))\n   \/\/ Proxy jumps in again\n   \/\/ Output:\n   \/\/ Element deleted\n   \/\/ #3: null\n\n   proxy.remove(\"foo\")\n   \/\/ Proxy output: Element removed already\n   proxy.remove(\"baz\")\n   \/\/ Proxy output: Element not added\n\n}\n\nrun()<\/code><\/pre>\n<p>Ce mod\u00e8le de conception est couramment utilis\u00e9 dans l&rsquo;industrie et permet de mettre en \u0153uvre facilement les op\u00e9rations de pr\u00e9-ex\u00e9cution et de post-ex\u00e9cution. Cependant, comme tout autre mod\u00e8le de conception, il ajoute de la complexit\u00e9 \u00e0 votre base de code, alors essayez de ne pas l&rsquo;utiliser si vous n&rsquo;en avez pas vraiment besoin.<\/p>\n<p>Vous devez \u00e9galement garder \u00e0 l&rsquo;esprit que, puisqu&rsquo;un objet suppl\u00e9mentaire est impliqu\u00e9 dans les appels \u00e0 votre objet r\u00e9el, il peut y avoir une certaine latence due aux op\u00e9rations de traitement suppl\u00e9mentaires. L&rsquo;optimisation des performances de votre objet principal implique maintenant aussi l&rsquo;optimisation des m\u00e9thodes de votre proxy pour les performances.<\/p>\n<h3>Comportemental<\/h3>\n<p>Les mod\u00e8les de conception comportementaux vous aident \u00e0 r\u00e9soudre les probl\u00e8mes li\u00e9s \u00e0 la mani\u00e8re dont les objets interagissent les uns avec les autres. Cela peut impliquer le partage ou le passage de la responsabilit\u00e9\/du contr\u00f4le entre les objets pour effectuer des op\u00e9rations d&rsquo;ensemble. Il peut \u00e9galement s&rsquo;agir de transmettre\/partager des donn\u00e9es entre plusieurs objets de la mani\u00e8re la plus efficace possible.<\/p>\n<h4>13. Chain of Responsability<\/h4>\n<p>Le mod\u00e8le Chain of Responsability est l&rsquo;un des mod\u00e8les de conception comportementale les plus simples. Il est utile lorsque vous concevez une logique pour des op\u00e9rations qui peuvent \u00eatre trait\u00e9es par plusieurs gestionnaires.<\/p>\n<p>\u00c0 l&rsquo;instar de l&rsquo;escalade des probl\u00e8mes dans les \u00e9quipes de support, le contr\u00f4le passe par une cha\u00eene de gestionnaires, et le gestionnaire responsable de l&rsquo;action termine l&rsquo;op\u00e9ration. Ce mod\u00e8le de conception est souvent utilis\u00e9 dans la conception d&rsquo;interfaces utilisateur, o\u00f9 plusieurs couches de composants peuvent g\u00e9rer un \u00e9v\u00e9nement d&rsquo;entr\u00e9e utilisateur, tel qu&rsquo;un toucher ou un glissement.<\/p>\n<p>Vous verrez ci-dessous un exemple d&rsquo;escalade de plainte utilisant le mod\u00e8le Chaine of Responsability. La plainte sera trait\u00e9e par les gestionnaires en fonction de sa gravit\u00e9 :<\/p>\n<pre><code class=\"language-js\">\/\/ Complaint class that stores title and severity of a complaint\n\/\/ Higher value of severity indicates a more severe complaint\nfunction Complaint (title, severity) {\n    this.title = title\n    this.severity = severity\n}\n\n\/\/ Base level handler that receives all complaints\nfunction Representative () {\n    \/\/ If this handler can not handle the complaint, it will be forwarded to the next level\n    this.nextLevel = new Management()\n\n    this.handleComplaint = function (complaint) {\n        if (complaint.severity === 0)\n            console.log(\"Representative resolved the following complaint: \" + complaint.title)\n        else\n            this.nextLevel.handleComplaint(complaint)\n    }\n}\n\n\/\/ Second level handler to handle complaints of severity 1\nfunction Management() {\n    \/\/ If this handler can not handle the complaint, it will be forwarded to the next level\n    this.nextLevel = new Leadership()\n\n    this.handleComplaint = function (complaint) {\n        if (complaint.severity === 1)\n            console.log(\"Management resolved the following complaint: \" + complaint.title)\n        else\n            this.nextLevel.handleComplaint(complaint)\n    }\n}\n\n\/\/ Highest level handler that handles all complaints unhandled so far\nfunction Leadership() {\n    this.handleComplaint = function (complaint) {\n        console.log(\"Leadership resolved the following complaint: \" + complaint.title)\n    }\n}\n\nfunction run() {\n    \/\/ Create an instance of the base level handler\n    let customerSupport = new Representative()\n\n    \/\/ Create multiple complaints of varying severity and pass them to the base handler\n\n    let complaint1 = new Complaint(\"Submit button doesn't work,\" 0)\n    customerSupport.handleComplaint(complaint1)\n    \/\/ Output: Representative resolved the following complaint: Submit button doesn't work\n\n    let complaint2 = new Complaint(\"Payment failed,\" 1)\n    customerSupport.handleComplaint(complaint2)\n    \/\/ Output: Management resolved the following complaint: Payment failed\n\n    let complaint3 = new Complaint(\"Employee misdemeanour,\" 2)\n    customerSupport.handleComplaint(complaint3)\n    \/\/ Output: Leadership resolved the following complaint: Employee misdemeanour\n}\n\nrun()<\/code><\/pre>\n<p>Le probl\u00e8me \u00e9vident de ce mod\u00e8le est qu&rsquo;il est lin\u00e9aire. Il peut donc y avoir une certaine latence dans le traitement d&rsquo;une op\u00e9ration lorsqu&rsquo;un grand nombre de gestionnaires sont encha\u00een\u00e9s les uns aux autres.<\/p>\n<p>Garder la trace de tous les gestionnaires peut \u00eatre un autre point douloureux, car cela peut devenir assez d\u00e9sordonn\u00e9 apr\u00e8s un certain nombre de gestionnaires. Le d\u00e9bogage est encore un autre cauchemar, car chaque requ\u00eate peut se terminer sur un gestionnaire diff\u00e9rent, ce qui rend difficile la normalisation du <a href=\"https:\/\/kinsta.com\/fr\/blog\/deboguer-node\/\">processus de journalisation et de d\u00e9bogage<\/a>.<\/p>\n<h4>14. Iterator<\/h4>\n<p>Le mod\u00e8le Iterator est assez simple et est tr\u00e8s couramment utilis\u00e9 dans presque tous les langages modernes orient\u00e9s objet. Si vous devez parcourir une liste d&rsquo;objets qui ne sont pas tous du m\u00eame type, les m\u00e9thodes d&rsquo;it\u00e9ration normales, telles que les boucles for, peuvent devenir tr\u00e8s compliqu\u00e9es, surtout si elles contiennent une logique d&rsquo;entreprise.<\/p>\n<p>Le mod\u00e8le Iterator peut vous aider \u00e0 isoler la logique d&rsquo;it\u00e9ration et de traitement de vos listes de la logique m\u00e9tier principale.<\/p>\n<p>Voici comment vous pouvez l&rsquo;utiliser sur une liste plut\u00f4t basique avec plusieurs types d&rsquo;\u00e9l\u00e9ments :<\/p>\n<pre><code class=\"language-js\">\/\/ Iterator for a complex list with custom methods\nfunction Iterator(list) {\n   this.list = list\n   this.index = 0\n\n   \/\/ Fetch the current element\n   this.current = function() {\n       return this.list[this.index]\n   }\n\n   \/\/ Fetch the next element in the list\n   this.next = function() {\n       return this.list[this.index++]\n   }\n\n   \/\/ Check if there is another element in the list\n   this.hasNext = function() {\n       return this.index &lt; this.list.length\n   }\n\n   \/\/ Reset the index to point to the initial element\n   this.resetIndex = function() {\n       this.index = 0\n   }\n\n   \/\/ Run a forEach loop over the list\n   this.forEach = function(callback) {\n       for (let element = this.next(); this.index &lt;= this.list.length; element = this.next()) {\n           callback(element)\n       }\n   }\n}\n\nfunction run() {\n   \/\/ A complex list with elements of multiple data types\n   let list = [\"Lorem ipsum,\" 9, [\"lorem ipsum dolor,\" true], false]\n\n   \/\/ Create an instance of the iterator and pass it the list\n   let iterator = new Iterator(list)\n\n   \/\/ Log the first element\n   console.log(iterator.current())\n   \/\/ Output: Lorem ipsum\n\n   \/\/ Print all elements of the list using the iterator's methods\n   while (iterator.hasNext()) {\n       console.log(iterator.next())\n       \/**\n        * Output:\n        * Lorem ipsum\n        * 9\n        * [ 'lorem ipsum dolor', true ]\n        * false\n        *\/\n   }\n\n   \/\/ Reset the iterator's index to the first element\n   iterator.resetIndex()\n\n   \/\/ Use the custom iterator to pass an effect that will run for each element of the list\n   iterator.forEach(function (element) {\n       console.log(element)\n   })\n   \/**\n    * Output:\n    * Lorem ipsum\n    * 9\n    * [ 'lorem ipsum dolor', true ]\n    * false\n    *\/\n}\n\nrun()<\/code><\/pre>\n<p>Il va sans dire que ce md\u00e8le peut \u00eatre inutilement complexe pour les listes sans plusieurs types d&rsquo;\u00e9l\u00e9ments. De plus, s&rsquo;il y a trop de types d&rsquo;\u00e9l\u00e9ments dans une liste, celle-ci peut \u00e9galement devenir difficile \u00e0 g\u00e9rer.<\/p>\n<p>La cl\u00e9 est d&rsquo;identifier si vous avez vraiment besoin d&rsquo;un it\u00e9rateur en fonction de votre liste et de ses possibilit\u00e9s de modifications futures. De plus, le mod\u00e8le Iterator n&rsquo;est utile que dans les listes, et les listes peuvent parfois vous limiter \u00e0 leur mode d&rsquo;acc\u00e8s lin\u00e9aire. D&rsquo;autres structures de donn\u00e9es peuvent parfois vous offrir des avantages plus importants en termes de performances.<\/p>\n<h4>15. Mediator<\/h4>\n<p>La conception de votre application peut parfois vous obliger \u00e0 jouer avec un grand nombre d&rsquo;objets distincts qui abritent divers types de logique commerciale et d\u00e9pendent souvent les uns des autres. La gestion des d\u00e9pendances peut parfois s&rsquo;av\u00e9rer d\u00e9licate car vous devez garder la trace de la mani\u00e8re dont ces objets \u00e9changent des donn\u00e9es et du contr\u00f4le entre eux.<\/p>\n<p>Le mod\u00e8le de conception Mediator a pour but de vous aider \u00e0 r\u00e9soudre ce probl\u00e8me en isolant la logique d&rsquo;interaction de ces objets dans un objet distinct en soi.<\/p>\n<p>Cet objet distinct est connu sous le nom de Mediator, et il est responsable de l&rsquo;ex\u00e9cution du travail effectu\u00e9 par vos classes de niveau inf\u00e9rieur. Votre client ou l&rsquo;environnement appelant interagira \u00e9galement avec Mediator au lieu des classes de niveau inf\u00e9rieur.<\/p>\n<p>Voici un exemple du mod\u00e8le de conception Mediator en action :<\/p>\n<pre><code class=\"language-js\">\/\/ Writer class that receives an assignment, writes it in 2 seconds, and marks it as finished\nfunction Writer(name, manager) {\n    \n    \/\/ Reference to the manager, writer's name, and a busy flag that the manager uses while assigning the article\n    this.manager = manager\n    this.name = name\n    this.busy = false\n\n    this.startWriting = function (assignment) {\n        console.log(this.name + \" started writing \"\" + assignment + \"\"\")\n        this.assignment = assignment\n        this.busy = true\n\n        \/\/ 2 s timer to replicate manual action\n        setTimeout(() =&gt; { this.finishWriting() }, 2000)\n    }\n\n    this.finishWriting = function () {\n        if (this.busy === true) {\n            console.log(this.name + \" finished writing \"\" + this.assignment + \"\"\")\n            this.busy = false\n            return this.manager.notifyWritingComplete(this.assignment)\n        } else {\n            console.log(this.name + \" is not writing any article\")\n        }\n    }\n}\n\n\/\/ Editor class that receives an assignment, edits it in 3 seconds, and marks it as finished\nfunction Editor(name, manager) {\n    \n    \/\/ Reference to the manager, writer's name, and a busy flag that the manager uses while assigning the article\n    this.manager = manager\n    this.name = name\n    this.busy = false\n\n    this.startEditing = function (assignment) {\n        console.log(this.name + \" started editing \"\" + assignment + \"\"\")\n        this.assignment = assignment\n        this.busy = true\n\n        \/\/ 3 s timer to replicate manual action\n        setTimeout(() =&gt; { this.finishEditing() }, 3000)\n    }\n\n    this.finishEditing = function () {\n        if (this.busy === true) {\n            console.log(this.name + \" finished editing \"\" + this.assignment + \"\"\")\n            this.manager.notifyEditingComplete(this.assignment)\n            this.busy = false\n        } else {\n            console.log(this.name + \" is not editing any article\")\n        }\n    }\n}\n\n\/\/ The mediator class\nfunction Manager() {\n    \/\/ Store arrays of workers\n    this.editors = []\n    this.writers = []\n\n    this.setEditors = function (editors) {\n        this.editors = editors\n    }\n    this.setWriters = function (writers) {\n        this.writers = writers\n    }\n\n    \/\/ Manager receives new assignments via this method\n    this.notifyNewAssignment = function (assignment) {\n        let availableWriter = this.writers.find(function (writer) {\n            return writer.busy === false\n        })\n        availableWriter.startWriting(assignment)\n        return availableWriter\n    }\n\n    \/\/ Writers call this method to notify they're done writing\n    this.notifyWritingComplete = function (assignment) {\n        let availableEditor = this.editors.find(function (editor) {\n            return editor.busy === false\n        })\n        availableEditor.startEditing(assignment)\n        return availableEditor\n    }\n\n    \/\/ Editors call this method to notify they're done editing\n    this.notifyEditingComplete = function (assignment) {\n        console.log(\"\"\" + assignment + \"\" is ready to publish\")\n    }\n\n}\n\nfunction run() {\n    \/\/ Create a manager\n    let manager = new Manager()\n\n    \/\/ Create workers\n    let editors = [\n        new Editor(\"Ed,\" manager),\n        new Editor(\"Phil,\" manager),\n    ]\n\n    let writers = [\n        new Writer(\"Michael,\" manager),\n        new Writer(\"Rick,\" manager),\n    ]\n\n    \/\/ Attach workers to manager\n    manager.setEditors(editors)\n    manager.setWriters(writers)\n\n    \/\/ Send two assignments to manager\n    manager.notifyNewAssignment(\"var vs let in JavaScript\")\n    manager.notifyNewAssignment(\"JS promises\")\n\n    \/**\n     * Output:\n     * Michael started writing \"var vs let in JavaScript\"\n     * Rick started writing \"JS promises\"\n     * \n     * After 2s, output:\n     * Michael finished writing \"var vs let in JavaScript\"\n     * Ed started editing \"var vs let in JavaScript\"\n     * Rick finished writing \"JS promises\"\n     * Phil started editing \"JS promises\"\n     *\n     * After 3s, output:\n     * Ed finished editing \"var vs let in JavaScript\"\n     * \"var vs let in JavaScript\" is ready to publish\n     * Phil finished editing \"JS promises\"\n     * \"JS promises\" is ready to publish\n     *\/\n\n}\n\nrun()<\/code><\/pre>\n<p>Bien que Mediator offre \u00e0 la conception de votre application un d\u00e9couplage et une grande flexibilit\u00e9, en fin de compte, il s&rsquo;agit d&rsquo;une autre classe que vous devez maintenir. Vous devez \u00e9valuer si votre conception peut vraiment b\u00e9n\u00e9ficier d&rsquo;un Mediator avant d&rsquo;en \u00e9crire un afin de ne pas finir par ajouter une complexit\u00e9 inutile \u00e0 votre base de code.<\/p>\n<p>Il est \u00e9galement important de garder \u00e0 l&rsquo;esprit que m\u00eame si la classe Mediator ne contient pas de logique commerciale directe, elle contient tout de m\u00eame beaucoup de code crucial pour le fonctionnement de votre application et peut donc rapidement devenir assez complexe.<\/p>\n<h4>16. Memento<\/h4>\n<p>Le versionnement des objets est un autre probl\u00e8me courant auquel vous serez confront\u00e9 lors du d\u00e9veloppement d&rsquo;applications. Dans de nombreux cas d&rsquo;utilisation, il est n\u00e9cessaire de conserver l&rsquo;historique d&rsquo;un objet, de permettre des retours en arri\u00e8re faciles et parfois m\u00eame de revenir en arri\u00e8re. L&rsquo;\u00e9criture de la logique pour de telles applications peut \u00eatre difficile.<\/p>\n<p>Le mod\u00e8le de conception Memento est destin\u00e9 \u00e0 r\u00e9soudre facilement ce probl\u00e8me.<\/p>\n<p>Memento est consid\u00e9r\u00e9 comme un instantan\u00e9 d&rsquo;un objet \u00e0 un moment donn\u00e9. Le mod\u00e8le de conception Memento utilise ces m\u00e9mentos pour pr\u00e9server des instantan\u00e9s de l&rsquo;objet au fur et \u00e0 mesure qu&rsquo;il est modifi\u00e9 au fil du temps. Lorsque vous avez besoin de revenir \u00e0 une ancienne version, il vous suffit de r\u00e9cup\u00e9rer le memento correspondant.<\/p>\n<p>Voici comment vous pouvez l&rsquo;impl\u00e9menter dans une application de traitement de texte :<\/p>\n<pre><code class=\"language-js\">\/\/ The memento class that can hold one snapshot of the Originator class - document\nfunction Text(contents) {\n    \/\/ Contents of the document\n    this.contents = contents\n\n    \/\/ Accessor function for contents\n    this.getContents = function () {\n        return this.contents\n    }\n\n    \/\/ Helper function to calculate word count for the current document\n    this.getWordCount = function () {\n        return this.contents.length\n    }\n}\n\n\/\/ The originator class that holds the latest version of the document\nfunction Document(contents) {\n    \/\/ Holder for the memento, i.e., the text of the document\n    this.text = new Text(contents)\n\n    \/\/ Function to save new contents as a memento\n    this.save = function (contents) {\n        this.text = new Text(contents)\n        return this.text\n    }\n\n    \/\/ Function to revert to an older version of the text using a memento\n    this.restore = function (text) {\n        this.text = new Text(text.getContents())\n    }\n\n    \/\/ Helper function to get the current memento\n    this.getText = function () {\n        return this.text\n    }\n\n    \/\/ Helper function to get the word count of the current document\n    this.getWordCount = function () {\n        return this.text.getWordCount()\n    }\n}\n\n\/\/ The caretaker class that providers helper functions to modify the document\nfunction DocumentManager(document) {\n    \/\/ Holder for the originator, i.e., the document\n    this.document = document\n\n    \/\/ Array to maintain a list of mementos\n    this.history = []\n\n    \/\/ Add the initial state of the document as the first version of the document\n    this.history.push(document.getText())\n\n    \/\/ Helper function to get the current contents of the documents\n    this.getContents = function () {\n        return this.document.getText().getContents()\n    }\n\n    \/\/ Helper function to get the total number of versions available for the document\n    this.getVersionCount = function () {\n        return this.history.length\n    }\n\n    \/\/ Helper function to get the complete history of the document\n    this.getHistory = function () {\n        return this.history.map(function (element) {\n            return element.getContents()\n        })\n\n    }\n\n    \/\/ Function to overwrite the contents of the document\n    this.overwrite = function (contents) {\n        let newVersion = this.document.save(contents)\n        this.history.push(newVersion)\n    }\n\n    \/\/ Function to append new content to the existing contents of the document\n    this.append = function (contents) {\n        let currentVersion = this.history[this.history.length - 1]\n        let newVersion\n        if (currentVersion === undefined)\n            newVersion = this.document.save(contents)\n        else\n            newVersion = this.document.save(currentVersion.getContents() + contents)\n        this.history.push(newVersion)\n    }\n\n    \/\/ Function to delete all the contents of the document\n    this.delete = function () {\n        this.history.push(this.document.save(\"\"))\n    }\n\n    \/\/ Function to get a particular version of the document\n    this.getVersion = function (versionNumber) {\n        return this.history[versionNumber - 1]\n    }\n\n    \/\/ Function to undo the last change\n    this.undo = function () {\n        let previousVersion = this.history[this.history.length - 2]\n        this.document.restore(previousVersion)\n        this.history.push(previousVersion)\n    }\n\n    \/\/ Function to revert the document to a previous version\n    this.revertToVersion = function (version) {\n        let previousVersion = this.history[version - 1]\n        this.document.restore(previousVersion)\n        this.history.push(previousVersion)\n    }\n\n    \/\/ Helper function to get the total word count of the document\n    this.getWordCount = function () {\n        return this.document.getWordCount()\n    }\n\n}\n\nfunction run() {\n    \/\/ Create a document\n    let blogPost = new Document(\"\")\n\n    \/\/ Create a caretaker for the document\n    let blogPostManager = new DocumentManager(blogPost)\n\n    \/\/ Change #1: Add some text\n    blogPostManager.append(\"Hello World!\")\n    console.log(blogPostManager.getContents())\n    \/\/ Output: Hello World!\n\n    \/\/ Change #2: Add some more text\n    blogPostManager.append(\" This is the second entry in the document\")\n    console.log(blogPostManager.getContents())\n    \/\/ Output: Hello World! This is the second entry in the document\n\n    \/\/ Change #3: Overwrite the document with some new text\n    blogPostManager.overwrite(\"This entry overwrites everything in the document\")\n    console.log(blogPostManager.getContents())\n    \/\/ Output: This entry overwrites everything in the document\n\n    \/\/ Change #4: Delete the contents of the document\n    blogPostManager.delete()\n    console.log(blogPostManager.getContents())\n    \/\/ Empty output\n\n    \/\/ Get an old version of the document\n    console.log(blogPostManager.getVersion(2).getContents())\n    \/\/ Output: Hello World!\n\n    \/\/ Change #5: Go back to an old version of the document\n    blogPostManager.revertToVersion(3)\n    console.log(blogPostManager.getContents())\n    \/\/ Output: Hello World! This is the second entry in the document\n\n    \/\/ Get the word count of the current document\n    console.log(blogPostManager.getWordCount())\n    \/\/ Output: 53\n\n    \/\/ Change #6: Undo the last change\n    blogPostManager.undo()\n    console.log(blogPostManager.getContents())\n    \/\/ Empty output\n\n    \/\/ Get the total number of versions for the document\n    console.log(blogPostManager.getVersionCount())\n    \/\/ Output: 7\n\n    \/\/ Get the complete history of the document\n    console.log(blogPostManager.getHistory())\n    \/**\n     * Output:\n     * [\n     *   '',\n     *   'Hello World!',\n     *   'Hello World! This is the second entry in the document',\n     *   'This entry overwrites everything in the document',\n     *   '',\n     *   'Hello World! This is the second entry in the document',\n     *   ''\n     * ]\n     *\/\n}\n\nrun()<\/code><\/pre>\n<p>Bien que le mod\u00e8le de conception Memento soit une excellente solution pour g\u00e9rer l&rsquo;historique d&rsquo;un objet, il peut \u00eatre tr\u00e8s gourmand en ressources. Comme chaque memento est presque une copie de l&rsquo;objet, il peut faire gonfler la m\u00e9moire de votre application tr\u00e8s rapidement s&rsquo;il n&rsquo;est pas utilis\u00e9 avec mod\u00e9ration.<\/p>\n<p>Avec un grand nombre d&rsquo;objets, la gestion de leur cycle de vie peut \u00e9galement \u00eatre une t\u00e2che assez fastidieuse. En plus de tout cela, les classes <code>Originator<\/code> et <code>Caretaker<\/code> sont g\u00e9n\u00e9ralement tr\u00e8s \u00e9troitement coupl\u00e9es, ce qui ajoute \u00e0 la complexit\u00e9 de votre base de code.<\/p>\n<h4>17. Observer<\/h4>\n<p>Le mod\u00e8le Observer fournit une solution alternative au probl\u00e8me de l&rsquo;interaction entre plusieurs objets (vu pr\u00e9c\u00e9demment dans le mod\u00e8le Mediator).<\/p>\n<p>Au lieu de permettre \u00e0 chaque objet de communiquer entre eux par le biais d&rsquo;un m\u00e9diateur d\u00e9sign\u00e9, le mod\u00e8le Observer leur permet de s&rsquo;observer mutuellement. Les objets sont con\u00e7us pour \u00e9mettre des \u00e9v\u00e8nements lorsqu&rsquo;ils tentent d&rsquo;envoyer des donn\u00e9es ou un contr\u00f4le, et les autres objets qui \u00ab \u00e9coutent \u00bb ces \u00e9v\u00e8nements peuvent ensuite les recevoir et interagir en fonction de leur contenu.<\/p>\n<p>Voici une d\u00e9monstration simple de l&rsquo;envoi de bulletins d&rsquo;information \u00e0 plusieurs personnes par le biais du mod\u00e8le Observer :<\/p>\n<pre><code class=\"language-js\">\/\/ The newsletter class that can send out posts to its subscribers\nfunction Newsletter() {\n   \/\/ Maintain a list of subscribers\n   this.subscribers = []\n\n   \/\/ Subscribe a reader by adding them to the subscribers' list\n   this.subscribe = function(subscriber) {\n       this.subscribers.push(subscriber)\n   }\n\n   \/\/ Unsubscribe a reader by removing them from the subscribers' list\n   this.unsubscribe = function(subscriber) {\n       this.subscribers = this.subscribers.filter(\n           function (element) {\n               if (element !== subscriber) return element\n           }\n       )\n   }\n\n   \/\/ Publish a post by calling the receive function of all subscribers\n   this.publish = function(post) {\n       this.subscribers.forEach(function(element) {\n           element.receiveNewsletter(post)\n       })\n   }\n}\n\n\/\/ The reader class that can subscribe to and receive updates from newsletters\nfunction Reader(name) {\n   this.name = name\n\n   this.receiveNewsletter = function(post) {\n       console.log(\"Newsletter received by \" + name + \"!: \" + post)\n   }\n\n}\n\nfunction run() {\n   \/\/ Create two readers\n   let rick = new Reader(\"ed\")\n   let morty = new Reader(\"morty\")\n\n   \/\/ Create your newsletter\n   let newsletter = new Newsletter()\n\n   \/\/ Subscribe a reader to the newsletter\n   newsletter.subscribe(rick)\n\n   \/\/ Publish the first post\n   newsletter.publish(\"This is the first of the many posts in this newsletter\")\n   \/**\n    * Output:\n    * Newsletter received by ed!: This is the first of the many posts in this newsletter\n    *\/\n\n   \/\/ Subscribe another reader to the newsletter\n   newsletter.subscribe(morty)\n\n   \/\/ Publish the second post\n   newsletter.publish(\"This is the second of the many posts in this newsletter\")\n   \/**\n    * Output:\n    * Newsletter received by ed!: This is the second of the many posts in this newsletter\n    * Newsletter received by morty!: This is the second of the many posts in this newsletter\n    *\/\n\n   \/\/ Unsubscribe the first reader\n   newsletter.unsubscribe(rick)\n\n   \/\/ Publish the third post\n   newsletter.publish(\"This is the third of the many posts in this newsletter\")\n   \/**\n    * Output:\n    * Newsletter received by morty!: This is the third of the many posts in this newsletter\n    *\/\n\n}\n\nrun()<\/code><\/pre>\n<p>Bien que le mod\u00e8le Observer soit un moyen astucieux de faire circuler le contr\u00f4le et les donn\u00e9es, il est mieux adapt\u00e9 aux situations o\u00f9 il y a un grand nombre d&rsquo;\u00e9metteurs et de r\u00e9cepteurs qui interagissent entre eux via un nombre limit\u00e9 de connexions. Si les objets devaient tous \u00e9tablir des connexions un \u00e0 un, vous perdriez l&rsquo;avantage que vous obtenez en publiant et en vous abonnant \u00e0 des \u00e9v\u00e8nements puisqu&rsquo;il n&rsquo;y aura toujours qu&rsquo;un seul abonn\u00e9 pour chaque \u00e9diteur (alors qu&rsquo;il aurait \u00e9t\u00e9 mieux g\u00e9r\u00e9 par une ligne de communication directe entre eux).<\/p>\n<p>En outre, le mod\u00e8le de conception Observer peut entra\u00eener des probl\u00e8mes de performance si les \u00e9v\u00e9nements d&rsquo;abonnement ne sont pas trait\u00e9s correctement. Si un objet continue \u00e0 s&rsquo;abonner \u00e0 un autre objet m\u00eame s&rsquo;il n&rsquo;en a pas besoin, il <a href=\"https:\/\/en.wikipedia.org\/wiki\/Lapsed_listener_problem\">ne sera pas \u00e9ligible \u00e0 la collecte<\/a> et augmentera la consommation de m\u00e9moire de l&rsquo;application.<\/p>\n<h4>18. State<\/h4>\n<p>Le mod\u00e8le de conception State est l&rsquo;un des mod\u00e8les de conception les plus utilis\u00e9s dans le secteur du d\u00e9veloppement logiciel. Les <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheques-javascript\/\">frameworks JavaScript<\/a> populaires comme <a href=\"https:\/\/reactjs.org\/docs\/state-and-lifecycle.html\">React<\/a> et <a href=\"https:\/\/medium.com\/olricdigital\/introduction-to-state-management-in-angular-v2-ef6f5144bade\">Angular<\/a> s&rsquo;appuient fortement sur le mod\u00e8le State pour g\u00e9rer les donn\u00e9es et le comportement de l&rsquo;application en fonction de ces donn\u00e9es.<\/p>\n<p>En d&rsquo;autres termes, le mod\u00e8le de conception State est utile dans les situations o\u00f9 vous pouvez d\u00e9finir les \u00e9tats d\u00e9finitifs d&rsquo;une entit\u00e9 (qui peut \u00eatre un composant, une page, une application ou une machine), et o\u00f9 l&rsquo;entit\u00e9 a une r\u00e9action pr\u00e9d\u00e9finie au changement d&rsquo;\u00e9tat.<\/p>\n<p>Disons que vous essayez de construire un processus de demande de pr\u00eat. Chaque \u00e9tape du processus de demande peut \u00eatre d\u00e9finie comme un \u00e9tat.<\/p>\n<p>Alors que le client voit g\u00e9n\u00e9ralement une petite liste d&rsquo;\u00e9tats simplifi\u00e9s de sa demande (en attente, en r\u00e9vision, accept\u00e9e et rejet\u00e9e), d&rsquo;autres \u00e9tapes peuvent \u00eatre impliqu\u00e9es en interne. \u00c0 chacune de ces \u00e9tapes, la demande sera attribu\u00e9e \u00e0 une personne distincte et peut avoir des exigences uniques.<\/p>\n<p>Le syst\u00e8me est con\u00e7u de telle sorte qu&rsquo;\u00e0 la fin du traitement dans un \u00e9tat, l&rsquo;\u00e9tat est mis \u00e0 jour et remplac\u00e9 par le suivant, et la prochaine s\u00e9rie d&rsquo;\u00e9tapes pertinentes est lanc\u00e9e.<\/p>\n<p>Voici comment vous pouvez construire un syst\u00e8me de gestion des t\u00e2ches en utilisant le mod\u00e8le de conception State :<\/p>\n<pre><code class=\"language-js\">\/\/ Create titles for all states of a task\nconst STATE_TODO = \"TODO\"\nconst STATE_IN_PROGRESS = \"IN_PROGRESS\"\nconst STATE_READY_FOR_REVIEW = \"READY_FOR_REVIEW\"\nconst STATE_DONE = \"DONE\"\n\n\/\/ Create the task class with a title, assignee, and duration of the task\nfunction Task(title, assignee) {\n    this.title = title\n    this.assignee = assignee\n\n    \/\/ Helper function to update the assignee of the task\n    this.setAssignee = function (assignee) {\n        this.assignee = assignee\n    }\n\n    \/\/ Function to update the state of the task\n    this.updateState = function (state) {\n\n        switch (state) {\n            case STATE_TODO:\n                this.state = new TODO(this)\n                break\n            case STATE_IN_PROGRESS:\n                this.state = new IN_PROGRESS(this)\n                break\n            case STATE_READY_FOR_REVIEW:\n                this.state = new READY_FOR_REVIEW(this)\n                break\n            case STATE_DONE:\n                this.state = new DONE(this)\n                break\n            default:\n                return\n        }\n        \/\/ Invoke the callback function for the new state after it is set\n        this.state.onStateSet()\n    }\n\n    \/\/ Set the initial state of the task as TODO\n    this.updateState(STATE_TODO)\n}\n\n\/\/ TODO state\nfunction TODO(task) {\n\n    this.onStateSet = function () {\n        console.log(task.assignee + \" notified about new task \"\" + task.title + \"\"\")\n    }\n}\n\n\/\/ IN_PROGRESS state\nfunction IN_PROGRESS(task) {\n\n    this.onStateSet = function () {\n        console.log(task.assignee + \" started working on the task \"\" + task.title + \"\"\")\n    }\n}\n\n\/\/ READY_FOR_REVIEW state that updates the assignee of the task to be the manager of the developer\n\/\/ for the review\nfunction READY_FOR_REVIEW(task) {\n    this.getAssignee = function () {\n        return \"Manager 1\"\n    }\n\n    this.onStateSet = function () {\n        task.setAssignee(this.getAssignee())\n        console.log(task.assignee + \" notified about completed task \"\" + task.title + \"\"\")\n    }\n}\n\n\/\/ DONE state that removes the assignee of the task since it is now completed\nfunction DONE(task) {\n    this.getAssignee = function () {\n        return \"\"\n    }\n\n    this.onStateSet = function () {\n        task.setAssignee(this.getAssignee())\n        console.log(\"Task \"\" + task.title + \"\" completed\")\n    }\n}\n\nfunction run() {\n    \/\/ Create a task\n    let task1 = new Task(\"Create a login page,\" \"Developer 1\")\n    \/\/ Output: Developer 1 notified about new task \"Create a login page\"\n\n    \/\/ Set it to IN_PROGRESS\n    task1.updateState(STATE_IN_PROGRESS)\n    \/\/ Output: Developer 1 started working on the task \"Create a login page\"\n\n    \/\/ Create another task\n    let task2 = new Task(\"Create an auth server,\" \"Developer 2\")\n    \/\/ Output: Developer 2 notified about new task \"Create an auth server\"\n\n\n    \/\/ Set it to IN_PROGRESS as well\n    task2.updateState(STATE_IN_PROGRESS)\n    \/\/ Output: Developer 2 started working on the task \"Create an auth server\"\n\n    \/\/ Update the states of the tasks until they are done\n    task2.updateState(STATE_READY_FOR_REVIEW)\n    \/\/ Output: Manager 1 notified about completed task \"Create an auth server\"\n    task1.updateState(STATE_READY_FOR_REVIEW)\n    \/\/ Output: Manager 1 notified about completed task \"Create a login page\"\n\n\n    task1.updateState(STATE_DONE)\n    \/\/ Output: Task \"Create a login page\" completed\n    task2.updateState(STATE_DONE)\n    \/\/ Output: Task \"Create an auth server\" completed\n\n}\n\nrun()<\/code><\/pre>\n<p>Bien que le mod\u00e8le State fasse un excellent travail de s\u00e9gr\u00e9gation des \u00e9tapes d&rsquo;un processus, il peut devenir extr\u00eamement difficile \u00e0 maintenir dans les grandes applications qui ont plusieurs \u00e9tats.<\/p>\n<p>De plus, si la conception de votre processus permet plus qu&rsquo;un d\u00e9placement lin\u00e9aire \u00e0 travers tous les \u00e9tats, vous devrez \u00e9crire et maintenir plus de code, puisque chaque transition d&rsquo;\u00e9tat doit \u00eatre trait\u00e9e s\u00e9par\u00e9ment.<\/p>\n<h4>19. Strategy<\/h4>\n<p>\u00c9galement connu sous le nom de mod\u00e8le Policy, le mod\u00e8le Strategy vise \u00e0 vous aider \u00e0 encapsuler et \u00e0 \u00e9changer librement des classes \u00e0 l&rsquo;aide d&rsquo;une interface commune. Cela permet de maintenir un couplage l\u00e2che entre le client et les classes et vous permet d&rsquo;ajouter autant d&rsquo;impl\u00e9mentations que vous le souhaitez.<\/p>\n<p>Le mod\u00e8le Strategy est connu pour son aide consid\u00e9rable dans les situations o\u00f9 la m\u00eame op\u00e9ration est n\u00e9cessaire en utilisant diff\u00e9rentes m\u00e9thodes\/algorithmes, ou lorsque des blocs de commutation massifs doivent \u00eatre remplac\u00e9s par un code plus convivial.<\/p>\n<p>Voici un exemple du mod\u00e8le Strategy :<\/p>\n<pre><code class=\"language-js\">\/\/ The strategy class that can encapsulate all hosting providers\nfunction HostingProvider() {\n   \/\/ store the provider\n   this.provider = \"\"\n\n   \/\/ set the provider\n   this.setProvider = function(provider) {\n       this.provider = provider\n   }\n\n   \/\/ set the website configuration for which each hosting provider would calculate costs\n   this.setConfiguration = function(configuration) {\n       this.configuration = configuration\n   }\n\n   \/\/ the generic estimate method that calls the provider's unique methods to calculate the costs\n   this.estimateMonthlyCost = function() {\n       return this.provider.estimateMonthlyCost(this.configuration)\n   }\n}\n\n\/\/ Foo Hosting charges for each second and KB of hosting usage\nfunction FooHosting (){\n   this.name = \"FooHosting\"\n   this.rate = 0.0000027\n\n   this.estimateMonthlyCost = function(configuration){\n       return configuration.duration * configuration.workloadSize * this.rate\n   }\n}\n\n\/\/ Bar Hosting charges per minute instead of seconds\nfunction BarHosting (){\n   this.name = \"BarHosting\"\n   this.rate = 0.00018\n\n   this.estimateMonthlyCost = function(configuration){\n       return configuration.duration \/ 60 * configuration.workloadSize * this.rate\n   }\n}\n\n\/\/ Baz Hosting assumes the average workload to be of 10 MB in size\nfunction BazHosting (){\n   this.name = \"BazHosting\"\n   this.rate = 0.032\n\n   this.estimateMonthlyCost = function(configuration){\n       return configuration.duration * this.rate\n   }\n}\n\nfunction run() {\n\n   \/\/ Create a website configuration for a website that is up for 24 hours and takes 10 MB of hosting space\n   let workloadConfiguration = {\n       duration: 84700,\n       workloadSize: 10240\n   }\n\n   \/\/ Create the hosting provider instances\n   let fooHosting = new FooHosting()\n   let barHosting = new BarHosting()\n   let bazHosting = new BazHosting()\n\n   \/\/ Create the instance of the strategy class\n   let hostingProvider = new HostingProvider()\n\n   \/\/ Set the configuration against which the rates have to be calculated\n   hostingProvider.setConfiguration(workloadConfiguration)\n\n   \/\/ Set each provider one by one and print the rates\n   hostingProvider.setProvider(fooHosting)\n   console.log(\"FooHosting cost: \" + hostingProvider.estimateMonthlyCost())\n   \/\/ Output: FooHosting cost: 2341.7856\n\n   hostingProvider.setProvider(barHosting)\n   console.log(\"BarHosting cost: \" + hostingProvider.estimateMonthlyCost())\n   \/\/ Output: BarHosting cost: 2601.9840\n\n   hostingProvider.setProvider(bazHosting)\n   console.log(\"BarHosting cost: \" + hostingProvider.estimateMonthlyCost())\n   \/\/ Output: BarHosting cost: 2710.4000\n\n}\n\nrun()<\/code><\/pre>\n<p>Le mod\u00e8le Strategy est excellent lorsqu&rsquo;il s&rsquo;agit d&rsquo;introduire de nouvelles variations d&rsquo;une entit\u00e9 sans trop changer les clients. Cependant, il peut sembler exag\u00e9r\u00e9 si vous n&rsquo;avez qu&rsquo;une poign\u00e9e de variations \u00e0 mettre en \u0153uvre.<\/p>\n<p>De plus, l&rsquo;encapsulation supprime les d\u00e9tails les plus fins concernant la logique interne de chaque variante, de sorte que votre client ne sait pas comment une variante va se comporter.<\/p>\n<h4>20. Visitor<\/h4>\n<p>Le mod\u00e8le Visitor a pour but de vous aider \u00e0 rendre votre code extensible.<\/p>\n<p>L&rsquo;id\u00e9e est de fournir une m\u00e9thode dans la classe qui permet aux objets d&rsquo;autres classes d&rsquo;apporter facilement des modifications aux objets de la classe actuelle. Les autres objets <em>visitent<\/em> l&rsquo;objet courant (\u00e9galement appel\u00e9 objet place), ou la classe courante <em>accepte <\/em>les objets visiteurs, et l&rsquo;objet lieu g\u00e8re la visite de chaque objet externe de mani\u00e8re appropri\u00e9e.<\/p>\n<p>Voici comment vous pouvez l&rsquo;utiliser :<\/p>\n<pre><code class=\"language-js\">\/\/ Visitor class that defines the methods to be called when visiting each place\nfunction Reader(name, cash) {\n    this.name = name\n    this.cash = cash\n\n    \/\/ The visit methods can access the place object and invoke available functions\n    this.visitBookstore = function(bookstore) {\n        console.log(this.name + \" visited the bookstore and bought a book\")\n        bookstore.purchaseBook(this)\n    }\n\n    this.visitLibrary = function() {\n        console.log(this.name + \" visited the library and read a book\")\n    }\n\n    \/\/ Helper function to demonstrate a transaction\n    this.pay = function(amount) {\n        this.cash -= amount\n    }\n}\n\n\/\/ Place class for a library\nfunction Library () {\n    this.accept = function(reader) {\n        reader.visitLibrary()\n    }\n}\n\n\/\/ Place class for a bookstore that allows purchasing book\nfunction Bookstore () {\n    this.accept = function(reader) {\n        reader.visitBookstore(this)\n    }\n\n    this.purchaseBook = function (visitor) {\n        console.log(visitor.name + \" bought a book\")\n        visitor.pay(8)\n    }\n}\n\n\nfunction run() {\n    \/\/ Create a reader (the visitor)\n    let reader = new Reader(\"Rick,\" 30)\n\n    \/\/ Create the places\n    let booksInc = new Bookstore()\n    let publicLibrary = new Library()\n\n    \/\/ The reader visits the library\n    publicLibrary.accept(reader)\n    \/\/ Output: Rick visited the library and read a book\n    console.log(reader.name + \" has $\" + reader.cash)\n    \/\/ Output: Rick has $30\n\n    \/\/ The reader visits the bookstore\n    booksInc.accept(reader)\n    \/\/ Output: Rick visited the bookstore and bought a book\n    console.log(reader.name + \" has $\" + reader.cash)\n    \/\/ Output: Rick has $22\n}\n\nrun()<\/code><\/pre>\n<p>Le seul d\u00e9faut de cette conception est que chaque classe de visiteur doit \u00eatre mise \u00e0 jour chaque fois qu&rsquo;un nouvelle place est ajout\u00e9e ou modifi\u00e9e. Dans les cas o\u00f9 plusieurs visiteurs et objets lieu existent ensemble, cela peut \u00eatre difficile \u00e0 maintenir.<\/p>\n<p>\u00c0 part cela, cette m\u00e9thode fonctionne tr\u00e8s bien pour am\u00e9liorer la fonctionnalit\u00e9 des classes de mani\u00e8re dynamique.<\/p>\n<h2>Meilleures pratiques pour la mise en \u0153uvre des Design Patterns<\/h2>\n<p>Maintenant que vous avez vu les mod\u00e8les de conception les plus courants en JavaScript, voici quelques conseils que vous devez garder \u00e0 l&rsquo;esprit lors de leur mise en \u0153uvre.<\/p>\n<h3>Prenez soin de comprendre si un mod\u00e8le convient \u00e0 la solution<\/h3>\n<p>Ce conseil doit \u00eatre appliqu\u00e9 avant d&rsquo;impl\u00e9menter un mod\u00e8le de conception dans votre code source. Bien qu&rsquo;il puisse sembler qu&rsquo;un mod\u00e8le de conception soit la fin de tous vos soucis, prenez un moment pour analyser de mani\u00e8re critique si cela est vrai.<\/p>\n<p>Il existe de nombreux mod\u00e8les qui r\u00e9solvent le m\u00eame probl\u00e8me mais adoptent des approches diff\u00e9rentes et ont des cons\u00e9quences diff\u00e9rentes. Votre crit\u00e8re de s\u00e9lection d&rsquo;un mod\u00e8le de conception ne doit donc pas se limiter \u00e0 savoir s&rsquo;il r\u00e9sout votre probl\u00e8me ou non &#8211; il doit \u00e9galement porter sur la mani\u00e8re dont il r\u00e9sout votre probl\u00e8me et sur l&rsquo;existence d&rsquo;un autre mod\u00e8le pouvant pr\u00e9senter une solution plus efficace.<\/p>\n<h3>Comprendre les co\u00fbts de mise en \u0153uvre d&rsquo;un mod\u00e8le avant de commencer<\/h3>\n<p>Bien que les mod\u00e8les de conception semblent \u00eatre la meilleure solution \u00e0 tous les <a href=\"https:\/\/kinsta.com\/fr\/blog\/erreurs-dans-javascript\/\">probl\u00e8mes d&rsquo;ing\u00e9nierie<\/a>, vous ne devriez pas vous lancer tout de suite dans leur mise en \u0153uvre dans votre code source.<\/p>\n<p>Tout en jugeant des cons\u00e9quences de la mise en \u0153uvre d&rsquo;une solution, vous devez \u00e9galement prendre en consid\u00e9ration votre propre situation. Disposez-vous d&rsquo;une grande \u00e9quipe de d\u00e9veloppeurs de logiciels qui sont parfaitement capables de comprendre et de maintenir les mod\u00e8les de conception ? Ou \u00eates-vous un fondateur en phase de d\u00e9marrage avec une \u00e9quipe de d\u00e9veloppement minimale qui cherche \u00e0 publier rapidement un MVP de votre produit ? Si vous r\u00e9pondez oui \u00e0 la derni\u00e8re question, les mod\u00e8les de conception ne sont peut-\u00eatre pas le mode de d\u00e9veloppement le plus optimal pour vous.<\/p>\n<p>Les mod\u00e8les de conception n&rsquo;entra\u00eenent pas une forte r\u00e9utilisation du code, \u00e0 moins qu&rsquo;ils ne soient planifi\u00e9s \u00e0 un stade tr\u00e8s pr\u00e9coce de la conception de l&rsquo;application. L&rsquo;utilisation al\u00e9atoire de mod\u00e8les de conception \u00e0 diff\u00e9rents stades peut conduire \u00e0 une architecture d&rsquo;application inutilement complexe que vous devrez passer des semaines \u00e0 simplifier.<\/p>\n<p>L&rsquo;efficacit\u00e9 d&rsquo;un mod\u00e8le de conception ne peut \u00eatre jug\u00e9e par aucune forme de test. C&rsquo;est l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/outils-revue-code\/\">exp\u00e9rience et l&rsquo;introspection de votre \u00e9quipe<\/a> qui vous permettront de savoir s&rsquo;ils fonctionnent. Si vous avez le temps et les ressources \u00e0 consacrer \u00e0 ces aspects, ce n&rsquo;est qu&rsquo;\u00e0 ce moment-l\u00e0 que les mod\u00e8les de conception r\u00e9soudront vraiment vos probl\u00e8mes.<\/p>\n<h3>Ne transformez pas chaque solution en un mod\u00e8le<\/h3>\n<p>Une autre r\u00e8gle \u00e0 garder \u00e0 l&rsquo;esprit est de s&rsquo;abstenir d&rsquo;essayer de transformer chaque petite paire probl\u00e8me-solution en un mod\u00e8le de conception et de l&rsquo;utiliser partout o\u00f9 vous voyez de la place pour lui.<\/p>\n<p>S&rsquo;il est bon d&rsquo;identifier des solutions standard et de les garder \u00e0 l&rsquo;esprit lorsque vous rencontrez des probl\u00e8mes similaires, il y a de fortes chances que le nouveau probl\u00e8me rencontr\u00e9 ne corresponde pas exactement \u00e0 la m\u00eame description qu&rsquo;un ancien probl\u00e8me. Dans ce cas, vous pourriez finir par mettre en \u0153uvre une solution sous-optimale et gaspiller des ressources.<\/p>\n<p>Les mod\u00e8les de conception s&rsquo;imposent aujourd&rsquo;hui comme des exemples de paires probl\u00e8me-solution parce qu&rsquo;ils ont \u00e9t\u00e9 test\u00e9s par des centaines et des milliers de programmeurs au fil du temps et ont \u00e9t\u00e9 g\u00e9n\u00e9ralis\u00e9s autant que possible. Si vous essayez de reproduire cet effort en vous contentant d&rsquo;examiner un tas de probl\u00e8mes et de solutions et de les qualifier de similaires, vous pourriez finir par causer beaucoup plus de d\u00e9g\u00e2ts \u00e0 votre code que vous ne l&rsquo;auriez imagin\u00e9.<\/p>\n<h2>Quand utiliser les Design Patterns ?<\/h2>\n<p>Pour r\u00e9sumer, voici quelques indices auxquels vous devez faire attention pour utiliser les mod\u00e8les de conception. Ils ne s&rsquo;appliquent pas tous au d\u00e9veloppement de chaque application, mais ils devraient vous donner une bonne id\u00e9e de ce \u00e0 quoi vous devez faire attention lorsque vous envisagez d&rsquo;utiliser des mod\u00e8les de conception :<\/p>\n<ul>\n<li>Vous disposez d&rsquo;une solide \u00e9quipe interne de d\u00e9veloppeurs qui comprend bien les mod\u00e8les de conception.<\/li>\n<li>Vous suivez un mod\u00e8le SDLC qui laisse la place \u00e0 des discussions approfondies sur l&rsquo;architecture de votre application, et les mod\u00e8les de conception ont \u00e9t\u00e9 \u00e9voqu\u00e9s lors de ces discussions.<\/li>\n<li>Le m\u00eame ensemble de probl\u00e8mes est apparu plusieurs fois dans vos discussions sur la conception, et vous connaissez le mod\u00e8le de conception qui conviendra dans ce cas.<\/li>\n<li>Vous avez essay\u00e9 de r\u00e9soudre une variante plus petite de votre probl\u00e8me ind\u00e9pendamment du mod\u00e8le de conception.<\/li>\n<li>Avec le mod\u00e8le de conception en place, votre code ne semble pas excessivement complexe.<\/li>\n<\/ul>\n<p>Si un mod\u00e8le de conception r\u00e9sout votre probl\u00e8me <em>et<\/em> vous aide \u00e0 \u00e9crire un code simple, r\u00e9utilisable, modulaire, faiblement coupl\u00e9 et sans \u00ab odeur de code \u00bb, c&rsquo;est peut-\u00eatre la bonne voie \u00e0 suivre.<\/p>\n<p>Un autre bon conseil \u00e0 garder \u00e0 l&rsquo;esprit est d&rsquo;\u00e9viter de tout ramener aux mod\u00e8les de conception. Les mod\u00e8les de conception sont destin\u00e9s \u00e0 vous aider \u00e0 r\u00e9soudre des probl\u00e8mes. Ils ne sont pas des lois \u00e0 respecter ou des r\u00e8gles \u00e0 suivre \u00e0 la lettre. Les r\u00e8gles et lois ultimes sont toujours les m\u00eames : gardez votre code propre, simple, lisible et \u00e9volutif. Si un mod\u00e8le de conception vous aide \u00e0 y parvenir tout en r\u00e9solvant votre probl\u00e8me, vous devriez pouvoir l&rsquo;utiliser.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Les mod\u00e8les de conception JavaScript sont une merveilleuse fa\u00e7on d&rsquo;aborder les probl\u00e8mes auxquels de nombreux programmeurs ont \u00e9t\u00e9 confront\u00e9s au fil du temps. Ils pr\u00e9sentent des solutions \u00e9prouv\u00e9es qui s&rsquo;efforcent de garder votre base de code propre et faiblement coupl\u00e9e.<\/p>\n<p>Aujourd&rsquo;hui, il existe des <a href=\"https:\/\/sourcemaking.com\/design-patterns-and-tips\">centaines de mod\u00e8les de conception<\/a> disponibles qui r\u00e9soudront presque tous les probl\u00e8mes que vous rencontrez lors de la cr\u00e9ation d&rsquo;applications. Cependant, tous les mod\u00e8les de conception ne r\u00e9soudront pas <em>vraiment<\/em> votre probl\u00e8me \u00e0 chaque fois.<\/p>\n\n<p>Comme toute <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-react\/\">autre convention de programmation<\/a>, les mod\u00e8les de conception sont destin\u00e9s \u00e0 \u00eatre pris comme des suggestions pour r\u00e9soudre les probl\u00e8mes. Ce ne sont pas des lois \u00e0 suivre en permanence, et si vous les traitez comme des lois, vous pourriez finir par causer beaucoup de d\u00e9g\u00e2ts \u00e0 vos applications.<\/p>\n<p>Une fois votre application termin\u00e9e, vous aurez besoin d&rsquo;un endroit pour l&rsquo;h\u00e9berger &#8211; et les <a href=\"https:\/\/sevalla.com\/application-hosting\/\">solutions d&rsquo;h\u00e9bergement d&rsquo;applications de Kinsta<\/a> sont en t\u00eate des plus rapides, des plus fiables et des plus s\u00fbres. Il vous suffit de vous connecter \u00e0 votre <a href=\"https:\/\/kinsta.com\/fr\/mykinsta\/\">compte MyKinsta<\/a> (le tableau de bord personnalis\u00e9 de Kinsta), de vous connecter \u00e0 votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/base-de-connaissances-github\/\">d\u00e9p\u00f4t GitHub<\/a>, et de lancer ! De plus, vous n&rsquo;\u00eates factur\u00e9 que pour les ressources que votre application utilise.<\/p>\n<p>Quels sont les mod\u00e8les de conception que vous utilisez r\u00e9guli\u00e8rement dans votre travail de programmation de logiciels ? Ou y a-t-il un mod\u00e8le que nous avons oubli\u00e9 dans cette liste ? Faites-nous en part dans les commentaires ci-dessous !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lorsque vous cr\u00e9ez des applications JavaScript, vous pouvez rencontrer des sc\u00e9narios dans lesquels vous devez construire des objets d&rsquo;une certaine mani\u00e8re, pr\u00e9d\u00e9finie, ou r\u00e9utiliser une classe &#8230;<\/p>\n","protected":false},"author":238,"featured_media":66310,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[980],"class_list":["post-66309","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-tutoriel-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Un guide exhaustif des mod\u00e8les de conception JavaScript<\/title>\n<meta name=\"description\" content=\"Il existe de nombreux mod\u00e8les de conception JavaScript qui peuvent vous permettre une \u00e9conomie de temps et d&#039;efforts. Apprenez \u00e0 connaitre ces solutions r\u00e9utilisables dans cet article.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Un guide exhaustif des mod\u00e8les de conception JavaScript\" \/>\n<meta property=\"og:description\" content=\"Il existe de nombreux mod\u00e8les de conception JavaScript qui peuvent vous permettre une \u00e9conomie de temps et d&#039;efforts. Apprenez \u00e0 connaitre ces solutions r\u00e9utilisables dans cet article.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-14T08:26:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-19T11:08:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/javascript-design-patterns.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kumar Harsh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Il existe de nombreux mod\u00e8les de conception JavaScript qui peuvent vous permettre une \u00e9conomie de temps et d&#039;efforts. Apprenez \u00e0 connaitre ces solutions r\u00e9utilisables dans cet article.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/javascript-design-patterns.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kumar Harsh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"55 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/\"},\"author\":{\"name\":\"Kumar Harsh\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\"},\"headline\":\"Un guide exhaustif des mod\u00e8les de conception JavaScript\",\"datePublished\":\"2023-02-14T08:26:37+00:00\",\"dateModified\":\"2024-09-19T11:08:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/\"},\"wordCount\":7524,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/javascript-design-patterns.png\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/\",\"name\":\"Un guide exhaustif des mod\u00e8les de conception JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/javascript-design-patterns.png\",\"datePublished\":\"2023-02-14T08:26:37+00:00\",\"dateModified\":\"2024-09-19T11:08:43+00:00\",\"description\":\"Il existe de nombreux mod\u00e8les de conception JavaScript qui peuvent vous permettre une \u00e9conomie de temps et d'efforts. Apprenez \u00e0 connaitre ces solutions r\u00e9utilisables dans cet article.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/javascript-design-patterns.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/javascript-design-patterns.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutoriels JavaScript\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/tutoriel-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Un guide exhaustif des mod\u00e8les de conception JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9\",\"name\":\"Kumar Harsh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g\",\"caption\":\"Kumar Harsh\"},\"description\":\"Kumar is a software developer and a technical author based in India. He specializes in JavaScript and DevOps. You can learn more about his work on his website.\",\"sameAs\":[\"https:\/\/kumarharsh.me\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/kumarharsh\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Un guide exhaustif des mod\u00e8les de conception JavaScript","description":"Il existe de nombreux mod\u00e8les de conception JavaScript qui peuvent vous permettre une \u00e9conomie de temps et d'efforts. Apprenez \u00e0 connaitre ces solutions r\u00e9utilisables dans cet article.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/","og_locale":"fr_FR","og_type":"article","og_title":"Un guide exhaustif des mod\u00e8les de conception JavaScript","og_description":"Il existe de nombreux mod\u00e8les de conception JavaScript qui peuvent vous permettre une \u00e9conomie de temps et d'efforts. Apprenez \u00e0 connaitre ces solutions r\u00e9utilisables dans cet article.","og_url":"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-02-14T08:26:37+00:00","article_modified_time":"2024-09-19T11:08:43+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/javascript-design-patterns.png","type":"image\/png"}],"author":"Kumar Harsh","twitter_card":"summary_large_image","twitter_description":"Il existe de nombreux mod\u00e8les de conception JavaScript qui peuvent vous permettre une \u00e9conomie de temps et d'efforts. Apprenez \u00e0 connaitre ces solutions r\u00e9utilisables dans cet article.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/javascript-design-patterns.png","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Kumar Harsh","Dur\u00e9e de lecture estim\u00e9e":"55 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/"},"author":{"name":"Kumar Harsh","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9"},"headline":"Un guide exhaustif des mod\u00e8les de conception JavaScript","datePublished":"2023-02-14T08:26:37+00:00","dateModified":"2024-09-19T11:08:43+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/"},"wordCount":7524,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/javascript-design-patterns.png","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/","url":"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/","name":"Un guide exhaustif des mod\u00e8les de conception JavaScript","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/javascript-design-patterns.png","datePublished":"2023-02-14T08:26:37+00:00","dateModified":"2024-09-19T11:08:43+00:00","description":"Il existe de nombreux mod\u00e8les de conception JavaScript qui peuvent vous permettre une \u00e9conomie de temps et d'efforts. Apprenez \u00e0 connaitre ces solutions r\u00e9utilisables dans cet article.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/javascript-design-patterns.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/02\/javascript-design-patterns.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/guide-modeles-conceptions-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Tutoriels JavaScript","item":"https:\/\/kinsta.com\/fr\/sujets\/tutoriel-javascript\/"},{"@type":"ListItem","position":3,"name":"Un guide exhaustif des mod\u00e8les de conception JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/3a80efffa9cbb0333cc9c22b754415d9","name":"Kumar Harsh","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/de2d8d6273bdcc3dfa2f8270428f95b2?s=96&d=mm&r=g","caption":"Kumar Harsh"},"description":"Kumar is a software developer and a technical author based in India. He specializes in JavaScript and DevOps. You can learn more about his work on his website.","sameAs":["https:\/\/kumarharsh.me"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/kumarharsh\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/66309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/238"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=66309"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/66309\/revisions"}],"predecessor-version":[{"id":66461,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/66309\/revisions\/66461"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66309\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66309\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66309\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66309\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66309\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66309\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66309\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66309\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66309\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66309\/translations\/dk"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/66309\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/66310"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=66309"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=66309"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=66309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}