introduire
Cet article présente principalement certaines techniques utilisées dans la fonction (partie 1). En utilisant des fonctionnalités de fonction, vous pouvez écrire beaucoup de code très intéressant. Cet article comprend principalement: Mode de rappel, objet de configuration, fonction de retour, programme de distribution et curry.
Fonction de rappel
Dans JavaScript, lorsqu'une fonction A est l'un des paramètres d'une autre fonction B, la fonction A est appelée fonction de rappel, c'est-à-dire que A peut être exécuté dans la période de fonction B (à la fois le début, l'intermédiaire et la fin).
Par exemple, il existe une fonction qui génère des nœuds
La copie de code est la suivante:
var complexComputation = function () {/ * Gire en interne et renvoie un nœud * /};
Il existe une déclaration de fonction FindNodes pour trouver tous les nœuds, puis exécuter le code via le rappel de rappel.
La copie de code est la suivante:
var findnodes = fonction (rappel) {
var nœuds = [];
var node = complexComputation ();
// Si la fonction de rappel est disponible, exécutez-la
if (typeof callback === "function") {
rappel (nœud);
}
nœuds.push (nœud);
NODES RETOURS;
};
En ce qui concerne la définition du rappel, nous pouvons le définir à l'avance pour l'utiliser:
La copie de code est la suivante:
// définir le rappel
var hide = fonction (node) {
node.style.display = "aucun";
};
// trouver des nœuds et masquer tous les nœuds
var HiddenNodes = findNodes (masquer);
Vous pouvez également utiliser des définitions anonymes directement lors de l'appel, comme suit:
La copie de code est la suivante:
// utilise des fonctions anonymes pour définir le rappel
var blockNodes = findNodes (fonction (nœud) {
node.style.display = 'bloc';
});
Les plus couramment utilisés sont probablement les appels de la méthode AJAX de JQuery. En définissant un rappel sur Done / Faild, nous pouvons davantage traiter lorsque l'appel AJAX réussit ou échoue. Le code est le suivant (ce code est basé sur JQuery version 1.8):
La copie de code est la suivante:
var menuId = $ ("ul.nav"). First (). Att ("id");
var demande = $ .ajax ({
url: "script.php",
Type: "Post",
Données: {id: menuID},
Type de données: "HTML"
});
// Traitement de rappel lorsque l'appel réussit
request.done (function (msg) {
$ ("# log"). html (msg);
});
// Traitement de rappel lorsque l'appel échoue
request.fail (function (jqxhr, textstatus) {
alert ("Demande a échoué:" + TextStatus);
});
Objets de configuration
Si le paramètre d'une fonction (ou méthode) n'a qu'un seul paramètre et que le paramètre est un objet littéral, nous appelons ce modèle le modèle d'objet de configuration. Par exemple, le code suivant:
La copie de code est la suivante:
var conf = {
Nom d'utilisateur: "Shichuan",
Premièrement: "Chuan",
Dernier: "shi"
};
AddPerson (conf);
Dans AddPerson, vous pouvez utiliser la valeur de Conf à volonté, qui est généralement utilisée pour les travaux d'initialisation. Par exemple, ajaxsetup dans jQuery est implémenté de cette manière:
La copie de code est la suivante:
// définir la valeur initiale à l'avance
$ .ajaxsetup ({
URL: "/ xmlhttp /",
Global: Faux,
Type: "Post"
});
// puis appelle à nouveau
$ .ajax ({data: mydata});
De plus, de nombreux plug-ins jQuery ont également cette forme de transmission de paramètres, mais ils ne peuvent pas non plus être transmis. Lorsqu'ils ne passent pas, la valeur par défaut sera utilisée.
Fonction de retour
Le retour d'une fonction fait référence à une nouvelle fonction créée de manière flexible sur la base de conditions spécifiques lorsque la valeur de retour d'une fonction est une autre fonction, ou une nouvelle fonction est créée de manière flexible en fonction de conditions spécifiques. L'exemple de code est le suivant:
La copie de code est la suivante:
var setup = function () {
console.log (1);
return function () {
console.log (2);
};
};
// appelle la fonction de configuration
var my = setup (); // Sortie 1
mon(); // Sortie 2
// ou vous pouvez également l'appeler directement
installation()()();
Ou vous pouvez utiliser la fonction de fermeture pour enregistrer un numéro de comptoir privé dans la fonction de configuration et augmenter le compteur par chaque appel. Le code est le suivant:
La copie de code est la suivante:
var setup = function () {
Var Count = 0;
return function () {
return ++ count;
};
};
// utilisation
var next = setup ();
suivant(); // Retour 1
suivant(); // Retour 2
suivant(); // Retour 3
En vigueur
L'application partielle ici est en fait de séparer les paramètres entrants. Parfois, une série d'opérations peut avoir un ou plusieurs paramètres toujours les mêmes. Ensuite, nous pouvons d'abord définir une fonction partielle, puis exécuter cette fonction (les différents paramètres sont passés pendant l'exécution).
Par exemple, le code est le suivant:
La copie de code est la suivante:
var PartialAny = (fonction (aps) {
// Cette fonction est le résultat de votre propre exécution de l'expression de la fonction et est attribuée à la variable Partialany
fonction func (fn) {
var argsorig = aps.call (arguments, 1);
return function () {
var args = [],
argSpartial = aps.Call (arguments),
i = 0;
// tous les ensembles de paramètres d'origine des variables,
// Si le paramètre est un espace réservé Partialany._, utilisez la valeur correspondant au paramètre de fonction suivante
// sinon, utilisez la valeur dans le paramètre d'origine
for (; i <argsorig.length; i ++) {
args [i] = argsorig [i] === func._
? argSpartial.shift ()
: argsorig [i];
}
// s'il y a des paramètres supplémentaires, ajoutez à la fin
return fn.Apply (this, args.concat (argSpartial));
};
}
// pour les paramètres d'espace réservé
func._ = {};
retourner func;
}) (Array.prototype.slice);
Comment l'utiliser est comme suit:
La copie de code est la suivante:
// définir les fonctions de traitement
fonction hex (r, g, b) {
return '#' + r + g + b;
}
// Définissez la fonction partielle, prenez le premier paramètre R de Hex comme la valeur du paramètre inchangé ff
var redmax = partialany (hex, 'ff', partialany._, partialany._);
// La méthode d'appel de la nouvelle fonction redmax est la suivante, et seuls 2 paramètres sont nécessaires:
console.log (redmax ('11 ',' 22 ')); // "# ff1122"
Si vous pensez que Partialany._ est trop long, vous pouvez utiliser __ à la place.
La copie de code est la suivante:
var __ = partialany._;
var greenmax = partialany (hex, __, 'ff');
Console.log (GreenMax ('33 ',' 44 '));
var bluemax = partialany (hex, __, __, 'ff');
console.log (bluemax ('55 ',' 66 '));
var magentamax = Partialany (hex, 'ff', __, 'ff');
console.log (magentamax ('77 '));
De cette façon, ce sera beaucoup plus simple.
Curry
Le curry est une caractéristique de la programmation fonctionnelle, convertissant le traitement de plusieurs paramètres en traitement des paramètres uniques, similaires aux appels de chaîne.
Donnons un exemple simple de fonction d'ajout:
La copie de code est la suivante:
fonction add (x, y) {
var oldx = x, oldy = y;
if (typeof oldy === "Undefined") {// partiel
return function (newy) {
Retour Oldx + Newy;
}
}
retour x + y;
}
De cette façon, il existe de nombreuses façons d'appeler, comme:
La copie de code est la suivante:
// test
type d'ajout (5); // "fonction"
ajouter (3) (4); // 7
// c'est également possible
var add2000 = add (2000);
add2000 (10); // 2010
Ensuite, définissons une fonction de curry plus générale:
La copie de code est la suivante:
// Le premier paramètre est la fonction à appliquer, et le deuxième paramètre est le nombre minimum de paramètres à passer
fonction curry (func, minargs) {
if (minargs == Undefined) {
minargs = 1;
}
fonction funcwithargsfrozen (Frozenargs) {
return function () {
// Traitement d'optimisation, s'il n'y a pas de paramètres lors de l'appel, renvoyez la fonction elle-même
var args = array.prototype.slice.call (arguments);
var newargs = Frozenargs.concat (args);
if (newargs.length> = minargs) {
Return func.Apply (this, Newargs);
} autre {
retourner funcwithargsfrozen (newargs);
}
};
}
retourner funcwithargsfrozen ([]);
}
De cette façon, nous pouvons définir notre comportement commercial à volonté, comme définir l'addition:
La copie de code est la suivante:
var plus = curry (function () {
Var Result = 0;
pour (var i = 0; i <arguments.length; ++ i) {
résultat + = arguments [i];
}
Résultat de retour;
}, 2);
Comment l'utiliser est réel et varié.
La copie de code est la suivante:
plus (3, 2) // appel normal
Plus (3) // Appliquer, renvoyez une fonction (la valeur de retour est une valeur de paramètre 3+)
plus (3) (2) // Compléter la demande (retour à 5)
plus () (3) () () (2) // Retour 5
plus (3, 2, 4, 5) // peut recevoir plusieurs paramètres
plus (3) (2, 3, 5) // De même
Ce qui suit est un exemple de soustraction
La copie de code est la suivante:
var moins = curry (fonction (x) {
Var Result = x;
pour (var i = 1; i <arguments.length; ++ i) {
Résultat - = arguments [i];
}
Résultat de retour;
}, 2);
Ou si vous souhaitez échanger l'ordre des paramètres, vous pouvez le définir comme ça
La copie de code est la suivante:
var flip = curry (fonction (func) {
return curry (fonction (a, b) {
retourner func (b, a);
}, 2);
});
Résumer
Les fonctions en JavaScript ont de nombreuses fonctions spéciales et peuvent utiliser les caractéristiques des paramètres de fermetures et d'arguments pour implémenter de nombreuses techniques différentes. Dans le prochain article, nous continuerons à introduire les techniques d'utilisation de la fonction d'initialisation.