Une étude préliminaire sur les compétences JavaScript design patterns_javascript

Objectif : Il existe de nombreux modèles de conception. Essayez d'enregistrer les avantages et les inconvénients des différents modèles de conception appris afin de pouvoir vous y référer plus tard.

Avant-propos : Quand j'ai lu Elevation il y a six mois, j'ai vu le chapitre sur les modèles de conception. J'étais confus, non pas parce que je ne pouvais pas le comprendre, mais parce que je ne comprenais pas pourquoi. C'était tellement difficile de simplement créer un objet. Ce n'est que lorsque j'ai récemment terminé mon premier petit projet que j'ai réalisé à quel point cela serait désastreux sans spécifications et restrictions appropriées lorsque la quantité de code augmentait. Je me suis donc tourné à nouveau vers l'élévation et j'ai résumé les avantages et les inconvénients de plusieurs modèles de conception simples que j'ai appris.

Texte : Cet article présente un total de 7 modèles de conception, leurs scénarios d'application, leurs avantages et leurs inconvénients.

1. Mode usine

Utilisez des fonctions directement pour encapsuler des objets et utiliser des objets comme valeurs de retour.

function person (name,age) {
  var obj=new Object();
  obj.name=name;
  obj.age=age;
  obj.sayName=function () {
    alert(this.name);
  };
  return obj;
}
var me=person("Su",25); 

Inconvénients : Problèmes de reconnaissance des objets. Tous les objets créés sont des instances d'Object et sont difficiles à distinguer.

2. Modèle de constructeur

function Person (name,age) {
  this.name=name;
  this.age=age;
  this.sayName=function () {
    alert(this.name);
  };
}
var me=new Person("Su",25); 

Avantages : L'utilisation du modèle de constructeur peut marquer les instances comme un type spécifique.

Inconvénients : Les méthodes des objets créés sont toutes privées. Si vous souhaitez simplement générer des méthodes publiques, cela entraînera un gaspillage inutile de performances.

3. Mode prototype

Utiliser l'héritage de chaîne de prototypes

function Person () {}
Person.prototype.name="Su";
Person.prototype.sayName=function () {
alert(this.name);}
var me =new Person(); 

Inconvénients : Toutes les propriétés et méthodes sont partagées par les instances. Lorsque les propriétés et les méthodes contiennent des valeurs de type référence, la modification des propriétés et des méthodes d'une instance affectera toutes les autres instances.

4. Modèle de constructeur de prototype

Les propriétés et méthodes privées sont générées à l'aide de constructeurs, et les propriétés et méthodes publiques sont héritées à l'aide de prototypes. Combiner les avantages des deux méthodes.

function Person (name,age) {
  this.name=name;
  this.age=age;
}
Person.prototype={
  constructor:Person,
  sayName:function () {
      alert(this.name);
  }
}
var me=new Person("Su",25); 

Inconvénients : faites attention à l'héritage prototypique des valeurs de type référence.

ps : Le code dans l'image ci-dessus réécrit l'objet prototype du constructeur Person et pointe le pointeur de l'objet prototype vers un objet, de sorte que la propriété du constructeur pointe vers Object au lieu de Person, elle doit donc être explicitement définie sur Person.

5. Mode prototype dynamique

Essentiellement, il s'agit toujours d'une fonction constructeur. Elle ajoute uniquement la méthode spécifiée à l'objet prototype lorsqu'il n'existe pas.

function Person (name,age) {
  this.name=name;
  this.age=age;
  if (typeof this.sayName!="function") {
    Person.prototype.sayName=function () {
      alert(this.name);
    }
  }
}
var me =new Person("Su",25); 

Inconvénient : les objets prototypes ne peuvent pas être remplacés à l'aide de littéraux d'objet. Parce que cela fera pointer le pointeur d’instance vers le nouvel objet prototype. En d'autres termes, la méthode sayName ajoutée à l'objet prototype dans la figure ci-dessus ne sera pas valide.

6. Modèle de constructeur parasite

Utilisez le nouvel opérateur lors de l'appel. A part ça, je ne vois aucune différence par rapport au mode usine. Vous recherchez des conseils d'experts.

function person (name,age) {
  var obj=new Object();
  obj.name=name;
  obj.age=age;
  obj.sayName=function () {
    alert(this.name);
  };
  return obj;
}
var me=new person("Su",25); //这里使用new操作符 

7. Modèle de constructeur sûr

Aucun attribut public, désactivez-le et exposez uniquement les API nécessaires pour les appels de données. Convient aux zones avec des exigences de sécurité.

function Person (name) {
 var o=new Object();
 o.sayName=function () {
 alert(name);  
 }  
 return o;
}
var me=Person("Su"); 

Comme le montre le code ci-dessus, l'attribut de nom interne n'est accessible que via la méthode sayName.

Cet article vous présente sept modèles de conception et présente respectivement leurs avantages et leurs inconvénients. J'espère qu'il vous sera utile d'acquérir des connaissances connexes sur les modèles de conception js.