Javascript：在嵌套函数中使用条件语句停止代码执行

我想用javascript验证一些值，但过程如下：

if ('email' === '') {
    return;
}

makeAjaxRequest();

当用户提交表单时，我触发一个事件

Javascript获取值并验证它们。如果正确，则继续第三个数字，如果不正确，则中止返回

发出ajax请求

以下是我的提交功能：

submitLoginForm: function (event) {
    event.preventDefault();

    // get the values
    var object = this._getFormValues();

    // make ajax request
    this.querySelector('#postLoginForm').body = object;
    this.querySelector('#postLoginForm').generateRequest();
},

submitLoginForm: function (event) {
  event.preventDefault();

  // get the values
  var object = this._getFormValues();

  if(this._validates(object)) {
    // make ajax request
    this.querySelector('#postLoginForm').body = object;
    this.querySelector('#postLoginForm').generateRequest();      
  } else {
    // moved this from validation 
    var elements = this.querySelectorAll('.form-group');
    for (var i = 0; i < elements.length; i++) {
      elements[i].className += ' has-error';
    };
  }
},

这是获取值的函数

_getFormValues: function () {
    var email = this.querySelector('#email').value;
    var password = this.querySelector('#password').value;
    var remember = this.querySelector('#remember').value;

    this._validate(email, password);

    return { 'email': email, 'password': password, 'remember': remember };
}

这是验证字段或返回值的函数

_validate: function (email, password) {                
    if (email === '' || password === '') {
        var elements = this.querySelectorAll('.form-group');

        for (var i = 0; i < elements.length; i++) {
            elements[i].className += ' has-error';
        };

        this.hasError = true;
        this.errorMessage = 'Email and Password are required fields.'

        return;
    }
},

但是，由于我有嵌套函数，我想知道如果字段未验证，如何完全中止该过程

---

类似于

exit（）

函数的东西会很好。

我认为改进设计是更好的方法。为什么您的_getFormValues会进行任何验证？如果您将这两个函数解耦，您的代码将更加清晰，并且您可以轻松地“提前返回”。我会
1。将从_getFromValues返回的内容保存到变量
2中。查询该对象的空值（'email=''）
3。然后，如果在validate中填写了适当的字段，则执行ajax调用。如果没有，请通知用户，不要验证或使用ajax

我认为改进设计是更好的方法。为什么您的_getFormValues会进行任何验证？如果您将这两个函数解耦，您的代码将更加清晰，并且您可以轻松地“提前返回”。我会
1。将从_getFromValues返回的内容保存到变量
2中。查询该对象的空值（'email=''）
3。然后，如果在validate中填写了适当的字段，则执行ajax调用。如果没有，请通知用户，不要验证或使用ajax

我想看看一些

承诺

实现

jQuery对象或实现。如果嵌套函数必须异步运行，那么它也非常有效

//quick example
submitLoginForm: function (event) {

    var data = _getFormValues();

    _submit(data).then(
        function () {
            //SUCCESS
            //update UI accordantly
        },
        function (error) {
            //FAIL
            console.log(error);
        }
    );
}

_submit: function (data) {
    var $q = new $.Deferred();

    //AT ANY POINT, run $q.resolve() if you've got a success;
    //OTHERWISE, run $q.reject() to trigger a failure.

    if (_validate() == false) {
        $q.reject("validation failed");       
    }

    makeAjax("/api/foo", function () {
        //ajax success
        $q.resolve(jsonFromServer); 
    })

    return deferredObj.promise();
}

---

函数

\u submit（）

将返回一个promise对象，该对象随后将运行成功或失败函数，具体取决于您是运行

resolve

还是

reject

调用。这对于使用多个嵌套函数的同步或异步非常有用。

我想看看一些

承诺的实现

jQuery对象或实现。如果嵌套函数必须异步运行，那么它也非常有效

//quick example
submitLoginForm: function (event) {

    var data = _getFormValues();

    _submit(data).then(
        function () {
            //SUCCESS
            //update UI accordantly
        },
        function (error) {
            //FAIL
            console.log(error);
        }
    );
}

_submit: function (data) {
    var $q = new $.Deferred();

    //AT ANY POINT, run $q.resolve() if you've got a success;
    //OTHERWISE, run $q.reject() to trigger a failure.

    if (_validate() == false) {
        $q.reject("validation failed");       
    }

    makeAjax("/api/foo", function () {
        //ajax success
        $q.resolve(jsonFromServer); 
    })

    return deferredObj.promise();
}

函数
\u submit（）
将返回一个promise对象，该对象随后将运行成功或失败函数，具体取决于您是运行
resolve
还是
reject
调用。这对于具有多个嵌套函数的sync或async非常有用。
更好的方法是将一些嵌套解耦。更喜欢返回bool来简化控制流。所以，只要移动一些代码，我就会这样做：

您的提交功能：

submitLoginForm: function (event) {
    event.preventDefault();

    // get the values
    var object = this._getFormValues();

    // make ajax request
    this.querySelector('#postLoginForm').body = object;
    this.querySelector('#postLoginForm').generateRequest();
},

submitLoginForm: function (event) {
  event.preventDefault();

  // get the values
  var object = this._getFormValues();

  if(this._validates(object)) {
    // make ajax request
    this.querySelector('#postLoginForm').body = object;
    this.querySelector('#postLoginForm').generateRequest();      
  } else {
    // moved this from validation 
    var elements = this.querySelectorAll('.form-group');
    for (var i = 0; i < elements.length; i++) {
      elements[i].className += ' has-error';
    };
  }
},

您的验证器：

_validate: function (values) {                
  var email = values.email
  var passw = values.password

  if (email === '' || password === '') {
    return false
  } else {
    return true
  }
},

我想我得到了一切，但这毕竟是一个起点。将每个函数与其他任务分离，这会使一切变得更加简单。
更好的方法是将一些嵌套分离。更喜欢返回bool来简化控制流。所以，只要移动一些代码，我就会这样做：

您的提交功能：

submitLoginForm: function (event) {
    event.preventDefault();

    // get the values
    var object = this._getFormValues();

    // make ajax request
    this.querySelector('#postLoginForm').body = object;
    this.querySelector('#postLoginForm').generateRequest();
},

submitLoginForm: function (event) {
  event.preventDefault();

  // get the values
  var object = this._getFormValues();

  if(this._validates(object)) {
    // make ajax request
    this.querySelector('#postLoginForm').body = object;
    this.querySelector('#postLoginForm').generateRequest();      
  } else {
    // moved this from validation 
    var elements = this.querySelectorAll('.form-group');
    for (var i = 0; i < elements.length; i++) {
      elements[i].className += ' has-error';
    };
  }
},

您的验证器：

_validate: function (values) {                
  var email = values.email
  var passw = values.password

  if (email === '' || password === '') {
    return false
  } else {
    return true
  }
},

我想我得到了一切，但这毕竟是一个起点。将每个功能与其他任务分离，这会使一切变得更容易。
你看过吗？你看过吗？你会说将功能分离通常是一个很好的方法吗？@LoveAndHappiness-当然，其他人也应该同意。理想情况下，每个函数都应该做一件事。事物不可避免地会嵌套起来，但如果每件事都只做一件事，那么就更容易推理和做出改变。你认为将功能解耦是一种普遍的好方法吗？@LoveAndHappiness——当然，其他人也应该同意。理想情况下，每个函数都应该做一件事。事情将不可避免地嵌套，但如果每件事都只做一件事，那么就更容易进行推理和更改。