Question

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

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

     // 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，因此当您调用{{1}时，您无法选择显示消息的方式}}。同样，如果postAjax永远不会使用其他函数传递给postAjax，那么对这些函数进行全局调用是完全有效的，但这会使这些函数作为参数传递给此函数无用，如{{1}可以直接从全局变量中调用它们。此设计可能有用的单一案例：如果您有signupUser之外的其他函数可以使用不同的消息处理程序调用{{1}}。

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

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

postAjax

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

signupUser

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*/
      }
  }

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

2 个答案: