Apprenez les modèles de conception JavaScript (encapsulation)_compétences Javascript

En JavaScript, il n'y a pas de support pour les classes abstraites et les interfaces. JavaScript lui-même est également un langage faiblement typé. JavaScript n'a pas la capacité ou n'a pas besoin de faire beaucoup plus lorsqu'il s'agit d'encapsuler des types. Pour l'implémentation de modèles de conception en JavaScript, ne pas distinguer les types est une honte, et cela peut aussi être considéré comme un soulagement.

Du point de vue des modèles de conception, l'emballage se reflète dans les changements d'emballage à un niveau plus important.

En encapsulant les modifications, nous isolons les parties stables du système des pièces faciles à changer. Au cours de l'évolution du système, nous n'avons besoin de remplacer que les pièces faciles à changer si ces pièces ont été encapsulées. Oui, il est relativement facile à remplacer. Cela peut garantir au maximum la stabilité et l’évolutivité du programme.

Il existe trois modes de base d'encapsulation JavaScript :

1. Utilisez le principe de priorité d'accord, et toutes les variables privées commencent par _

 <script type="text/javascript">
  /**
   * 使用约定优先的原则，把所有的私有变量都使用_开头
   */
  var Person = function (no, name, age)
  {
   this.setNo(no);
   this.setName(name);
   this.setAge(age);
  }
  Person.prototype = {
   constructor: Person,
   checkNo: function (no)
   {
    if (!no.constructor == "string" || no.length != 4)
     throw new Error("学号必须为4位");
   },
   setNo: function (no)
   {
    this.checkNo(no);
    this._no = no;
   }, 
   getNo: function ()
   {
    return this._no;
   setName: function (name)
   {
    this._name = name;
   }, 
   getName: function ()
   {
    return this._name;
   }, 
   setAge: function (age)
   {
    this._age = age;
   }, 
   getAge: function ()
   {
    return this._age;
   }, 
   toString: function ()
   {
    return "no = " + this._no + " , name = " + this._name + " , age = " + this._age;
   }
  };
  var p1 = new Person("0001", "小平果", "22");
  console.log(p1.toString());  //no = 0001 , name = 小平果 , age = 22
  p1.setNo("0003");
  console.log(p1.toString());  //no = 0003 , name = 小平果 , age = 22
  p1.no = "0004";
  p1._no = "0004";
  console.log(p1.toString()); //no = 0004 , name =小平果 , age = 22

 </script>

Après avoir lu le code, avez-vous l'impression d'avoir été trompé ? Si vous mettez simplement toutes les variables commençant par _, elles sont toujours accessibles directement. Cela peut-il être appelé encapsulation ? a la priorité.

Cette utilisation du trait de soulignement est une convention de dénomination bien connue, qui indique qu'une propriété est uniquement destinée à un usage interne de l'objet, et y accéder ou la définir directement peut entraîner des conséquences inattendues. Cela permet d’éviter que les programmeurs ne l’utilisent accidentellement, mais cela n’empêche pas son utilisation intentionnelle.

Cette méthode est toujours bonne. Au moins les méthodes getter et setter des variables membres sont dans le prototype, pas dans l'objet. Dans l'ensemble, c'est un bon choix. Si vous pensez que cela n’est pas possible et que l’encapsulation doit être strictement mise en œuvre, alors envisagez la deuxième méthode.

2. Implémenter strictement l'encapsulation

<script type="text/javascript">
  /**
   * 使用这种方式虽然可以严格实现封装，但是带来的问题是get和set方法都不能存储在prototype中，都是存储在对象中的
   * 这样无形中就增加了开销
   */
  var Person = function (no, name, age)
  {
   var _no , _name, _age ;
   var checkNo = function (no)
   {
    if (!no.constructor == "string" || no.length != 4)
     throw new Error("学号必须为4位");
   };
   this.setNo = function (no)
   {
    checkNo(no);
    _no = no;
   };
   this.getNo = function ()
   {
    return _no;
   }
   this.setName = function (name)
   {
    _name = name;
   }

   this.getName = function ()
   {
    return _name;
   }

   this.setAge = function (age)
   {
    _age = age;
   }
   this.
     getAge = function ()
   {
    return _age;
   }

   this.setNo(no);
   this.setName(name);
   this.setAge(age);
  }
  Person.prototype = {
   constructor: Person,
   toString: function ()
   {
    return "no = " + this.getNo() + " , name = " + this.getName() + " , age = " + this.getAge();
   }
  }
  ;
  var p1 = new Person("0001", "小平果", "22");
  console.log(p1.toString());  //no = 0001 , name =小平果 , age = 22
  p1.setNo("0003");
  console.log(p1.toString());  //no = 0003 , name = 小平果 , age = 22
  p1.no = "0004";
  console.log(p1.toString()); //no = 0003 , name = 小平果 , age = 22

 </script>

Alors, en quoi est-ce différent des autres modes de création d'objets dont nous avons parlé précédemment ? Dans l'exemple ci-dessus, nous utilisons toujours le mot-clé this lors de la création et du référencement des propriétés d'un objet. Dans cet exemple, nous déclarons ces variables avec var. Cela signifie qu'ils n'existent que dans le constructeur Person. La fonction checkno est déclarée de la même manière et devient donc une méthode privée.

Les méthodes qui doivent accéder à ces variables et fonctions doivent uniquement être déclarées dans Person. Ces méthodes sont appelées méthodes privilégiées car elles sont publiques mais ont accès à des propriétés et méthodes privées. Afin d'accéder à ces fonctions privilégiées depuis l'extérieur de l'objet, elles sont précédées du mot-clé this. Étant donné que ces méthodes sont définies dans la portée du constructeur Person, elles ont accès aux propriétés privées. Ces propriétés sont référencées sans utiliser le mot clé this car elles ne sont pas publiques. Toutes les méthodes getter et assigner ont été modifiées pour référencer ces propriétés directement sans cela.

Toute méthode qui ne nécessite pas d'accès direct aux propriétés privées peut être déclarée dans Person.prototype comme à l'origine. Comme la méthode toString(). Seules les méthodes qui nécessitent un accès direct aux membres privés doivent être conçues comme des méthodes privilégiées. Mais trop de méthodes privilégiées occupent trop de mémoire, car chaque instance d'objet contient une nouvelle copie de toutes les méthodes privilégiées.

Regardez le code ci-dessus, le nom de l'attribut this. a été supprimé et l'encapsulation a été strictement implémentée. Les variables membres ne sont accessibles que via les getters et les setters. Cependant, il y a un problème dans l'objet. ce qui augmente la surcharge de mémoire.

3. Encapsulé dans une fermeture

<script type="text/javascript">

  var Person = (function ()
  {
   //静态方法（共享方法）
   var checkNo = function (no)
   {
    if (!no.constructor == "string" || no.length != 4)
     throw new Error("学号必须为4位");
   };
   //静态变量（共享变量）
   var times = 0;

    //return the constructor.
   return function (no, name, age)
   {
    console.log(times++); // 0 ,1 , 2
    var no , name , age; //私有变量
    this.setNo = function (no) //私有方法
    {
     checkNo(no);
     this._no = no;
    };
    this.getNo = function ()
    {
     return this._no;
    }
    this.setName = function (name)
    {
     this._name = name;
    }

    this.getName = function ()
    {
     return this._name;
    }

    this.setAge = function (age)
    {
     this._age = age;
    }
    this.getAge = function ()
    {
     return this._age;
    }

    this.setNo(no);
    this.setName(name);
    this.setAge(age);
   }
  })();

  Person.prototype = {
   constructor: Person,
   toString: function ()
   {
    return "no = " + this._no + " , name = " + this._name + " , age = " + this._age;
   }
  };

  var p1 = new Person("0001", "小平果", "22");
  var p2 = new Person("0002", "abc", "23");
  var p3 = new Person("0003", "aobama", "24");


  console.log(p1.toString());  //no = 0001 , name = 小平果 , age = 22
  console.log(p2.toString());  //no = 0002 , name = abc , age = 23
  console.log(p3.toString()); //no = 0003 , name = aobama , age = 24

 </script>

Le code ci-dessus, une fois le moteur js chargé, exécutera directement la fonction Person = exécution immédiate, puis cette fonction renvoie une sous-fonction, qui est le constructeur appelé par new Person, et parce que la sous-fonction maintient Une référence à checkNo(no) et aux heures dans la fonction d'exécution immédiate (fermeture évidente), donc checkNo et les heures sont communes à tous les objets Person. Après avoir créé trois objets, les heures sont respectivement 0, 1 et 2. L'avantage de cette approche est que les méthodes et propriétés qui doivent être réutilisées dans Person peuvent être rendues privées et partagées entre les objets.

Les membres privés et les membres privilégiés ici sont toujours déclarés dans le constructeur. Mais le constructeur est passé d'une fonction ordinaire à une fonction en ligne et est donné à la variable Person comme valeur de retour de la fonction la contenant. Cela crée une fermeture dans laquelle vous pouvez déclarer des membres privés statiques. La paire de crochets vides située après la déclaration de la fonction externe est très importante. Sa fonction est d'exécuter la fonction dès que le code est chargé. La valeur de retour de cette fonction est une autre fonction, qui est affectée à la variable Person, donc Person devient un constructeur. Cette fonction interne est appelée lors de l’instanciation de Person. La fonction externe est simplement utilisée pour créer une fermeture qui peut être utilisée pour stocker des membres statiques.

Dans cet exemple, checkno est conçu pour être une méthode statique car cela n'a aucun sens de générer une nouvelle copie de cette méthode pour chaque instance de Person. Il existe également un attribut statique times, dont la fonction est de suivre le nombre total d'appels au constructeur Person .

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Vous pourrez en savoir plus sur la signification de l'encapsulation.