Qu'est-ce qu'un motif
Je me préparais pour l'examen final il y a quelque temps, mais c'était une personne minutieuse et j'étais vraiment occupé. Je n'ai pas eu le temps de mettre à jour l'article. Aujourd'hui, je vais vous parler des modèles de conception en JavaScript.
Tout d'abord, ce que nous devons savoir, c'est que le modèle est une solution réutilisable, tandis que l'anti-poteau est une mauvaise solution à un certain problème.
Exemples courants d'anti-motifs de JS
1. Passe les chaînes à setTimeout et SetInterval, pas des fonctions, qui déclenche l'utilisation interne d'Eval ().
2. Définir un grand nombre de variables dans le contexte global pour polluer l'espace de noms global
3. Modifiez le prototype de la classe d'objets
4. Utiliser JS en ligne et le code JS intégré dans les fichiers HTML ne peut pas être inclus dans les outils de test unitaires externes.
5. Document Abuse.Write. Si vous exécutez document.write après la charge de la page, il réécrira la page dans laquelle nous nous trouvons. Si vous pouvez utiliser Document.CreateElement à la place, essayez de ne pas utiliser Document.Write.
Catégorie de modèles de conception
Créer un motif de conception
Les modèles de conception créatifs se concentrent sur la gestion des mécanismes de création d'objets pour créer des objets d'une manière qui convient à une situation donnée. Les attributs qui entrent dans cette catégorie comprennent:
Constructeur de constructeur, usine d'usine, abstraction abstraite, prototype prototype, singleton singleton et générateur de constructeurs
Modèle de conception structurelle
Les modèles structurels sont liés aux combinaisons d'objets et peuvent souvent être utilisés pour trouver des moyens simples d'établir des relations entre différents objets.
Les modèles qui entrent dans cette catégorie comprennent:
Décorateur décorateur, apparence de façade, encyclopédie des poids mouches, adaptateur adaptateur et proxy proxy
Modèle de conception de comportement
Les modèles de comportement se concentrent sur l'amélioration ou la simplification de la communication entre différents objets du système.
Les modèles de comportement comprennent:
Itérateur itérateur, médiateur médiateur, observateur observateur et visiteur visiteur
Mode d'usine
Pour résoudre le problème de plusieurs déclarations d'objets similaires, nous pouvons utiliser une méthode appelée Modèle d'usine, qui consiste à résoudre le problème de l'instanciation d'objets avec un grand nombre de duplications.
La copie de code est la suivante:
<script type = "text / javascript">
fonction createObject (nom, âge, profession) {// fonction centrale instanciée {//
var obj = nouveau objet ();
obj.name = name;
obj.age = âge;
Obj.Profession = profession;
obj.move = function () {
Renvoie ce.name + 'at' + this.age + 'engagé dans' + this.profession;
};
retour obj;
}
var test1 = createObject ('Trigkit4', 22, 'Programmer'); // Première instance
var test2 = createObject ('Mike', 25, 'ingénieur'); // la deuxième instance
alert (test1.move ());
alert (test2.move ());
</cript>
Catégorie du modèle d'usine
Le modèle d'usine est divisé en usines simples, usines abstraites et usines intelligentes. Le modèle d'usine nécessite l'utilisation d'un constructeur sans l'afficher.
Modèle d'usine simple: utilisez une classe (généralement un monomère) pour générer une instance.
Modèle d'usine complexe: utilisez des sous-classes pour déterminer quelle instance de classe spécifique d'une variable membre doit être.
Les avantages du modèle d'usine
Le principal avantage est qu'il peut éliminer le couplage entre les objets en utilisant des méthodes d'ingénierie au lieu de nouveaux mots clés. Concentrez tous les code instanciés en un seul endroit pour éviter la duplication du code.
Inconvénients du modèle d'usine
La plupart des classes sont mieux utilisées avec de nouveaux mots clés et constructeurs, ce qui peut rendre le code plus facile à lire. Au lieu de vérifier la méthode d'usine à savoir.
Le modèle d'usine résout le problème de l'instanciation répétée, mais il y a un autre problème, c'est-à-dire l'identification du problème, car il est impossible de déterminer quelle instance de l'objet qu'ils sont.
La copie de code est la suivante:
alerte (typeof test1); //Objet
alert (test1 instanceOf objet); //vrai
Quand utiliser le mode d'usine?
Le mode d'usine est principalement utilisé dans les scénarios suivants:
1. Lorsqu'un objet ou un composant implique une grande complexité
2. Lorsqu'il est nécessaire de générer facilement différentes instances d'objets en fonction des différents environnements dans lesquels ils se trouvent
3.Lorsque traitant de nombreux petits objets ou composants qui partagent les mêmes attributs
Mode constructeur
Dans ECMAScript, les constructeurs (constructeurs) peuvent être utilisés pour créer des objets spécifiques. Ce mode peut simplement résoudre le problème que le mode d'usine ci-dessus ne peut pas reconnaître les instances d'objet.
La copie de code est la suivante:
<script type = "text / javascript">
voiture de fonction (modèle, année, miles) {// mode constructeur
this.model = modèle;
this.year = an;
this.miles = miles;
this.run = function () {
Renvoie ce.model + "a fait" + this.miles + "miles";
}
}
var benz = new Car ('Benz', 2014,20000);
var bmw = new Car ("BMW", 2013,12000);
alerte (Benz instanceof Car); // Je l'identifie clairement comme subordonné à la voiture, vrai
console.log (benz.run ());
console.log (bmw.run ());
</cript>
L'utilisation de la méthode du constructeur résout le problème de l'instanciation répétée et le problème de la reconnaissance des objets. La différence entre ce modèle et le modèle d'usine est:
1. Créer un objet (nouvel objet ()) qui n'est pas affiché par la méthode du constructeur;
2. Attribuez directement les attributs et méthodes à cet objet;
3. Aucune déclaration de retour.
Il existe certaines spécifications pour les méthodes de constructeur:
1. Le nom de la fonction et le constructeur instancié sont les mêmes et capitalisés (PS: non obligatoire, mais l'écriture aide à distinguer les constructeurs et les fonctions ordinaires);
2. Pour créer un objet via un constructeur, le nouvel opérateur doit être utilisé.
Puisque un objet peut être créé via un constructeur, d'où vient cet objet et d'où le nouvel objet () a-t-il été exécuté? Le processus d'exécution est le suivant:
1. Lorsque le constructeur est utilisé et que le nouveau constructeur () est utilisé, le nouvel objet () est exécuté en arrière-plan;
2. Étendez le constructeur à un nouvel objet (c'est-à-dire que l'objet créé par un nouvel objet ()), et celui-ci dans le corps de fonction représente l'objet produit par un nouvel objet ().
3. Exécutez le code dans le constructeur;
4. Renvoie le nouvel objet (revenez directement en arrière-plan).
Constructeur avec prototype (constructeur)
Il y a une propriété appelée prototype dans JS. Après avoir appelé le constructeur JS pour créer un objet, le nouvel objet aura toutes les propriétés du prototype du constructeur. De cette façon, plusieurs objets de voiture peuvent être créés et le même prototype est accessible.
La copie de code est la suivante:
<script type = "text / javascript">
voiture de fonction (modèle, année, miles) {
this.model = modèle;
this.year = an;
this.miles = miles;
}
Car.prototype.run = fonction () {
Renvoie ce.model + "a fait" + this.miles + "miles";
};
var benz = new Car ('S350', 2010,20000);
var Ford = new Car ('Ford', 2012,12000);
console.log (benz.run ()); // "S350 a fait 20000 miles"
console.log (Ford.Run ());
</cript>
Maintenant, une seule instance de run () peut être partagée entre tous les objets de voiture.