Analysis of Javascript Closure and Function Curitization

Closure and Curitization are common and advanced techniques used by JavaScript. All functional programming languages support these two concepts. Therefore, if we want to make full use of the features of functional programming in JavaScript, we need to have a thorough understanding of these two concepts. Closure is in fact an indispensable basis for Curitization.

1. The concept of Curitization

In computer science, Curitization is the technique of transforming a function that accepts multiple parameters into a function that accepts a single 1 parameter (the first parameter of the original function) and returns a new function that accepts the remaining parameters and returns the result.This technology was named by Christopher Strachey by the logician Haskell Curry, although it was invented by Moses Schnfinkel and Gottlob Frege.Intuitively, Curitionization claims that if you fix some parameters, you will get a function that accepts the remaining parameters.So for function yx with two variables, if y = 2 is fixed, then function 2x with one variable is obtained.

Curitization is simply passing in some parameters of a function to get a simple function.However, the parameters passed in in in advance are saved in the closure, so there are some strange features.For example:

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

The inc/dec variables here are actually two new functions that can be called in parentheses, such as the usage in the following example:

//inc, dec Now there are two new functions for passing in parameter values (+/-)1
print(inc(99));//100
print(dec(101));//100
print(adder(100)(2));//102
print(adder(2)(100));//102

2. Application of Curitization

Depending on the nature of Curitization, we can write more interesting code, such as in front-end development, when requests are returned from the server, we need to update a specific page element, the concept of a partial refresh.It's easy to use a local refresh, but the code can easily be written in a mess.Using Curitization, however, can greatly beautify our code and make it easier to maintain.Let's take an example:

//update Will return 1 Function, which can be set id Attribute is item Of web The content of an element 
function update(item){
  return function(text){
     $("div#"+item).html(text);
  }
}
//Ajax Request, when success is the call parameter callback
function refresh(url, callback){
  var params = {
     type : "echo",
     data : ""
  };
  $.ajax({
     type:"post",
     url:url,
     cache:false,
     async:true,
     dataType:"json",
     data:params,
     // Called when an asynchronous request succeeds 
     success: function(data, status){
        callback(data);
     },
     // Called when an error occurs in the request 
     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"));
 Where, update The function is Curitized 1 Instance, it returns 1 Functions, that is: 
update("newsPanel") = function(text){
  $("div#newsPanel").html(text);
}

Since the return value of update ("newsPanel") is a function and the required parameter is a string, Ajax calls from refresh will pass callback the data information returned from the server side when success is called, thus refreshing the newsPanel panel. Other article panel articlePanel, picture panel picturePanel are refreshed in this way, which makes the code readable.Maintainability has been improved.