Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Analyse von Javascript-Verschlüssen und Funktions-Currying (grafisches Tutorial)

Eine kurze Analyse von Javascript-Verschlüssen und Funktions-Currying (grafisches Tutorial)

亚连
亚连Original
2018-05-21 09:38:141031Durchsuche

In diesem Artikel werden hauptsächlich Javascript-Schließungen und Currying vorgestellt. Es ist leicht zu verstehen und Freunde in Not können sich darauf beziehen.

Schließungen und Currying sind beide häufig verwendete und relativ fortgeschrittene Techniken in JavaScript. Alle funktionalen Programmiersprachen unterstützen diese beiden Konzepte. Daher möchten wir die Funktionen in JavaScript vollständig nutzen - Tiefes Verständnis dieser beiden Konzepte. Tatsächlich ist der Abschluss eine unverzichtbare Grundlage für das Curry.

1. Das Konzept des Curryings

In der Informatik bedeutet Currying, eine Funktion, die mehrere Parameter akzeptiert, in eine Funktion umzuwandeln, die einen einzelnen Parameter akzeptiert (die ursprüngliche Funktion a Funktion, die das erste Argument akzeptiert) und eine neue Funktion zurückgibt, die die verbleibenden Argumente akzeptiert und ein Ergebnis zurückgibt. Diese Technik wurde von Christopher Strachey nach dem Logiker Haskell Curry benannt, obwohl sie von Moses Schönfinkel und Gottlob Frege erfunden wurde. Intuitiv besagt Currying: „Wenn Sie einige Parameter festlegen, erhalten Sie eine Funktion, die die verbleibenden Parameter akzeptiert.“ Wenn also für eine Funktion yx mit zwei Variablen y = 2 fest ist, erhalten wir eine Funktion 2x mit einer Variablen.

Beim Currying werden einige Parameter der Funktion im Voraus übergeben, um eine einfache Funktion zu erhalten. Die zuvor übergebenen Parameter werden jedoch im Abschluss gespeichert, sodass einige Besonderheiten auftreten. Zum Beispiel:

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

Die beiden Variablen inc/dec hier sind eigentlich zwei neue Funktionen, die über Klammern aufgerufen werden können, wie im folgenden Beispiel Verwendung in:

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

2. Anwendung des Currys

Entsprechend den Eigenschaften des Currys können wir schreiben Interessanterer Code. Bei der Front-End-Entwicklung stoßen wir beispielsweise häufig auf diese Situation. Wenn die Anforderung vom Server zurückgegeben wird, müssen wir einige bestimmte Seitenelemente aktualisieren. Die Verwendung einer teilweisen Aktualisierung ist sehr einfach, aber der Code kann leicht durcheinander geraten. Und wenn wir Currying verwenden, können wir unseren Code erheblich verschönern und die Wartung vereinfachen. Schauen wir uns ein Beispiel an:

//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);
}

Da der Rückgabewert von update(„newsPanel“) eine Funktion ist, ist der erforderliche Parameter eine Zeichenfolge. Daher werden beim Refresh-Ajax-Aufruf die vom Server zurückgegebenen Dateninformationen an den Callback übergeben, um das NewsPanel-Panel und das Picture Panel auf diese Weise zu aktualisieren Auf diese Weise wurden die Lesbarkeit und Wartbarkeit des Codes verbessert.

Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Welche Methoden gibt es für PHP, um lokale jsin Dateien zu lesen?

php Detaillierte Erläuterung der Schritte zum Lesen, Schreiben und Ändern von jsin Dateien

Über den Unterschied zwischen String() und .toString() in JS (in Kombination mit dem Code ist es auf einen Blick klar)

Das obige ist der detaillierte Inhalt vonEine kurze Analyse von Javascript-Verschlüssen und Funktions-Currying (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn