Cas du plug-in d'encapsulation JS

Cette fois, je vais vous apporter un cas de plug-in d'encapsulation JS. Quelles sont les précautions pour le plug-in d'encapsulation JS ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Pour des raisons de projet, je n'ai pas écrit de plug-in en js depuis plus d'un an. Le projet est trop mature et j'utilise généralement des plug-ins fonctionnels packagés. Je me sens si déprimé... Au cours des deux derniers jours, je voulais prendre le temps d'écrire un plug-in canvas pour dessiner des graphiques statistiques et des graphiques de remises, alors je suis allé en ligne pour apprendre à le conditionner ... Bien que j'aie lu beaucoup de code source auparavant, mais j'ai l'impression que même si je le comprends, c'est toujours une idée folle...

Qu'est-ce que l'encapsulation ?

Ma compréhension est Transformer une fonction en un composant séparé, c'est comme faire des boulettes. Dans le passé, pour faire des boulettes, il fallait d'abord utiliser de la farine pour fabriquer des emballages de boulettes, puis faire des garnitures de boulettes, puis faire des boulettes à la main. Mais maintenant, les gens ont inventé les boulettes automatiques. faire des machines. Bien que l'intérieur de la machine Chaque étape soit la même que faire des boulettes vous-même, mais en fait il n'y a qu'une seule chose que vous devez faire maintenant, c'est de mettre les ingrédients. La machine ici est le plug-in emballé, et les matières premières sont les paramètres que vous souhaitez transmettre

Pourquoi devrions-nous encapsuler les fonctions js dans des plug-ins ? Je pense qu'il y a les points suivants

 1. Faciliter la réutilisation du code

 2. Évitez les interférences entre les composants ayant la même fonction. Il peut y avoir des problèmes avec la portée

.  3. Facile à entretenir et propice à l'accumulation de projets

 4. Ne pensez-vous pas que copier et coller tout le temps est très faible...

Il semble y avoir deux types d'encapsulation que j'ai vus sur Internet, l'une est l'encapsulation native de js et l'autre est l'encapsulation de jquery. Permettez-moi d'abord de parler de l'encapsulation native.

Lors de l'encapsulation, nous placerons le code js dans une fonction auto-exécutable pour éviter les conflits de variables.

(function(){
  ......
  ......
}()}

Créez ensuite un constructeur

(function(){
  var demo = function(options){
    ......
  }
}())

Exposer cette fonction à l'extérieur pour qu'elle puisse être appelée globalement

(function(){
  var demo = function(options){
    ......
  }
  window.demo = demo;
}())

En fait, vous pouvez désormais l'appeler directement, il est encapsulé, bien qu'il n'implémente aucune fonction

var ss = new demo({
  x:1,
  y:2
})；

Ou

new demo({
  x:2,
  y:3
})；

Alors comment passer des paramètres ? L'un de nos plug-ins a généralement des paramètres obligatoires ou des paramètres facultatifs. À mon avis, les paramètres facultatifs ne sont que des valeurs par défaut données dans le plug-in. Les paramètres que nous transmettons remplaceront les paramètres par défaut dans le plug-in. Vous pouvez utiliser $.extend({}) pour remplacer

(function(){
  var demo = function(options){
    this.options = $.extend({
      "x" : 1,
      "y" : 2,
      "z" : 3
    },options)
  }
  window.demo = demo;
}())

. Ensuite, vous pouvez effectuer certaines opérations lors de l'initialisation du constructeur

(function(){
  var demo = function(options){
    this.options = $.extend({
      "x" : "1",
      "y" : "2",
      "z" : "3"
    },options);
    this.init();
  };
  demo.prototype.init = function(){
    alert("x是"+this.options.x+" y是"+this.options.y+" z是"+this.options.z);
  };
  window.demo = demo;
}());
new demo({
  "x" :"5",
  "y" :"4"
});
</script>

J'ai une question ici, est-ce que extend n'existe qu'en jquery ? Existe-t-il une alternative à jsObject ? Je vérifierai plus tard.............

Une autre chose qui doit être mentionnée est que lors de l'encapsulation de js, nous devons tout considérer, comme son évolutivité et sa compatibilité, ainsi que ses performances. Si ce n'est pas nécessaire, il n'est pas nécessaire d'encapsuler... Soyez sélectif.

Il existe d'innombrables plug-ins qui ont été réalisés sur Internet, et leurs fonctions sont très puissantes. Cependant, parfois nous n'utilisons qu'une petite partie d'un gros plug-in, nous devons donc le modifier nous-mêmes. . Cela nous convient, et les styles de certains projets sont différents des styles de plug-ins actuels, la clé est donc de s'adapter à vos propres projets.

Je pense que vous maîtrisez la méthode de lecture de cet article. Pour plus de passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment Vuejs opère la régionalisation des pages

Explication détaillée de l'utilisation de webpack2+React

JQUERY récupère la valeur de l'attribut via le nom de la balise actuelle

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!