introduire
Certains des modes que nous avons introduits dans cet article sont appelés mode d'initialisation et mode de performance, qui sont principalement utilisés pour l'initialisation et l'amélioration des performances. Certains modes ont déjà été mentionnés, donc voici juste un résumé.
Fonctions qui sont exécutées immédiatement
Dans le 4ème chapitre de cette série, "Fonction Expressions appelé Now", nous avons décrit en détail les fonctions similaires. Ici, nous allons simplement donner deux exemples simples à résumer.
La copie de code est la suivante:
// Après avoir déclaré la fonction, exécutez la fonction immédiatement
(fonction () {
console.log («Attention!»);
} ());
// Les fonctions déclarées de cette manière peuvent également être exécutées immédiatement
!fonction () {
console.log («Attention!»);
} ();
// La méthode suivante est également OK
~ function () {/ * code * /} ();
-Function () {/ * code * /} ();
+ function () {/ * code * /} ();
Initialisation d'objets immédiatement exécutée
Ce modèle signifie que lorsqu'un objet est déclaré (pas une fonction), l'une des méthodes de l'objet sera immédiatement exécutée pour effectuer des travaux d'initialisation. Habituellement, ce modèle peut être utilisé dans le code exécuté en même temps.
La copie de code est la suivante:
({
// Ici, vous pouvez définir les constantes et définir d'autres valeurs
Maxwidth: 600,
Maxheight: 400,
// Bien sûr, vous pouvez également définir des méthodes d'utilité
gimMaMax: function () {
Renvoie ce.maxwidth + "x" + this.maxHeight;
},
// initialisation
init: function () {
console.log (this.gimMax ());
// plus de code ...
}
}). init (); // Cela commence l'initialisation
Initialisation de la branche
L'initialisation de la branche fait référence à l'initialisation de différents codes en fonction des différentes conditions (scénarios), qui est l'affectation dite de l'énoncé conditionnel. Avant, lorsque nous effectuions un traitement d'événements, nous avons généralement utilisé des codes comme les suivants:
La copie de code est la suivante:
var utils = {
addListener: fonction (el, type, fn) {
if (typeof window.addeventListener === 'fonction') {
el.addeventListener (type, fn, false);
} else if (typeof document.attachevent! == 'Undefined') {
el.attachevent ('on' + type, fn);
} autre {
el ['on' + type] = fn;
}
},
RemoveListener: fonction (el, type, fn) {
}
};
Amélilons-le. Tout d'abord, nous devons définir deux interfaces, l'une pour ajouter la poignée de l'événement et l'autre pour supprimer la poignée de l'événement. Le code est le suivant:
La copie de code est la suivante:
var utils = {
addListener: null,
RemoveListener: null
};
Le code d'implémentation est le suivant:
La copie de code est la suivante:
if (typeof window.addeventListener === 'fonction') {
utils.AddListener = fonction (el, type, fn) {
el.addeventListener (type, fn, false);
};
} else if (typeof document.attachevent! == 'Undefined') {// ie
utils.AddListener = fonction (el, type, fn) {
el.attachevent ('on' + type, fn);
};
utils.removeListener = fonction (el, type, fn) {
el.detachevent ('on' + type, fn);
};
} else {// autres anciens navigateurs
utils.AddListener = fonction (el, type, fn) {
el ['on' + type] = fn;
};
utils.removeListener = fonction (el, type, fn) {
el ['on' + type] = null;
};
}
N'est-il pas très pratique à utiliser? Le code est beaucoup plus élégant.
Fonctions autodéclatant
Généralement, le code de fonction du même nom est réécrit à l'intérieur de la fonction, tel que:
La copie de code est la suivante:
var sareme = function () {
alert ("Boo!");
scarme = function () {
alert ("Double Boo!");
};
};
Ce type de code est très déroutant. Examinons d'abord les résultats de l'exécution de l'exemple:
La copie de code est la suivante:
// 1. Ajouter de nouveaux attributs
scarme.property = "correctement";
// 2. Screeme attribue une nouvelle valeur
var frank = scarme;
// 3. Appelez comme méthode
var spooky = {
boo: scarme
};
// Appel avec un nouveau nom de variable
blague(); // "Huer!"
blague(); // "Huer!"
Console.log (Prank.Property); // "correctement"
// appelle en utilisant la méthode
Spooky.boo (); // "Huer!"
Spooky.boo (); // "Huer!"
Console.log (Spooky.boo.Property); // "correctement"
Grâce au résultat de l'exécution, on peut constater que l'attribution de la fonction à une nouvelle variable (ou méthode interne), le code n'exécute pas le code de scarme surchargé, et l'exemple suivant est exactement le contraire:
La copie de code est la suivante:
// Utiliser des fonctions autodéclarées
scarme (); // double boo!
scarme (); // double boo!
Console.log (Sareme.Property); // indéfini
Lorsque vous utilisez ce modèle, vous devez être très prudent, sinon le résultat réel peut être différent du résultat que vous attendez. Bien sûr, vous pouvez également utiliser ce spécial pour faire des opérations spéciales.
Optimisation de la mémoire
Ce modèle utilise principalement les caractéristiques d'attribut de la fonction pour éviter un grand nombre de calculs répétés. Le formulaire de code habituel est le suivant:
La copie de code est la suivante:
var myfunc = fonction (param) {
if (! myfunc.cache [param]) {
var result = {};
// ... opération complexe ...
myfunc.cache [param] = résultat;
}
return myfunc.cache [param];
};
// Stockage de cache
myfunc.cache = {};
Cependant, il y a un problème avec le code ci-dessus. Si le paramètre passé est Tostring ou certaines méthodes courantes similaires à l'objet, le problème se produira. Pour le moment, vous devez utiliser la méthode légendaire HasownProperty, le code est le suivant:
La copie de code est la suivante:
var myfunc = fonction (param) {
if (! myfunc.cache.hasownproperty (param)) {
var result = {};
// ... opération complexe ...
myfunc.cache [param] = résultat;
}
return myfunc.cache [param];
};
// Stockage de cache
myfunc.cache = {};
Ou si vous transmettez plusieurs paramètres, vous pouvez utiliser la méthode Stringify de JSON pour produire une valeur cachekey pour le stockage. Le code est le suivant:
La copie de code est la suivante:
var myfunc = function () {
var cachekey = json.stringify (array.prototype.slice.call (arguments)),
résultat;
if (! myfunc.cache [cachekey]) {
résultat = {};
// ... opération complexe ...
myfunc.cache [cacheKey] = résultat;
}
return myfunc.cache [cacheKey];
};
// Stockage de cache
myfunc.cache = {};
Ou plusieurs paramètres, vous pouvez également utiliser la fonction d'arguments.Callee:
La copie de code est la suivante:
var myfunc = fonction (param) {
var f = arguments.callee,
résultat;
if (! f.cache [param]) {
résultat = {};
// ... opération complexe ...
f.cache [param] = résultat;
}
return f.cache [param];
};
// Stockage de cache
myfunc.cache = {};
Résumer
Pas besoin de résumer, regardez attentivement le code