Diverses méthodes d'écriture d'encapsulation javaScript

Cet article présente principalement les différentes méthodes d'écriture de l'encapsulation javaScript. Il présente en détail plusieurs formats d'encapsulation JavaScript en énumérant les avantages, les inconvénients et les scénarios d'utilisation. Les amis intéressés par JavaScript peuvent se référer à cet article. . Article

Dans le monde du JavaScript, l’écriture est un phénomène magique c’est vraiment ouvert à toutes les écoles de pensée ! Chaque fois que je vois des composants js écrits par des étrangers, les idées et les méthodes d'écriture sont bizarres, mais je n'ai jamais vu de code avec fondamentalement la même structure js. Aujourd'hui, je vais parler de la façon d'écrire du js. J'ai également écrit plusieurs méthodes pendant le processus de développement. En termes de performances, si la structure du code ou la logique n'est pas bien écrite, le processeur de l'ordinateur augmentera les calculs et réduira les performances d'exécution. La façon dont js est écrit est également cruciale pour les performances.

Habituellement, ceux qui écrivent des composants js utiliseront la méthode d'écriture de fonction anonyme pour encapsuler un objet et former une portée de fermeture avec le monde extérieur. (Je ne dirai pas grand-chose sur l'héritage et le polymorphisme de js ici. Les programmeurs seniors devraient avoir ces connaissances. Si vous avez également fait du développement Java, ce concept est trop familier.)

Principalement pour la recherche en encapsulation, car le front et le backend impliquent des concepts orientés objet, qui sont des concepts très importants pour l'encapsulation, la façon d'encapsuler, les performances de l'encapsulation, etc. L'encapsulation (le premier concept dans le monde de la programmation, je pense personnellement) est partout dans le monde. JQuery, EXT et Prototype.js encapsulent javascript, jQuery uI et jQuery mobile encapsulent jQuery, et JDBC en Java est dans spirng, Hibernate et d'autres frameworks. sont encapsulés. Voici quelques exemples, mais il y en a bien d’autres que je ne présenterai pas un par un.

De retour au sujet de l'écriture d'encapsulation javaScript, jetons d'abord un coup d'œil à une simple fonction

function hello(){
 var a = 'hello';
 alert(a);
}

js qui est l'encapsulation la plus originale et la plus basique. C'est clair en un coup d'œil si vous. comprenez js. Si votre page n'a pas besoin De nombreuses opérations interactives js peuvent être effectuées de cette manière simple. Si vous aimez utiliser JQuery, vous devez l'écrire comme ceci

$(function(){
 $('#id').click(function(){
 alert('hello');
 })
});

Si vous utilisez Node.js. , c'est plus compliqué car Node.js doit être chargé. Un module HTTP s'écrit comme suit :

var http = require('http');
http.createServer(function(req,res){
 res.writeHead(200,{'Content-Type':'text/html'});
 res.write('<p>hello</p>');
}).listen(8080);

Encapsulez ensuite la méthode d'écriture dans un niveau plus profond. des opérations js, chaque petite fonction à elle seule ne peut pas la satisfaire, car elles existent dans un domaine commun, de nombreuses méthodes d'écriture dispersées peuvent facilement provoquer de nombreux facteurs de bogues et doivent être réglementées. Le créateur de js nous propose une fonction appelée fonction anonyme. Comme son nom l'indique, une fonction anonyme est une fonction sans nom réel. Elle a de nombreux formats ! function(){}(),(function(){})(),(function(){}()),new function(){},void function(){}();JQuery.js est un anonyme Pour l'encapsulation de fonctions, examinons d'abord les

 (function(){
 star.init = (function(name){
 var e = new Editor(name, Data.toolbarData);
 });
 })();

les plus couramment utilisés. Si vous développez des composants js, vous pouvez d'abord créer un objet et donner à cet objet des attributs. et méthodesAutoriser cet objet à fonctionner seul et à coopérer avec d'autres objets

var klm = klm || {};
 klm = (function(){
 //第一个写法
 klm.init = function(){
  alert('hello');
 }

 //第二个写法
  klm.browser = (function(ua){
  var b = {
  msie:/msie/.test(ua) && !/opera/.test(ua),
  opera:/opera/.test(ua),
  safari:/webkit/.test(ua) && !/chrome/.test(ua),
  firefox:/firefox/.test(ua),
  chrome:/chrome/.test(ua)
  };
  })(window.navigator.userAgent.toLowerCase());
  //将其定义方法以接口方式返回给外界引用
  return{
  init: klm.init,
  browser:klm.browser 
  }
 })();

La prochaine méthode d'écriture d'encapsulation js est ma préférée

var myOpinion = myOpinion || {};
 myOpinion.prototype={
 init:function(obj,i){
  alert('hello');
  },
  closeWindow:function(obj,d){
  obj.click(function(){
  d.hide();
  });
  }
 }
 $(function(){
  var my = myOpinion.prototype;
  my.init($(".z-sidebar li em"),$("#contact")); 
  $("#contact").add(my.closeWindow($(".z-sidebar li em"),$("#contact")));
 });

Cette première façon consiste à encapsuler chaque petite opération dans des attributs, init et closeWindow, via l'héritage du prototype. Elle peut ensuite être initialisée et chargée comme my.init(); elle peut également être liée à un événement d'opération tel que $(" #contact" ).add(my.closeWindow()); Ces packages sont formés en une seule fois.

Il existe également une encapsulation d'attribut unique définie

 WinShow.create = function(c,body){ 
  var _head = '<p class="+ c.heacss +"><span class="+ c.concss +">' + c.title + '</span></p>';
  this.container.innerHTML = _head;
  return this.container;
  this.container.onclick = function(e){
  alert('hello');
  }
 }

Ici, je crée un attribut create pour encapsuler un morceau de code HTML sous la forme d'une fonction anonyme et lier un événement click à ce code HTML.

Répertoriez les plusieurs formulaires d'encapsulation js ci-dessus, mais Xiaosheng les recherche toujours. Ces types peuvent réaliser la même opération, mais il existe quelques différences dans les méthodes d'écriture. Toute personne ayant une meilleure idée des performances peut commenter et communiquer avec. moi. .

Recommandations associées :

Deux façons d'utiliser JavaScript pour analyser les URL au format json

5 algorithmes JavaScript pour supprimer les éléments en double des tableaux

Explication détaillée de la limitation et du rebond anti-shake de la fonction javascript

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!