Compétences avancées Javascript compétences Sharing_Javascript

J'ai réglé la partie Ajax la dernière fois. Après avoir lu la partie sur les compétences avancées cette semaine, faisons le tri aussi.

1. Détection de type
Utilisez Object.prototype.toString.call(obj).
Parce que ni typeof ni instanceof ne peuvent déterminer avec précision le type de variable.

2. Constructeur sûr
Habituellement, lorsque nous définissons un constructeur, nous utilisons quelque chose comme

Copier le code Le code est le suivant :

fonction Personne(nom){
　this.name = nom;
}

Cependant , après sinon, allez à var person = new Person("cnblogs").
À la place, var person = Person("cnblogs"). Celui-ci pointera alors ailleurs, provoquant une contamination d'autres objets.
La solution est de déterminer
cette instance de Person
lors de la définition de this.property. Sinon, alors new Person(x,x,x);

<.>Copier le code Le code est le suivant :

function Person(name){
if(this instanceof Person){
this.name = nom;
      }else{
          return new Person(name);
      }
}

但是要注意一点，如果其余构造函数试图通过Person.call (this, x) Lorsque l'héritage est implémenté de cette manière.

Il convient de noter que le prototype de cette fonction est pointé vers Person avant l'instanciation.


3. Fonction de chargement paresseux
Lors de l'appel d'une fonction, il arrive souvent que la fonction doive juger la fonction du navigateur.
Par exemple

Copier le code Le code est le suivant :

function createSomething() {

if(supportH5){
                                                                                                                                                                                    La fonction doit toujours être prise en charge, il n'est donc pas nécessaire de la juger à chaque fois que le code est exécuté, car il suffit de la juger une fois.
Il peut donc être réécrit comme




Copiez le code

Le code est le suivant :

function createSomething(){ if(supportH5){ createSomething = function(){ //Fonction createSomething réécrite                                                            >
De cette façon, un jugement sera porté lors de son premier appel. Si cette fonction est réécrite ultérieurement, elle ne sera naturellement pas jugée.


4. Liaison de fonction
En js, la chose la plus déroutante est probablement à qui cela pointe.
En fait, après avoir étudié JS depuis si longtemps, je suis arrivé à une conclusion
Le this dans la fonction pointera vers l'objet qui appelle finalement la fonction. cela pointera vers cet objet.
Après avoir compris cela, la liaison des fonctions n'est plus un problème.
Les méthodes pour modifier le pointeur this dans une fonction sont call et apply, mais les deux méthodes exécuteront la fonction.
Si vous ne souhaitez pas exécuter la fonction, mais transmettez la fonction en tant que paramètre à une fonction et souhaitez modifier cela, utilisez la dernière liaison.


5. Timer
Bien que setTimeou, setInterval ou Ajax soient asynchrones, comme le multi-threading, js est mono-thread.
En fait, ces méthodes n’ajoutent pas de fil de discussion.
setTimeout(fn,300) signifie mettre fn dans la file d'attente d'exécution js après 300 millisecondes.
S'il n'y a aucune transaction à exécuter dans la file d'attente (c'est-à-dire que l'interpréteur js est inactif), elle sera exécutée immédiatement. Sinon, il attendra que les transactions de la file d'attente soient traitées avant d'exécuter cette fonction.
Ainsi, utiliser setTimeout ou setInterval n'est pas un contrôle précis du temps.
Une autre chose à noter est que l'utilisation de setTimeout pour simuler setInterval peut contrôler avec précision l'intervalle de temps d'exécution minimum.


6. Utilisez une minuterie pour corriger la méthode d'exécution du temps.
Si une méthode prend beaucoup de temps à s'exécuter et peut empêcher le navigateur de répondre pendant une courte période, vous pouvez utiliser une minuterie pour exécuter une partie de la méthode à une heure fixe. Cela évite que js soit occupé tout le temps (le navigateur ne répond plus) et vous donne du temps libre pour gérer d'autres tâches. Par exemple, s'il existe une boucle de tableau d'une longueur de 1 000, elle peut être exécutée 100 fois à chaque fois, laissant js libre d'effectuer d'autres opérations à intervalles réguliers.


7. Limitation des fonctions.
La limitation des fonctions est un bon moyen d'améliorer les performances. Dans certains cas, l'efficacité peut être améliorée plusieurs fois.
Par exemple, lors d'un déplacement ou de certaines opérations qui se produisent dans l'événement onresize.
Chaque fois que vous effectuez une opération, vous l'avez en fait effectuée plusieurs fois. Par exemple :

Copier le code Le code est le suivant :

var i = 0;
fenêtre.onresize = function(){
console.log(i );
}

Si vous essayez d'étirer le navigateur, vous constaterez que le i dans la console dépasse instantanément 100.
Modifiez l'écriture, par exemple :

Copiez le code Le code est le suivant :

var i = 0, j = 1;
window.onresize = function(){
if(j % ​​​​​​2 == 0){
console.log(i );
}
j ;
}

Créez une variable j pour qu'elle soit exécutée à chaque fois que j est un nombre pair, ce qui signifie que le nombre d'exécutions sera réduit de moitié.
Un tel traitement peut réduire le nombre d'exécutions de 50 %, mais l'utilisateur ne ressentira pas la différence.

Il existe également une fonction de limitation implémentée à l'aide d'une minuterie.
Le code de base est le suivant :

Copier le code Le code est le suivant :

function throttle(method, context){
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
},100);
}

Ici, la fonction d'exécution et l'environnement d'exécution de la fonction sont transmis (c'est-à-dire l'objet pointé par ceci dans la fonction d'exécution), puis la file d'attente d'actions est d'abord effacée, puis l'action est exécutée.
Ce formulaire permet un meilleur contrôle de la fréquence d'action.
En supposant qu'il s'agisse d'une action d'étirement du navigateur, tant que vous étirez suffisamment vite et que l'intervalle de temps entre chaque déclencheur est inférieur à 100 ms, seul le dernier résultat sera exécuté.


8. Les événements personnalisés
sont essentiellement en mode observateur. Le mode de base nécessite 3 fonctions,
une fonction consiste à lier l'événement, une fonction consiste à déclencher l'événement et une autre à supprimer la liaison.
Ce mode peut réduire considérablement le couplage de code.