Maison  >  Article  >  interface Web  >  Une brève analyse des fermetures Javascript et du currying de fonctions (tutoriel graphique)

Une brève analyse des fermetures Javascript et du currying de fonctions (tutoriel graphique)

亚连
亚连original
2018-05-21 09:38:14997parcourir

Cet article présente principalement les fermetures Javascript et le curry. Il est facile à comprendre et les amis dans le besoin peuvent s'y référer.

Les fermetures et le curry sont des techniques à la fois fréquemment utilisées et relativement avancées en JavaScript. Tous les langages de programmation fonctionnels prennent en charge ces deux concepts. Par conséquent, nous souhaitons faire jouer pleinement les fonctionnalités de programmation en JavaScript. -une compréhension approfondie de ces deux concepts. En fait, la fermeture est une base indispensable au curry.

1. Le concept de curry

En informatique, le curry consiste à transformer une fonction qui accepte plusieurs paramètres en une fonction qui accepte un seul paramètre (la fonction originale A fonction qui prend le premier argument) et renvoie une nouvelle fonction qui accepte les arguments restants et renvoie un résultat. Cette technique a été nommée par Christopher Strachey en l'honneur du logicien Haskell Curry, bien qu'elle ait été inventée par Moses Schnfinkel et Gottlob Frege. Intuitivement, le currying indique que « si vous corrigez certains paramètres, vous obtiendrez une fonction qui accepte les paramètres restants ». Donc pour une fonction yx à deux variables, si y = 2 est fixe, on obtient une fonction 2x à une variable.

Le currying consiste à transmettre certains paramètres de la fonction à l'avance pour obtenir une fonction simple. Mais les paramètres transmis au préalable sont enregistrés dans la fermeture, il y aura donc des caractéristiques particulières. Par exemple :

var adder = function(num){
  return function(y){
     return num + y;
  }
}
var inc = adder(1);
var dec = adder(-1)

Les deux variables inc/dec ici sont en fait deux nouvelles fonctions, qui peuvent être appelées entre parenthèses, comme Usage dans l'exemple suivant :

//inc, dec现在是两个新的函数,作用是将传入的参数值(+/-)1
print(inc(99));//100
print(dec(101));//100
print(adder(100)(2));//102
print(adder(2)(100));//102

2. Application du curry

Selon le curry Avec ses caractéristiques, nous pouvons écrire du code plus intéressant.Par exemple, nous rencontrons souvent cette situation dans le développement front-end. Lorsque la requête revient du serveur, nous devons mettre à jour certains éléments spécifiques de la page, ce qui est le concept d'actualisation partielle. L'utilisation de l'actualisation partielle est très simple, mais le code peut facilement devenir un gâchis. Et si nous utilisons le curry, nous pouvons embellir considérablement notre code et le rendre plus facile à maintenir. Regardons un exemple :

//update会返回一个函数,这个函数可以设置id属性为item的web元素的内容
function update(item){
  return function(text){
     $("p#"+item).html(text);
  }
}
//Ajax请求,当成功是调用参数callback
function refresh(url, callback){
  var params = {
     type : "echo",
     data : ""
  };
  $.ajax({
     type:"post",
     url:url,
     cache:false,
     async:true,
     dataType:"json",
     data:params,
     //当异步请求成功时调用
     success: function(data, status){
        callback(data);
     },
     //当请求出现错误时调用
     error: function(err){
        alert("error : "+err);
     }
  });
}
refresh("action.do?target=news", update("newsPanel"));
refresh("action.do?target=articles", update("articlePanel"));
refresh("action.do?target=pictures", update("picturePanel"));
其中,update函数即为柯里化的一个实例,它会返回一个函数,即:
update("newsPanel") = function(text){
  $("p#newsPanel").html(text);
}

Puisque la valeur de retour de update("newsPanel") est une fonction, le paramètre requis est un caractère., donc dans l'appel Ajax d'actualisation, en cas de succès, les informations de données renvoyées par le serveur seront transmises au rappel, afin d'actualiser le panneau newsPanel. Les autres panneaux d'article articlePanel et le panneau d'image PicturePanel sont actualisés de cette manière. De cette manière, la lisibilité et la maintenabilité du code sont améliorées.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Quelles sont les méthodes permettant à php de lire les jslocals sur les fichiers

php Explication détaillée des étapes pour lire, écrire et modifier jssur les fichiers

À propos de la différence entre String() et .toString() dans JS (combiné avec le code, c'est clair en un coup d'oeil)

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn