这种使用回调和参数的方式正确吗？

Question

我目前正在学习callbacks，但我不确定下面的使用方式，尤其是涉及parameter- passing 回调showSuccessMessage 和showErrorMessage 到signupUser 完全optimal？当您可以 general versus concrete 方式 name 回调/参数时，我也感到困惑？

如果我的代码不正确，您能否优化我的代码并解释一下，好吗？

     // GLOBAL ARRAY for storing any DATA from the SERVER
     var ajDataFromServer = [];

      // Main ajax function using callback for posting data to the server
      function postAjax( sUrl , frmData, callback ){
                  var ajax = new XMLHttpRequest();
                  ajax.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        var ajDataFromServer = JSON.parse(this.responseText);
                        callback( ajDataFromServer, showSuccessMessage, showErrorMessage );
                    }
                }           
                  ajax.open( "POST", sUrl , true );
                  var jFrm = new FormData( frmData );
                  ajax.send( jFrm )                 
                }


/************************************************************************/
/************************************************************************/
/************************************************************************/


      // DO the SIGNUP, POST data to the SERVER with AJAX

      btnSignupForm.addEventListener("click", function (e) {
          postAjax( "api_signup_users.php", frmSignup, signupUser );
      });

      function signupUser( ajUserDataFromServer, showSuccessMessage, showErrorMessage  ) {

                  if ( ajUserDataFromServer.status == "ok" ) {

                      //console.log( "SIGNUP SUCCESFULL" );
                      pageLogin.style.display = "flex";
                      pageSignup.style.display = "none";
                      showSuccessMessage( "Account succesfully created - Signup please" );

                  } else {

                      //console.log( "SIGNUP FAIL - TRY AGAIN" );
                      pageViewProducts.style.display = "none";
                      pageLogin.style.display = "none";
                      pageSignup.style.display = "flex";
                      showErrorMessage( "Signup Failed - Try again" );
                  }
              }

      /************************************************************************/
      /************************************************************************/
      /************************************************************************/


      function showSuccessMessage ( sSuccessMessage ) {
        var alblMessages = document.getElementsByClassName( "lblMessage" );
          for ( var i = 0; i < alblMessages.length; i++ ) { 
            alblMessages[i].innerHTML = sSuccessMessage.fontcolor("#549839");
          }   
      }

      /************************************************************************/
      /************************************************************************/
      /************************************************************************/


      function showErrorMessage (sErrorMessage) {
        var alblMessages = document.getElementsByClassName( "lblMessage" );
          for ( var i = 0; i < alblMessages.length; i++ ) { 
            alblMessages[i].innerHTML = sErrorMessage.fontcolor("red");
          }
      }

Answer 1

除了您在不同范围内有具有相同名称 (showSuccessMessage/showErrorMessage) 的“不同”变量这一事实之外（这是完全有效的，并且在嵌套大量函数调用级别时可用于识别参数，但它可能会在学习时引入混乱），这看起来是正确的。

我在设计中看到的唯一缺点是postAjax 正在全局调用showSuccessMessage 和showErrorMessage，因此当您调用postAjax 时，您无法选择消息的显示方式。同样，如果postAjax 永远不会使用其他函数传递给signupUser，那么对这些函数进行全局调用是完全有效的，但这使得将这些作为参数传递给这个函数是无用的，因为signupUser 可以直接从全局变量。这种设计可能有用的单一情况：如果您有除 postAjax 之外的其他函数，可以使用不同的消息处理程序调用 signupUser。

所以这实际上取决于你打算如何使用这些函数，如果你有一个可以调用不同回调的函数，一个回调参数是合理的，或者它可以直接调用这些函数。

如果您希望在调用第一个函数（postAjax）时能够控制消息显示，您应该稍微更改一下代码。更通用的控制方式，可以允许更多的可能性，是使用匿名回调函数，传递给回调的唯一参数是数据：

  // Main ajax function using callback for posting data to the server
  function postAjax( sUrl , frmData, callback ){
      /*code*/
      callback( ajDataFromServer );
      /*code*/                
  }

  //using first set of message functions
  btnSignupForm.addEventListener("click", function (e) {
      postAjax( "api_signup_users.php", frmSignup, function(data){
          signupUser(data, showSuccessMessage, showErrorMessage);
      });
  });
  //using second set for another button
  btnSignupForm2.addEventListener("click", function (e) {
      postAjax( "api_signup_users.php", frmSignup, function(data){
          signupUser(data, showSuccessMessage2, showErrorMessage2);
      });
  });

  function signupUser( ajUserDataFromServer, showSuccessMessage, showErrorMessage  ) {
      /*code*/
  }

  function showSuccessMessage ( sSuccessMessage ) {
      /*code*/
  }
  function showErrorMessage (sErrorMessage) {
      /*code*/
  }

  function showSuccessMessage2 ( sSuccessMessage ) {
      /*code*/
  }
  function showErrorMessage2 (sErrorMessage) {
      /*code*/
  }

编辑以下 cmets： 在谈论默认值时，更多的是使用您的“全局”消息函数，但可以重新定义一些回调函数。同样，在您的情况下这不是必需的，但知道如何做仍然很好：

  // Main ajax function using callback for posting data to the server
  // it still sends only the data to its callback
  function postAjax( sUrl , frmData, callback ){
      /*code*/
      callback( ajDataFromServer );
      /*code*/                
  }

  //using default set of message functions:
  //just pass the function to use as you did in original code, no need for
  //an anonymous function. This function will be passed only the data (cf postAjax code),
  //and because 2 arguments are missing in its definition, it will use its default ones:
  btnSignupForm.addEventListener("click", function (e) {
      postAjax( "api_signup_users.php", frmSignup, signupUser);
  });

  //redefining the message callbacks:
  //the trick here is to use an anonymous function like in precedent code.
  //It is this anonymous function that will be called by postAjax. But now
  //we manually make the call to signupUser inside, so we can decide to use
  //another set of message callbacks by filling the 2nd and 3rd parameters:
  btnSignupForm2.addEventListener("click", function (e) {
      postAjax( "api_signup_users.php", frmSignup, function(data) {
          signupUser(data, showSuccessMessage2, showErrorMessage2);
      });
  });

  function signupUser( ajUserDataFromServer, showSuccessMessageParam, showErrorMessageParam ) {
      //fixed default values for the message functions:
      if(undefined === showSuccessMessageParam){
          showSuccessMessageParam = showSuccessMessage;
      }
      if(undefined === showErrorMessageParam){
          showErrorMessageParam = showErrorMessage;
      }
      /*code*/
      //rest of the code will use the param variables:
      if(isSuccess){
          showSuccessMessageParam('...');
      }else{
          showErrorMessageParam('...');
      }
  }

  function showSuccessMessage ( sSuccessMessage ) {
      /*code*/
  }
  function showErrorMessage (sErrorMessage) {
      /*code*/
  }

  function showSuccessMessage2 ( sSuccessMessage ) {
      /*code*/
  }
  function showErrorMessage2 (sErrorMessage) {
      /*code*/
  }

Answer 2

你在想@Kaddath 是不是这样，现在将 fCallback 作为消息的默认值，以后可以重用它们。我认为只有一个参数就足够了，因为是 if / else 情况。

// Main ajax function using callback for posting data from the server
  function postAjax( sUrl, callback) {
           /*code*/
           callback( ajDataFromServer, fCallback );
           /*code*/

  }

  // DO the SIGNUP, POST data to the SERVER with AJAX

  btnSignupForm.addEventListener("click", function (e) {
      postAjax( "api_signup_users.php", frmSignup, signupUser );
  });

  function signupUser( ajUserDataFromServer, fCallback ) {
                  /*code*/
                  showSuccessMessage( "Account succesfully created - Signup please" );

              } else {
                  /*code*/
                  showErrorMessage( "Signup Failed - Try again" );
              }
          }

  /************************************************************************/
  /************************************************************************/
  /************************************************************************/


  function showSuccessMessage ( sSuccessMessage ) {
       /*code*/  
  }

  /************************************************************************/
  /************************************************************************/
  /************************************************************************/


  function showErrorMessage (sErrorMessage) {
        /*code*/
      }
  }